CommonJS (CJS)์ญ์ฌ์ ๋ฐฐ๊ฒฝ: CommonJS๋ Node.js ํ๊ฒฝ์์ ๋ชจ๋์ ๊ด๋ฆฌํ๊ธฐ ์ํด ๋์
๋ ๋ชจ๋ ์์คํ
์
๋๋ค.๋ชจ๋ ์ฌ์ฉ ๋ฐฉ๋ฒ:๋ชจ๋ ๊ฐ์ ธ์ค๊ธฐ: require() ํจ์๋ฅผ ์ฌ์ฉํด ๋ค๋ฅธ ๋ชจ๋์ ๊ฐ์ ธ์ต๋๋ค.const math = require('./math');๋ชจ๋ ๋ด๋ณด๋ด๊ธฐ: module.exports๋ฅผ ์ฌ์ฉํด ๋ชจ๋์ ๊ธฐ๋ฅ์ ๋ด๋ณด๋
๋๋ค.module.exports = { add: (a, b) => a + b, subtract: (a, b) => a - b,};๋๊ธฐ์ ๋ก๋ฉ: CommonJS๋ ๋๊ธฐ์ ์ผ๋ก ๋ชจ๋์ ๋ก๋ฉํฉ๋๋ค. ์ฆ, ๋ชจ๋์ ๊ฐ์ ธ์ค๋ ์ฝ๋๊ฐ ์คํ๋๋ฉด ํด๋น ๋ชจ๋์ ์ฆ์ ๋ถ๋ฌ์ค๊ณ ์คํํฉ๋๋ค.Node.js ํ๊ฒฝ์์ ๋๋ฆฌ ์ฌ์ฉ๋จ: Node.js๋ ๊ธฐ๋ณธ์ ์ผ๋ก CommonJS๋ฅผ ์ง์ํฉ๋๋ค.ECMA..
๋ถ๋ฅ ์ ์ฒด๋ณด๊ธฐ
๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ง๋ ๊ณ๊ธฐNext App Router๋ฅผ ์ด์ฉํด์ ์ฒ์ ํํ๋ก์ ํธ๋ฅผ ์งํํ๋๋ฐ ๊ธฐ์ ์คํ์ ๊ดํด์ ํ์๋ค๊ณผ ๋
ผ์๋ฅผ ํ๋ ์ค ์ด์ React๋ก๋ง ์์
์ ํ์ ๋์ ๊ฐ์ด Axios๋ฅผ ํ์ฉํ๋ ค ํ๋๋ฐ Next App Router์์ ์ ์ฉํ๋ ค๊ณ ๋ณด๋ ๋ฌธ์ ์ ์ด ์์๋ค. ๋ฐ๋ก Next App Router๋ ์์ฒด์ ์ผ๋ก fetch๋ฅผ ํ์ฅ์์ ์ฐ๊ณ ์๋๋ฐ ๊ทธ ์์๋ ๋ค์๊ณผ ๊ฐ๋ค.const data = await fetch('~~', { next: {revalidate: 300}})์์ ๊ฐ์ Next ์บ์ฑ์๋ฆฌ๊ฐ ๊ถ๊ธํ๋ค๋ฉด ์ด์ ์ ์ด ๊ธ์ธ ์บ์ฑ์๋ฆฌ ๋ธ๋ก๊ทธ๋ฅผ ์ฐธ์กฐํ๋ฉด ์ข๋ค.์ผ๋จ ๊ทธ๋๋ ํ๋ก์ ํธ ๊ตฌํ์ด ์ฐ์ ์ด์๊ธฐ์ ํ์ ๋ชจ๋ fetch๋ฅผ ์ฐ๊ธฐ๋ก ํ๋ค.ํ๋ก์ ํธ๋ฅผ ๊ตฌํํ๋ฉด์ fetch๋ฅผ ์ฌ์ฉํ๋ค๋ณด๋ ๋ค์๊ณผ ๊ฐ์ ๋ถํธํจ..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbcVFqG%2FbtsI2ENLr4a%2FkHSx2k5aBLiQLZAZ0sj7vK%2Fimg.png)
์๊ตฌ ์ฌํญ๊ฐ์ธ ์ค์ ํ์ด์ง๋ฅผ ๋ด๋นํ๊ณ ์๋๋ฐ ๋ชจ๋ฐ์ผ ์ํฉ์์ ๋ชจ๋ฌ์ Drawerํ์์ผ๋ก ๋ฐ๊พธ๋๊ฒ ์ข์ ๊ฒ ๊ฐ๋ค๊ณ ํ์๋ค๊ณผ ํ์๋ฅผ ํตํด ๊ฒฐ๋ก ์ด ๋ฌ์๋ค. ํ์ฌ์ํฉ์ ๋ชจ๋ฐ์ผ ๋ชจ๋ฌ์ ๋ค์๊ณผ ๊ฐ์๋ค ์์ ์ฌ์ง๊ณผ ๊ฐ์ ๋ชจ๋ฌ์ด ์ฌ๋ฌ๊ฐ ์๋๋ฐ ๊ธฐ์กด์๋ ๋ง๊ฐ๊ธฐ๊ฐ์ด ์์ด์ ๊ตฌํํ๋๋ฐ๋ง ์ง์คํ๋ ๋๋จธ์ง ๊ฐ ๋ชจ๋ฌ๋ง๋ค ๊ฐ๊ฐ์ ์ปดํฌ๋ํธ๊ฐ ์์๋ค ์ด๋ฌํ ์ํฉ์ด ๋ฐ์ํ๋๊น ๋ฌธ์ ์ ์ด ๋ชจ๋ฐ์ผ ํ๋ฉด์์ Drawer ๋ชจ๋ฌ์ ๊ตฌํํ๋ ค๊ณ ํ๋ฉด ๊ฐ๊ฐ์ ์ปดํฌ๋ํธ๋ณ๋ก Drawer ํ์์ ๋ชจ๋ฌ์ ๊ตฌํํด์ผํ๋ค.์ด๋ฅผ ํด๊ฒฐํ๊ธฐ์ํด ์ฌ๋ฌ ๋ ํผ๋ฐ์ค๋ฅผ ์ฐพ๋์ค ๋ํ์ ์ธ ํจํด 2๊ฐ์ง๋ฅผ ์ฐพ์๋ค ๋ฐ๋ก ์ปดํ์ด๋ํจํด๊ณผ render props ํจํด์ด๋ค. ๋จผ์ ๊ฐ๋จํ ์ค๋ช
์ ์๊ธฐํ๊ณ ํด๊ฒฐ๋ฐฉ๋ฒ์ ์์๋ณด๋๋ก ํ์.Render Prop ํจํดRender Prop ํจํด์ด๋๋ ๋ ํ๋กญ..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlYXqz%2FbtsIZrAFHlF%2FxEU6P7oQ5OHOUOwtwWzpUk%2Fimg.png)
S3๋ฅผ ํ๋ก ํธ์์ ๊ด๋ฆฌํ๋ ์ด์ nextjs๋ฅผ ํ์ฉํด์ S3๋ฒํท์๋ค๊ฐ ์ด๋ฏธ์ง๋ฅผ ํ๋ก ํธ์์ ์ง์ ๊ด๋ฆฌํ๊ฒ ๋์๋ค.S3๋ฅผ ํ๋ก ํธ์์ ๊ด๋ฆฌํ๋ฉด ์ข๋ ๋น ๋ฅธ ์๋ต์ ๋ง๋ค ์ ์๋ค. ๊ทธ ์ด์ ๋ ๋ฌด์์ผ๊น ์๊ฐํด๋ณด์๋ฉด ๋ค์๊ณผ ๊ฐ๋ค.- ํด๋ผ์ด์ธํธ์์ ๋ฐฑ์๋๋ก ์ด๋ฏธ์ง ๋ฐ์ดํฐ๋ฅผ ๋์ ธ์ฃผ๊ณ ์๋ฒ์์ ๊ทธ๊ฑธ ๋ฐ๊ณ aws์ ๋๊ฒจ์ฃผ๊ณ ํด๋ผ์ด์ธํธํํ
๋งํฌ๋ฅผ ๋๊ฒจ์ค์ผํ๋ค. ์๋ฒ๊ฐ ๋ฐ์๋ฉด ์ด๋ฏธ์ง๋ฅผ ๊ฐ๊ณตํด์ ์ฃผ๋ ์๊ฐ์ด ๊ธธ๋ค๋ ๋ป์ด๋ค. ์๋ฒ๊ฐ ๋ฐ์๋ ๋ ๋ฐ์ ํ๋ก ํธ์์ ๋์ aws์ ์
๋ก๋๋ฅผ ํด์ฃผ๋ ๊ฒ์ด๋ค.- ํด๋ผ์ด์ธํธ์์ Img์
๋ก๋๋ฅผ S3๋ฒํท์ ํด์ฃผ๊ณ s3 url์ ์๋ฒํํ
๋ณด๋ด์ผํ๋๋ฐ ์ด๋ react-query๋ฅผ ์ฌ์ฉํด์ optimistic UI๋ฅผ ์ ์ฉํด์ฃผ๋ฉด ์ข ๋ ๋น ๋ฅด๊ฒ ์ ์ฉ๋ ์ด๋ฏธ์ง๋ฅผ ๋ณผ ์ ์๋ค.๋จ์ ์ผ๋ก๋ ๋ธ๋ผ์ฐ์ ์์ ์ฐ๋ฆฌ์ ์ฝ๋๋ฅผ..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcBwITY%2FbtsIUkoKJ4Q%2F9b9Wv4I0hxB9jmiAnkNELk%2Fimg.png)
๋ชฉํ์ดํธ๋์
ํ๋ก์ ํธ๋ ์ค ์๋น์ค๋ฅผ ์ผ๋ํ์ฌ ์งํํ ํ๋ก์ ํธ์๊ธฐ๋๋ฌธ์, ๊ทธ์ ๋ง์ถ์ด ์ ์ง๋ณด์๋ฅผ ์ํ ์ค๊ณ๊ฐ ํ์ํ์ต๋๋ค. ๋, ์ดํ ์๋น์ค์ ํ์ฅ๋ ๊ณ ๋ คํด์ผ ํ์ต๋๋ค.์ด๋ฅผ ๋ชจ๋ ๊ณ ๋ คํ์ฌ ์๊ตฌ ์กฐ๊ฑด์ ์๊ฐํด๋ณด์๋ฉด์ ์ง๋ณด์๊ฐ ์ฉ์ดํด์ผํ๋ค. (์ค๋ณต๋๋ ๋ก์ง์ ์ต๋ํ ํผํด์ผํ๋ค)์ถํ ์๋น์ค๋ฅผ ํ์ฅํ ์ ์์ด์ผํ๋ค.์ธ์์ด ๋ณ๊ฒฝ๋๊ฑฐ๋ ํ๋ ์ฌ๋ฌ๊ฐ์ง ์ฌํญ์ ๋๋นํด ๋ฌธ์ํ๋ฅผ ์ฒ ์ ํ ์งํํด์ผํ๋ค.ํ์๋ค๊ณผ ์ดํธ๋์
์๋น์ค๋ฅผ ์ค๋นํ๋ฉด์ ๋ด๋ฆฐ ๊ฒฐ๋ก ์ ๋ค์๊ณผ ๊ฐ์์ต๋๋ค.๋์์ธ ์์คํ
์ ํตํด ๊ณตํต ์ปดํฌ๋ํธ๋ฅผ ๊ด๋ฆฌํ์ฌ ์ค๋ณต๋๋ ์ปดํฌ๋ํธ๋ฅผ ์ต๋ํ ํผํ๋ค.๋ชจ๋
ธ๋ ํฌ ๊ตฌ์กฐ๋ฅผ ๋์
ํ์ฌ ์ถํ ์๋น์ค๋ฅผ ํ์ฅํ ์ ์๋๋ก ํ๋ค.๋์์ธ ์์คํ
์ Storybook์ ๋์
ํ์ฌ ์ปดํฌ๋ํธ์ ๋ํด์ ๋ฌธ์ํ๋ฅผ ์งํํ๊ณ , ๋
ธ์
์ ํตํด ๊ฐ๋ฐ ๊ธฐ๋ก์ ๋จ๊ธด๋ค.๋ชจ๋
ธ๋ ..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F7Jedl%2FbtsIUBXXt1S%2FLMrbKBMsESczOGaZvXmkI1%2Fimg.png)
๋ชจ๋
ธ๋ ํฌ ๊ตฌ์กฐ์์ ์ธํ
๋ ESLint ์ค๋ฅ๊ฐ ํ๋ฉด์ ๋ณด์ด์ง ์๋ ๋ฌธ์ ํ์ฌ ์งํ์ค์ธ ํ๋ก์ ํธ์์๋ ๋ชจ๋
ธ๋ ํฌ ๊ตฌ์กฐ๋ฅผ ์ฑํํ์ฌ ๊ฐ๋ฐ์ ์ด์ด๋๊ฐ๊ณ ์๋๋ฐ, ์ด์ํ๊ฒ ESlint ์ค๋ฅ๊ฐ ๋ณด์ด์ง ์์์ต๋๋ค.๊ทผ๋ฐ ๋ ๋ค ์๋ณด์ด๋ ๊ฒ๋ ์๋๊ณ , ๋ช๊ฐ๋ ๋ณด์ด๊ณ ๋ช๊ฐ๋ ๋ณด์ด์ง ์๋ ๋ฌธ์ ๋ ๋ฐ์ํ๊ตฌ์.๋ ํ๋ฉด์๋ ๋ค ์์กํ์ง๋ง eslint ๋ช
๋ น์ด๋ฅผ ํตํด ํ์ธํ๋ฉด ๋ณด์ด์ง ์๋ ์ค๋ฅ๊ฐ ๋ค ๋ฐ๊ฒฌ๋์์ต๋๋ค.์ด ๋ถ๋ถ์์ ์ ๋ eslint ๊ธฐ๋ฅ์ ๋ฌธ์ ๋ผ๊ธฐ๋ณด๋จ IDE๋ฅผ ์์ฌํ๊ธฐ ์์ํ์ต๋๋ค.๊ทผ๋ฐ ๋ณดํต IDE๋ฅผ ์์ฌํ๊ฒ๋๋ฉด '๋ด IDE ์ค์ ์ ์๋ชป'์ผ๋ก ์ดํดํ์ง, ๋ค๋ฅธ ์ฌ๋๋ค๊น์ง ๊ทธ๋ด๊ฑฐ๋ผ๊ณ ๋ ์๊ฐํ์ง ์์์์.์ ๋ฅผ ๋ ํผ๋์ค๋ฝ๊ฒ ๋ง๋ค์๋ ๊ฑด, ๋ค๋ฅธ ํ์๋ค๋ ESlint ์ค๋ฅ๊ฐ ๋ณด์ด์ง ์์์ต๋๋ค. ๋ชจ๋ ๊ฐ์ ์ฆ์์ด์๋ค๋ ๊ฒ์ด์ฃ .๊ทธ๋ฅ ๋ฌด์ํ..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdF2jgo%2FbtsItDBa1Tu%2F04VKkolkPauFgVV3S8fnUk%2Fimg.png)
๊ตฌํ ๋ชฉํ์ ํฌ๋ ์ค์ ๋ก ์๋น์ค๋ฅผ ์ด์ํ๋ ๊ฒ์ด ๋ชฉํ์๊ธฐ ๋๋ฌธ์ ์ ์ ์ธ์ฆ ๊ด๋ จ ๋ก์ง๋ค์์๋ ๋ณด์์ด ๋งค์ฐ ์ค์ํ๊ณ , ๊ทธ์ ๋ฐ๋ผ ์๊ตฌ์ฌํญ์ ๋ค์๊ณผ ๊ฐ์์ต๋๋ค์๊ตฌ์ฌํญ์ธ์ฆ ๊ด๋ จ ๋ก์ง์ ํด๋ผ์ด์ธํธ์์ ์ฒ๋ฆฌํ์ง ์์ ๊ฒํด๋ผ์ด์ธํธ์์ ์คํฌ๋ฆฝํธ๋ก ์ ๊ทผํ ์ ์๋ ๊ณณ์ ๊ฐ์ธ์ ๋ณด๋ฅผ ๋จ๊ธฐ์ง ์์ ๊ฒ ex) ๋ก์ปฌ์คํ ๋ฆฌ์ง, ์ธ์
์คํ ๋ฆฌ์ง, ์ฟผ๋ฆฌ ํ๋ผ๋ฏธํฐ, ์ฟ ํค ๋ฑ๋ก๊ทธ์ธ ํ ์๋ก๊ณ ์นจ์ ํด๋ ์ผ์ ์๊ฐ๋์์ ๋ก๊ทธ์ธ ์ํ๊ฐ ํ๋ฆฌ์ง ์์ ๊ฒ๊ตฌ๊ธ์์ ์ง์ํ๋ OAuth ํ๋กํ ์ฝ์ ์ฌ์ฉํ ๊ฒ ๋ํ Next.js ๋ฅผ ์ฐจ์ฉํ๊ธฐ ๋๋ฌธ์ ์๋ฒ ์ปดํฌ๋ํธ์์๋ ๋์์ด ๊ฐ๋ฅํ์ด์ผ ํ์ต๋๋ค ์ ๋ธ๋ผ์ฐ์ ์ ๊ฐ์ธ์ ๋ณด๋ฅผ ์ ์ฅํ๋ฉด ์๋ ๊น?Redux ๋๋ Zustand ๊ฐ์ ์ ์ญ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์๋ ์ ์ญ ์ํ์ ์ ์ง๋ฅผ ์ํด ๋ฏธ๋ค์จ์ด์ ํํ๋ก persist ๋ฅผ..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcBrmSA%2FbtsItHQX6XM%2FrB9RTBkNpR3USWgeQkb2qk%2Fimg.png)
๐ค Impl ? ๋ณ๋์ฌํญ์ ์ฝ๊ฒ ์ ์ฉํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ์ธํฐํ์ด์ค/๊ตฌํ์ฒด ๋ฐฉ์์์ ์์ฃผ ์ฌ์ฉ๋๋ ๊ตฌํ์ฒด ์ด๋ฆ์ด๋ค.Service๋ฅผ ์ธํฐํ์ด์ค๋ก ๊ตฌํํ๊ณ , ํด๋น Service์ ์ค์ ๊ตฌํ์ฒด๋ฅผ `ServiceImpl`๋ผ๋ ๋ช
์นญ์ผ๋ก ์ฃผ๋ก ์ฌ์ฉํ๋ค.์ค์ ๋ก ์ ์ฌ์ง์ฒ๋ผ, ๋๋ ํ๋ก์ ํธ ๋๋ถ๋ถ์ Service๋ฅผ ์์ ๊ฐ์ด ๊ตฌํํ๊ณ ์์๋ค. ๐ฏ Impl๋ฅผ ์ฌ์ฉํ๋ ์ด์ ์คํ๋ง์ ์ฒ์ ๋ฐฐ์ธ๋๋ถํฐ Service๋จ์ ๋ฏธ๋์ ๋ฐ์ํ ํ์ฅ์ ์ํด ์์ฑํ๋ค๊ณ ๋ฐฐ์ ๊ณ , ์ค์ ๋ก DB๋ก ๋ณ๊ฒฝํ๊ฑฐ๋ ํน์ ์กฐ๊ฑด์ ๋ฐ๋ผ ๊ฐ๊ธฐ ๋ค๋ฅธ ์๋น์ค๋ฅผ ์ ๊ณตํด์ผ ํ๋ ๊ฒฝ์ฐ์์ ์ ์ฉํ๊ฒ ์ฌ์ฉ๋๋ ๊ฒ์ ๋ณด์๋ค. ๊ทธ๋์ ํ๋ก์ ํธ ๊ธฐํ์์ ํ์ฅ์ ๊ดํ์ฌ ์ ํด์ง ๊ฒ์ด ์์์ง๋ง, ๋ฏธ๋์ ์์ ํ์ฅ์ ์ํด ๋ฏธ๋ฆฌ ์ธํฐํ์ด์ค/๊ตฌํ์ฒด ๋ฐฉ์์ผ๋ก ๊ตฌํํ๋ค. ๐จ Impl..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcgsCO3%2FbtsIsyOguwM%2F4bJ0evJ0mD9dJyhaK1HKa1%2Fimg.png)
โ๏ธ Entity์ ๊ธฐ๋ก ๋จ๊ธฐ๊ธฐํ์
์์๋ ์ด์์์ ๋ฐ์ํ ์ด์๋ค์ ์ถ์ ํ ๋ ์ฌ์ฉํ๊ธฐ ์ํด Entity๋ง๋ค `์์ฑ์๊ฐ`,`๋ณ๊ฒฝ์๊ฐ`๋ฑ์ ๋จ๊ธด๋ค๊ณ ํ๋ค.์ด๋ฒ ํ๋ก์ ํธ์์๋ User Entity์ ์์ฑ์๊ฐ์ธ `createdAt`, ๋ณ๊ฒฝ์๊ฐ์ธ `modifiedAt`์ด ์กด์ฌํ๋ค.Entity ๊ธฐ๋ก ๋จ๊ธฐ๊ธฐ@Entity@Getterpublic class UserDetail{ @Column(name = "created_at") private LocalDateTime createdAt; @Column(name = "modified_at") private LocalDateTime modifiedAt; ...}๐ ์๊ฐ ์์ฑ ๋ฐ ๊ฐฑ์ ํ๋ ๋ฐฉ๋ฒ1. ์ง์ ๊ฐ ๋ฃ์ด์ฃผ๊ธฐ ( ๋น์ถ์ฒ ๐
โ๏ธ )// 1. ..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbEdhVg%2FbtsIt2N06rG%2FukpxOeEfQmhwmremeY8l00%2Fimg.png)
@Entity@Table(name = "users")public class User implements UserDetails { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(name = "email", length = 100) private String email; ...} ์คํ๋ง์ ์ฒ์ ๊ณต๋ถํ ์ดํ๋ก ์ด๋ค ํ
์ด๋ธ์ ๋ง๋ค๋ ๊ฐ์ PK์ ํญ์ Auto Increament๋ฅผ ์ฌ์ฉํ๋ค.๊ทธ๋ฌ๋ ์ค, ํผ๋๋ฐฑ์ผ๋ก ๋ค์๊ณผ ๊ฐ์ด ๋ฐ์๋ค."User ํ
์ด๋ธ์ Auto Increament๋ณด๋ค๋ Email์ PK๋ก ํ๋๊ฒ ๋ ์ข์๋ณด์ฌ์."์ด์ ๊ฐ ๊ถ๊ธํ์ง๋ง, ๊ทธ์ ์ "์ ๋๋ Auto In..