SOSOLOG

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

GitHubTwitter

immutable.wedding ๊ฐœ๋ฐœํ›„๊ธฐ

2021๋…„ 10์›” 23์ผ ๊ฒฐํ˜ผ์„ ์•ž๋‘๊ณ  ๊ฐœ์ธ์ ์œผ๋กœ ์‚ฌ์šฉํ•  ๋ชจ๋ฐ”์ผ ์ฒญ์ฒฉ์žฅ๊ณผ ํ•จ๊ป˜ immutable.wedding์ด๋ผ๋Š” ๋ชจ๋ฐ”์ผ ์ฒญ์ฒฉ์žฅ ํ…œํ”Œ๋ฆฟ์„ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. COVID-19์ƒํ™ฉ์ด ์•…ํ™”๋˜๋ฉด์„œ ๊ฒฐํ˜ผ์‹์€ ์ทจ์†Œํ–ˆ์ง€๋งŒ, ์ฒญ์ฒฉ์žฅ ๊ฐœ๋ฐœ ํ›„๊ธฐ๋ฅผ ์ ์œผ๋ฉฐ ์•„์‰ฌ์šด ๋งˆ์Œ์„ ๋‹ฌ๋ž˜๋ด…๋‹ˆ๋‹ค. ๐Ÿ”— GitHub Repository ๐Ÿ ๋‚˜์˜ immutable.wedding ์ง„ํ–‰๋ฐฉ์‹ ๊ฐ™์ด ์‚ฌโ€ฆ

CSS-in-JS, ๋ฌด์—‡์ด ๋‹ค๋ฅธ๊ฐ€์š”?

Table of Contents CSS in JS? Critical CSS์™€ CSS-in-JS Performance Atomic CSS ๋งˆ๋ฌด๋ฆฌ References CSS in JS? CSS-in-JS๋Š” ๋‹จ์–ด ๊ทธ๋Œ€๋กœ JavaScript์ฝ”๋“œ์—์„œ CSS๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ์‹์„ ๋งํ•ฉ๋‹ˆ๋‹ค. 2014๋…„ Facebook ๊ฐœ๋ฐœ์ž์ธ Christopher Chedeau akaโ€ฆ

์ž…๋ ฅ์„ ๋‹ค๋ฃจ๋Š” ๋‹ค์–‘ํ•œ ๋ฐฉ๋ฒ•

์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋ณต์žกํ•œ ๋ฌธ์ œ ์ค‘ ํ•˜๋‚˜๋Š” ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„ ์ฒ˜๋ฆฌํ•˜๋Š” Form์ž…๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” Form์„ ๋‹ค๋ฃจ๋Š” ์—ฌ๋Ÿฌ ๋ฐฉ๋ฒ•๊ณผ ๋Œ€ํ‘œ์  form ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘ ํ•˜๋‚˜์ธ react-hook-form์— ๋Œ€ํ•ด ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. ๊ฐ„๋‹จํ•œ Form Form์—์„œ ๋– ์˜ฌ๋ฆด ์ˆ˜ ์žˆ๋Š” ๋‹จ์ˆœํ•œ ์˜ˆ์‹œ๋Š” Email๊ณผ Password๋ฅผ ๋ฐ›๋Š” Login Form์ด๋‹ค. ์ด ๊ฒฝ์šฐ โ€ฆ

์ด์ง.log('SoYoung')

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

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 ๋‚ด๋ถ€ ์•„ํ‚คํ…์ฒ˜๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๊ณ  ํ–ฅํ›„ ์ถ”๊ฐ€๋  ๊ธฐ๋Šฅ์„ ์œ„ํ•œ ๊ธฐ๋ฐ˜์„โ€ฆ