๋ชฉํ
์ดํธ๋์ ํ๋ก์ ํธ๋ ์ค ์๋น์ค๋ฅผ ์ผ๋ํ์ฌ ์งํํ ํ๋ก์ ํธ์๊ธฐ๋๋ฌธ์, ๊ทธ์ ๋ง์ถ์ด ์ ์ง๋ณด์๋ฅผ ์ํ ์ค๊ณ๊ฐ ํ์ํ์ต๋๋ค. ๋, ์ดํ ์๋น์ค์ ํ์ฅ๋ ๊ณ ๋ คํด์ผ ํ์ต๋๋ค.
์ด๋ฅผ ๋ชจ๋ ๊ณ ๋ คํ์ฌ ์๊ตฌ ์กฐ๊ฑด์ ์๊ฐํด๋ณด์๋ฉด
- ์ ์ง๋ณด์๊ฐ ์ฉ์ดํด์ผํ๋ค. (์ค๋ณต๋๋ ๋ก์ง์ ์ต๋ํ ํผํด์ผํ๋ค)
- ์ถํ ์๋น์ค๋ฅผ ํ์ฅํ ์ ์์ด์ผํ๋ค.
- ์ธ์์ด ๋ณ๊ฒฝ๋๊ฑฐ๋ ํ๋ ์ฌ๋ฌ๊ฐ์ง ์ฌํญ์ ๋๋นํด ๋ฌธ์ํ๋ฅผ ์ฒ ์ ํ ์งํํด์ผํ๋ค.
ํ์๋ค๊ณผ ์ดํธ๋์ ์๋น์ค๋ฅผ ์ค๋นํ๋ฉด์ ๋ด๋ฆฐ ๊ฒฐ๋ก ์ ๋ค์๊ณผ ๊ฐ์์ต๋๋ค.
- ๋์์ธ ์์คํ ์ ํตํด ๊ณตํต ์ปดํฌ๋ํธ๋ฅผ ๊ด๋ฆฌํ์ฌ ์ค๋ณต๋๋ ์ปดํฌ๋ํธ๋ฅผ ์ต๋ํ ํผํ๋ค.
- ๋ชจ๋ ธ๋ ํฌ ๊ตฌ์กฐ๋ฅผ ๋์ ํ์ฌ ์ถํ ์๋น์ค๋ฅผ ํ์ฅํ ์ ์๋๋ก ํ๋ค.
- ๋์์ธ ์์คํ ์ Storybook์ ๋์ ํ์ฌ ์ปดํฌ๋ํธ์ ๋ํด์ ๋ฌธ์ํ๋ฅผ ์งํํ๊ณ , ๋ ธ์ ์ ํตํด ๊ฐ๋ฐ ๊ธฐ๋ก์ ๋จ๊ธด๋ค.
๋ชจ๋ ธ๋ ํฌ
์ฐ์ , ๋ชจ๋ ธ๋ ํฌ๋ฅผ ์ ์ฌ์ฉํ๋๊ฐ? ์ ๋ํด์๋ถํฐ ์์๋ณด๊ฒ ์ต๋๋ค.
๋ชจ๋ ธ๋ ํฌ๋, ํ๋์ ์ ์ฅ์๋ฅผ ์๋ฏธํ๋ ‘Monolithic Repository’์ ์ค์๋ง๋ก, ๋ง์ ํ๋ก์ ํธ๋ฅผ ๋จ์ผ ์ ์ฅ์์์ ๊ด๋ฆฌํ๋ ๋ฐฉ์์ ๋งํฉ๋๋ค.
๋จ์ผ ์ ์ฅ์์์ ์ฌ๋ฌ ํ๋ก์ ํธ๋ฅผ ๊ด๋ฆฌํจ์ผ๋ก์จ ์ฌ๋ฌ๊ฐ์ง ์ด์ ์ด ์๊ธฐ๋๋ฐ ์ด๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ํ๋ก์ ํธ๋ฅผ ์์ฑํ ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ธํ ํด์ผ ํ๋ ์ผ๋ค์ด ์ค์ด๋ ๋ค.
- ํจํค์ง์ ์ค๋ณต ์ฝ๋๋ฅผ ์ค์ผ ์ ์๋ค.
- ๊ฐ๋ฐ์ ๊ฒฝํ์ ์ผ๊ด์ ์ผ๋ก ์ ์ง์์ผ ์ค ์ ์๋ค.
- ๋ค๋ฅธ ํจํค์ง์ ๋ณ๊ฒฝ์ฌํญ์ ํ์ ํ๋๋ฐ ์ฉ์ดํ๋ค.
๊ทธ๋ ๋ค๊ณ ํด์ ๋ชจ๋ ธ๋ ํฌ๊ฐ ๋ฐ๋์ ๊ธฐ์กด์ ๋ฐฉ์๋ณด๋ค ํญ์ ๋์ ๋ฐฉ๋ฒ์ ์๋๋๋ค. ๋ชจ๋ ธ๋ ํฌ๋ ๋ค์๊ณผ ๊ฐ์ ์ํฉ์์ ์ฌ์ฉํ์ ๋ ํจ๊ณผ์ ์ ๋๋ค.
- ์ ์ฌํ ์ ํ์ ์งํฉ์ผ ๋
- ์ฌ๋ฌ ํ๋ก์ ํธ์ ๋ณํ๋ฅผ ํ๋์ ํ์ ํด์ผ ํ ๋
- ๊ณตํต ๊ธฐ๋ฅ์ ์ฌ์ฌ์ฉํ๋ ๊ด๋ จ๋ ํ๋ก์ ํธ์ ์งํฉ์ผ ๋
์์ ๋ด์ฉ์ ์ถฉ๋ถํ ๊ณ ๋ คํ์ฌ ๋ชจ๋ ธ๋ ํฌ์ ๋ฉํฐ๋ ํฌ๋ฅผ ์ ํํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
๋ชจ๋ ธ๋ ํฌ๋ฅผ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์๋ ์ฌ๋ฌ๊ฐ์ง๊ฐ ์์ต๋๋ค. ํ์ ์์๋ ๋ชจ๋ ธ๋ ํฌ๋ฅผ ๊ด๋ฆฌํ ๋ ์ผ๋ฐ์ ์ผ๋ก turborepo ๋ lerna ๋ฅผ ์ฌ์ฉํฉ๋๋ค.
์ดํธ๋์ ๋ํ ์์ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ ๊น ํ์ผ๋, ๋ชจ๋ ธ๋ ํฌ๋ฅผ ์ฒ์ ์ ์ฉํด๋ณด๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ ๋ชจ๋ ธ๋ ํฌ ํ๊ฒฝ์ ์ง์ ๊ตฌ์ถํด๋ณด๋๊ฒ ์ข๋ค๊ณ ์๊ฐํ๊ณ , ์๋ฃ๋ฅผ ์ฐพ์๋ณธ ๊ฒฐ๊ณผ pnpm ์์ workspace ๊ธฐ๋ฅ์ ํตํด ๋ชจ๋ ธ๋ ํฌ ํ๊ฒฝ์ ์ง์ํ๋ค๋ ๊ฒ์ ์ ์ ์์์ต๋๋ค.
ํ์ฌ, ์ดํธ๋์ ์ pnpm workspace ๊ธฐ๋ฐ์ผ๋ก ๋ชจ๋ ธ๋ ํฌ ํ๊ฒฝ์ ๊ตฌ์ฑํ์ผ๋ฉฐ, ํจํค์ง ๋งค๋์ ๋ํ pnpm์ผ๋ก ์ฌ์ฉํ๊ฒ ๋์์ต๋๋ค.
๋ชจ๋ ธ๋ ํฌ ํ๊ฒฝ์์ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ๋๋ ํจํค์ง ๋งค๋์ ๋ pnpm๊ณผ yarn-berry ๋ ์ข ๋ฅ์ธ๋ฐ, yarn-berry์ ๊ฒฝ์ฐ plug-n-play๊ธฐ๋ฅ์ ํตํด zero-install ํ๊ฒฝ์ ๊ตฌ์ถํ ์ ์๋ค๋ ์ ์ ๋งค๋ ฅ์ ์ด์์ผ๋, 3๋ฒ์ ๊น์ง ghost dependency๋ฌธ์ ๊ฐ ์์๊ณ , ํด๋น ๋ด์ฉ์ด 4๋ฒ์ ์ผ๋ก ๋ฉ์ด์ ์ ๋ฐ์ดํธ๊ฐ ์งํ๋๋ฉฐ ํด๊ฒฐ๋์๋ค๊ณ ๋ ํ๋ yarn-berry์ PnP๊ฐ Git์ ์ง์์ ์ผ๋ก ๋ถํ๋ฅผ ์ค๋ค๋ ๋ด์ฉ๊ณผ ๋ชจ๋ ํจํค์ง๋ค์ด PnP๋ฅผ ์ง์ํ์ง ์๋๋ค๋ ์ ์์ pnpm์ ์ ํํ๊ฒ ๋์์ต๋๋ค.
Yarn ๋์ pnpm์ผ๋ก ๋์ด๊ฐ 3๊ฐ์ง ์ด์
๋์์ธ ์์คํ
๋์์ธ ์์คํ ์ด๋ ๋์์ธ ์์น๊ณผ ๊ท๊ฒฉ, ์ฌ์ฌ์ฉํ ์ ์๋ UI ํจํด๊ณผ ์ปดํฌ๋ํธ, ์ฝ๋๋ฅผ ํฌ๊ดํ๋ ์์คํ ์ ๋งํฉ๋๋ค.
๋์์ธ ์์คํ ์ ํฌ๊ฒ 3๊ฐ์ง ์ ๋๋ก ๋๋๋๋ฐ
- UI ๊ฐ์ด๋๋ผ์ธ(์คํ์ผ ๊ฐ์ด๋)
- UI๋ฅผ ํ์คํํ๊ณ ํ๋ฉด ๊ฐ์ ์ผ๊ด์ฑ์ ํ๋ณดํ๊ธฐ ์ํ ๊ฐ์ด๋์ ๋๋ค.
- UX ๊ฐ์ด๋๋ผ์ธ
- ์๋น์ค์ ๋ธ๋๋ ์ธก๋ฉด์์ ์ฌ์ฉ์๊ฐ ์ผ๊ด์ ์ด๊ณ ์ฐจ๋ณํ๋ ๊ฒฝํ์ ํ๋๋ก ํ๊ธฐ ์ํ ๊ฐ์ด๋์ ๋๋ค.
- ๋์์ธ ์์คํ
- ๋์์ธ ์์น๊ณผ ๊ท๊ฒฉ, ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ UI ํจํด๊ณผ ์ปดํฌ๋ํธ, ์ฝ๋๋ฅผ ํฌ๊ดํ๋ ์์คํ ์ ๋๋ค.
์ดํธ๋์ ์ ๊ฒฝ์ฐ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ์ ์์ด์ฝ ํจํค์ง๋ฅผ ๋์์ธ ์์คํ ์ ์ถ๊ฐํ๊ณ , ์ด๋ฅผ ํตํด ์ค๋ณต๋๋ ์ฝ๋๋ฅผ ์ค์ด๊ณ ์ฌ์ฉ์์๊ฒ ์ผ๊ด์ ์ธ ๊ฒฝํ์ ์ฃผ๊ณ ์ ํ์ต๋๋ค.
์ดํธ๋์ ์ ๊ฒฝ์ฐ ํ์ฌ ์๋น์ค์ค์ธ ๋ด์ค๋ ํฐ ์๋น์ค ์ด์ธ์๋ ์ถํ ๋ฐฑ์คํผ์ค์ ๊ฐ์ ์๋น์ค๋ฅผ ๊ณํํ๊ณ ์์๊ธฐ ๋๋ฌธ์ ์ฌ์ฉ์์๊ฒ ์ผ๊ด์ ์ธ ๊ฒฝํ์ ์ฃผ๋ ๊ฒ์ด ์ค์ํ๋ค๊ณ ์๊ฐํ์ต๋๋ค.
๋, ์ด๋ ๊ฒ ์์ฑ๋ ์ปดํฌ๋ํธ์ ๋ํด์ Storybook์ ํตํด ๋ฌธ์ํ๋ฅผ ์งํํ์ต๋๋ค. ์ด๋ฅผ ํตํด ์ถํ ๋์์ด๋์ ๊ฐ์ ๋น๊ฐ๋ฐ์ ์ง๊ตฐ๊ณผ ์ํตํ ๋ ์ด๋ ค์์ด ์๋๋ก ํ๊ณ , ๊ฐ๋ฐ์ ์๋ก ์ฐธ์ฌํ๋ ์ฌ๋๋ค๋ ๊ฐ์ด๋๋ฅผ ํตํด ์ฝ๊ฒ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋๋ก ํ๊ณ ์ ํ์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ์์ฑ๋ Storybook๋ฌธ์๋ chromatic ์๋น์ค๋ฅผ ํตํด ๋ฐฐํฌํ๊ณ , ์ด๋ฅผ Github Action ์ ํตํด CD ํ์ดํ๋ผ์ธ์ ๊ตฌ์ถํ์ฌ ์ต์ ์ ๋ด์ฉ์ ๋ฐ์ํ๋๋ก ํ์ต๋๋ค.
UI / AspectRatio / Aspect Ratio Default
Storybook์ chromatic์ ํตํ ์ปดํฌ๋ํธ ํ ์คํธ๋ ์ง์ํ๋๋ฐ, ์ดํธ๋์ ์๋น์ค๋ ์ถํ ํ ์คํธ ๋ก์ง์ ์ถ๊ฐ๋ฅผ ํตํด DS์ ์ปค๋ฒ๋ฆฌ์ง ์ํ๋ฅผ ๊ฐ์ ํ ์์ ์ด๋ฉฐ, shadcn/ui๊ธฐ๋ฐ์ผ๋ก ๋์ด์๋ ์ปดํฌ๋ํธ ๋ํ ์์ฒด์ปดํฌ๋ํธ๋ก ๊ต์ฒดํ ์์ ์ ๋๋ค.
์จ๋ํํฐ ์์คํ ์ ํตํ ์ฌ์ฉ์ ๊ฒฝํ ๊ฐ์ ํ๊ธฐ
์ฌ๊ธฐ์ ์ถ๊ฐ์ ์ผ๋ก ์จ๋ํํฐ ์์คํ ์ ํตํด์ ์ฌ์ฉ์์ ๊ฒฝํ์ ๊ฐ์ ํ๊ณ ์ ํ์ต๋๋ค.
Sentry๋ฅผ ํ์ฌํ์ฌ ์๋ฌ๋ฅผ ๋ก๊น ํ๊ณ , ์๋ฌ์ ๋ํ ๋ํ ์ผํ ์ ๋ณด๋ฅผ ๋ฐ์ ์๋ฌ๋ฅผ ์์ ํ๊ณ ์์ต๋๋ค. ์ด๋ ์ดํ ํ๋ก ํธ์๋ ์๋น์ค์ ๋ก๋ ๋ฐธ๋ฐ์ฑ์ ๊ณ ๋ คํ์ฌ ์๋ฌ๋ฅผ ์ข ํฉ์ ์ผ๋ก ๋ก๊น ํ ์ ์๋๋ก ๊ตฌ์ถํด๋์ ๊ฒ์ ๋๋ค.
Sentry์์๋ ํนํ ์๋ฌ๊ฐ ๋ํ ์ผํ๊ฒ ๋ก๊น ๋์ด ์ด๋ค ํ๊ฒฝ์์ ์๋ฌ๊ฐ ๋ฐ์ํ๋์ง๋ฅผ ์ฝ๊ฒ ํ์ธํ ์ ์์ต๋๋ค.
์ธ์ ๋ฆฌํ๋ ์ด ๊ธฐ๋ฅ์ ํตํด์ ์ ํํ ์ด๋ค ์ํฉ์์ ์๋ฌ๊ฐ ๋ฐ์ํ๋์ง๋ ํ์ธํ ์ ์์ต๋๋ค.
์๋ฌ ๋ฐ์์์๋ ์ฌ๋๊ณผ ์๋ฆผ ์ฐ๋์ค์ ์ ํด๋์ด ์ฌ๋ ์๋ฆผ์ ํตํด ํ๋ก๋์ ์์ ์๋ฌ๊ฐ ๋ฐ์ํ์์ ๋น ๋ฅด๊ฒ ์ธ์งํ ์ ์์ต๋๋ค.
์ด์ธ์๋ ์ฑ๋ํก ์ ํตํด ์ผ๋ฐ ์ ์ ์๊ฒ ๋ฌธ์์ ํผ๋๋ฐฑ์ ๋ฐ์ ์ ์ ์ ์ฌ์ฉ์ฑ์ ๊ฐ์ ํ์ต๋๋ค.
๊ธฐ์กด์๋ ์๋น์ค์ ๋ฌธ์๋ฅผ ํ๋ ค๋ฉด ์ผ๋ฐ ์ ์ ์๊ฒ๋ ์ ๊ทผ์ฑ์ด ๋จ์ด์ง๋ ๊นํ๋ธ ์ด์๋, ์ธ์ ๋ต์ฅ์ด ์ฌ์ง ๊ธฐ์ฝ์ด ์๋ ์ด๋ฉ์ผ์ ์ฌ์ฉํด์ผํ์ง๋ง, ์ฑ๋ํก์ ์ถ๊ฐํจ์ผ๋ก์จ ์ค์๊ฐ์ผ๋ก ๋ฌธ์๋ฅผ ๋ฐ๊ณ ํด๋น ๋ด์ฉ์ ๋ํด ๋ต๋ณํ ์ ์๊ฒ ๋์์ต๋๋ค.
์ฐธ๊ณ
https://yozm.wishket.com/magazine/detail/1830/
https://medium.com/musinsa-tech/journey-of-a-frontend-monorepo-8f5480b80661
'๊ฐ๋ฐ > FRONTEND' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Easyfetch ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ตฌํ๊ธฐ (0) | 2024.08.23 |
---|---|
Render Props๋ฅผ ํตํ UX ๊ฐ์ (1) | 2024.08.13 |
Next.js์์ S3 ์ ๋ก๋ (0) | 2024.08.09 |
Next, MSW ๊ทธ๋ฆฌ๊ณ ESlint (0) | 2024.08.06 |
Next.js์์ ์์ ํ ๋ก๊ทธ์ธ ๊ตฌํ ์ฌ์ (without NextAuth) (0) | 2024.07.10 |