SOSOLOG

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

GitHubTwitter

Deploy 2023

12์›” ํšŒ๊ณ  ์‹œ์ฆŒ์ด๋‹ค. ์˜ฌ ํ•ด๋Š” ๊ฐœ์ธ์ ์œผ๋กœ๋„, ์ผ์ ์œผ๋กœ๋„ ์ˆ˜ํ‰์ ์œผ๋กœ ๋„“์–ด์ง„ ํ•œ ํ•ด์˜€๋‹ค. ๊ธฐ์–ต์— ๋‚จ๋Š” ๊ฒฝํ—˜์„ ์ค‘์‹ฌ์œผ๋กœ ํšŒ๊ณ ๋ฅผ ์ž‘์„ฑํ–ˆ๋‹ค. ์ƒˆ๋กœ์šด ํŒ€, ์ƒˆ๋กœ์šด ๋””์ž์ธ ์‹œ์Šคํ…œ ์˜ฌ ํ•ด 3์›” ํ† ์Šค์˜ PC Design Platform Team์— ํ•ฉ๋ฅ˜ํ–ˆ๋‹ค. โ€˜ํ† ์Šค์— PC์ œํ’ˆ์ด ์žˆ์–ด?โ€™๋ผ๊ณ  ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ํ† ์Šค ์ปค๋ฎค๋‹ˆํ‹ฐ(๊ณ„์—ด์‚ฌ)์—๋Š” ๋Œ€๊ณ ๊ฐ ์ œํ’ˆ๋ถ€ํ„ฐ ์–ด๋“œ๋ฏผ๊นŒ์ง€ PC์ œํ’ˆ์ดโ€ฆ

๋ Œ๋”๋ง ์„ฑ๋Šฅ ๊ฐœ์„ (2) โ€” ํ•ฉ์„ฑ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‚ฌ์šฉ

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

๋ Œ๋”๋ง ์„ฑ๋Šฅ ๊ฐœ์„ (1) โ€” ๋ Œ๋”๋ง ๊ณผ์ • ์ดํ•ดํ•˜๊ธฐ

๋“ค์–ด๊ฐ€๋ฉฐ ์ตœ๊ทผ ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ์˜ ๋ Œ๋”๋ง ์„ฑ๋Šฅ์„ ๊ฐœ์„ ํ•˜๋ฉฐ ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ๊ณผ์ •์— ๋Œ€ํ•ด ์ •๋ฆฌํ•˜๊ณ  ์ •ํ™•ํžˆ ๋ฌด์—‡์ด ์„ฑ๋Šฅ ์ €ํ•˜์˜ ์›์ธ์ธ์ง€, ์–ด๋–ป๊ฒŒ ๊ฐœ์„ ๋  ์ˆ˜ ์žˆ์—ˆ๋Š”์ง€ ์ •๋ฆฌํ•ด๋ดค๋‹ค. ๋ Œ๋”๋ง ํŒŒ์ดํ”„๋ผ์ธ ๋ Œ๋”๋ง ์„ฑ๋Šฅ์„ ๊ฐœ์„ ํ•˜๋ ค๋ฉด ๋จผ์ € ๋ Œ๋”๋ง ๊ณผ์ •๊ณผ ์ด์— ๊ด€์—ฌํ•˜๋Š” ์š”์†Œ๋ฅผ ๋Œ€ํ•ด ์•Œ์•„์•ผ ํ•œ๋‹ค. ์ด ๊ธ€์—์„œ ๋‹ค๋ฃฐ ๋‚ด์šฉ์€ Blink์—”์ง„ ๊ธฐ์ค€์ด๋ฉฐ, RenderingNG ๊ธ€๊ณผ 2020๋…„โ€ฆ

Deploy 2022

๋งค๋…„ ํšŒ๊ณ  ๊ธ€์—์„œ โ€˜์˜ฌํ•ด๋Š” ํŠน๋ณ„ํ–ˆ๋‹ค.โ€™๋ผ๊ณ  ์ ๋Š” ๊ฒƒ ๊ฐ™์ง€๋งŒ, ์ด๋ฒˆ ํ•ด๋Š” ์ข€ ๋” ๊ทธ๋ ‡๋‹ค. ์ผ(work)๊ณผ ์ปค๋ฆฌ์–ด, ๊ฐœ์ธ์˜ ์‚ถ์—์„œ ํฌ๊ณ  ์ž‘์€ ๋ณ€ํ™”๊ฐ€ ์žˆ์—ˆ๋‹ค. ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ๋ณ€ํ™” ์ค‘ ๊ธฐ์–ต์— ๋‚จ๋Š” ๋ช‡ ๊ฐ€์ง€ ํ‚ค์›Œ๋“œ๋“ค๋กœ ํšŒ๊ณ ๋ฅผ ์ž‘์„ฑํ–ˆ๋‹ค. flex 2.0๊ณผ ํ˜‘์—…์— ๋Œ€ํ•œ ๊ณ ๋ฏผ ํ˜„์žฌ flex ์ œํ’ˆ์€ ํŒ€์— ํ•ฉ๋ฅ˜ํ–ˆ๋˜ ์‹œ์ ๊ณผ ๋‹ค๋ฅด๋‹ค. 2021๋…„ 8์›”๋ถ€ํ„ฐ โ€˜2.0 ํ”„๋กœ์ ํŠธโ€™๋ผ๋Š” ์ดโ€ฆ

Design System Decision Record

์ด ๊ธ€์€ FEConf2022 ๋””์ž์ธ ์‹œ์Šคํ…œ, ํ˜•ํƒœ๋ฅผ ๋„˜์–ด์„œ ๋ฐœํ‘œ์—์„œ ๋‹ค๋ฃจ์ง€ ์•Š์€ linear๋ผ๋Š” Design System์— ๋Œ€ํ•œ ๊ณ ๋ฏผ๊ณผ ๊ฒฐ์ •์— ๋Œ€ํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค. Table of Contents Principle Problem from Principle Interface Compound Component Headless ์˜ˆ์‹œ 1. Trigger ์˜ˆ์‹œ 2. ๋‹คโ€ฆ

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