
4์ ๋ง๋ถํฐ ์ฝ 2~3์ฃผ ์ ๋ ๊ธฐ๊ฐ ๋์ ๊ธฐ์กด Yarn + webpack 4 ๊ธฐ๋ฐ์ ํ๋ก ํธ์๋ ํ๊ฒฝ์ pnpm + Vite๋ก ์ ํํ๋ ์์ ์ ์ํํ์์ต๋๋ค. ํด๋น ์์ ์ ํ๋ฉด์ ์ฐพ์๋ ๋ด์ฉ๊ณผ ์ด์๋ค์ ์ ๋ฆฌํด ๋ณด๋ ค ํฉ๋๋ค.
Yarn์์ pnpm์ผ๋ก
- Yarn์ ์ฌ์ฉํ ๊ฒฝ์ฐ ํจํค์ง๊ฐ ์ค๋ณตํด์ ์ ์ฅ์ด ๋๊ณ , ์ค์
package.jsonํ์ผ์ ๋ช ์๋์ง ์์ ํจํค์ง๋ ์ฌ์ฉํ ์ ์์ด ๋ณ๊ฒฝ ๋น์์๋ ๋ฒ๊ทธ์ ์๋ ๋ฌธ์ ๊ฐ ์์๊ณ ํญ์ ์ํ์ฑ์ ๊ฐ์ง๊ณ ์๋ ์ํ์์ต๋๋ค. pnpm์ ํตํด ์ด๋ฌํ ์์กด์ฑ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์๊ณ , ์ฌ๋ณผ๋ฆญ ๋งํฌ(Symbolic link)๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ์ค์ ํจํค์ง๋ ๋ฌผ๋ฆฌ์ ์ผ๋ก 1๋ฒ๋ง ์ ์ฅ๋์ด ๋์คํฌ ์ฌ์ฉ์ ์ ์ฝํ ์ ์์ต๋๋ค. - pnpm์ ๋น ๋ฅธ ์๋๋ฅผ ์ฅ์ ์ผ๋ก ๋ด์ธ์ฐ๊ณ ์์ต๋๋ค.
ํ์ฌ ํ๋ก์ ํธ๋ ์๋๊ฐ์ ์ ์ฃผ๋ ๊ณผ์ ๋ก ์ผ๊ณ ์์ด ๋ชฉ์ ์ ๋ถํฉํ์ต๋๋ค.
webpack์์ Vite๋ก
- Vite๋ ๋ฒ๋ค๋ง๊ณผ ๊ฐ๋ฐ ํ๊ฒฝ์์ ๋์ ์๋๋ฅผ ์๋ํฉ๋๋ค. ์ค์ ๋ก ์ต๊ทผ์๋ Vite๋ก ์ธํด CRA์ ์ฌ์ฉ๋ฅ ์ด ์ค์ด๋ค๊ณ ์๋ค๊ณ ํฉ๋๋ค. ์ญ์ ์๋๋ผ๋ ์ฅ์ ์ด ํ๋ก์ ํธ ๋ชฉ์ ์ ๋ถํฉํ์ต๋๋ค.
- ์ฌ์ค Vite๋ ๋น๊ต์ ์ต๊ทผ์ ๋ฑ์ฅํ๊ธฐ ๋๋ฌธ์ ์์ง ๊ธฐ๋ฅ ๋ฉด์์ webpack์ ๋นํด ๋ถ์กฑํ๋ค๋ ํ๊ฐ๋ ์์ต๋๋ค. ํ์ง๋ง ๊ธฐ์กด ์ฝ๋๋ webpack 4 ๊ธฐ์ค์ผ๋ก ์ธํ ๋์ด ์์ด webpack 5๋ก ๋ฒ์ ์ ์ฌ๋ฆฌ๋ ๋ฐ์๋ ํฐ ๊ณต์๊ฐ ๋ค ๊ฒ์ผ๋ก ์์๋์๊ณ , ์ ์ ์ค์ ์ฌ์ฉํ๋ ํ๋ฌ๊ทธ์ธ๋ ์ ๋๋ก ํ์ ๋์ง ์์ ์ํฉ์ด์์ต๋๋ค. ๊ทธ๋์ ์ด ์ฐธ์ Vite๋ฅผ ์ ์ฉํด ๋ณด์๋ ์๊ตฌ์ฌํญ์ด ์์์ต๋๋ค.
์ ์ฉ ์ค ๋ง์ฃผ์น ์ด์
pnpm
- ๋ค์์ ํจํค์ง ๋ฌธ์ ๊ฐ ์์์ต๋๋ค.
- ์๋ก ๋ค๋ฅธ ํจํค์ง์์ ๋ค๋ฅธ ๋ฒ์ ์ ์์กด์ฑ์ ์ฌ์ฉํจ์ผ๋ก ์ธํด ์ถฉ๋์ด ์ผ์ด๋ ์ด๋ฅผ
resolutions์ต์ ์ผ๋ก ์กฐ์ ํ๋ ๊ณผ์ ์ด ์์์ต๋๋ค. - pnpm์์๋
package.jsonํ์ผ์ ๋ช ์๋์ง ์์ ํจํค์ง๋ฅผ ์ฝ๋์์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๊ธฐ์กด ์ฝ๋์์ ์ด๋ฐ ๊ฒฝ์ฐ๊ฐ ์์ด ํด๋น ์ฝ๋๋ฅผ ์กฐ์ ํ๊ฑฐ๋, ํจํค์ง๋ฅผ ๋ช ์์ ์ผ๋ก ์ถ๊ฐํด์ผ ํ์ต๋๋ค.
- ์๋ก ๋ค๋ฅธ ํจํค์ง์์ ๋ค๋ฅธ ๋ฒ์ ์ ์์กด์ฑ์ ์ฌ์ฉํจ์ผ๋ก ์ธํด ์ถฉ๋์ด ์ผ์ด๋ ์ด๋ฅผ
- ๊ทธ ์ธ์๋ Yarn์์๋ ๋ฐ์ํ์ง ์์๋๋ฐ pnpm์์ ๋ฐ์ํ๋ ๋ฐํ์ ์๋ฌ๊ฐ ์์ด ์ผ๋ถ ์ฝ๋๋ฅผ ์กฐ์ ํ์ต๋๋ค.
(Hoisting, ๊ธฐํ ๋ฌธ๋ฒ ๋ฑ)
Vite
- webpack ์ค์ ์ Vite์์๋ ์ ์ฉํด์ผ ํ๊ธฐ ๋๋ฌธ์ ์๋ง์ ์ํ์ฐฉ์ค๊ฐ ์์์ต๋๋ค.
- Vite๋ ํ๊ฒฝ๋ณ์๋ฅผ ํธ์ถํ๋ ๋ฐฉ์์ด ๋ค๋ฆ ๋๋ค.
- webpack์ ์๋ง์ ํ๋ฌ๊ทธ์ธ์ ๋ํ ๋์๋ ์ฐพ์์ผ ํ์ต๋๋ค. ์๋ฅผ ๋ค์ด webpack์
HtmlWebpackPlugin์ฒ๋ผ ๋ณ์๋ฅผ ์ฃผ์ ํ๊ณ ์ถ๋ค๋ฉดvite-plugin-htmlํ๋ฌ๊ทธ์ธ์ด ํ์ํฉ๋๋ค. - Vite๋ ๋ณ๋ ์ค์ ์ด ์์ผ๋ฉด
.jsxํ์ฅ์๋ฅผ ์ฌ์ฉํ์ง ์์ ์ ์๋ฌ๊ฐ ๋ฐ์ํ์ฌ ์ถ๊ฐ ์ค์ ์ด ํ์ํ์ต๋๋ค.
- ๊ทธ ์ธ์๋ Vite ํ ํ๋ฆฟ์ ๋ง์ถ์ด ์ผ๋ถ ํ์ผ์ ์กฐ์ ํ๊ณ , ์๋ฌ ํด๊ฒฐ์ ์ํด ๋ถํ์ ์ฝ๋๋ฅผ ์ ๊ฑฐํ์ต๋๋ค.
๋ฏธํด๊ฒฐ ์ด์๋ค
์ ๊ฐ ํ๋ก์ ํธ์์ ๊ณง ์ฒ ์ํด์ผ ํ๋ ์ํฉ์ด์๊ธฐ ๋๋ฌธ์ ์ฅ๊ธฐ์ ์ผ๋ก ํด๊ฒฐ์ ๊ฐ๋ฅํ์ง๋ง ๋๊ธด ๋ถ๋ถ๋ ์์์ต๋๋ค.
- HMR์ด ์๋ํ์ง ์๋ ๋ฌธ์ ๊ฐ ์์๋๋ฐ, ์กฐ์ฌํด ๋ณด๋ ์ปดํฌ๋ํธ๊ฐ ์๋ ๋ณ๋
export๋ฌธ์ ์ฌ์ฉํ๋ฉด HMR์ด ์๋ํ์ง ์๋ ๋ฌธ์ ๊ฐ ์์์ต๋๋ค. ์ด๋ ์๋๋ ์ฌํญ์ด๋ผ๊ณ ํฉ๋๋ค. (๋งํฌ)
์ฝ๋ ์ ์ฒด๋ฅผ ๊ฒํ ํ ๊ฐ์ ํด์ผ ํด๊ฒฐํ ์ ์๋ ๋ฌธ์ ์๊ธฐ ๋๋ฌธ์ ๋จ๊ธฐ๊ฐ ๋ด์๋ ํด๊ฒฐํ ์ ์์์ต๋๋ค. - ๊ทธ ์ธ์๋ ๋ฒ๋ค์ ๋๋๋ ๊ณผ์ ์ด๋, ํ์ผ๋ช ๊ท์น ๋ฑ ์ธ์ธํ ๋ถ๋ถ์ด ์๋ฃ๋์ง ์์์ต๋๋ค.
์ ์ฉ ๊ฒฐ๊ณผ
๊ฒฉ๋ฆฌ๋ ํ๊ฒฝ์์ ์งํํ ํ๋ก์ ํธ๋ผ์ ์ ํํ ๋ฐ์ดํฐ๋ฅผ ์ ์ํ ์๋ ์์ง๋ง, ๋น๋ ์๋์ ๋ก์ปฌ ๊ฐ๋ฐ ํ๊ฒฝ ์ง์ ์๋๊ฐ ๋น์ฝ์ ์ผ๋ก ๋นจ๋ผ์ก์ต๋๋ค. ์ค์ ๋ฐฐํฌ ํ ์๋๋ ๊ฝค ๊ฐ์ ๋์๊ณ , ๋ฒ๋ค ์ฌ์ด์ฆ๋ ์ค์ด๋ค๊ธด ํ๋๋ฐ ํฌ๊ฒ ์ฒด๊ฐ๋์ง๋ ์์์ต๋๋ค.
์ฌ์ค ์ด ํ๋ก ํธ์๋ ๋ฆฌ์์ค์ ์ฑ๋ฅ ๊ฐ์ ์ ์ํด์๋ ์ฝ๋ ๊ฐ์ ๊ณผ ์ ๋ฆฌ๊ฐ ๋ ๊ธํ ๋ฌธ์ ๋ผ๊ณ ์๊ฐํฉ๋๋ค๋ง, ๊ทธ๋ผ์๋ ์ผ์ ์์ค์ ์ฑ๋ฅ ํฅ์์ ์ฒด๊ฐํ ์ ์์์ต๋๋ค. ์์ผ๋ก๋ ๊ฐ์ธ ํ๋ก์ ํธ์์๋ ์ ์ฉํด ๋ณด์์ผ๊ฒ ์ต๋๋ค.
์ฐธ๊ณ ์๋ฃ
- pnpm ๊ณต์ ํ์ด์ง
- Vite ๊ณต์ ํ์ด์ง
- vitejs/vite ยท Discussion #5912
global is not defined์ค๋ฅ ํด๊ฒฐ์ ์ํด ์ฐธ๊ณ ํ ๋งํฌ์ ๋๋ค. - react-virtualized ยท Issue #1632
ํด๋น ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ ์ ์๋ฌ ํด๊ฒฐ์ ์ํด ์ฐธ๊ณ ํ ๋งํฌ์ ๋๋ค.