SOSOLOG

๐Ÿ‘‹@SO_YOUNG
๐Ÿ“ ์†Œ์†Œํ•˜๊ฒŒ ๋„์ ์ด๋Š” ๊ฐœ๋ฐœ๋กœ๊ทธ

GitHubTwitter

Rollup.js ํ™˜๊ฒฝ์„ค์ •

์ด ๊ธ€์—์„œ๋Š” ๋””์ž์ธ ์‹œ์Šคํ…œ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ๊ตฌ์ถ•ํ•˜๋Š” ๋‹จ๊ณ„์—์„œ rollup.js๊ณผ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์ •์— ๊ด€ํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•˜๋Š” ๊ธ€์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํ™˜๊ฒฝ์„ค์ •์— ๋Œ€ํ•œ ํŠœํ† ๋ฆฌ์–ผ์€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ํ•„์š”ํ•œ ๋ชจ๋“  ๋‚ด์šฉ์„ ๋‹ค๋ฃจ์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ ๊ตฌ์„ฑํ•œ ํ™˜๊ฒฝ ๊ตฌ์ถ• ๋‚ด์šฉ๋งŒ ๋ณด๊ณ  ์‹ถ์œผ์‹œ๋‹ค๋ฉด @soyoung/design-system-config ์—์„œ ๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Table โ€ฆ

Deploy 2020

