SOSOLOG

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

GitHubTwitter

Scoped Context

React Context API๋Š” React ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ ๋‚ด์˜ ์ „์—ญ์ (global)์ธ ๋ฐ์ดํ„ฐ๋ฅผ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. Provider๊ฐ€ ์„ ์–ธ๋œ ์ปดํฌ๋„ŒํŠธ ๊ธฐ์ค€์œผ๋กœ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” ํ•ด๋‹น Context์˜ ๊ฐ’์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. Provider ํ•˜์œ„์ปดํฌ๋„ŒํŠธ์—์„œ Context๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์€, โ€œConsumer๋Š” ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด Provider๊ธฐ์ค€์œผโ€ฆ

Select ์ปดํฌ๋„ŒํŠธ

Intro ์–ด๋–ค ๋””์ž์ธ ์‹œ์Šคํ…œ์—์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ๊ณตํ•œ๋‹ค๋ฉด, ์–ด๋–ค ๊ธฐ๋Šฅ๋“ค์„ ๊ธฐ๋Œ€ํ•˜์‹œ๋‚˜์š”? ์ด ๊ธ€์—์„œ๋Š” Select์ปดํฌ๋„ŒํŠธ์—๊ฒŒ ๋ฐ”๋ผ๋Š” ๊ธฐ๋Šฅ์„ ์ค‘์‹ฌ์œผ๋กœ ๊ตฌํ˜„ ๋ฐฉ๋ฒ•๊ณผ ์˜ˆ์ œ ์ฝ”๋“œ๋ฅผ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค. โš ๏ธย ์ด ๊ธ€์—์„œ ์†Œ๊ฐœ๋˜๋Š” ์ฝ”๋“œ๋Š” ๋ชจ๋‘ ์ˆ˜๋„์ฝ”๋“œ(pseudo code)์ž…๋‹ˆ๋‹ค. ๋™์ž‘์—ฌ๋ถ€๋ณด๋‹ค๋Š” ์†Œ๊ฐœํ•˜๊ณ ์žํ•˜๋Š” ๋งฅ๋ฝ์„ ์ค‘์‹ฌ์œผ๋กœ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. Table of Contents Whโ€ฆ

๊ทธ ๋งŽ๋˜ import React from โ€˜reactโ€™๋Š” ์–ด๋””๋กœ ๊ฐ”์„๊นŒ

์ด ๊ธ€์—์„œ๋Š” React 17๋ฆด๋ฆฌ์ฆˆ์— ํฌํ•จ๋˜์—ˆ๋˜ JSX Transform์˜ RFC๋ฌธ์„œ๋ฅผ ์‚ดํŽด๋ณด๋ฉฐ ์ด ๋ณ€๊ฒฝ์‚ฌํ•ญ์ด ์–ด๋–ค ์˜๋ฏธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”์ง€ ์ •๋ฆฌํ•ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค. ์ค‘๊ฐ„์ค‘๊ฐ„ ๋‚ด์šฉ์— ๋Œ€ํ•œ ์ฒจ์–ธ๊ณผ ์•ฝ๊ฐ„์˜ ์ถ”์ธก์„ ๋ง๋ถ™์˜€์Šต๋‹ˆ๋‹ค. ๊ด€๋ จํ•˜์—ฌ ํ”ผ๋“œ๋ฐฑ์ด ์žˆ์œผ์‹œ๋‹ค๋ฉด ๋Œ“๊ธ€๋กœ ๋‚จ๊ฒจ ์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐœ๋‹จ React17์€ 2020๋…„ 10์›” 20์ผ์— ๋ฆด๋ฆฌ์ฆˆ๋˜์—ˆ๋‹ค. ์ด ๊ธ€์ด ๋ฆด๋ฆฌโ€ฆ

Deploy 2021

์ž‘๋…„์— ์ผ๋˜ ์ด์•ผ๊ธฐ ์˜ฌํ•ด๋ฅผ ๋Œ์•„๋ณด๋‹ˆ ์ž‘๋…„ ํšŒ๊ณ ๋ฅผ ์“ธ ๋•Œ ์ƒ๊ฐํ–ˆ๋˜ ๋ฐฉํ–ฅ๊ณผ๋Š” ๊ฝค ๋‹ค๋ฅธ ๋ฐฉํ–ฅ์œผ๋กœ ๊ฑธ์—ˆ๋‹ค. ์ž‘๋…„์— ์ƒ๊ฐํ–ˆ๋˜ ํฐ ๋ชฉํ‘œ ์ค‘ ํ•˜๋‚˜๋Š” Infra๊ด€๋ จ ๊ณต๋ถ€์˜€๋Š”๋ฐ ์˜ฌํ•ด ์ƒˆ๋กœ์šด ๊ณณ์œผ๋กœ ์ด์งํ•˜๊ณ  ์ •์‹ ์—†์ด ๋ณด๋‚ด๋‹ค ๋ณด๋‹ˆ ํšŒ๊ณ ๋ฅผ ์“ธ ์ฆ˜์—์•ผ ์ด ๋‹จ์–ด๋ฅผ ๋‹ค์‹œ ๋– ์˜ฌ๋ฆฌ๋Š” ๊ฑธ ๋ณด๋ฉด ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์šฐ์„ ์ˆœ์œ„ ๋’ค์ชฝ์—์„œ ์˜ค๋ž˜ ๋ฐฉ์น˜ํ•ด๋’€๋‹ค๋Š” ๋œป์ด๊ฒ ๋‹ค. ์ƒˆ๋กœ์šด ๊ณณ์€ ๋‹น์—ฐํžˆ ์‹œ์Šคํ…œ์ด ๋‹ค๋ฅด๊ณ ,โ€ฆ

Tree Shaking๊ณผ Module System

๋“ค์–ด๊ฐ€๋ฉฐ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ง์ ‘ ์ž‘์„ฑํ•œ ์ฝ”๋“œ, ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋“ฑ ๋‹ค์–‘ํ•œ ์ฝ”๋“œ์กฐ๊ฐ๋“ค๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋ณต์žกํ•ด์งˆ์ˆ˜๋ก ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ์— ์‹ ๊ฒฝ์„ ์“ฐ๊ฒŒ ๋˜๋Š”๋ฐ์š”, ์ด๋•Œ ํ•„์š”ํ•œ ์ฝ”๋“œ๋งŒ ๋‚จ๊ธฐ๊ธฐ ์œ„ํ•œ ์ž‘์—…, ํ”ํžˆ Tree Shaking์ด๋ผ๊ณ  ๋ถˆ๋ฆฌ๋Š” ๊ณผ์ •์ด ์ˆ˜๋ฐ˜๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” Tree Shaking์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ Tree Shakโ€ฆ

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 โ€ฆ