๊ฒฌ๊ณ ํ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ ์ธํ๋ผ ๊ตฌ์ถ์ ์ํ ์ข ํฉ ๊ฐ์ด๋. ์ํฌํ๋ก์ฐ ์๋ํ, Vite ๋ฐ Webpack๊ณผ ๊ฐ์ ๋น๋ ๋๊ตฌ, CI/CD, ๊ทธ๋ฆฌ๊ณ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ํ์ํฉ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ ์ธํ๋ผ: ์ํฌํ๋ก์ฐ ํ๋ ์์ํฌ ๊ตฌํ ๊ฐ์ด๋
์น ๊ฐ๋ฐ ์ด์ฐฝ๊ธฐ์๋ ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๊ฒ์ด ๋จ์ผ HTML ํ์ผ, CSS ์คํ์ผ์ํธ, ๊ทธ๋ฆฌ๊ณ ์คํฌ๋ฆฝํธ ํ๊ทธ์ ์ฝ๊ฐ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ถ๊ฐํ๋ ์์ ์ด์์์ง๋ ๋ชจ๋ฆ ๋๋ค. ์ค๋๋ ์ ํ๊ฒฝ์ ์์ ํ ๋ค๋ฆ ๋๋ค. ํ๋์ ์๋ฐ์คํฌ๋ฆฝํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ์๋ฐฑ ๊ฐ์ ๋ชจ๋, ๋ค์ํ ์์กด์ฑ, ๊ทธ๋ฆฌ๊ณ ์ ๊ตํ ์ํ ๊ด๋ฆฌ๋ก ๊ตฌ์ฑ๋ ๋ณต์กํ ์ํ๊ณ์ ๋๋ค. ์ด๋ฌํ ๋ณต์ก์ฑ์ ๋จ์ํ ์ฝ๋๋ฅผ ์์ฑํ๋ ๊ฒ ์ด์์ ์๊ตฌํฉ๋๋ค. ๋ฐ๋ก ๊ฒฌ๊ณ ํ๊ณ , ์๋ํ๋์์ผ๋ฉฐ, ํ์ฅ ๊ฐ๋ฅํ ๊ฐ๋ฐ ์ธํ๋ผ๊ฐ ํ์ํฉ๋๋ค.
๋ง์ ํ์๊ฒ ์ด ์ธํ๋ผ๋ ์คํฌ๋ฆฝํธ์ ์๋ ํ๋ก์ธ์ค์ ๋๋๊ธฐ ๊ฐ์ ์กฐํฉ์ผ๋ก, ๋ถ์ผ์น, ๋๋ฆฐ ๋น๋ ์๊ฐ, ๊ทธ๋ฆฌ๊ณ ๋ต๋ตํ ๊ฐ๋ฐ์ ๊ฒฝํ์ผ๋ก ์ด์ด์ง๋๋ค. ํด๊ฒฐ์ฑ ์ ์๋์ ์ผ๋ก ๊ตฌํ๋ ์ํฌํ๋ก์ฐ ํ๋ ์์ํฌ์ ์์ต๋๋ค. ์ด๋ ์ฝ๋์ ์ฒซ ์ค์ ์์ฑํ๋ ๊ฒ๋ถํฐ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๋ฐฐํฌํ๊ธฐ๊น์ง ์ ์ฒด ๊ฐ๋ฐ ์๋ช ์ฃผ๊ธฐ๋ฅผ ์๋ํํ๋ ๋๊ตฌ์ ๊ดํ์ ์์ง๋ ฅ ์๋ ์์คํ ์ ๋๋ค.
์ด ์ข ํฉ ๊ฐ์ด๋๋ ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ ์ธํ๋ผ์ ํต์ฌ ๊ธฐ๋ฅ๋ค์ ์๋ดํ ๊ฒ์ ๋๋ค. ๊ฐ ๊ตฌ์ฑ ์์์ '์ด์ '๋ฅผ ํ์ํ๊ณ ์์ฐ์ฑ์ ํฅ์์ํค๊ณ , ์ฝ๋ ํ์ง์ ๋ณด์ฅํ๋ฉฐ, ์ ๋ฌ ์๋๋ฅผ ๊ฐ์ํํ๋ ์ํฌํ๋ก์ฐ ํ๋ ์์ํฌ๋ฅผ ๊ตฌํํ๊ธฐ ์ํ ์ค์ฉ์ ์ธ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํ ๊ฒ์ ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ ์ธํ๋ผ๋ ๋ฌด์์ธ๊ฐ?
์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ ์ธํ๋ผ๋ ์ํํธ์จ์ด ๊ฐ๋ฐ ์๋ช ์ฃผ๊ธฐ๋ฅผ ์ง์ํ๋ ๋๊ตฌ, ์๋น์ค, ์๋ํ๋ ํ๋ก์ธ์ค์ ์์ ํ ์งํฉ์ ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ๋์งํธ ๊ณต์ฅ ๋ฐ๋ฅ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋ฉ๋๋ค. ์ด๊ฒ์ ์ ํ ์์ฒด๊ฐ ์๋๋ผ, ์ ํ์ ํจ์จ์ ์ด๊ณ ์์ ์ ์ผ๋ก ๋น๋, ํ ์คํธ, ์ถ์ํ ์ ์๊ฒ ํด์ฃผ๋ ๊ธฐ๊ณ, ์กฐ๋ฆฝ ๋ผ์ธ, ํ์ง ๊ด๋ฆฌ ์์คํ ์ ๋๋ค.
์ฑ์ํ ์ธํ๋ผ๋ ์ผ๋ฐ์ ์ผ๋ก ๋ช ๊ฐ์ง ํต์ฌ ๊ณ์ธต์ผ๋ก ๊ตฌ์ฑ๋ฉ๋๋ค:
- ์์ค ์ฝ๋ ๊ด๋ฆฌ: ๋ณ๊ฒฝ ์ฌํญ์ ์ถ์ ํ๊ณ , ํ์๋ค๊ณผ ํ์ ํ๋ฉฐ, ์ฝ๋ ์ด๋ ฅ์ ์ ์งํ๊ธฐ ์ํ ์ค์ํ๋ ์์คํ (์: Git).
- ํจํค์ง ๊ด๋ฆฌ: ์๋ํํฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐ ํ๋ก์ ํธ ์์กด์ฑ์ ๊ด๋ฆฌํ๊ธฐ ์ํ ๋๊ตฌ(์: npm ๋๋ Yarn).
- ์ํฌํ๋ก์ฐ ์๋ํ: ์ฐ๋ฆฌ ๋ ผ์์ ํต์ฌ์ ๋๋ค. ์ฝ๋ ํธ๋์คํ์ผ๋ง, ๋ฒ๋ค๋ง, ์ต์ ํ, ํ ์คํ ๊ณผ ๊ฐ์ ์์ ์ ์๋ํํ๋ ๋๊ตฌ๋ฅผ ํฌํจํฉ๋๋ค.
- ํ ์คํ ํ๋ ์์ํฌ: ์ฝ๋์ ์ ํ์ฑ์ ๋ณด์ฅํ๊ณ ํ๊ท๋ฅผ ๋ฐฉ์งํ๊ธฐ ์ํด ์๋ํ๋ ํ ์คํธ๋ฅผ ์์ฑํ๊ณ ์คํํ๊ธฐ ์ํ ๋๊ตฌ ๋ชจ์.
- ์ง์์ ํตํฉ ๋ฐ ์ง์์ ๋ฐฐํฌ(CI/CD): ์ฝ๋ ๋ณ๊ฒฝ ์ฌํญ์ ์๋์ผ๋ก ๋น๋, ํ ์คํธ, ๋ฐฐํฌํ์ฌ ๋น ๋ฅด๊ณ ์์ ์ ์ธ ๋ฆด๋ฆฌ์ค ํ๋ก์ธ์ค๋ฅผ ๋ณด์ฅํ๋ ํ์ดํ๋ผ์ธ.
- ํธ์คํ ๋ฐ ๋ฐฐํฌ ํ๊ฒฝ: ์ ํต์ ์ธ ์๋ฒ, ํด๋ผ์ฐ๋ ํ๋ซํผ, ๋๋ ์ฃ์ง ๋คํธ์ํฌ ๋ฑ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ต์ข ๋ชฉ์ ์ง.
์ด ์ธํ๋ผ์ ํฌ์ํ์ง ์๋ ๊ฒ์ ํํ ํจ์ ์ ๋๋ค. ์ด๋ ๊ฐ๋ฐ์๋ค์ด ๊ธฐ๋ฅ์ ๊ตฌ์ถํ๋ ๊ฒ๋ณด๋ค ๋๊ตฌ ๋ฐ ํ๋ก์ธ์ค์ ์ธ์ฐ๋ ๋ฐ ๋ ๋ง์ ์๊ฐ์ ์๋นํ๊ฒ ๋๋ ๊ธฐ์ ๋ถ์ฑ๋ก ์ด์ด์ง๋๋ค. ๋ฐ๋ฉด์ ์ ์ค๊ณ๋ ์ธํ๋ผ๋ ํ์ ์ ํฌ๋ ฅ์ ์ฆํญ์ํค๋ ์ญํ ์ ํฉ๋๋ค.
ํ๋ ๊ฐ๋ฐ์์ ์ํฌํ๋ก์ฐ ํ๋ ์์ํฌ์ ์ญํ
์ํฌํ๋ก์ฐ ํ๋ ์์ํฌ๋ ๊ฐ๋ฐ ์ธํ๋ผ์ ์์ง์ ๋๋ค. ์ด๋ ๊ฐ๋ฐ์๋ค์ด ๋งค์ผ ์ง๋ฉดํ๋ ๋ฐ๋ณต์ ์ด๊ณ ์ค๋ฅ๊ฐ ๋ฐ์ํ๊ธฐ ์ฌ์ด ์์ ์ ์๋ํํ๊ธฐ ์ํด ์ค๊ณ๋ ๋๊ตฌ์ ๊ตฌ์ฑ์ ๋ชจ์์ ๋๋ค. ์ฃผ๋ ๋ชฉํ๋ ํ์ง๊ณผ ์ผ๊ด์ฑ์ ๊ฐ์ ํ๋ฉด์ ์ํํ๊ณ ํจ์จ์ ์ธ ๊ฐ๋ฐ์ ๊ฒฝํ(DX)์ ๋ง๋๋ ๊ฒ์ ๋๋ค.
๊ฒฌ๊ณ ํ ์ํฌํ๋ก์ฐ ํ๋ ์์ํฌ์ ์ด์ ์ ์๋นํฉ๋๋ค:
- ํจ์จ์ฑ: ๋ฒ๋ค๋ง, ํธ๋์คํ์ผ๋ง, ๋ธ๋ผ์ฐ์ ์๋ก๊ณ ์นจ๊ณผ ๊ฐ์ ์์ ์ ์๋ํํ์ฌ ์๋ง์ ์๊ฐ์ ์์์ ์ ์ ์ฝํฉ๋๋ค.
- ์ผ๊ด์ฑ: ํ์ ๋ชจ๋ ๊ฐ๋ฐ์๊ฐ ๋์ผํ ๋๊ตฌ์ ํ์ค์ ์ฌ์ฉํ๋๋ก ๋ณด์ฅํ์ฌ "์ ์ปดํจํฐ์์๋ ๋๋๋ฐ์" ๋ฌธ์ ๋ฅผ ์ ๊ฑฐํฉ๋๋ค.
- ํ์ง: ์๋ํ๋ ๋ฆฐํ ๊ณผ ํ ์คํ ์ ํตํฉํจ์ผ๋ก์จ, ์ค๋ฅ์ ์คํ์ผ ๋ฌธ์ ๊ฐ ๋ฉ์ธ ์ฝ๋๋ฒ ์ด์ค์ ๋ณํฉ๋๊ธฐ ์ ์ ์ก์๋ผ ์ ์์ต๋๋ค.
- ์ฑ๋ฅ: ํ๋ ๋น๋ ๋๊ตฌ๋ ์ฝ๋ ์์ถ, ํธ๋ฆฌ ์์ดํน, ์ฝ๋ ์คํ๋ฆฌํ ๊ณผ ๊ฐ์ ์ค์ํ ์ต์ ํ๋ฅผ ์ํํ์ฌ ์ต์ข ์ฌ์ฉ์์๊ฒ ๋ ๋น ๋ฅด๊ณ ํจ์จ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๊ณตํฉ๋๋ค.
์ํฌํ๋ก์ฐ ๋๊ตฌ์ ์งํ
์๋ฐ์คํฌ๋ฆฝํธ ์ํ๊ณ๋ ์ํฌํ๋ก์ฐ ๋๊ตฌ์ ๋น ๋ฅธ ์งํ๋ฅผ ๊ฒช์์ต๋๋ค. ์ฒ์์๋ Grunt๋ Gulp์ ๊ฐ์ ํ์คํฌ ๋ฌ๋(Task Runner)๊ฐ ์์๋๋ฐ, ์ด๋ ๊ฐ๋จํ๊ณ ๊ฐ๋ณ์ ์ธ ์์ ์ ์๋ํํ๋ ๋ฐ ํ๋ฅญํ์ต๋๋ค. ์ดํ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์์กด์ฑ ๊ทธ๋ํ๋ฅผ ์ดํดํ๊ณ ๋ ์ ๊ตํ ์ต์ ํ๋ฅผ ์ํํ ์ ์๋ Webpack๊ณผ ๊ฐ์ ๋ชจ๋ ๋ฒ๋ค๋ฌ(Module Bundler)์ ์ํด ๋์ฒด๋์์ต๋๋ค. ์ค๋๋ ์ฐ๋ฆฌ๋ Vite๋ Turbopack๊ณผ ๊ฐ์ ์ฐจ์ธ๋ ๋น๋ ๋๊ตฌ(Build Tool)์ ์๋์ ์์ผ๋ฉฐ, ์ด๋ค์ ์ต์ ๋ธ๋ผ์ฐ์ ๊ธฐ๋ฅ๊ณผ Go, Rust์ ๊ฐ์ ๊ณ ์ฑ๋ฅ ์ธ์ด๋ฅผ ํ์ฉํ์ฌ ๊ฐ๋ฐ ์ค์ ๊ฑฐ์ ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ์ ๊ณตํฉ๋๋ค.
ํ๋ ์ํฌํ๋ก์ฐ ํ๋ ์์ํฌ์ ํต์ฌ ๊ธฐ๋ฅ
ํ๋ ์ํฌํ๋ก์ฐ์ ํ์ ๊ตฌ์ฑ ์์์ ์ด๋ฅผ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ๋ถ์ํด ๋ณด๊ฒ ์ต๋๋ค. ์ค๋๋ ๋๋ถ๋ถ์ ์ ๋ฌธ์ ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก์ ํธ์ ์ค์ถ๋ฅผ ํ์ฑํ๋ ์ค์ฉ์ ์ธ ๋๊ตฌ์ ๊ตฌ์ฑ์ ์ด์ ์ ๋ง์ถ ๊ฒ์ ๋๋ค.
1. ํจํค์ง ๋งค๋์ ๋ฅผ ์ด์ฉํ ์์กด์ฑ ๊ด๋ฆฌ
๋ชจ๋ ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก์ ํธ๋ ํจํค์ง ๋งค๋์ ๋ก ์์ํฉ๋๋ค. ์ด๋ ๋ค๋ฅธ ๋ชจ๋ ๊ฒ์ด ๊ตฌ์ถ๋๋ ๊ธฐ๋ฐ์ ๋๋ค.
- ๋๊ตฌ: ๊ฐ์ฅ ์ผ๋ฐ์ ์ธ ์ ํ์
npm(Node.js์ ํจ๊ป ์ ๊ณต),Yarn, ๊ทธ๋ฆฌ๊ณpnpm์ ๋๋ค. ์ด๋ค์ ์ ์ฌํ ๋ชฉํ๋ฅผ ๋ฌ์ฑํ์ง๋ง, `pnpm`๊ณผ `Yarn`(Plug'n'Play ๋ชจ๋)์ ์์กด์ฑ ์ค๋ณต์ ํผํจ์ผ๋ก์จ ์ฑ๋ฅ๊ณผ ๋์คํฌ ๊ณต๊ฐ ํจ์จ์ฑ์์ ์๋นํ ๊ฐ์ ์ ์ ๊ณตํฉ๋๋ค. - `package.json` ํ์ผ: ์ด๊ฒ์ ํ๋ก์ ํธ์ ์ฌ์ฅ์
๋๋ค. ํ๋ก์ ํธ ๋ฉํ๋ฐ์ดํฐ๋ฅผ ์ ์ํ๊ณ , ๊ฐ์ฅ ์ค์ํ๊ฒ๋ ์์กด์ฑ(
dependencies)๊ณผ ๊ฐ๋ฐ ์์กด์ฑ(devDependencies)์ ๋์ดํฉ๋๋ค. - ์ฌํ ๊ฐ๋ฅํ ๋น๋: ์ผ๊ด์ฑ์ ํต์ฌ์ ๋ฝ ํ์ผ(lock file)(
package-lock.json,yarn.lock,pnpm-lock.yaml)์ ๋๋ค. ์ด ํ์ผ์ ์ค์น๋ ๋ชจ๋ ์์กด์ฑ ๋ฐ ํ์ ์์กด์ฑ์ ์ ํํ ๋ฒ์ ์ ๊ธฐ๋กํฉ๋๋ค. ๋ค๋ฅธ ๊ฐ๋ฐ์๋ CI/CD ์๋ฒ๊ฐnpm install์ ์คํํ ๋, ๋ฝ ํ์ผ์ ์ฌ์ฉํ์ฌ ์ ํํ ๋์ผํ ํจํค์ง ๋ฒ์ ์ ์ค์นํจ์ผ๋ก์จ ์ด๋์๋ ์ผ๊ด๋ ํ๊ฒฝ์ ๋ณด์ฅํฉ๋๋ค. ํญ์ ๋ฝ ํ์ผ์ ์์ค ์ปจํธ๋กค์ ์ปค๋ฐํ์ญ์์ค. - ๋ณด์: ํจํค์ง ๋งค๋์ ๋ ๋ณด์ ๊ธฐ๋ฅ๋ ์ ๊ณตํฉ๋๋ค.
npm audit๊ณผ ๊ฐ์ ๋ช ๋ น์ด๋ ์๋ ค์ง ์ทจ์ฝ์ ์ ๋ํด ์์กด์ฑ์ ์ค์บํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ ํ๊ฒ ์ ์งํ๋ ๋ฐ ๋์์ ์ค๋๋ค.
2. ์ฝ๋ ํ์ง ๋ฐ ์ผ๊ด์ฑ: ๋ฆฐํ ๊ณผ ํฌ๋งทํ
ํ ์ ์ฒด์ ๊ฑธ์ณ ์ผ๊ด๋ ์ฝ๋ ์คํ์ผ์ ์ ์งํ๋ ๊ฒ์ ๊ฐ๋ ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ด ๊ณผ์ ์ ์๋ํํ๋ฉด ์ฝ๋ ๋ฆฌ๋ทฐ์์ ์ฃผ๊ด์ ์ธ ๋ ผ์์ ์ ๊ฑฐํ๊ณ ๋์ ์์ค์ ํ์ง์ ๋ณด์ฅํ ์ ์์ต๋๋ค.
- ESLint๋ฅผ ์ด์ฉํ ๋ฆฐํ
: ๋ฆฐํฐ๋ ์ฝ๋์ ํ๋ก๊ทธ๋๋ฐ์ ๋ฐ ๋ฌธ์ฒด์ ์ค๋ฅ๋ฅผ ๋ถ์ํฉ๋๋ค. ESLint๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ธ๊ณ์์ ์ฌ์ค์์ ํ์ค์
๋๋ค. ์ ์ฌ์ ์ธ ๋ฒ๊ทธ๋ฅผ ์ก๊ณ , ์ฝ๋ฉ ํ์ค์ ๊ฐ์ ํ๋ฉฐ, ์ํฐ-ํจํด์ ์๋ณํ ์ ์์ต๋๋ค. ๊ตฌ์ฑ์
.eslintrc.js(๋๋ ์ ์ฌํ) ํ์ผ์์ ๊ด๋ฆฌ๋๋ฉฐ, Airbnb๋ Google๊ณผ ๊ฐ์ ์ธ๊ธฐ ์๋ ์คํ์ผ ๊ฐ์ด๋๋ฅผ ํ์ฅํ ์ ์์ต๋๋ค. - Prettier๋ฅผ ์ด์ฉํ ํฌ๋งทํ : Prettier๋ ๋ ๋จ์ ์ธ(opinionated) ์ฝ๋ ํฌ๋งทํฐ์ ๋๋ค. ๋ฆฐํฐ์ ๋ฌ๋ฆฌ, ์ ์ผํ ์ญํ ์ ์ผ๊ด๋ ๊ท์น ์งํฉ์ ๋ฐ๋ผ ์ฝ๋๋ฅผ ๋ค์ ํฌ๋งทํ๋ ๊ฒ์ ๋๋ค. ์ด๋ ํญ ๋ ๊ณต๋ฐฑ ๋๋ ์ค๊ดํธ๋ฅผ ์ด๋์ ๋์ง์ ๋ํ ๋ชจ๋ ๋ ผ์์ ์์ ์ค๋๋ค. ์ฝ๋๋ฅผ ๋ฐ์ ํ์คํ๋ ๋ฐฉ์์ผ๋ก ๋ค์ ์ถ๋ ฅํฉ๋๋ค.
- ์๋ฒฝํ ์กฐํฉ: ๊ฐ์ฅ ์ข์ ๋ฐฉ๋ฒ์ ESLint์ Prettier๋ฅผ ํจ๊ป ์ฌ์ฉํ๋ ๊ฒ์
๋๋ค. ESLint๋ ์ฝ๋ ํ์ง ๊ท์น์ ์ฒ๋ฆฌํ๊ณ , Prettier๋ ๋ชจ๋ ํฌ๋งทํ
๊ท์น์ ์ฒ๋ฆฌํฉ๋๋ค.
eslint-config-prettier์ ๊ฐ์ ํ๋ฌ๊ทธ์ธ์ ESLint์ ํฌ๋งทํ ๊ท์น์ด Prettier์ ๊ท์น๊ณผ ์ถฉ๋ํ์ง ์๋๋ก ๋ณด์ฅํฉ๋๋ค.
ํ๋ฆฌ-์ปค๋ฐ ํ (Pre-commit Hook)์ ์ด์ฉํ ์๋ํ
์ง์ ํ ํ์ ์ด๋ฌํ ๊ฒ์ฌ๋ฅผ ์๋ํํ๋ ๋ฐ์ ๋์ต๋๋ค. Husky์ lint-staged์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ฆฌ-์ปค๋ฐ ํ ์ ์ค์ ํ ์ ์์ต๋๋ค. ์ด ํ ์ ๊ฐ๋ฐ์๊ฐ ์ปค๋ฐ์ ์๋ํ ๋๋ง๋ค ์คํ ์ด์ง๋ ํ์ผ์ ๋ํด ๋ฆฐํฐ์ ํฌ๋งทํฐ๋ฅผ ์๋์ผ๋ก ์คํํฉ๋๋ค. ์ฝ๋๊ฐ ํ์ค์ ์ถฉ์กฑํ์ง ์์ผ๋ฉด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋ ๋๊น์ง ์ปค๋ฐ์ด ์ฐจ๋จ๋ฉ๋๋ค. ์ด๊ฒ์ ๊นจ๋ํ ์ฝ๋๋ฒ ์ด์ค๋ฅผ ์ ์งํ๋ ๋ฐ ์์ด ๊ฒ์ ์ฒด์ธ์ ์ ๋๋ค.
3. ๋น๋ ํ๋ก์ธ์ค: ๋ฒ๋ค๋ง, ํธ๋์คํ์ผ๋ง, ์ต์ ํ
๋น๋ ํ๋ก์ธ์ค๋ ๊ฐ๋ฐ ์ฝ๋(์ข ์ข ์ต์ ์๋ฐ์คํฌ๋ฆฝํธ/ํ์ ์คํฌ๋ฆฝํธ์ ์ฌ๋ฌ ๋ชจ๋๋ก ์์ฑ๋จ)๋ฅผ ๋ธ๋ผ์ฐ์ ์์ ์ฌ์ฉํ ์ ์๋๋ก ์ต์ ํ๋ ์ ์ ์์ฐ์ผ๋ก ๋ณํํฉ๋๋ค.
ํธ๋์คํ์ผ๋ง
ํธ๋์คํ์ผ๋ง์ ์ต์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋(์: ES2022)๋ฅผ ๋ ๋์ ๋ฒ์์ ๋ธ๋ผ์ฐ์ ์์ ์คํํ ์ ์๋ ์ค๋๋๊ณ ๋ ๋๋ฆฌ ์ง์๋๋ ๋ฒ์ (์: ES5)์ผ๋ก ๋ณํํ๋ ๊ณผ์ ์ ๋๋ค. ์ต์ ๋ธ๋ผ์ฐ์ ๋ ์๋ก์ด ๊ธฐ๋ฅ์ ๋ํ ์ง์์ด ํ๋ฅญํ์ง๋ง, ํธ๋์คํ์ผ๋ง์ ์ฌ์ ํ ๊ตฌํ ๋ฒ์ ์ด๋ ํน์ ๊ธฐ์ ํ๊ฒฝ๊ณผ์ ํธํ์ฑ์ ๋ณด์ฅํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
- Babel: ์ค๋ซ๋์ ํธ๋์คํ์ผ๋ง์ ์ฑํผ์ธ ์๋ฆฌ๋ฅผ ์ง์ผ์์ต๋๋ค. ๋ฐฉ๋ํ ํ๋ฌ๊ทธ์ธ ์ํ๊ณ๋ฅผ ํตํด ๋งค์ฐ ์ธ๋ฐํ ์ค์ ์ด ๊ฐ๋ฅํฉ๋๋ค.
- SWC (Speedy Web Compiler): Babel๋ณด๋ค ํจ์ฌ ๋น ๋ฅธ ์ต์ ์ Rust ๊ธฐ๋ฐ ๋์์ ๋๋ค. Next.js์ ๊ฐ์ ๋ง์ ์ฐจ์ธ๋ ๋๊ตฌ์ ํตํฉ๋๊ณ ์์ต๋๋ค.
๋ฒ๋ค๋ง
๋ชจ๋ ๋ฒ๋ค๋ฌ๋ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋๊ณผ ๊ทธ ์์กด์ฑ์ ๊ฐ์ ธ์ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํด ํ๋ ์ด์์ ์ต์ ํ๋ ํ์ผ(๋ฒ๋ค)๋ก ๊ฒฐํฉํฉ๋๋ค. ์ด ๊ณผ์ ์ ์ฑ๋ฅ์ ํ์์ ์ ๋๋ค.
- Webpack: ์๋
๋์ Webpack์ ๊ฐ์ฅ ๊ฐ๋ ฅํ๊ณ ์ธ๊ธฐ ์๋ ๋ฒ๋ค๋ฌ์์ต๋๋ค. ๊ทธ ๊ฐ์ ์ ๊ทน๋๋ก ์ธ๋ฐํ ์ค์ ๊ฐ๋ฅ์ฑ๊ณผ ์์ํ ์ ์๋ ๋ชจ๋ ์์ฐ ์ ํ์ด๋ ๋ณํ์ ์ฒ๋ฆฌํ ์ ์๋ ๊ฑฐ๋ํ ํ๋ฌ๊ทธ์ธ ์ํ๊ณ์ ์์ต๋๋ค. ํ์ง๋ง ์ด๋ฌํ ๊ฐ๋ ฅํจ์ ๋ ๊ฐํ๋ฅธ ํ์ต ๊ณก์ ๊ณผ ๋ณต์กํ ์ค์ ํ์ผ(
webpack.config.js)์ ๋๋ฐํฉ๋๋ค. ๋ ํนํ ๋น๋ ์๊ตฌ์ฌํญ์ด ์๋ ํฌ๊ณ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์๋ ์ฌ์ ํ ํ๋ฅญํ ์ ํ์ ๋๋ค. - Vite: ์๋ฑํ ๊ฐ๋ฐ์ ๊ฒฝํ์ผ๋ก ์์ฒญ๋ ์ธ๊ธฐ๋ฅผ ์ป์ ํ๋์ ์ธ ๋์ ์์ ๋๋ค. ๊ฐ๋ฐ ์ค์ Vite๋ ๋ธ๋ผ์ฐ์ ์ ๋ค์ดํฐ๋ธ ES ๋ชจ๋์ ํ์ฉํ๋ฏ๋ก ๋ณ๊ฒฝํ ๋๋ง๋ค ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฒ๋ค๋งํ ํ์๊ฐ ์์ต๋๋ค. ์ด๋ ๊ฑฐ์ ์ฆ๊ฐ์ ์ธ ์๋ฒ ์์๊ณผ ๋ฏฟ์ ์ ์์ ์ ๋๋ก ๋น ๋ฅธ ๋ชจ๋ ์ฆ์ ๊ต์ฒด(Hot Module Replacement, HMR)๋ก ์ด์ด์ง๋๋ค. ํ๋ก๋์ ๋น๋์์๋ ๋ด๋ถ์ ์ผ๋ก ๊ณ ๋๋ก ์ต์ ํ๋ Rollup ๋ฒ๋ค๋ฌ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๋๋ถ๋ถ์ ์๋ก์ด ํ๋ก์ ํธ์์ Vite๋ ํจ์ฌ ๋ ๊ฐ๋จํ๊ณ ๋น ๋ฅธ ์์์ ์ ์ ๊ณตํฉ๋๋ค.
ํต์ฌ ์ต์ ํ
ํ๋ ๋น๋ ๋๊ตฌ๋ ์๋์ผ๋ก ๋ช ๊ฐ์ง ์ค์ํ ์ต์ ํ๋ฅผ ์ํํฉ๋๋ค:
- ์์ถ(Minification): ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ธฐ ์ํด ์ฝ๋์์ ๋ชจ๋ ๋ถํ์ํ ๋ฌธ์(๊ณต๋ฐฑ, ์ฃผ์)๋ฅผ ์ ๊ฑฐํฉ๋๋ค.
- ํธ๋ฆฌ ์์ดํน(Tree-shaking): ์ฝ๋๋ฅผ ๋ถ์ํ์ฌ ์ฌ์ฉ๋์ง ์๋ export๋ฅผ ์ ๊ฑฐํ์ฌ ์ค์ ๋ก ์ฌ์ฉํ๋ ์ฝ๋๋ง ์ต์ข ๋ฒ๋ค์ ํฌํจ๋๋๋ก ํฉ๋๋ค.
- ์ฝ๋ ์คํ๋ฆฌํ (Code Splitting): ์ฝ๋๋ฅผ ํ์์ ๋ฐ๋ผ ๋ก๋ํ ์ ์๋ ๋ ์์ ์ฒญํฌ๋ก ์๋ ๋ถํ ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ๊ฑฐ์ ์ฌ์ฉ๋์ง ์๋ ๊ด๋ฆฌ์ ํจ๋์ ์ฝ๋๋ ์ผ๋ฐ ์ฌ์ฉ์๊ฐ ๋ฐฉ๋ฌธ ํ์ด์ง์์ ๋ค์ด๋ก๋ํ ํ์๊ฐ ์์ต๋๋ค. ์ด๋ ์ด๊ธฐ ํ์ด์ง ๋ก๋ ์๊ฐ์ ๊ทน์ ์ผ๋ก ํฅ์์ํต๋๋ค.
4. ์๋ํ๋ ํ ์คํ : ์์ ์ฑ ๋ณด์ฅ
๊ฒฌ๊ณ ํ ํ ์คํ ์ ๋ต์ ์ ๋ฌธ์ ์ธ ์ํํธ์จ์ด์ ์์ด ํํํ ์ ์๋ ๋ถ๋ถ์ ๋๋ค. ์ํฌํ๋ก์ฐ ํ๋ ์์ํฌ๋ ํ ์คํธ๋ฅผ ์ฝ๊ฒ ์์ฑ, ์คํ, ์๋ํํ ์ ์๋๋ก ํด์ผ ํฉ๋๋ค.
- ๋จ์ ํ ์คํธ: ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ์ฅ ์์ ๊ฐ๋ณ ๋ถ๋ถ(์: ๋จ์ผ ํจ์ ๋๋ ์ปดํฌ๋ํธ)์ ๊ฒฉ๋ฆฌํ์ฌ ํ ์คํธํฉ๋๋ค. Jest๋ Vitest์ ๊ฐ์ ๋๊ตฌ๊ฐ ์ด์ ์ ํฉํฉ๋๋ค. ์ด๋ค์ ํ ์คํธ ๋ฌ๋, ๋จ์ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ๋ชจ์(mocking) ๊ธฐ๋ฅ์ ํ๋์ ํจํค์ง๋ก ์ ๊ณตํฉ๋๋ค. ํนํ Vitest๋ Vite๋ฅผ ์ฌ์ฉํ๋ ํ๋ก์ ํธ์ ๋งค๋ ฅ์ ์ธ๋ฐ, ๋์ผํ ๊ตฌ์ฑ์ ๊ณต์ ํ๊ณ ๋น ๋ฅด๊ณ ํ๋์ ์ธ ํ ์คํ ๊ฒฝํ์ ์ ๊ณตํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
- ํตํฉ ํ ์คํธ: ์ฌ๋ฌ ๋จ์๊ฐ ์์๋๋ก ํจ๊ป ์๋ํ๋์ง ํ์ธํฉ๋๋ค. ๋์ผํ ๋๊ตฌ(Jest/Vitest)๋ฅผ ์ฌ์ฉํ์ฌ ํตํฉ ํ ์คํธ๋ฅผ ์์ฑํ ์ ์์ง๋ง, ํ ์คํธ์ ๋ฒ์๋ ๋ ํฝ๋๋ค.
- ์๋-ํฌ-์๋(E2E) ํ ์คํธ: E2E ํ ์คํธ๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ ์ดํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ํด๋ฆญํ๋ฉฐ ์ค์ ์ฌ์ฉ์ ํ๋์ ์๋ฎฌ๋ ์ด์ ํฉ๋๋ค. ์ด๋ ๊ถ๊ทน์ ์ธ ์ ๋ขฐ๋ ํ์ธ์ ๋๋ค. ์ด ๋ถ์ผ์ ์ ๋์ ์ธ ๋๊ตฌ๋ก๋ Cypress์ Playwright๊ฐ ์์ผ๋ฉฐ, ์๊ฐ ์ฌํ ๋๋ฒ๊น ๋ฐ ํ ์คํธ ์คํ ๋น๋์ค ๋ นํ์ ๊ฐ์ ํ์์ ์ธ ๊ฐ๋ฐ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
์ํฌํ๋ก์ฐ๋ ์ด๋ฌํ ํ ์คํธ๊ฐ ์๋ฅผ ๋ค์ด ์ปค๋ฐ ์ (Husky ์ฌ์ฉ)์ด๋ CI/CD ํ์ดํ๋ผ์ธ์ ์ผ๋ถ๋ก ์๋์ผ๋ก ์คํ๋๋๋ก ํตํฉํด์ผ ํฉ๋๋ค.
5. ๋ก์ปฌ ๊ฐ๋ฐ ํ๊ฒฝ
๋ก์ปฌ ๊ฐ๋ฐ ์๋ฒ๋ ๊ฐ๋ฐ์๋ค์ด ๋๋ถ๋ถ์ ์๊ฐ์ ๋ณด๋ด๋ ๊ณณ์ ๋๋ค. ๋น ๋ฅด๊ณ ๋ฐ์์ด ๋น ๋ฅธ ํ๊ฒฝ์ ์์ฐ์ฑ์ ํต์ฌ์ ๋๋ค.
- ๋น ๋ฅธ ํผ๋๋ฐฑ ๋ฃจํ: ์ด๊ฒ์ด ์ฃผ๋ ๋ชฉํ์ ๋๋ค. ํ์ผ์ ์ ์ฅํ๋ฉด ๋ณ๊ฒฝ ์ฌํญ์ด ๊ฑฐ์ ์ฆ์ ๋ธ๋ผ์ฐ์ ์ ๋ฐ์๋์ด์ผ ํฉ๋๋ค. ์ด๋ ๋ชจ๋ ์ฆ์ ๊ต์ฒด(HMR)๋ฅผ ํตํด ๋ฌ์ฑ๋๋ฉฐ, ์ ์ฒด ํ์ด์ง๋ฅผ ์๋ก ๊ณ ์น์ง ์๊ณ ์คํ ์ค์ธ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ ๋ฐ์ดํธ๋ ๋ชจ๋๋ง ๊ต์ฒดํ๋ ๊ธฐ๋ฅ์ ๋๋ค. Vite๊ฐ ์ด ๋ถ์ผ์์ ๋ฐ์ด๋์ง๋ง, Webpack Dev Server๋ ๊ฐ๋ ฅํ HMR ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
- ํ๊ฒฝ ๋ณ์: ์ ํ๋ฆฌ์ผ์ด์
์ ๊ฐ๋ฐ, ์คํ
์ด์ง, ํ๋ก๋์
ํ๊ฒฝ์ ๋ฐ๋ผ ๋ค๋ฅธ ๊ตฌ์ฑ(์: API ์๋ํฌ์ธํธ, ๊ณต๊ฐ ํค)์ด ํ์ํ ๊ฒ์
๋๋ค. ํ์ค์ ์ธ ๋ฐฉ๋ฒ์
.envํ์ผ์ ์ฌ์ฉํ์ฌ ์ด๋ฌํ ๋ณ์๋ฅผ ๊ด๋ฆฌํ๋ ๊ฒ์ ๋๋ค. Vite๋ Create React App๊ณผ ๊ฐ์ ๋๊ตฌ๋ ์ด๋ฌํ ํ์ผ์ ๋ก๋ํ๋ ๊ธฐ๋ฅ์ ๋ด์ฅํ๊ณ ์์ด, ๋น๋ฐ ์ ๋ณด๋ฅผ ์์ค ์ปจํธ๋กค์์ ์ ์ธํ ์ ์์ต๋๋ค.
๋ชจ๋ ๊ฒ์ ํ๋๋ก ๋ฌถ๊ธฐ: ๋ก์ปฌ์์ ํ๋ก๋์ ๊น์ง
๋๊ตฌ์ ๋ชจ์์ด ํ๋ ์์ํฌ๋ ์๋๋๋ค. ํ๋ ์์ํฌ๋ ์ด๋ฌํ ๋๊ตฌ๋ค์ ์์ง๋ ฅ ์๋ ์ ์ฒด๋ก ์ฐ๊ฒฐํ๋ ๊ดํ๊ณผ ์คํฌ๋ฆฝํธ์ ์งํฉ์ ๋๋ค. ์ด๋ ์ฃผ๋ก npm ์คํฌ๋ฆฝํธ์ CI/CD ํ์ดํ๋ผ์ธ์ ํตํด ์กฐ์จ๋ฉ๋๋ค.
`npm ์คํฌ๋ฆฝํธ`์ ์ค์ฌ ์ญํ
package.json ํ์ผ์ scripts ์น์
์ ์ ์ฒด ์ํฌํ๋ก์ฐ์ ์ปค๋งจ๋ ์ผํฐ์
๋๋ค. ๋ชจ๋ ๊ฐ๋ฐ์๊ฐ ๊ณตํต ์์
์ ์ํํ ์ ์๋๋ก ๊ฐ๋จํ๊ณ ํต์ผ๋ ์ธํฐํ์ด์ค๋ฅผ ์ ๊ณตํฉ๋๋ค.
์ ๊ตฌ์กฐํ๋ scripts ์น์
์ ๋ค์๊ณผ ๊ฐ์ ์ ์์ต๋๋ค:
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"test": "vitest",
"test:e2e": "cypress run",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
"format": "prettier --write .",
"prepare": "husky install"
}
์ด ์ค์ ์ ํตํด ์ด๋ค ๊ฐ๋ฐ์๋ ํ๋ก์ ํธ์ ์ฐธ์ฌํ์ฌ ํน์ ๊ธฐ๋ณธ ๋ช
๋ น์ด โโ๋๋ ๊ตฌ์ฑ์ ์ ํ์ ์์ด ์ฆ์ ๊ฐ๋ฐ ์๋ฒ๋ฅผ ์์ํ๊ณ (npm run dev), ํ
์คํธ๋ฅผ ์คํํ๊ณ (npm test), ํ๋ก๋์
์ ์ํด ํ๋ก์ ํธ๋ฅผ ๋น๋(npm run build)ํ๋ ๋ฐฉ๋ฒ์ ์ ์ ์์ต๋๋ค.
์ง์์ ํตํฉ/์ง์์ ๋ฐฐํฌ(CI/CD)
CI/CD๋ ๋ฆด๋ฆฌ์ค ํ์ดํ๋ผ์ธ์ ์๋ํํ๋ ๊ดํ์ ๋๋ค. ์ด๋ ์ธํ๋ผ์ ์ต์ข ์ ์ด๋ฉด์๋ ๊ฐ์ฅ ์ค์ํ ๋ถ๋ถ์ผ๋ก, ๋ก์ปฌ์์ ํ๋ฆฝํ ํ์ง๊ณผ ์ผ๊ด์ฑ์ด ์ฝ๋๊ฐ ํ๋ก๋์ ์ ๋๋ฌํ๊ธฐ ์ ์ ๊ฐ์ ๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
GitHub Actions, GitLab CI/CD, ๋๋ Jenkins์ ๊ฐ์ ๋๊ตฌ์ ๊ตฌ์ฑ๋ ์ผ๋ฐ์ ์ธ CI ํ์ดํ๋ผ์ธ์ ๋ชจ๋ ํ ๋ฆฌํ์คํธ๋ ๋ฉ์ธ ๋ธ๋์น๋ก์ ๋ณํฉ ์ ๋ค์ ๋จ๊ณ๋ฅผ ์ํํฉ๋๋ค:
- ์ฝ๋ ์ฒดํฌ์์: ๋ฆฌํฌ์งํ ๋ฆฌ์์ ์ฝ๋์ ์ต์ ๋ฒ์ ์ ๊ฐ์ ธ์ต๋๋ค.
- ์์กด์ฑ ์ค์น:
npm ci(๋ฝ ํ์ผ์ ์ฌ์ฉํ๋ ์๋ํ๋ ํ๊ฒฝ์ ์ํ ๋ ๋น ๋ฅด๊ณ ์์ ์ ์ธ `install` ๋ฒ์ )๋ฅผ ์คํํฉ๋๋ค. - ๋ฆฐํธ ๋ฐ ํฌ๋งท ํ์ธ: ๋ฆฐํฐ์ ํฌ๋งทํฐ๋ฅผ ์คํํ์ฌ ์ฝ๋๊ฐ ์คํ์ผ ๊ฐ์ด๋๋ผ์ธ์ ์ค์ํ๋์ง ํ์ธํฉ๋๋ค.
- ํ ์คํธ ์คํ: ์ ์ฒด ํ ์คํธ ์ค์ํธ(๋จ์, ํตํฉ, ๋๋ก๋ E2E)๋ฅผ ์คํํฉ๋๋ค.
- ํ๋ก์ ํธ ๋น๋: ํ๋ก๋์
๋น๋ ๋ช
๋ น์ด(์:
npm run build)๋ฅผ ์คํํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ฑ๊ณต์ ์ผ๋ก ๋น๋๋๋์ง ํ์ธํฉ๋๋ค.
์ด ๋จ๊ณ ์ค ํ๋๋ผ๋ ์คํจํ๋ฉด ํ์ดํ๋ผ์ธ์ด ์คํจํ๊ณ ์ฝ๋๊ฐ ๋ณํฉ๋๋ ๊ฒ์ด ์ฐจ๋จ๋ฉ๋๋ค. ์ด๋ ๊ฐ๋ ฅํ ์์ ๋ง์ ์ ๊ณตํฉ๋๋ค. ์ฝ๋๊ฐ ๋ณํฉ๋๋ฉด, CD(์ง์์ ๋ฐฐํฌ) ํ์ดํ๋ผ์ธ์ด ๋น๋ ๊ฒฐ๊ณผ๋ฌผ์ ๊ฐ์ ธ์ ํธ์คํ ํ๊ฒฝ์ ์๋์ผ๋ก ๋ฐฐํฌํ ์ ์์ต๋๋ค.
ํ๋ก์ ํธ์ ์ ํฉํ ํ๋ ์์ํฌ ์ ํํ๊ธฐ
๋ชจ๋ ์ํฉ์ ๋ง๋ ๋จ์ผ ํด๊ฒฐ์ฑ ์ ์์ต๋๋ค. ๋๊ตฌ์ ์ ํ์ ํ๋ก์ ํธ์ ๊ท๋ชจ, ๋ณต์ก์ฑ, ๊ทธ๋ฆฌ๊ณ ํ์ ์ ๋ฌธ์ฑ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค.
- ์๋ก์ด ์ ํ๋ฆฌ์ผ์ด์ ๋ฐ ์คํํธ์ : Vite๋ก ์์ํ์ญ์์ค. ๋๋ผ์ด ์๋, ์ต์ํ์ ์ค์ , ๊ทธ๋ฆฌ๊ณ ํ๋ฅญํ ๊ฐ๋ฐ์ ๊ฒฝํ์ React, Vue, Svelte, ๋๋ ์์ JS๋ฅผ ์ฌ์ฉํ๋ ๋๋ถ๋ถ์ ํ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ต๊ณ ์ ์ ํ์ด ๋๊ฒ ํฉ๋๋ค.
- ๋๊ท๋ชจ ์ํฐํ๋ผ์ด์ฆ ์ ํ๋ฆฌ์ผ์ด์ : ๋งค์ฐ ๊ตฌ์ฒด์ ์ด๊ณ ๋ณต์กํ ๋น๋ ์๊ตฌ์ฌํญ(์: ๋ชจ๋ ํ๋๋ ์ด์ , ์ปค์คํ ๋ ๊ฑฐ์ ํตํฉ)์ด ์๋ค๋ฉด, Webpack์ ์ฑ์ํ ์ํ๊ณ์ ๋ฌดํํ ์ค์ ๊ฐ๋ฅ์ฑ์ด ์ฌ์ ํ ์ฌ๋ฐ๋ฅธ ์ ํ์ผ ์ ์์ต๋๋ค. ํ์ง๋ง ๋ง์ ๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ๋ ์ฑ๊ณต์ ์ผ๋ก Vite๋ก ๋ง์ด๊ทธ๋ ์ด์ ํ๊ณ ์์ต๋๋ค.
- ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐ ํจํค์ง: Rollup์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ฒ๋ค๋งํ๋ ๋ฐ ์ข ์ข ์ ํธ๋ฉ๋๋ค. ์๋ํ๋ฉด ํ๋ฅญํ ํธ๋ฆฌ ์์ดํน์ผ๋ก ์๊ณ ํจ์จ์ ์ธ ํจํค์ง๋ฅผ ๋ง๋๋ ๋ฐ ๋ฐ์ด๋๊ธฐ ๋๋ฌธ์ ๋๋ค. ํธ๋ฆฌํ๊ฒ๋, Vite๋ ํ๋ก๋์ ๋น๋์ Rollup์ ์ฌ์ฉํ๋ฏ๋ก ๋ ๊ฐ์ง ์ฅ์ ์ ๋ชจ๋ ์ป์ ์ ์์ต๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ์ธํ๋ผ์ ๋ฏธ๋
์๋ฐ์คํฌ๋ฆฝํธ ๋๊ตฌ์ ์ธ๊ณ๋ ๋์์์ด ์์ง์ด๊ณ ์์ต๋๋ค. ๋ช ๊ฐ์ง ์ฃผ์ ํธ๋ ๋๊ฐ ๋ฏธ๋๋ฅผ ํ์ฑํ๊ณ ์์ต๋๋ค:
- ์ฑ๋ฅ ์ฐ์ ๋๊ตฌ: Rust๋ Go์ ๊ฐ์ ๊ณ ์ฑ๋ฅ ์์คํ ์์ค ์ธ์ด๋ก ์์ฑ๋ ๋๊ตฌ๋ก์ ํฐ ์ ํ์ด ์งํ ์ค์ ๋๋ค. esbuild(๋ฒ๋ค๋ฌ), SWC(ํธ๋์คํ์ผ๋ฌ), ๊ทธ๋ฆฌ๊ณ Turbopack(Vercel์์ ๋ง๋ Webpack์ ํ์)๊ณผ ๊ฐ์ ๋๊ตฌ๋ค์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฐ์ ์ด์ ๋๊ตฌ๋ค์ ๋นํด ์์ฒญ๋ ์ฑ๋ฅ ํฅ์์ ์ ๊ณตํฉ๋๋ค.
- ํตํฉ๋ ํด์ฒด์ธ: Next.js, Nuxt, SvelteKit๊ณผ ๊ฐ์ ํ๋ ์์ํฌ๋ค์ ๋ ํตํฉ๋ ์ฌ์ธ์ ๊ฐ๋ฐ ๊ฒฝํ์ ์ ๊ณตํ๊ณ ์์ต๋๋ค. ์ด๋ค์ ๋น๋ ์์คํ , ๋ผ์ฐํ , ์๋ฒ์ฌ์ด๋ ๋ ๋๋ง์ด ๋ฏธ๋ฆฌ ๊ตฌ์ฑ๋์ด ์ ๊ณต๋์ด ๋ง์ ์ธํ๋ผ ์ค์ ์ ์ถ์ํํฉ๋๋ค.
- ๋ชจ๋ ธ๋ ํฌ ๊ด๋ฆฌ: ํ๋ก์ ํธ๊ฐ ์ฑ์ฅํจ์ ๋ฐ๋ผ ํ๋ค์ ์ข ์ข ๋ชจ๋ ธ๋ ํฌ ์ํคํ ์ฒ(๋จ์ผ ๋ฆฌํฌ์งํ ๋ฆฌ์ ์ฌ๋ฌ ํ๋ก์ ํธ)๋ฅผ ์ฑํํฉ๋๋ค. Nx๋ Turborepo์ ๊ฐ์ ๋๊ตฌ๋ค์ ์ด๋ฌํ ๋ณต์กํ ์ฝ๋๋ฒ ์ด์ค๋ฅผ ๊ด๋ฆฌํ๋ ๋ฐ ํ์์ ์ด ๋๊ณ ์์ผ๋ฉฐ, ์ง๋ฅ์ ์ธ ๋น๋ ์บ์ฑ๊ณผ ํ์คํฌ ์ค์ผ์คํธ๋ ์ด์ ์ ์ ๊ณตํฉ๋๋ค.
๊ฒฐ๋ก : ๋น์ฉ์ด ์๋ ํฌ์
๊ฒฌ๊ณ ํ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ ์ธํ๋ผ๋ฅผ ๊ตฌ์ถํ๋ ๊ฒ์ ์ ํ ์ฌํญ์ด ์๋๋๋ค. ์ด๋ ํ์ ์์ฐ์ฑ๊ณผ ์ ํ๋ฆฌ์ผ์ด์ ์ ํ์ง์ ๋ํ ๊ทผ๋ณธ์ ์ธ ํฌ์์ ๋๋ค. ์์กด์ฑ ๊ด๋ฆฌ, ์ฝ๋ ํ์ง ์๋ํ, ํจ์จ์ ์ธ ๋น๋ ํ๋ก์ธ์ค, ๊ทธ๋ฆฌ๊ณ ํฌ๊ด์ ์ธ ํ ์คํ ์ ๋ต์ ๊ธฐ๋ฅ ์์ ์ธ์์ง ์ ๊ตฌํ๋ ์ํฌํ๋ก์ฐ ํ๋ ์์ํฌ๋ ๋ช ๋ฒ์ด๊ณ ๊ทธ ์ด์์ ๊ฐ์น๋ฅผ ํฉ๋๋ค.
๋จ์กฐ๋ก์ด ์์ ์ ์๋ํํจ์ผ๋ก์จ, ๊ฐ๋ฐ์๋ค์ด ๊ฐ์ฅ ์ํ๋ ์ผ, ์ฆ ๋ณต์กํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ณ ๋ฐ์ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋๋ ๋ฐ ์ง์คํ ์ ์๋๋ก ํด๋ฐฉ์์ผ ์ค๋๋ค. ์ค๋ ๋น์ฅ ์ํฌํ๋ก์ฐ์ ํ ๋ถ๋ถ์ ์๋ํํ๋ ๊ฒ๋ถํฐ ์์ํ์ญ์์ค. ๋ฆฐํฐ๋ฅผ ๋์ ํ๊ฑฐ๋, ํ๋ฆฌ-์ปค๋ฐ ํ ์ ์ค์ ํ๊ฑฐ๋, ์์ ํ๋ก์ ํธ๋ฅผ ํ๋์ ์ธ ๋น๋ ๋๊ตฌ๋ก ๋ง์ด๊ทธ๋ ์ด์ ํด ๋ณด์ธ์. ์ฌ๋ฌ๋ถ์ด ๋ด๋๋ ๊ฐ ๋จ๊ณ๋ ํ์ ๋ชจ๋ ๊ตฌ์ฑ์์๊ฒ ๋ ์์ ์ ์ด๊ณ , ์ผ๊ด๋๋ฉฐ, ์ฆ๊ฑฐ์ด ๊ฐ๋ฐ ๊ณผ์ ์ผ๋ก ์ด์ด์ง ๊ฒ์ ๋๋ค.