์–ด๊น€์—†์ด ํšŒ๊ณ  ์‹œ์ฆŒ์ด ๋Œ์•„์™”๋‹ค. ์ž‘๋…„์—๋„ โ€˜์‹œ๊ฐ„์ด ์ฐธ ๋น ๋ฅด๊ฒŒ ์ง€๋‚˜๊ฐ”๊ตฌ๋‚˜โ€™๋ผ๊ณ  ์ƒ๊ฐํ•œ ๊ฒƒ ๊ฐ™์€๋ฐ, ์˜ฌํ•ด๊ฐ€ ๋” ๊ทธ๋Ÿฐ ๊ฒƒ ๊ฐ™๋‹ค. ๋˜๋Œ์•„๋ณด๊ณ , ๊ธฐ๋กํ•˜๊ณ , ์–ธ์  ๊ฐ€ ์ด๋ง˜๋•Œ์˜ ๋‚˜๋ฅผ ๋‹ค์‹œ ๋ณด๊ธฐ ์œ„ํ•ด ํšŒ๊ณ  ๊ธ€์„ ์ž‘์„ฑํ•œ๋‹ค. ๋‚˜์˜ 2020๋…„์€ ์–ด๋• ์„๊นŒ? ์•„๋Š” ๊ฒƒ๋ณด๋‹ค ๋ชจ๋ฅด๋Š” ๊ฒƒ์ด ๋งŽ์•„์กŒ๋‹ค. Banksalad Product Language(์ดํ•˜ BPL, ์„ค๋ช…: Banksaladโ€ฆ

[์„œํ‰] ํŒŒ์›Œํ’€ - ๋„ทํ”Œ๋ฆญ์Šค ์„ฑ์žฅ์˜ ๋น„๊ฒฐ

โ€˜์ž์œจ๊ณผ ์ฑ…์ž„โ€™์ด๋ผ๋Š” ๋‹จ์–ด๊ฐ€ ์กฐ์ง๋ฌธํ™”์— ์–ด๋–ค ์˜ํ–ฅ์„ ์ฃผ๋Š”์ง€, ์ข‹์€ ์กฐ์ง๋ฌธํ™”๋ž€ ๋ฌด์—‡์ด๊ณ  ์–ด๋–ค ์˜ํ–ฅ์„ ์ฃผ๋Š”์ง€์— ๋Œ€ํ•ด ๋‚˜๋งŒ์˜ ๋Œ€๋‹ต์ด ์—†์—ˆ๋‹ค. ์ด ๋‘ ๊ฐ€์ง€ ๋‹จ์–ด๋ฅผ ๊ฐ€์žฅ ์ค‘์š”ํ•˜๊ฒŒ ์—ฌ๊ธด๋‹ค๋Š” ๋„ทํ”Œ๋ฆญ์Šค์˜ ์ด์•ผ๊ธฐ๊ฐ€ ๊ถ๊ธˆํ–ˆ๊ณ , ์—ฐํœด ์ฒซ๋‚  ์ฒซ ์žฅ์„ ํŽด์„œ ๋‹จ์ˆจ์— ๋‹ค ์ฝ์—ˆ๋‹ค. ์ฑ…์„ ๋ฎ๋Š” ์ˆœ๊ฐ„ ๋‚˜์˜ ์ฒซ ๋ฐ˜์‘์€ โ€˜๋Œ€๋‹จํ•˜๋‹คโ€™์˜€๋‹ค. ๋„ทํ”Œ๋ฆญ์Šค์˜ ๋” ๊นŠ์€ ๊ณ ๋ฏผ๊ณผ ์‹œํ–‰์ฐฉ์˜ค๋“ค์ด ๊ถ๊ธˆํ•ด์กŒ์ง€๋งŒ,โ€ฆ

๋น„์ „๊ณต์ž ๊ฐœ๋ฐœ์ž๋„ ๋‹ค๋ฅด์ง€ ์•Š์•„์š”

โš ๏ธ ์ด ๊ธ€์€ ์ฒ ์ €ํžˆ ๊ฐœ์ธ์  ๊ด€์ ์—์„œ ์ž‘์„ฑํ–ˆ์œผ๋ฉฐ, ํŠน์ • ๋‹จ์ฒด๋‚˜ ๊ฐœ์ธ์„ ํƒ€๊นƒ์œผ๋กœ ํ•˜๋Š” ๊ธ€์ด ์•„๋‹™๋‹ˆ๋‹ค. ์งง์€ ๊ฒฝํ—˜์—์„œ ์ ์€ ๊ธ€์ด๊ธฐ ๋•Œ๋ฌธ์— ๋ณด์‹œ๋Š” ๋ถ„์— ๋”ฐ๋ผ ๋ถˆํŽธํ•˜์‹  ๋ถ€๋ถ„์ด ์žˆ๋”๋ผ๋„ ๋„ˆ๋ฅธ ์–‘ํ•ด ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ๋“ค์–ด๊ฐ€๋ฉฐ ์ด ๊ธ€์€ ๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ•  ๋•Œ โ€˜๋น„์ „๊ณต์ž์—ฌ์„œโ€™ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์„ ๋ง‰์—ฐํ•œ ๋‘๋ ค์›€์ด๋‚˜ ์˜คํ•ด์— ๊ด€ํ•œ ๊ฐœ์ธ์  ์ƒ๊ฐ์„ ์ ์€ ๊ธ€์ด๋‹ค. ๋ณธ๋ฌธ์—์„œ ์–ธ๊ธ‰ํ•˜๊ฒŒ ๋  CS์ง€โ€ฆ

You don't know polyfill

Babel์€ ES6+ ์ฝ”๋“œ๋ฅผ ES5๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๋„๊ตฌ์ด๋‹ค. ์ด ๋ฌธ์žฅ๋งŒ ์ฝ์œผ๋ฉด Babel์ด polyfill๊ณผ ๋™์ผํ•œ ๊ฐœ๋…์ด๋ผ๊ณ  ์˜คํ•ดํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, Babel์ด ๊ณง polyfill์„ ์˜๋ฏธํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. ES5์— ์กด์žฌํ•˜์ง€ ์•Š๋Š” ES6์˜ ๋ฉ”์„œ๋“œ๋‚˜ ์ƒ์„ฑ์ž๋Š” ์ง€์›ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด , , ๋“ฑ์€ ES5๋กœ ๋Œ€์ฒดํ•  Syntax๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ๋ณ€ํ™˜๋˜์ง€ ์•Šโ€ฆ

Webpack 5, ๋ฌด์—‡์ด ๋‹ฌ๋ผ์กŒ์„๊นŒ?

์ด ๊ธ€์€ webpack5 Release ๊ธ€์„ ์ •๋ฆฌํ•œ ๊ธ€์ด๋ฉฐ, ์›๊ธ€์˜ ๋ช‡ ๊ฐ€์ง€ ๋‚ด์šฉ์€ ํฌํ•จ๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ๋ณ€๊ฒฝ์‚ฌํ•ญ์„ ์•Œ๊ณ  ์‹ถ์œผ์‹  ๋ถ„์€ ์›๊ธ€์˜ ๋‚ด์šฉ์„ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”. v4์—์„œ v5 migration์— ๋Œ€ํ•œ ๊ฐ€์ด๋“œ๋Š” ์ด ๊ธ€์— ์ •๋ฆฌ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. Breaking Changes์˜ ์˜๋ฏธ webpack ๋‚ด๋ถ€ ์•„ํ‚คํ…์ฒ˜๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๊ณ  ํ–ฅํ›„ ์ถ”๊ฐ€๋  ๊ธฐ๋Šฅ์„ ์œ„ํ•œ ๊ธฐ๋ฐ˜์„โ€ฆ

node modules splitting

web application์„ ๋งŒ๋“ค ๋•Œ ์—ฌ๋Ÿฌ ๊ธฐ๋Šฅ์„ ๋น ๋ฅด๊ณ  ์‰ฝ๊ฒŒ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด ์—ฌ๋Ÿฌ library๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ด library๋ฅผ ์–ด๋–ป๊ฒŒ buildํ•˜๋Š”์ง€์— ๋”ฐ๋ผ ์ดˆ๊ธฐ ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์†๋„๊ฐ€ ํฌ๊ฒŒ ์ขŒ์šฐ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ์˜ splitChunk ์˜ต์…˜์„ ์ˆ˜์ •ํ•˜์—ฌ node module์„ ์—ฌ๋Ÿฌ ๊ฐœ์˜ bundle file๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์†Œ๊ฐœํ•ฉโ€ฆ

ํŒ€์— ์ƒˆ๋กœ์šด ๋„๊ตฌ๋ฅผ ๋„์ž…ํ•˜๊ณ  ์‹ถ๋‹ค.

๊ฐœ๋ฐœ ์ƒํƒœ๊ณ„๋Š” ๋น ๋ฅด๊ฒŒ ๋ณ€ํ™”ํ•˜๊ณ  ์žˆ๊ณ , 10๋…„ ์ด์ƒ โ€˜ํŠธ๋ Œ๋“œโ€™๋กœ ์ž๋ฆฌ ์žก๋˜ ๋„๊ตฌ์™€ ๋ฐฉ์‹์ด ํ•œ์ˆœ๊ฐ„์— ๋ ˆ๊ฑฐ์‹œ๊ฐ€ ๋˜๊ธฐ๋„ ํ•œ๋‹ค. ๊ฐœ๋ฐœ์ž๋Š” ๋Š˜ ์ƒˆ๋กœ์šด ๊ฒƒ์— ๋Œ๋ฆฌ๊ธฐ ๋งˆ๋ จ์ด๊ณ  ํšŒ์‚ฌ์—์„œ ์ƒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ธฐ์กด๊ณผ ๋‹ค๋ฅธ ๋ฐฉ์‹์œผ๋กœ ์ง„ํ–‰ํ•ด๋ณด๊ณ  ์‹ถ๋‹ค๋Š” ์ƒ๊ฐ์€ ๋ˆ„๊ตฌ๋‚˜ ํ•œ ๋ฒˆ์ฏค ๊ฐ€์ ธ๋ดค์„ ๊ฒƒ์ด๋‹ค. ์ƒˆ๋กœ์šด ๊ฒƒ์— ๋Œ€ํ•œ ๋„์ž…์€ ํŒ€์›๋“ค๊ณผ ํ˜‘์˜๊ฐ€ ํ•„์š”ํ•˜๊ณ , ์ด ๊ณผ์ •์ด ์ˆœ์กฐ๋กญ๊ฒŒ ์ง„ํ–‰๋  ์ˆ˜๋„ ์žˆ๊ณ  ๊ธดโ€ฆ

Monorepo ํ™˜๊ฒฝ ๊ตฌ์ถ•ํ•˜๊ธฐ(w. lerna + rollup + typescript)

๋“ค์–ด๊ฐ€๊ธฐ ์ „์— ์ด ๊ธ€์€ Lerna๋ฅผ ์‚ฌ์šฉํ•œ Monorepo์—์„œ package ํ™˜๊ฒฝ ๊ตฌ์ถ• ๋ฐฉ๋ฒ•์„ ์†Œ๊ฐœํ•˜๋Š” ๊ธ€์ž…๋‹ˆ๋‹ค. ๋“ค์–ด๊ฐ€๊ธฐ์— ์•ž์„œ Monorepo์˜ ์žฅ์ ์— ๋Œ€ํ•ด ๊ฐ„๋‹จํžˆ ์†Œ๊ฐœํ•˜๋ฉด, ํ”„๋กœ์ ํŠธ๋งˆ๋‹ค ๋ฐ˜๋ณต๋˜๋Š” ์„ค์ •์„ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๊ณ  ๋ชจ๋“ˆํ™”๋œ ํŒจํ‚ค์ง€๋ฅผ ์„œ๋กœ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Monorepo๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋Š” ๋Œ€ํ‘œ์ ์ธ ํ”„๋กœ์ ํŠธ์ธ babelํŒจํ‚ค์ง€ ์ค‘ babel-extโ€ฆ

ServiceWorker ์ด๋ชจ์ €๋ชจ ์ด์•ผ๊ธฐ

ServiceWorker๋Š” ์›น ์„œ๋น„์Šค์—์„œ๋„ ๋ฐฑ๊ทธ๋ผ์šด๋“œ ๋™๊ธฐํ™”, ํ‘ธ์‹œ ์•Œ๋ฆผ ๋“ฑ์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ์ง€์›ํ•ด์ฃผ๋Š” ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ์„œ๋น„์Šค์›Œ์ปค์— ๋Œ€ํ•œ ์†Œ๊ฐœ์™€ ๊ฐ„๋‹จํ•˜๊ฒŒ CRA๊ธฐ๋ฐ˜์—์„œ ์–ด๋–ป๊ฒŒ cache์„ค์ •์„ ์ ์šฉํ•˜๋Š”์ง€ ์‚ดํŽด๋ด…๋‹ˆ๋‹ค. ์„œ๋น„์Šค์›Œ์ปค๋ž€? ์„œ๋น„์Šค์›Œ์ปค๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ์‹คํ–‰ํ•˜๋Š” ์Šคํฌ๋ฆฝํŠธ๋กœ, ์›นํŽ˜์ด์ง€์™€๋Š” ๋ณ„๊ฐœ๋กœ ์ž‘๋™ํ•˜๋ฉฐ ์›นํŽ˜์ด์ง€ ๋˜๋Š” ์‚ฌ์šฉ์ž์˜ ์ธํ„ฐ๋ž™์…˜์ด โ€ฆ