์ด ๊ธ์์๋ ๋์์ธ ์์คํ ๊ฐ๋ฐ ํ๊ฒฝ์ ๊ตฌ์ถํ๋ ๋จ๊ณ์์ rollup.js๊ณผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์ ์ ๊ดํ ๋ด์ฉ์ ์ ๋ฆฌํ๋ ๊ธ์ ๋๋ค. ํ์ง๋ง ํ๊ฒฝ์ค์ ์ ๋ํ ํํ ๋ฆฌ์ผ์ ์๋๊ธฐ ๋๋ฌธ์ ํ์ํ ๋ชจ๋ ๋ด์ฉ์ ๋ค๋ฃจ์ง๋ ์์ต๋๋ค. ์ด ๊ธ์์ ๊ตฌ์ฑํ ํ๊ฒฝ ๊ตฌ์ถ ๋ด์ฉ๋ง ๋ณด๊ณ ์ถ์ผ์๋ค๋ฉด @soyoung/design-system-config ์์ ๋ณด์ค ์ ์์ต๋๋ค. Table โฆ
์ด๊น์์ด ํ๊ณ ์์ฆ์ด ๋์์๋ค. ์๋ ์๋ โ์๊ฐ์ด ์ฐธ ๋น ๋ฅด๊ฒ ์ง๋๊ฐ๊ตฌ๋โ๋ผ๊ณ ์๊ฐํ ๊ฒ ๊ฐ์๋ฐ, ์ฌํด๊ฐ ๋ ๊ทธ๋ฐ ๊ฒ ๊ฐ๋ค. ๋๋์๋ณด๊ณ , ๊ธฐ๋กํ๊ณ , ์ธ์ ๊ฐ ์ด๋ง๋์ ๋๋ฅผ ๋ค์ ๋ณด๊ธฐ ์ํด ํ๊ณ ๊ธ์ ์์ฑํ๋ค. ๋์ 2020๋ ์ ์ด๋ ์๊น? ์๋ ๊ฒ๋ณด๋ค ๋ชจ๋ฅด๋ ๊ฒ์ด ๋ง์์ก๋ค. Banksalad Product Language(์ดํ BPL, ์ค๋ช : Banksaladโฆ
โ์์จ๊ณผ ์ฑ ์โ์ด๋ผ๋ ๋จ์ด๊ฐ ์กฐ์ง๋ฌธํ์ ์ด๋ค ์ํฅ์ ์ฃผ๋์ง, ์ข์ ์กฐ์ง๋ฌธํ๋ ๋ฌด์์ด๊ณ ์ด๋ค ์ํฅ์ ์ฃผ๋์ง์ ๋ํด ๋๋ง์ ๋๋ต์ด ์์๋ค. ์ด ๋ ๊ฐ์ง ๋จ์ด๋ฅผ ๊ฐ์ฅ ์ค์ํ๊ฒ ์ฌ๊ธด๋ค๋ ๋ทํ๋ฆญ์ค์ ์ด์ผ๊ธฐ๊ฐ ๊ถ๊ธํ๊ณ , ์ฐํด ์ฒซ๋ ์ฒซ ์ฅ์ ํด์ ๋จ์จ์ ๋ค ์ฝ์๋ค. ์ฑ ์ ๋ฎ๋ ์๊ฐ ๋์ ์ฒซ ๋ฐ์์ โ๋๋จํ๋คโ์๋ค. ๋ทํ๋ฆญ์ค์ ๋ ๊น์ ๊ณ ๋ฏผ๊ณผ ์ํ์ฐฉ์ค๋ค์ด ๊ถ๊ธํด์ก์ง๋ง,โฆ
โ ๏ธ ์ด ๊ธ์ ์ฒ ์ ํ ๊ฐ์ธ์ ๊ด์ ์์ ์์ฑํ์ผ๋ฉฐ, ํน์ ๋จ์ฒด๋ ๊ฐ์ธ์ ํ๊น์ผ๋ก ํ๋ ๊ธ์ด ์๋๋๋ค. ์งง์ ๊ฒฝํ์์ ์ ์ ๊ธ์ด๊ธฐ ๋๋ฌธ์ ๋ณด์๋ ๋ถ์ ๋ฐ๋ผ ๋ถํธํ์ ๋ถ๋ถ์ด ์๋๋ผ๋ ๋๋ฅธ ์ํด ๋ถํ๋๋ฆฝ๋๋ค. ๋ค์ด๊ฐ๋ฉฐ ์ด ๊ธ์ ๊ฐ๋ฐ์ ์์ํ ๋ โ๋น์ ๊ณต์์ฌ์โ ๊ฐ์ง ์ ์์ ๋ง์ฐํ ๋๋ ค์์ด๋ ์คํด์ ๊ดํ ๊ฐ์ธ์ ์๊ฐ์ ์ ์ ๊ธ์ด๋ค. ๋ณธ๋ฌธ์์ ์ธ๊ธํ๊ฒ ๋ CS์งโฆ
Babel์ ES6+ ์ฝ๋๋ฅผ ES5๋ก ๋ณํํ๋ ๋๊ตฌ์ด๋ค. ์ด ๋ฌธ์ฅ๋ง ์ฝ์ผ๋ฉด Babel์ด polyfill๊ณผ ๋์ผํ ๊ฐ๋ ์ด๋ผ๊ณ ์คํดํ ์ ์์ง๋ง, Babel์ด ๊ณง polyfill์ ์๋ฏธํ๋ ๊ฒ์ ์๋๋ค. ES5์ ์กด์ฌํ์ง ์๋ ES6์ ๋ฉ์๋๋ ์์ฑ์๋ ์ง์ํ์ง ์๊ธฐ ๋๋ฌธ์ด๋ค. ์๋ฅผ ๋ค์ด , , ๋ฑ์ ES5๋ก ๋์ฒดํ Syntax๊ฐ ์๊ธฐ ๋๋ฌธ์ ๋ณํ๋์ง ์โฆ
์ด ๊ธ์ webpack5 Release ๊ธ์ ์ ๋ฆฌํ ๊ธ์ด๋ฉฐ, ์๊ธ์ ๋ช ๊ฐ์ง ๋ด์ฉ์ ํฌํจ๋์ง ์์์ต๋๋ค. ๋ชจ๋ ๋ณ๊ฒฝ์ฌํญ์ ์๊ณ ์ถ์ผ์ ๋ถ์ ์๊ธ์ ๋ด์ฉ์ ์ฐธ๊ณ ํด์ฃผ์ธ์. v4์์ v5 migration์ ๋ํ ๊ฐ์ด๋๋ ์ด ๊ธ์ ์ ๋ฆฌ๋์ด ์์ต๋๋ค. Breaking Changes์ ์๋ฏธ webpack ๋ด๋ถ ์ํคํ ์ฒ๋ฅผ ์ ๋ฐ์ดํธํ๊ณ ํฅํ ์ถ๊ฐ๋ ๊ธฐ๋ฅ์ ์ํ ๊ธฐ๋ฐ์โฆ
web application์ ๋ง๋ค ๋ ์ฌ๋ฌ ๊ธฐ๋ฅ์ ๋น ๋ฅด๊ณ ์ฝ๊ฒ ์ง์ํ๊ธฐ ์ํด ์ฌ๋ฌ library๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ด library๋ฅผ ์ด๋ป๊ฒ buildํ๋์ง์ ๋ฐ๋ผ ์ด๊ธฐ ํ์ด์ง ๋ก๋ฉ ์๋๊ฐ ํฌ๊ฒ ์ข์ฐ๋ ์ ์์ต๋๋ค. ์ด ๊ธ์์๋ ์ splitChunk ์ต์ ์ ์์ ํ์ฌ node module์ ์ฌ๋ฌ ๊ฐ์ bundle file๋ก ๋๋ ์ ์๋ ๋ฐฉ๋ฒ์ ๋ํด ์๊ฐํฉโฆ
๊ฐ๋ฐ ์ํ๊ณ๋ ๋น ๋ฅด๊ฒ ๋ณํํ๊ณ ์๊ณ , 10๋ ์ด์ โํธ๋ ๋โ๋ก ์๋ฆฌ ์ก๋ ๋๊ตฌ์ ๋ฐฉ์์ด ํ์๊ฐ์ ๋ ๊ฑฐ์๊ฐ ๋๊ธฐ๋ ํ๋ค. ๊ฐ๋ฐ์๋ ๋ ์๋ก์ด ๊ฒ์ ๋๋ฆฌ๊ธฐ ๋ง๋ จ์ด๊ณ ํ์ฌ์์ ์ ํ๋ก์ ํธ๋ฅผ ๊ธฐ์กด๊ณผ ๋ค๋ฅธ ๋ฐฉ์์ผ๋ก ์งํํด๋ณด๊ณ ์ถ๋ค๋ ์๊ฐ์ ๋๊ตฌ๋ ํ ๋ฒ์ฏค ๊ฐ์ ธ๋ดค์ ๊ฒ์ด๋ค. ์๋ก์ด ๊ฒ์ ๋ํ ๋์ ์ ํ์๋ค๊ณผ ํ์๊ฐ ํ์ํ๊ณ , ์ด ๊ณผ์ ์ด ์์กฐ๋กญ๊ฒ ์งํ๋ ์๋ ์๊ณ ๊ธดโฆ
๋ค์ด๊ฐ๊ธฐ ์ ์ ์ด ๊ธ์ Lerna๋ฅผ ์ฌ์ฉํ Monorepo์์ package ํ๊ฒฝ ๊ตฌ์ถ ๋ฐฉ๋ฒ์ ์๊ฐํ๋ ๊ธ์ ๋๋ค. ๋ค์ด๊ฐ๊ธฐ์ ์์ Monorepo์ ์ฅ์ ์ ๋ํด ๊ฐ๋จํ ์๊ฐํ๋ฉด, ํ๋ก์ ํธ๋ง๋ค ๋ฐ๋ณต๋๋ ์ค์ ์ ๊ณต์ ํ ์ ์๊ณ ๋ชจ๋ํ๋ ํจํค์ง๋ฅผ ์๋ก ์ฐธ์กฐํ ์ ์์ต๋๋ค. Monorepo๋ก ๊ตฌ์ฑ๋์ด ์๋ ๋ํ์ ์ธ ํ๋ก์ ํธ์ธ babelํจํค์ง ์ค babel-extโฆ
ServiceWorker๋ ์น ์๋น์ค์์๋ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ, ํธ์ ์๋ฆผ ๋ฑ์ด ๊ฐ๋ฅํ๋๋ก ์ง์ํด์ฃผ๋ ๋๊ตฌ์ ๋๋ค. ์ด ๊ธ์์๋ ์๋น์ค์์ปค์ ๋ํ ์๊ฐ์ ๊ฐ๋จํ๊ฒ CRA๊ธฐ๋ฐ์์ ์ด๋ป๊ฒ cache์ค์ ์ ์ ์ฉํ๋์ง ์ดํด๋ด ๋๋ค. ์๋น์ค์์ปค๋? ์๋น์ค์์ปค๋ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์คํํ๋ ์คํฌ๋ฆฝํธ๋ก, ์นํ์ด์ง์๋ ๋ณ๊ฐ๋ก ์๋ํ๋ฉฐ ์นํ์ด์ง ๋๋ ์ฌ์ฉ์์ ์ธํฐ๋์ ์ด โฆ