Skip to main content

7๊ฐ€์ง€ ํ”Œ๋žซํผ ์„œ๋ฒ„๋กœ ํ”„๋ก ํŠธ์—”๋“œ ๋ฒ„ํ”„ ๋งˆ๋ฒ• ๊ฑธ๊ธฐ

FEConf2024๋…„ 10์›” 15์ผAbout 3 minNode.jsNext.jsArticle(s)blogyozm.wishket.comnodenodejsnode-jsnextnextjsnext-js

7๊ฐ€์ง€ ํ”Œ๋žซํผ ์„œ๋ฒ„๋กœ ํ”„๋ก ํŠธ์—”๋“œ ๋ฒ„ํ”„ ๋งˆ๋ฒ• ๊ฑธ๊ธฐ ๊ด€๋ จ

Next.js > Article(s)

Article(s)

7๊ฐ€์ง€ ํ”Œ๋žซํผ ์„œ๋ฒ„๋กœ ํ”„๋ก ํŠธ์—”๋“œ ๋ฒ„ํ”„ ๋งˆ๋ฒ• ๊ฑธ๊ธฐ (1)
ํ† ์Šค ์ฝ”์–ด์—๋Š” 86๋ช…์˜ FE ๊ฐœ๋ฐœ์ž๋“ค์ด ํ•จ๊ป˜ ์žˆ๊ณ  250๊ฐœ์˜ ์„œ๋น„์Šค๋ฅผ ์šด์˜ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ œ๊ฐ€ ์†ํ•œ ํ”Œ๋žซํผ ํŒ€์—์„œ๋Š” 86๋ช…์˜ FE ๊ฐœ๋ฐœ์ž๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋…ธ๋ฆฌํฌ๋ฅผ ๊ด€๋ฆฌํ•˜๋ฉฐ 250๊ฐœ ์„œ๋น„์Šค์˜ ๋ฐฐํฌ๋ถ€ํ„ฐ ๋ชจ๋‹ˆํ„ฐ๋ง๊นŒ์ง€ ๊ฐ™์ด ๊ด€๋ฆฌํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฐ ์ธํ”„๋ผ ๊ด€๋ฆฌ๋ฅผ ์ข€ ๋” ์‰ฝ๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ IaC๋ฅผ ํ†ตํ•ด ํ˜•์ƒ ๊ด€๋ฆฌ๋ฅผ ์ž๋™ํ™”ํ•˜๊ณ  ์žˆ๊ณ , ๋‹ค์–‘ํ•œ ๊ฐœ๋ฐœ์ž๋“ค์ด ๊ธฐ์—ฌํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ† ์Šค ์ฝ”์–ด ํŒ€์˜ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ด๋Ÿฌํ•œ ๋‹ค์–‘ํ•œ ์—…๋ฌด๋“ค์— ์ง‘์ค‘ํ•˜๋Š” ๋ชฉ์ ์ด ๋ฌด์—‡์ผ๊นŒ์š”? ๊ฐ€์žฅ ํฐ ๋ชฉ์ ์€ ํ† ์Šค์˜ ํ”„๋ก ํŠธ์—”๋“œ UX/DX๋ฅผ ์„ธ๊ณ„ ์ตœ๊ฐ•์œผ๋กœ ๋งŒ๋“ค๊ธฐ ์œ„ํ•จ์ž…๋‹ˆ๋‹ค. ํ† ์Šค์˜ ํ”„๋ก ํŠธ์—”๋“œ ํ”Œ๋žซํผ์ด ์„ธ๊ณ„ ์ตœ๊ฐ•์˜ ํ”„๋ก ํŠธ์—”๋“œ๊ฐ€ ๋˜๊ธฐ ์œ„ํ•ด ์–ด๋–ค ๋…ธ๋ ฅ์„ ํ•˜๊ณ  ์žˆ๋Š”์ง€ ํ•˜๋‚˜์”ฉ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

FEConf2024[1]์—์„œ ๋ฐœํ‘œํ•œ <7๊ฐ€์ง€ ํ”Œ๋žซํผ ์„œ๋ฒ„๋กœ ํ”„๋ก ํŠธ์—”๋“œ ๋ฒ„ํ”„ ๋งˆ๋ฒ• ๊ฑธ๊ธฐ>๋ฅผ ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค. ๋ฐœํ‘œ ๋‚ด์šฉ์„ 2ํšŒ๋กœ ๋‚˜๋ˆ„์–ด ๋ฐœํ–‰ํ•ฉ๋‹ˆ๋‹ค. 1ํšŒ์—์„œ๋Š” ํ”„๋ก ํŠธ์—”๋“œ์˜ ๋ผ์ดํ”„ ์‚ฌ์ดํด์— ๋Œ€ํ•ด ๊ฐ„๋‹จํžˆ ์•Œ์•„๋ณด๊ณ  4๊ฐ€์ง€ ๋ฒ„ํ”„ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. 2ํšŒ์—์„œ๋Š” ๋‚˜๋จธ์ง€ 3๊ฐ€์ง€ ๋ฒ„ํ”„์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ณ , ์‹œํ–‰์ฐฉ์˜ค๋กœ ๋ฐฐ์šด ๊ฒƒ๋“ค์— ๋Œ€ํ•ด ์•Œ์•„๋ด…๋‹ˆ๋‹ค. ๋ณธ๋ฌธ์— ์‚ฝ์ž…๋œ ์ด๋ฏธ์ง€์˜ ์ถœ์ฒ˜๋Š” ๋ชจ๋‘ ์ด ์ฝ˜ํ…์ธ ์™€ ๊ฐ™์€ ์ œ๋ชฉ์˜ ๋ฐœํ‘œ ์ž๋ฃŒ๋กœ, ๋”ฐ๋กœ ์ถœ์ฒ˜๋ฅผ ํ‘œ๊ธฐํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”. ์ €๋Š” ํ† ์Šค ์ฝ”์–ด FE ํ”Œ๋žซํผ ํŒ€์—์„œ Frontend Ops ์œ ๋‹›์„ ๋ฆฌ๋”ฉํ•˜๊ณ  ์žˆ๋Š” ์ •์„ํ˜ธ๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ โ€˜7๊ฐ€์ง€ ํ”Œ๋žซํผ ์„œ๋ฒ„๋กœ ํ”„๋ก ํŠธ์—”๋“œ ๋ฒ„ํ”„ ๋งˆ๋ฒ• ๊ฑธ๊ธฐ'์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด ๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ €๋Š” ํŠนํžˆ ํ”„๋ก ํŠธ์—”๋“œ์™€ ์ธํ”„๋ผ์— ๊ด€์‹ฌ์ด ๋งŽ์•„์„œ ์ด์™€ ๊ด€๋ จ๋œ ์ž‘์—…๋“ค์„ ์ฃผ๋„์ ์œผ๋กœ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ตœ๊ทผ์—๋Š” ํ”„๋ก ํŠธ์—”๋“œ ์„œ๋น„์Šค์˜ ์•ˆ์ •์„ฑ์„ ์œ„ํ•ด ์ข‹์€ ํ™˜๊ฒฝ์„ ๊ฐ€๊พธ๋Š” ๊ฒƒ์— ์ง‘์ค‘ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฒˆ ๊ธ€์—์„œ ๋‹ค๋ฃจ๋Š” ๊ฒƒ๋“ค์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ตฌ์ฒด์ ์ธ ์ฝ”๋“œ ์กฐ๊ฐ์ด๋‚˜ ๊ตฌํ˜„ ๋ฐฉ๋ฒ•์€ ๋‹ค๋ฃจ์ง€ ์•Š์œผ๋‹ˆ ์ฐธ๊ณ ํ•ด ์ฃผ์„ธ์š”.

  1. ํ’€๊ณ ์ž ํ–ˆ๋˜ ๋ฌธ์ œ๋“ค
  2. ์•„์ด๋””์–ด์™€ ์ž„ํŒฉํŠธ
  3. ๊ฒช์—ˆ๋˜ ์‹œํ–‰์ฐฉ์˜ค์™€ ์šด์˜ ์ด์Šˆ

ํ† ์Šค ์ฝ”์–ด์˜ ํ”„๋ก ํŠธ์—”๋“œ

ํ† ์Šค ์ฝ”์–ด์—๋Š” 86๋ช…์˜ FE ๊ฐœ๋ฐœ์ž๋“ค์ด ํ•จ๊ป˜ ์žˆ๊ณ  250๊ฐœ์˜ ์„œ๋น„์Šค๋ฅผ ์šด์˜ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ œ๊ฐ€ ์†ํ•œ ํ”Œ๋žซํผ ํŒ€์—์„œ๋Š” 86๋ช…์˜ FE ๊ฐœ๋ฐœ์ž๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋…ธ๋ฆฌํฌ๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ  ์žˆ๊ณ  ํ•˜๋ฃจ ํ‰๊ท  ๋จธ์ง€ ๋ฆฌํ€˜์ŠคํŠธ ์š”์ฒญ์€ 50๊ฐœ ์ •๋„ ๋ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ 250๊ฐœ์˜ ์„œ๋น„์Šค์˜ ๋ฐฐํฌ๋ถ€ํ„ฐ ๋ชจ๋‹ˆํ„ฐ๋ง๊นŒ์ง€ ๊ฐ™์ด ๊ด€๋ฆฌํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋˜, ์‚ฌ๋‚ด์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ณตํ†ต ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์•ฝ 220๊ฐœ ์ •๋„์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฐ ์ธํ”„๋ผ ๊ด€๋ฆฌ๋ฅผ ์ข€ ๋” ์‰ฝ๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ IaC๋ฅผ ํ†ตํ•ด ํ˜•์ƒ ๊ด€๋ฆฌ๋ฅผ ์ž๋™ํ™”ํ•˜๊ณ  ์žˆ๊ณ , ๋‹ค์–‘ํ•œ ๊ฐœ๋ฐœ์ž๋“ค์ด ๊ธฐ์—ฌํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

ํ† ์Šค ์ฝ”์–ด ํŒ€์˜ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ด๋Ÿฌํ•œ ๋‹ค์–‘ํ•œ ์—…๋ฌด๋“ค์— ์ง‘์ค‘ํ•˜๋Š” ๋ชฉ์ ์ด ๋ฌด์—‡์ผ๊นŒ์š”?

๊ฐ€์žฅ ํฐ ๋ชฉ์ ์€ ํ† ์Šค์˜ ํ”„๋ก ํŠธ์—”๋“œ UX/DX๋ฅผ ์„ธ๊ณ„ ์ตœ๊ฐ•์œผ๋กœ ๋งŒ๋“ค๊ธฐ ์œ„ํ•จ์ž…๋‹ˆ๋‹ค. ํ† ์Šค์˜ ํ”„๋ก ํŠธ์—”๋“œ ํ”Œ๋žซํผ์ด ์„ธ๊ณ„ ์ตœ๊ฐ•์˜ ํ”„๋ก ํŠธ์—”๋“œ๊ฐ€ ๋˜๊ธฐ ์œ„ํ•ด ์–ด๋–ค ๋…ธ๋ ฅ์„ ํ•˜๊ณ  ์žˆ๋Š”์ง€ ํ•˜๋‚˜์”ฉ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

ํ”„๋ก ํŠธ์—”๋“œ ์„œ๋น„์Šค ๋ผ์ดํ”„ ์‚ฌ์ดํด

์ด๋Ÿฌํ•œ ๋…ธ๋ ฅ์„ ์•Œ์•„๋ณด๊ธฐ ์ „์— ์•„๋ž˜ ๊ทธ๋ฆผ์„ ํ†ตํ•ด ํ”„๋ก ํŠธ์—”๋“œ ์„œ๋น„์Šค๊ฐ€ ์–ด๋–ป๊ฒŒ ๋งŒ๋“ค์–ด์ง€๊ณ  ์œ ์ €์—๊ฒŒ ์–ด๋–ป๊ฒŒ ์ „๋‹ฌ๋˜๋Š”์ง€ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

๋จผ์ € ํ† ์Šค ์ฝ”์–ด์˜ UX ํŒ€์ด ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ๋งŒ๋“ค์–ด ์ฃผ๊ณ , ๋””์ž์ด๋„ˆ ๋ถ„๋“ค์ด ๋””์ž์ธ ํˆด์„ ํ™œ์šฉํ•ด ๋””์ž์ธ์„ ํ•ฉ๋‹ˆ๋‹ค. FE ๊ฐœ๋ฐœ์ž๋“ค์€ ์ด๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์›น์„œ๋น„์Šค๋ฅผ ๋ฐฐํฌํ•ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๋ฐฐํฌ๋œ ์„œ๋น„์Šค๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ์•ˆ์— ์žˆ๋Š” ์›น๋ทฐ๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์ž์—๊ฒŒ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

๊ทธ๋Ÿผ ํ† ์Šค ์ฝ”์–ด์—์„œ ์„ธ๊ณ„ ์ตœ๊ฐ•์˜ ํ”„๋ก ํŠธ์—”๋“œ ํ”Œ๋žซํผ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์–ด๋–ค ๋…ธ๋ ฅ์„ ํ•˜๊ณ  ์žˆ์„๊นŒ์š”? ์œ„ ๊ทธ๋ฆผ์—์„œ ํŒŒ๋ž€์ƒ‰์œผ๋กœ ์น ํ•œ ๋ถ€๋ถ„์ด ๋ฐ”๋กœ ์ด๋ฒˆ ๊ธ€์˜ ์ฃผ์ œ์ด์ž ํ† ์Šค ์ฝ”์–ด์˜ 7๊ฐ€์ง€ ๋งˆ๋ฒ•์ž…๋‹ˆ๋‹ค. ์ด์ œ๋ถ€ํ„ฐ 7๊ฐ€์ง€ ๋งˆ๋ฒ•์— ๋Œ€ํ•ด ํ•˜๋‚˜์”ฉ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.


์ด๋ฏธ์ง€ ์ตœ์ ํ™” ๋งˆ๋ฒ•

Next.js ์ด๋ฏธ์ง€ ์ปดํฌ๋„ŒํŠธ

์ฒซ ๋ฒˆ์งธ ์ฃผ์ œ๋Š” ์ด๋ฏธ์ง€ ์ตœ์ ํ™” ๋งˆ๋ฒ•์ž…๋‹ˆ๋‹ค. Next.js๋ฅผ ํ™œ์šฉํ•ด ๊ฐœ๋ฐœํ•ด ๋ณด์‹  ๋ถ„์ด๋ผ๋ฉด Next.js์˜ ์ด๋ฏธ์ง€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•ด ๋ดค์„๊ฑฐ๋ผ ์ƒ๊ฐ๋ฉ๋‹ˆ๋‹ค. Next.js์˜ ์ด๋ฏธ์ง€ ์ปดํฌ๋„ŒํŠธ๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

  1. ๊ธฐ๊ธฐ์— ์ ์ ˆํ•œ ๋””๋ฐ”์ด์Šค ๋ณ„ ์‚ฌ์ด์ฆˆ๋กœ ์ž๋™ ๋ณ€ํ™˜
  2. ์ด๋ฏธ์ง€ ๋กœ๋”ฉ ์‹œ Layout Shift ๋ฐฉ์ง€
  3. ๊ณ ํ•ด์ƒ๋„ ์ด๋ฏธ์ง€๋ฅผ ์ € ํ•ด์ƒ๋„๋กœ ์šฐ์„  ํ‘œ์‹œ(Blur-up)
  4. ์™ธ๋ถ€ ์ด๋ฏธ์ง€ ์‚ฌ์šฉ ๊ฐ€๋Šฅ(e.g. CDN)

3๋…„ ์ „ ํ† ์Šค๋ฅผ ๋Œ์•„๋ณด๋ฉด, ๋Œ€๋ถ€๋ถ„์˜ ์„œ๋น„์Šค๊ฐ€ Next.js์˜ SSG(Static Site Generation)๋ฅผ ํ†ตํ•ด ๋งŒ๋“ค์–ด์ง„ CSR(Client Side Rendering) ์„œ๋น„์Šค์˜€์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ Next.js์˜ ์ด๋ฏธ์ง€ ์ปดํฌ๋„ŒํŠธ๋Š” SSR ์„œ๋ฒ„์˜ ์˜จ๋””๋งจ๋“œ ๊ธฐ๋Šฅ์ด๊ธฐ ๋•Œ๋ฌธ์— SSG๋กœ ๋งŒ๋“ค์–ด์ง„ ํŽ˜์ด์ง€์—์„œ๋Š” ์‚ฌ์šฉ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์•„์‰ฌ์›€์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

์ฆ‰, Next.js์˜ ์ด๋ฏธ์ง€ ์˜ตํ‹ฐ๋งˆ์ด์ œ์ด์…˜ ๋””ํดํŠธ ๋กœ๋”๋Š” ์˜ค์ง Next.js์—์„œ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ , Next.js์—์„œ๋„ SSG๋‚˜ CSR์—์„œ๋Š” ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

Next.js ์ด๋ฏธ์ง€ ์ปดํฌ๋„ŒํŠธ ์‚ฌ์šฉ ๋ฌธ์ œ ํ•ด๊ฒฐํ•˜๊ธฐ

ํ† ์Šค ํŒ€์—์„œ๋Š” Next.js์˜ ๋””ํดํŠธ ๋กœ๋”๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  Next.js์™€ ๋…๋ฆฝ๋œ ์ด๋ฏธ์ง€ ์ตœ์ ํ™” API๋ฅผ ์ด์šฉํ•ด ์•ž์„œ ๋งํ•œ ๊ฒƒ์„ ํ•ด๊ฒฐํ•ด ๋ณด๊ณ ์ž ํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์‰ฝ๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ AWS์˜ Lambda@Edge๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์•ž๋‹จ์—๋Š” CDN์„ ๋ฐฐ์น˜ํ•˜๊ณ  ๋’ท๋‹จ์—๋Š” ์ด๋ฏธ์ง€ ์ตœ์ ํ™” ๋กœ์ง์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋žŒ๋‹ค๋ฅผ ๋ฐฐ์น˜ํ•˜์—ฌ ์„œ๋น„์Šค์— ์ด๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๊ตฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋žŒ๋‹ค๋ฅผ ์šด์˜ํ•˜๋ฉด์„œ ๊ฐ์ข… ์‹œํ–‰์ฐฉ์˜ค๋ฅผ ๊ฒช์—ˆ์Šต๋‹ˆ๋‹ค.

์„œ๋น„์Šค๋ฅผ ์ด์ค‘ํ™”ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋‹ค๋ฅธ ์ œ๊ณต ์—…์ฒด์˜ ์„œ๋ฒ„๋ฆฌ์Šค ํŽ‘์…˜ ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๋„ ๋ฐœ์ƒํ•˜๊ณ , ๊ธฐ์กด ์†Œ์Šค์ฝ”๋“œ๊ฐ€ ์˜ค๋ž˜๋˜์—ˆ๋‹ค๋ฉด Node.js์˜ ๋ฒ„์ „์„ ๊ฐ•์ œ๋กœ ์—…๋ฐ์ดํŠธํ•ด์•ผ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ๋Š” ๋ฆฌ์Šคํฌ๋„ ์กด์žฌํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํŠธ๋ž˜ํ”ฝ์ด ๊ฐ‘์ž๊ธฐ ๋ชฐ๋ฆฌ๊ฒŒ ๋˜๋ฉด ๋žŒ๋‹ค ์„œ๋น„์Šค ๋น„์šฉ์ด ๊ธฐํ•˜๊ธ‰์ˆ˜์ ์œผ๋กœ ์ปค์งˆ ์ˆ˜๋„ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

์ €๋Š” ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ์ด๋ฏธ ํ† ์Šค ์„œ๋ฒ„ ํ”Œ๋žซํผ์—์„œ ์ž˜ ํ•ด๊ฒฐํ•ด๋‚˜๊ฐ€๊ณ  ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ด๋ฏธ ์ž˜ ๋งŒ๋“ค์–ด์ง„ ํ† ์Šค ์„œ๋ฒ„ ํ”Œ๋žซํผ ์ธํ”„๋ผ์— ์„œ๋ฒ„๋ฅผ ๋„์›Œ๋ณด๊ณ  ์‹ถ๋‹ค๋Š” ์ƒ๊ฐ์„ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด DC1 / DC2 ์ด์ค‘ํ™” ๋ฐ ์ ์ง„์ ์ธ ๋ฐฐํฌ๋„ ์ง€์›์ด ๋˜๊ณ , ๊ทธ๋ผํŒŒ๋‚˜๋ฅผ ํ†ตํ•œ ์„œ๋ฒ„ ์ง€ํ‘œ ๋ชจ๋‹ˆํ„ฐ๋ง์€ ๋ฌผ๋ก  ์‹ค์‹œ๊ฐ„ ๋กœ๊น…๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

์ด ์‹œ๋„๋ฅผ ํ†ตํ•ด ์•ˆ์ •์ ์œผ๋กœ IDC ์ธํ”„๋ผ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์•ž์„œ ๋งํ•œ ์žฅ์ ๋“ค์„ ๋ชจ๋‘ ์–ป์„ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์‹œ ๋งํ•ด ์ด๋ฏธ์ง€ ์ตœ์ ํ™” ๋งˆ๋ฒ•์„ ํ†ตํ•ด ๋ชจ๋“  ํ™˜๊ฒฝ์—์„œ ์ด๋ฏธ์ง€ ์ตœ์ ํ™”๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ๋Š” 250๊ฐœ์˜ ์„œ๋น„์Šค์—์„œ ์ตœ์ ํ™”๋œ ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. SSR์€ ๋ฌผ๋ก  SSG ๋ฐ CSR, ๊ทธ๋ฆฌ๊ณ  Next.js๊ฐ€ ์•„๋‹Œ ํ™˜๊ฒฝ์—์„œ๋„ ์ด๋ฏธ์ง€ ์ตœ์ ํ™” ๋งˆ๋ฒ•์„ ์‚ฌ์šฉ ์ค‘์ž…๋‹ˆ๋‹ค.


๋น„๋””์˜ค ์ธ๋„ค์ผ ๋งˆ๋ฒ•

Video ํƒœ๊ทธ์˜ ์ธ๋„ค์ผ ์†์„ฑ

๋‹ค์Œ์œผ๋กœ ๋น„๋””์˜ค ์ธ๋„ค์ผ ๋งˆ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. video ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์•„๋ž˜์™€ ๊ฐ™์ด poster ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋น„๋””์˜ค๊ฐ€ ๋กœ๋”ฉ๋  ๋•Œ ๋ณด์—ฌ์ค„ ์ธ๋„ค์ผ ์ด๋ฏธ์ง€๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

์ธ๋„ค์ผ ์†์„ฑ ์„ค์ •์„ ์œ„ํ•œ ๋ฌธ์ œ ํ•ด๊ฒฐํ•˜๊ธฐ

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

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

๋™์˜์ƒ์—์„œ ์ธ๋„ค์ผ ์ด๋ฏธ์ง€๋ฅผ ์บก์ณํ•˜์—ฌ ์„œ๋ฒ„์— ์—…๋กœ๋“œํ•˜๊ณ , ์—…๋กœ๋“œ๋œ ์ด๋ฏธ์ง€๋ฅผ poster ์†์„ฑ์— ๋งค๋ฒˆ ์ง€์ •ํ•ด์•ผ ํ•˜๋Š” ๋น„ํšจ์œจ์ ์ธ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ๋‘ ๋ฒˆ์งธ ๋งˆ๋ฒ•์ด์—ˆ์Šต๋‹ˆ๋‹ค.


ํด๋ฆฌํ•„ ๋งˆ๋ฒ•

์„ธ ๋ฒˆ์งธ๋กœ ์†Œ๊ฐœ๋“œ๋ฆด ๋งˆ๋ฒ•์€ ํด๋ฆฌํ•„ ๋งˆ๋ฒ•์ž…๋‹ˆ๋‹ค. ์ธํ„ฐ๋„ท ํ™˜๊ฒฝ์—๋Š” ๋‹ค์–‘ํ•œ ๋ธŒ๋ผ์šฐ์ €๋“ค์ด ์กด์žฌํ•˜๊ณ , ํŠน์ • ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ์ง€์›๋˜์ง€ ์•Š๋Š” ๊ตฌํ˜„์ฒด๋“ค๋„ ๊ฐ„ํ˜น ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ๋Œ€ํ‘œ์ ์œผ๋กœ ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ 11์—์„œ๋Š” Promise ๊ฐ์ฒด๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์„๊นŒ์š”?

ํด๋ฆฌํ•„ ์‚ฌ์šฉ

๋Œ€ํ‘œ์ ์ธ ๋ฐฉ๋ฒ•์€ ํด๋ฆฌํ•„์„ ์ด์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํด๋ฆฌํ•„์ด๋ž€, ์•„๋ž˜์™€ ๊ฐ™์ด ๋นˆ ๊ตฌํ˜„์ฒด๋ฅผ ์ฑ„์›Œ์ฃผ๋Š” ์Šคํฌ๋ฆฝํŠธ๋ผ๊ณ  ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํด๋ฆฌํ•„์„ ๊ฐ€์žฅ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ๋ฐ”๋ฒจ์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. @babel/preset-env๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์•„๋ž˜์™€ ๊ฐ™์ด ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ 11์„ ๊ธฐ์ค€์œผ๋กœ ์ตœ์†Œ ์ง€์› ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์„ค์ •ํ•˜์—ฌ ๊ตฌํ˜„์ฒด๋ฅผ ์ฑ„์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํด๋ฆฌํ•„์˜ ๋ฌธ์ œ์ ๊ณผ ํ•ด๊ฒฐ ๋ฐฉ์•ˆ

ํ•˜์ง€๋งŒ ์ด ๋ฐฉ๋ฒ•์„ ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์“ฐ๋ฉด ๋‹จ์ ์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ์ด๋ฏธ ์ง€์›ํ•˜๋Š” ๊ตฌํ˜„์ฒด๋“ค์„ ๋‚ด๋ ค๋ฐ›๊ฒŒ ๋˜์–ด ์‚ฌ์šฉ์ž, ์„œ๋น„์Šค ์ œ๊ณต์ž, CDN ๋ชจ๋‘์—๊ฒŒ ๋ถˆํ•„์š”ํ•œ ๋„คํŠธ์›Œํฌ ๋น„์šฉ์ด ๋ฐœ์ƒํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ธ ํด๋ฆฌํ•„ ์„œ๋ฒ„์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ํด๋ฆฌํ•„ ์„œ๋ฒ„์—์„œ๋Š” ์œ ์ € ์—์ด์ „ํŠธ์˜ ์ •๋ณด๋ฅผ ์ฝ๊ณ  ํ•ด๋‹น ์œ ์ €์˜ ๋ธŒ๋ผ์šฐ์ €์— ์–ด๋–ค ํด๋ฆฌํ•„ ๊ตฌํ˜„์ฒด๊ฐ€ ํ•„์š”ํ•œ์ง€ ์ฒดํฌํ•˜์—ฌ ํ•„์š”ํ•œ ๊ตฌํ˜„์ฒด๋งŒ ์ „์†กํ•˜๋Š” ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฐ ์•„์ด๋””์–ด๋Š” ์ €ํฌ๋ฟ ์•„๋‹ˆ๋ผ ๋‹ค์–‘ํ•œ ํด๋ผ์šฐ๋“œ ์„œ๋น„์Šค์—๋„ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ๋Œ€ํ‘œ์ ์œผ๋กœ polyfill.io๋ผ๋Š” ์„œ๋น„์Šค๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ช‡ ๋‹ฌ ์ „์— ์–ด๋–ค ๊ธฐ์—…์— ์ธ์ˆ˜๋˜๊ณ  ๋‚˜์„œ ๋ณด์•ˆ ์•ˆ์ •์„ฑ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ๊ณ , ํ•ด๋‹น ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•œ ํŠธ์œ„ํ„ฐ ๋“ฑ์—์„œ ํ™”๋ฉด์ด ์ œ๋Œ€๋กœ ๋ณด์—ฌ์ง€์ง€ ์•Š๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. polyfill.io์˜ ์‚ฌ์ดํŠธ๋„ ์ ‘๊ทผ ๋ถˆ๊ฐ€๋Šฅํ•œ ์‚ฌ์ดํŠธ๊ฐ€ ๋˜์–ด๋ฒ„๋ ธ์Šต๋‹ˆ๋‹ค.

ํ† ์Šค์—์„œ๋Š” ์• ์ดˆ๋ถ€ํ„ฐ ๋‹ค๋ฅธ ์„œ๋น„์Šค์˜ ๋ถˆํ™•์‹คํ•œ ์•ˆ์ •์„ฑ์— ์šฐ๋ฆฌ ์„œ๋น„์Šค๋ฅผ ๋งก๊ธฐ๊ณ  ์‹ถ์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์กฐ๊ธˆ ๋” ๋…๋ฆฝ์ ์ด๊ณ  ์™ธ๋ถ€์— ์˜์กดํ•˜์ง€ ์•Š๋Š” ์•ˆ์ •์ ์ธ ์„œ๋น„์Šค๋ฅผ ์šด์˜ํ•˜๊ณ  ์‹ถ์—ˆ๊ณ , ์ž์ฒด์ ์ธ ์„œ๋น„์Šค๋ฅผ ๊ตฌํ˜„ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

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

์ด๋Ÿฐ ํด๋ฆฌํ•„ ๋งˆ๋ฒ•์œผ๋กœ ์ธํ•ด ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ์—์„œ๋Š” 732 KB์˜ ๋ฒˆ๋“ค์„ ๋‚ด๋ ค๋ฐ›๋Š” ๋ฐ˜๋ฉด ํฌ๋กฌ์ด๋‚˜ ์‚ฌํŒŒ๋ฆฌ์—์„œ๋Š” ๊ฑฐ์˜ ๋นˆ ํ•จ์ˆ˜๋งŒ ๋‚ด๋ ค๋ฐ›๋Š” ์ •๋„์˜ ์ˆ˜์ค€์œผ๋กœ ๊ฐ€๋ฒผ์šด ๋ฒˆ๋“ค๋งŒ ์ „์†ก๋ฐ›์„ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

์ด ๋‚ด์šฉ์€ ์ด๋ฒˆ ๊ธ€๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ† ์Šค ํ…Œํฌ ๋ธ”๋กœ๊ทธ์— ๋˜‘๋˜‘ํ•˜๊ฒŒ ๋ธŒ๋ผ์šฐ์ž ํด๋ฆฌํ•„ ๊ด€๋ฆฌํ•˜๊ธฐ๋ผ๋Š” ๋‚ด์šฉ์œผ๋กœ ์ž‘์„ฑ๋˜์–ด ์žˆ์œผ๋‹ˆ, ํ•„์š”ํ•œ ๋ถ„๋“ค์€ ์ด ๊ธ€์„ ์ฝ์–ด๋ณด๊ณ  ์ž์„ธํ•œ ๊ตฌํ˜„์„ ๋”ฐ๋ผํ•ด ๋ณด์•„๋„ ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.


์Šค์ผˆ๋ ˆํ†ค ๋งˆ๋ฒ•

๋‹ค์Œ์€ ์Šค์ผˆ๋ ˆํ†ค ๋งˆ๋ฒ•์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์–ด๋–ค ์›นํŽ˜์ด์ง€์˜ ํ™”๋ฉด์„ ๋„์šธ ๋•Œ๋Š” ๋ฐ˜๋“œ์‹œ ํ•„์š”ํ•œ ๊ตฌ๊ฐ„์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ๋„คํŠธ์›Œํฌ ๊ตฌ๊ฐ„์ž…๋‹ˆ๋‹ค. ๋„คํŠธ์›Œํฌ ์—ฐ๊ฒฐ์ด ๋˜์–ด ์žˆ์ง€ ์•Š๋‹ค๋ฉด ํŽ˜์ด์ง€๋ฅผ ๋„์šฐ๊ธฐ๋Š” ์–ด๋ ค์šธ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ SSR ์„œ๋ฒ„์—์„œ ์ด ์›น๋ทฐ์˜ ํŽ˜์ด์ง€๋ฅผ ๋‚ด๋ ค๋ฐ›๋Š” ์ˆœ๊ฐ„๊นŒ์ง€ ์›น๋ทฐ์—๋Š” ์•„๋ฌด๋Ÿฐ ํ™”๋ฉด์ด ๋œจ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฐ ๊ฒฝ์šฐ์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ๋ฐ”๋กœ ์Šค์ผˆ๋ ˆํ†ค์ž…๋‹ˆ๋‹ค.

Loadingโ€ฆ

๋„คํŠธ์›Œํฌ๋ฅผ ํ†ตํ•ด ํŽ˜์ด์ง€๋ฅผ ๋‚ด๋ ค๋ฐ›์•„์„œ ๋ Œ๋”๋ง ํ•˜๊ธฐ ์ „์— ํ™”๋ฉด์— ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ ์—ฌ๋Ÿฌ ๊ฐ€์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋นˆ ํ™”๋ฉด์„ ๋ณด์—ฌ์ค„ ์ˆ˜๋„ ์žˆ๊ณ , ๋น™๊ธ€๋น™๊ธ€ ๋Œ์•„๊ฐ€๋Š” ๋กœ๋” ํŽ˜์ด์ง€๋ฅผ ๋ณด์—ฌ์ค„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์‚ฌ์šฉํ•˜๋Š” ์›น์„œ๋น„์Šค์˜ ๋ชจ๋“  ํŽ˜์ด์ง€์—์„œ ๋™์ผํ•œ ๋กœ๋”๋ฅผ ๋ณด๊ฒŒ ๋˜๋ฉด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์ด ์ข‹์ง€ ์•Š์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์Šค์ผˆ๋ ˆํ†ค

์ €๋Š” ์ด๋Ÿฐ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด ์ ‘์†ํ•œ ํŽ˜์ด์ง€์˜ UI ํ˜•ํƒœ๋ฅผ ๋ฏธ๋ฆฌ ์•Œ๊ณ , ํ•ด๋‹น UI ํ˜•ํƒœ์˜ ์Šค์ผˆ๋ ˆํ†ค์„ ๋ณด์—ฌ์ฃผ๋Š” ๋ฐฉ๋ฒ•์„ ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ์›น๋ทฐ๊ฐ€ ๋กœ๋”ฉ๋˜๋Š” ๋™์•ˆ ์ด ์Šค์ผˆ๋ ˆํ†ค UI๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์Šค์ผˆ๋ ˆํ†ค ์„œ๋ฒ„๋ฅผ ๋”ฐ๋กœ ์‹คํ–‰ํ•˜์—ฌ ์ ‘์†ํ•œ URL์„ ํŒŒ์‹ฑ ํ•ด์„œ ํŒŒ์‹ฑ ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋ฏธ๋ฆฌ ์ •์˜ํ•œ ์Šค์ผˆ๋ ˆํ†ค ํƒ€์ž…์„ ํŽ˜์ด์ง€์— ๋งž๊ฒŒ ๋ณด์—ฌ์ฃผ๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

๊ทธ๋Ÿผ ๊ฐ„๋‹จํ•œ ์˜ˆ์‹œ๋ฅผ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์ด ํŠน์ • JSON์— ํŠน์ • ์ฃผ์†Œ์— ๋”ฐ๋ผ ์Šค์ผˆ๋ ˆํ†ค ํƒ€์ž…์„ ์ •์˜ํ•ด๋‘˜ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ํƒ€์ž…์„ ํ™œ์šฉํ•ด โ€˜shopping/์ƒํ’ˆ๋ชฉ๋กโ€™์— ์ ‘์†ํ–ˆ์„ ๋•Œ๋Š” list-only๋ผ๋Š” ์Šค์ผˆ๋ ˆํ†ค์„ ๋ณด์—ฌ์ฃผ๊ณ , โ€˜tossfeed/๋ชฉ๋กํŽ˜์ด์ง€โ€™์— ์ ‘์†ํ–ˆ์„๋•Œ๋Š” card-only๋ผ๋Š” ์Šค์ผˆ๋ ˆํ†ค์„ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด์ฒ˜๋Ÿผ ๋‹ค์–‘ํ•œ ์Šค์ผˆ๋ ˆํ†ค ํƒ€์ž…์„ ๋ฏธ๋ฆฌ ๊ตฌํ˜„ํ•ด๋‘๊ณ  ํŽ˜์ด์ง€์— ๋งž๋Š” ์Šค์ผˆ๋ ˆํ†ค์„ ๋ณด์—ฌ์ค€๋‹ค๋ฉด ์œ ์ €๋Š” ๋˜‘๊ฐ™์€ ๋กœ๋”ฉ ํ™”๋ฉด์„ ๋ณด์ง€ ์•Š๊ณ  ์ƒํ™ฉ์— ๋งž๋Š” ์Šค์ผˆ๋ ˆํ†ค์„ ๋ณด๊ฒŒ ๋˜์–ด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์ด ์ข‹์•„์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ง€๊ธˆ๊นŒ์ง€ ํ† ์Šค์˜ 7๊ฐ€์ง€ ํ”Œ๋žซํผ ์„œ๋ฒ„ ๋งˆ๋ฒ• ๊ฐ€์šด๋ฐ 4๊ฐ€์ง€๋ฅผ ์•Œ์•„๋ดค์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ๊ธ€์—์„œ๋Š” 5~7๋ฒˆ์งธ ๋งˆ๋ฒ•์ธ ์• ์…‹, ์˜คํ”ˆ ๊ทธ๋ž˜ํ”„, ์›น ๋ชจ๋“ˆ ๋งˆ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์ด ๊ณผ์ •์—์„œ ๊ฒช์€ ์‹œํ–‰์ฐฉ์˜ค๋„ ๊ณต์œ ํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

7๊ฐ€์ง€ ํ”Œ๋žซํผ ์„œ๋ฒ„๋กœ ํ”„๋ก ํŠธ์—”๋“œ ๋ฒ„ํ”„ ๋งˆ๋ฒ• ๊ฑธ๊ธฐ (2)
์ด๋ฒˆ ๊ธ€์—์„œ๋Š” ํ”„๋ก ํŠธ์—”๋“œ์— ๊ฑฐ๋Š” ๋ฒ„ํ”„ ๋งˆ๋ฒ•, ์• ์…‹, ์˜คํ”ˆ ๊ทธ๋ž˜ํ”„, ์›น ๋ชจ๋“ˆ ๋งˆ๋ฒ•์„ ์•Œ์•„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋‚˜์•„๊ฐ€ 7๊ฐ€์ง€ ๋งˆ๋ฒ•์˜ ์ ˆ๋ง ํŽธ๋„ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. 7๊ฐ€์ง€ ๋งˆ๋ฒ•์„ ์ž˜ ํ™œ์šฉํ•˜๋ฉด ์•ˆ์ •์„ฑ ๋†’๊ณ  ๊ฐœ๋ฐœํ•˜๊ธฐ ์‰ฌ์šด ํ”„๋ก ํŠธ์—”๋“œ ์ธํ”„๋ผ๋ฅผ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•œํŽธ ์ ˆ๋ง ํŽธ์—์„œ ์†Œ๊ฐœํ•œ ์‹œํ–‰์ฐฉ์˜ค ๋‚ด์šฉ๋“ค์€ ์œ ์˜ํ•˜์—ฌ ์•ž์œผ๋กœ ๋งŒ๋‚˜๊ฒŒ ๋  ๋ฌธ์ œ์ ๋“ค์„ ์ด๊ฒจ๋‚ด๋Š” ๋ฐ ๋„์›€์„ ์ค„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์• ์…‹ ๋งˆ๋ฒ•

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

๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ ์ •๋ณด

์•ž์„œ ์„ค๋ช…ํ•œ ๊ธฐ๊ธฐ๋ณ„ ์ •๋ณด๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ์—์„œ๋งŒ ์–ป์„ ์ˆ˜ ์žˆ๋Š” ์ •๋ณด์ž…๋‹ˆ๋‹ค. ์ฆ‰, ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ์—์„œ ์ „๋‹ฌํ•˜๋Š” ์ •๋ณด๋“ค์„ ํ™œ์šฉํ•ด ์›นํŽ˜์ด์ง€์—์„œ ์ด๋ฅผ ์ฝ์–ด์„œ ๋Œ€์‘ํ•˜๋Š” ๋ฐฉ์‹์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์œ„ ๊ทธ๋ฆผ์˜ ์ˆœ์„œ์™€ ๊ฐ™์ด HTML์„ ๋กœ๋“œํ•˜๊ณ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ CSS๋ฅผ ๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  JS ์•ฑ ๋ธŒ๋ฆฟ์ง€๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ์œผ๋กœ๋ถ€ํ„ฐ ์ •๋ณด๋“ค์„ ๋™์ ์œผ๋กœ ๋ถˆ๋Ÿฌ์˜ค๊ณ , ์ด ์ •๋ณด๋ฅผ ํ† ๋Œ€๋กœ ๋™์ ์œผ๋กœ CSS๋ฅผ ๊ทธ๋ฆฌ๊ณ  ์ ์šฉํ•˜์—ฌ ๋ Œ๋”๋ง ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ํ† ์Šค์—์„œ๋Š” HTML, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, CSS๊ฐ€ ๋ชจ๋‘ ๋กœ๋“œ๋˜๊ณ  ์•ฑ ๋ธŒ๋ฆฟ์ง€๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ณผ์ •๊นŒ์ง€ ์‹œ๊ฐ„์ด ๋„ˆ๋ฌด ๋А๋ฆฌ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ์•„์ด๋””์–ด๋Š” ์–ด๋–ค ๊ฒƒ์ด ์žˆ์„๊นŒ์š”?

๋™์  CSS Variables

๋‹ค์–‘ํ•œ ์•„์ด๋””์–ด๋ฅผ ์ƒ๊ฐํ•ด ๋ณด์•˜๋Š”๋ฐ์š”, ๊ทธ ์ค‘ ๋Œ€ํ‘œ์ ์ธ ๋ฐฉ๋ฒ•์ด ๋™์  CSS Variable์ด๋ผ๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ์œ ์ € ์—์ด์ „ํŠธ๋ฅผ ํ†ตํ•ด์„œ ๊ธฐ๊ธฐ๋ณ„ ์ •๋ณด๋ฅผ ๋„˜๊ฒจ์ฃผ๋ฉด ์• ์…‹ ์„œ๋ฒ„์—์„œ CSS Variables๋ฅผ ๋™์ ์œผ๋กœ ์ „๋‹ฌํ•ด ์ฃผ๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

๊ฐ„๋‹จํ•œ ์˜ˆ์‹œ๋ฅผ ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ์—์„œ ์›น๋ทฐ๋ฅผ ์„ค์ •ํ•  ๋•Œ ์•„๋ž˜์ฒ˜๋Ÿผ ์œ ์ € ์—์ด์ „ํŠธ๋ฅผ ์ปค์Šคํ…€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ ์ด๋ฏธ์ง€์˜ ๋…ธ๋ž€์ƒ‰ ๋ถ€๋ถ„์ด ๋ฐ”๋กœ ์œ ์ € ์—์ด์ „ํŠธ ๋’ค์— ๋ถ™์ธ ์ปค์Šคํ…€ ์œ ์ € ์—์ด์ „ํŠธ์ž…๋‹ˆ๋‹ค. SafeArea์™€ 4๊ฐœ์˜ ์ˆซ์ž๋ฅผ ์ ์—ˆ๊ณ , ColorPreference์™€ dark๋ผ๋Š” ๋ฌธ์ž์—ด์„ ์ ์–ด๋’€์Šต๋‹ˆ๋‹ค. ์ด ์ •๋ณด๋“ค์„ ํ†ตํ•ด SafeArea์˜ ์ˆ˜์น˜๊ฐ€ ๋ช‡์ธ์ง€, ๊ทธ๋ฆฌ๊ณ  ColorPreference๋Š” ๋‹คํฌ์ธ์ง€ ๋ผ์ดํŠธ์ธ์ง€๋ฅผ ๋ฏธ๋ฆฌ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ์ •๋ณด๋“ค์„ ํ† ๋Œ€๋กœ ์• ์…‹ ์„œ๋ฒ„์—์„œ๋Š” ์•„๋ž˜ ์ด๋ฏธ์ง€์™€ ๊ฐ™์ด CSS Variables๋ฅผ ๋ฏธ๋ฆฌ ์ž‘์„ฑํ•ด์„œ ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ๋„˜๊ฒจ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์• ์…‹ ์„œ๋ฒ„ ๋•๋ถ„์— HTML, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, CSS๋ฅผ ๋กœ๋“œํ•œ ๋‹ค์Œ JS ์•ฑ๋ธŒ๋ฆฟ์ง€๋ฅผ ํ˜ธ์ถœํ•  ํ•„์š” ์—†์ด ๋ฐ”๋กœ CSS๋ฅผ ์ ์šฉํ•ด์„œ ํ™”๋ฉด์„ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ฆ‰, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์˜์กด์„ฑ ์—†์ด CSS ๋กœ๋“œ ์งํ›„ ๋ฐ”๋กœ ์ ์šฉ์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋กœ๋“œ ์˜์กด์„ฑ ์—†์ด ์™„์„ฑ๋œ CSS๋ฅผ ๋‚ด๋ ค๋ฐ›๊ธฐ ๋•Œ๋ฌธ์— ํ™”๋ฉด์ด ๊นœ๋นก๊ฑฐ๋ฆฌ๋Š” ๋ฌธ์ œ ์—†์ด ํ™”๋ฉด์ด ๋œจ์ž๋งˆ์ž ๋‹คํฌ ํ…Œ๋งˆ, ํฐ ๊ธ€์”จ ๋ชจ๋“œ, ๋„ค์ดํ‹ฐ๋ธŒ ๋…ธ์น˜ UI๊นŒ์ง€ ๋ชจ๋‘ ๋Œ€์‘ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.


์˜คํ”ˆ ๊ทธ๋ž˜ํ”„ ๋งˆ๋ฒ•

๋‹ค์Œ์€ ์˜คํ”ˆ ๊ทธ๋ž˜ํ”„ ๋งˆ๋ฒ•์ž…๋‹ˆ๋‹ค. ์ง€๊ธˆ๋ถ€ํ„ฐ ์„ค๋ช…ํ•  ๋งˆ๋ฒ•์€ ์•ฑ๊ณผ ๊ด€๋ จ ์—†๋Š” ๋‹ค๋ฅธ ์™ธ๋ถ€์˜ ๋งˆ๋ฒ•์ด๋ผ๊ณ  ๋ณด์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์ด ๋งˆ๋ฒ•์€ ์œ ์ €๋“ค๋ผ๋ฆฌ URL์„ ์„œ๋กœ ๊ณต์œ ํ•  ๋•Œ ๋œจ๋Š” ๋ฏธ๋ฆฌ ๋ณด๊ธฐ ์ด๋ฏธ์ง€์™€ ๊ด€๋ จ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์ด ํ† ์Šค ํ…Œํฌ ๋ธ”๋กœ๊ทธ์˜ URL์„ ํŠธ์œ„ํ„ฐ์— ๊ณต์œ ํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ๋ฏธ๋ฆฌ ๋ณด๊ธฐ ์ด๋ฏธ์ง€๊ฐ€ ๋œจ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์ด๋Ÿฐ ๋ฏธ๋ฆฌ ๋ณด๊ธฐ ์ธ๋„ค์ผ์„ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์ด ๋ฐ”๋กœ ์˜คํ”ˆ ๊ทธ๋ž˜ํ”„ ๋งˆ๋ฒ•์ž…๋‹ˆ๋‹ค.

URL์˜ ๋ฏธ๋ฆฌ ๋ณด๊ธฐ๊ฐ€ ๋ฐ”๋€๋‹ค๋ฉด?

๋งŒ์•ฝ ์œ„์˜ ๊ธ€์˜ ์ œ๋ชฉ์ด ๋ฐ”๋€๋‹ค๋ฉด ์–ด๋–ค ๊ณผ์ •์ด ํ•„์š”ํ• ๊นŒ์š”? ์•„๋งˆ๋„ ์„ค์ •ํ•ด๋‘” ์ด๋ฏธ์ง€๋ฅผ ๊ต์ฒดํ•ด์•ผ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ œ๋ชฉ์„ ์ˆ˜์ •ํ•˜๊ณ , ์ด๋ฏธ์ง€๋ฅผ ๋‹ค์‹œ ๋งŒ๋“ค์–ด ๋‚ด๋ ค๋ฐ›๊ณ , CDN์— ์—…๋กœ๋“œํ•˜๊ณ , ์—…๋กœ๋“œํ•œ ์ด๋ฏธ์ง€๋ฅผ ๋‹ค์‹œ ์ ์šฉ์‹œ์ผœ์•ผ ํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€์ด ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

์ œ๋ชฉ๊ณผ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ์กฐํ•ฉํ•˜์—ฌ ํ•ด๊ฒฐํ•˜๊ธฐ

์ด๋Ÿฐ ๋ฒˆ๊ฑฐ๋กœ์›€์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์ œ๋ชฉ๊ณผ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ์กฐํ•ฉํ•˜๋ฉด ์–ด๋–จ๊นŒ์š”? ์ œ๋ชฉ์— ๋”ฐ๋ผ ์ด๋ฏธ์ง€๋ฅผ ๋™์ ์œผ๋กœ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์•„ํ‹ฐํด ์ œ๋ชฉ์ธ โ€˜๋˜‘๋˜‘ํ•˜๊ฒŒโ€ฆโ€™์™€ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ์กฐํ•ฉํ•ด ๊ทธ๋ฆผ์˜ ์˜ค๋ฅธ์ชฝ๊ณผ ๊ฐ™์€ ์ด๋ฏธ์ง€๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฆ‰, ์•„ํ‹ฐํด ์ œ๋ชฉ์€ ํƒ€์ดํ‹€ ๋ณ€์ˆ˜๋ฅผ ํ†ตํ•ด ์ „๋‹ฌํ•˜๊ณ , ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋Š” URL์„ ์ „๋‹ฌํ•œ ๋‹ค์Œ ์ด๋ฏธ์ง€๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ์— ์ž์„ธํ•œ ๊ตฌํ˜„ ๋ฐฉ๋ฒ•์€ ์†Œ๊ฐœํ•˜์ง€ ์•Š๊ฒ ์Šต๋‹ˆ๋‹ค. ๋Œ€์‹  ์ด ๋™์ž‘์„ ๊ตฌํ˜„ํ•˜๋Š” ํžŒํŠธ, Headless Browser Puppeteer Screenshots๋ฅผ ์ฐพ์•„๋ณด์‹œ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

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


์›น ๋ชจ๋“ˆ ๋งˆ๋ฒ•

๋“œ๋””์–ด ๋งˆ์ง€๋ง‰ ๋งˆ๋ฒ•์ธ ์›น ๋ชจ๋“ˆ ๋งˆ๋ฒ•์ž…๋‹ˆ๋‹ค. ์›น ๋ชจ๋“ˆ์— ๋Œ€ํ•ด์„œ๋Š” ์ƒ์†Œํ•˜์‹ค ๊ฑฐ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์›น ๋ชจ๋“ˆ์€ ๋””์ž์ธ ์‹œ์Šคํ…œ๊ณผ ๋””์ž์ธ ํˆด์— ์˜ํ–ฅ๋ ฅ์„ ๋ผ์น˜๋Š” ์š”์†Œ์ž…๋‹ˆ๋‹ค. ์›น ๋ชจ๋“ˆ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๊ธฐ ์ „์— ์šฐ์„  ํ† ์Šค์˜ ๋””์ž์ธ ํˆด์— ๋Œ€ํ•ด ์„ค๋ช…๋“œ๋ฆฌ๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

Framer Code Component

ํ† ์Šค ๋””์ž์ด๋„ˆ๋ถ„๋“ค์ด ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๊ฐ•๋ ฅํ•œ ๋””์ž์ธ ํˆด์€ Framer์ž…๋‹ˆ๋‹ค. Framer์˜ ๊ฐ€์žฅ ๋Œ€ํ‘œ์ ์ธ ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜๋Š” Framer Code Component์ž…๋‹ˆ๋‹ค. ์ด ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•˜๋ฉด ์‹ค์ œ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ€์ ธ์™€์„œ UI๋กœ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฆ‰, ์‹ค์ œ๋กœ ๋””์ž์ธ ์‹œ์Šคํ…œ์—์„œ ์ž‘์„ฑํ•œ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ Framer์— ๋ถˆ๋Ÿฌ์™€์„œ ๋””์ž์ธ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Framer Code Component์˜ ์ œ์•ฝ ์‚ฌํ•ญ

๋‹ค๋งŒ ์ด ๊ธฐ๋Šฅ์—์„œ ํ† ์Šค ๋””์ž์ธ ์‹œ์Šคํ…œ (TDS)์™€ ๊ฐ™์€ ์™ธ๋ถ€ ๋””์ž์ธ ์‹œ์Šคํ…œ ์ฝ”๋“œ๋ฅผ ๊ฐ€์ ธ์™€์„œ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ๋‹ค์–‘ํ•œ ์ œ์•ฝ๋“ค์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ€ํ‘œ์ ์œผ๋กœ Framer์—์„œ NPM Import ๊ธฐ๋Šฅ์€ ์‹คํ—˜์  ๊ธฐ๋Šฅ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ƒํ™ฉ์— ๋”ฐ๋ผ ์ œ๋Œ€๋กœ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ์ œ์•ฝ์€ ๋ฐ”๋กœ ES ๋ชจ๋“ˆ ๊ธฐ๋ฐ˜ ์ฝ”๋“œ๋งŒ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค. ์ด ์ œ์•ฝ์€ ํ† ์Šค ํŒ€์— ๊ฐ€์žฅ ํฐ ์ œ์•ฝ ์‚ฌํ•ญ์ด์—ˆ์Šต๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด TDS๋Š” CommonJS ๊ธฐ๋ฐ˜์œผ๋กœ ๋ฒˆ๋“ค๋ง ๋˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ TDS๋ฅผ Code Component์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋ถˆ๊ฐ€๋Šฅํ–ˆ์Šต๋‹ˆ๋‹ค.

์ œ์•ฝ ์‚ฌํ•ญ ํ•ด๊ฒฐํ•˜๊ธฐ

์•„๋ž˜ ๊ทธ๋ฆผ์€ ํ† ์Šค์—์„œ ์ด๋ฅผ ํ•ด๊ฒฐํ•œ ๊ตฌ์กฐ์ž…๋‹ˆ๋‹ค. TDS์™€ Framer Code Component ์‚ฌ์ด์— TDS ์›น ๋ชจ๋“ˆ (ES ๋ชจ๋“ˆ)์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ† ์Šค์—์„œ๋Š” ์ค‘๊ฐ„์— TDS ์›น ๋ชจ๋“ˆ์„ ๋ฐฐ์น˜ํ•˜์—ฌ ์ด๋ฅผ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค. ์›น ๋ชจ๋“ˆ์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณผ๊นŒ์š”?

์•„๋ž˜ ๊ทธ๋ฆผ๊ณผ ๊ฐ™์ด Framer Code Component๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ URL์„ ๊ธฐ์ค€์œผ๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. HTTPS ํ”„๋กœํ† ์ฝœ์„ ์‚ฌ์šฉํ•˜์—ฌ ์˜์กด์„ฑ์„ ๊ฐ€์ ธ์˜ค๊ณ  ์žˆ๋Š” ๋ถ€๋ถ„์ด ๋ฐ”๋กœ ์›น ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค. URL Imports, HTTPS Imports, Network Imports์™€ ๊ฐ™์€ ํ‚ค์›Œ๋“œ๋ฅผ ๋“ค์–ด๋ณธ ์  ์žˆ๋‚˜์š”? ์ด๋Ÿฐ ๋ฐฉ๋ฒ•์„ ํ†ตํ•ด ๋ชจ๋“ˆ์„ ์ž„ํฌํŠธ ํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

esm.sh์™€ ๊ฐ™์€ ํด๋ผ์šฐ๋“œ ์›น ๋ชจ๋“ˆ ์„œ๋น„์Šค๊ฐ€ ๋Œ€ํ‘œ์ ์ธ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค. esm.sh์—์„œ React ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ฐ€์ ธ์™€์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ทธ๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ES ๋ชจ๋“ˆ๊ณผ ์›น ๋ชจ๋“ˆ์—๋Š” ์ฐจ์ด์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ES ๋ชจ๋“ˆ์€ node_modules๋ฅผ ํ†ตํ•ด ์˜์กด์„ฑ์„ ์ž„ํฌํŠธ ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด ์›น ๋ชจ๋“ˆ์€ CDN์„ ํ†ตํ•ด ์ „์†ก๋ฐ›์€ ํŒŒ์ผ์„ ํ†ตํ•ด ์˜์กด์„ฑ์„ ์ž„ํฌํŠธ ํ•ฉ๋‹ˆ๋‹ค. Framer์—์„œ๋Š” ์•„๋ž˜ ๊ทธ๋ฆผ๊ณผ ๊ฐ™์ด ์›น ๋ชจ๋“ˆ์„ ์ด์šฉํ•ด์„œ CDN์„ ํ†ตํ•ด ์›น ๋ชจ๋“ˆ์„ ์ž„ํฌํŠธ ํ•ฉ๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ํ† ์Šค UX ํŒ€์—์„œ๋Š” ๋””์ž์ธ ์‹œ์Šคํ…œ์— ์žˆ๋Š” ์ฝ”๋“œ๋“ค์„ ๋””์ž์ธ ํŒ€์— ๋„˜๊ธธ ๋•Œ, ์›น ๋ชจ๋“ˆ์„ ํ†ตํ•ด์„œ Framer์— ์ ์šฉํ•œ๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์›น ๋ชจ๋“ˆ ๋งˆ๋ฒ•์„ ํ†ตํ•ด ํ† ์Šค ๋””์ž์ธ ์‹œ์Šคํ…œ์˜ ์ฝ”๋“œ ๋ฒ ์ด์Šค๋Š” ๊ทธ๋Œ€๋กœ ๊ฐ€์ ธ๊ฐ€์„œ ์„œ๋น„์Šค ์ฝ”๋“œ์— ์ „ํ˜€ ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  Framer Code component๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด์„œ ๋ฏธ๋ฆฌ ๋งŒ๋“ค์–ด ๋†“์€ ๋””์ž์ธ ์‹œ์Šคํ…œ๊ณผ ๋™์ผํ•œ ์ผ๊ด€์„ฑ ์žˆ๋Š” ๋””์ž์ธ์„ ์‚ฌ์šฉํ•˜๋ฉด์„œ ๊ฐœ๋ฐœ์„ ๋น ๋ฅด๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋Š” ์ƒ์‚ฐ์„ฑ๊นŒ์ง€ ์–ป์„ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

์›น ๋ชจ๋“ˆ์„ ์ œ๊ณตํ•˜๋Š” ํด๋ผ์šฐ๋“œ ์„œ๋น„์Šค๋Š” ๋‹ค์–‘ํ•ฉ๋‹ˆ๋‹ค. ์•ž์—์„œ ์‚ดํŽด๋ณธ esm.sh๋ฅผ ๋น„๋กฏํ•ด esm.run, skypack.dev ๋“ฑ์ด ๋Œ€ํ‘œ์ ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํ† ์Šค์—์„œ๋Š” ์ด ์„œ๋น„์Šค๋ฅผ ๊ทธ๋Œ€๋กœ ์“ฐ๊ธฐ๋Š” ์–ด๋ ค์› ์Šต๋‹ˆ๋‹ค. self-hosted๊ฐ€ ๋ฏธ์ œ๊ณต๋˜์—ˆ๊ณ , ์ œ๊ณต์ด ๋˜๋”๋ผ๋„ esm ํ‘œ์ค€์„ ์ค€์ˆ˜ํ•˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— export map์ด ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๋ฌธ์ œ๋„ ์ƒ๊ฒผ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์œ ๋ช…ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋Œ€์‘ํ•˜๊ธฐ ์œ„ํ•ด ํ•˜๋“œ์ฝ”๋”ฉ์œผ๋กœ ๋Œ€์‘๋œ ๋ถ€๋ถ„๋„ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ฌธ์ œ์ ์œผ๋กœ ์ธํ•ด ํ† ์Šค๋งŒ์˜ ์›น ๋ชจ๋“ˆ ์„œ๋ฒ„๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋˜์—ˆ๊ณ , ์•„๋ž˜์™€ ๊ฐ™์ด URL๊ณผ ์บ๋Ÿฟ ๋ฒ„์ „๊นŒ์ง€ ๋ช…์‹œํ•˜์—ฌ ์›น ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ฐธ๊ณ ๋กœ, esm.sh๋Š” self-hosted์™€ ํ”„๋ผ์ด๋น— ๋ ˆ์ง€์ŠคํŠธ๋ฆฌ๋ฅผ ์ œ๊ณตํ•˜๋Š” Go ์–ธ์–ด ๊ธฐ๋ฐ˜์˜ ์˜คํ”ˆ์†Œ์Šค์ž…๋‹ˆ๋‹ค. ํ˜„์žฌ ํ† ์Šค์—์„œ๋„ esm.sh ๋„์ž…ํ•˜๋ ค๊ณ  ๊ฒ€ํ†  ์ค‘์ž…๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„๋“ค๋„ esm.sh๋ฅผ ํ™œ์šฉํ•ด ์›น ๋ชจ๋“ˆ ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.


๊ตฌํ˜„์„ ์œ„ํ•œ Cheat Sheet

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

์‹ค์ œ ๊ตฌํ˜„์„ ์œ„ํ•ด ์ด์™€ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ํ™œ์šฉ์„ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์œ„ ํ‚ค์›Œ๋“œ๋ฅผ ํ™œ์šฉํ•˜๋ฉด ์—ฌ๋Ÿฌ๋ถ„๋„ ๊ตฌํ˜„์— ํ•„์š”ํ•œ ํžŒํŠธ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.


์‹œํ–‰์ฐฉ์˜ค (7๊ฐ€์ง€ ๋งˆ๋ฒ• ์ ˆ๋งํŽธ)

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

ํด๋ผ์šฐ๋“œ ์ธํ”„๋ผ ์ด์ค‘ํ™”์˜ ์–ด๋ ค์›€

AWS ๋žŒ๋‹ค๋ฅผ ํ†ตํ•ด ์„œ๋น„์Šค๋ฅผ ๊ตฌํ˜„ํ•  ๋•Œ ๋งŒ์•ฝ ๋žŒ๋‹ค ์ž์ฒด๊ฐ€ ์žฅ์• ๋ฅผ ์ผ์œผํ‚ค๋ฉด ์„œ๋น„์Šค๋ฅผ ์šด์˜ํ•  ์ˆ˜ ์—†์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ† ์Šค๋Š” ์•ˆ์ •์„ฑ์ด ๊ฐ€์žฅ ์ค‘์š”ํ•œ ์„œ๋น„์Šค์ด๊ธฐ ๋•Œ๋ฌธ์— AWS์— ์žฅ์• ๊ฐ€ ๋‚˜๋„ ์„œ๋น„์Šค๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ๋™์ž‘ ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ๋Œ€๋น„ํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค๋ฅธ ์—…์ฒด์— ์ด์ค‘ํ™”๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. AWS์— ๊ตฌํ˜„๋œ ๋‚ด์šฉ์„ Cloudflare์—๋„ ๊ตฌํ˜„ํ•ด๋‘๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ด์ค‘ํ™”๋ฅผ ํ†ตํ•ด ์žฅ์•  ๋Œ€์‘์„ ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์ด๋กœ ์ธํ•ด ๋‹ค์–‘ํ•œ ํด๋ผ์šฐ๋“œ ์ œ๊ณต ์—…์ฒด์— ๋”ฐ๋กœ ๋ฐฐํฌํ•ด์•ผ ํ•˜๊ณ , ๋กœ๊ทธ๋‚˜ ๋ชจ๋‹ˆํ„ฐ๋ง๋„ ๋”ฐ๋กœ ํ™•์ธํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, ์šด์˜ ๋ณต์žก๋„๊ฐ€ ์˜ฌ๋ผ๊ฐ„๋‹ค๋Š” ๋‹จ์ ์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฌธ์ œ์ ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ํ† ์Šค์—์„œ๋Š” ์ž์ฒด์ ์œผ๋กœ ์„œ๋ฒ„๋“ค์„ ๊ตฌํ˜„ํ•˜๊ฒŒ ๋์Šต๋‹ˆ๋‹ค.

Serverless Node.js ๋ฒ„์ „ ๋”ฐ๋ผ๊ฐ€๊ธฐ

์ด๋ฏธ์ง€ ์ตœ์ ํ™” ์„œ๋น„์Šค๊ฐ€ ์ฒ˜์Œ ๋งŒ๋“ค์–ด์งˆ ๋•Œ ์‚ฌ์šฉํ•œ Node.js์˜ ๋ฒ„์ „์€ 14, 16 ์ •๋„์˜€์Šต๋‹ˆ๋‹ค. ์ด ๋ฒ„์ „์„ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋น„์Šค๋ฅผ ์šด์˜ํ•˜๋‹ค๊ฐ€ ๋ฐ˜๋“œ์‹œ ๋ฒ„์ „ ๋ณ€๊ฒฝ์„ ํ•ด์•ผ ํ•˜๋Š” ์ƒํ™ฉ์„ ๋งŒ๋‚˜๋ฉด ๋งŽ์€ ๋ฒˆ๊ฑฐ๋กœ์›€์ด ์ƒ๊น๋‹ˆ๋‹ค. AWS์—์„œ๋Š” ํ˜„์žฌ Node.js 16๊ธฐ๋ฐ˜์˜ ๋žŒ๋‹ค๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ๊ฒƒ์กฐ์ฐจ ํ—ˆ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Node.js 16์€ ๋„ˆ๋ฌด ์˜ค๋ž˜๋œ ๋ฒ„์ „์ด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์šด์˜ ์ค‘์ธ ์„œ๋น„์Šค์˜ ์ฝ”๋“œ ๋ฒ ์ด์Šค๋ฅผ ๊ฐ•์ œ๋กœ ์˜ฌ๋ ค์„œ ๋นŒ๋“œํ•œ ํ›„ ์•Œ๋งž์€ ๋ฒ„์ „์œผ๋กœ ๋ฐฐํฌ๋ฅผ ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ณผ์ •์€ ๊ฐ๋‹นํ•˜๊ธฐ ํž˜๋“  ๋ฆฌ์Šคํฌ๊ฐ€ ๋  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๋ฒ„์ „์— ๋Œ€ํ•œ End-Of-Life๋ฅผ ๋งŒ๋‚˜๊ฒŒ ๋˜๋”๋ผ๋„ ํด๋ผ์šฐ๋“œ ์ œ๊ณต ์—…์ฒด๊ฐ€ ์•„๋‹Œ ํ† ์Šค ํŒ€ ์Šค์Šค๋กœ ์ฃผ๋„๊ถŒ์„ ๊ฐ€์ ธ๊ฐ€๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค. ์ง์ ‘ ๊ตฌํ˜„ํ•œ ์„œ๋ฒ„๋ฅผ ํ†ตํ•ด ๊ฐ•์ œ ์—…๋ฐ์ดํŠธ๋ฅผ ์ตœ๋Œ€ํ•œ ํ”ผํ•˜๊ณ  ์‹œ๊ฐ„์ด ์—ฌ์œ ๋กœ์šธ ๋•Œ ์ฐจ๊ทผ์ฐจ๊ทผ ๋ฒ„์ „์„ ์˜ฌ๋ฆด ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค.

API ํ˜ธ์ถœ ๋น„์šฉ

์„ธ ๋ฒˆ์งธ๋Š” ๋ฐ”๋กœ API ํ˜ธ์ถœ์— ๋”ฐ๋ฅธ ๋น„์šฉ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ํƒ€์ž„ ์–ดํƒ๊ณผ ๊ฐ™์€ ์ด๋ฒคํŠธ์„ฑ ํŠธ๋ž˜ํ”ฝ์€ ๋งค์šฐ ์งง์€ ์‹œ๊ฐ„ ๋™์•ˆ ๊ธ‰๊ฒฉํ•œ ํŠธ๋ž˜ํ”ฝ์ด ๋ฐœ์ƒํ•˜๊ธฐ ๋•Œ๋ฌธ์— CDN์ด ์žˆ์–ด๋„ ์บ์‹œ๊ฐ€ ์ œ๋Œ€๋กœ ๋™์ž‘ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์บ์‹ฑ ๋˜์ง€ ์•Š์•˜์„ ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ํŠธ๋ž˜ํ”ฝ ๋น„์šฉ์€ ๋žŒ๋‹ค๊ฐ€ ํ˜ธ์ถœ๋˜๋Š” ๋งŒํผ ๋ฐœ์ƒํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํŠธ๋ž˜ํ”ฝ์„ ๋ฏธ๋ฆฌ ์˜ˆ์ธกํ•˜๊ณ  ๋น„์šฉ์„ ๊ณ„์‚ฐํ•ด์•ผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด ํ† ์Šค์—์„œ๋Š” ์ž์ฒด ์„œ๋ฒ„๋ฅผ ํ†ตํ•ด ๋žŒ๋‹ค ์„œ๋น„์Šค ๋น„์šฉ์„ ์•„๋‚„ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

QueryString ๊ธฐ๋ฐ˜์˜ API ์ธํ„ฐํŽ˜์ด์Šค

๋‹ค์Œ ์‹œํ–‰์ฐฉ์˜ค๋Š” ์ธํ„ฐํŽ˜์ด์Šค์— ๊ด€ํ•œ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ์•ž์„œ ์„ค๋ช…๋“œ๋ฆฐ ๋‹ค์–‘ํ•œ ์„œ๋ฒ„๋“ค์˜ ์ธํ„ฐํŽ˜์ด์Šค๋Š” ๋Œ€๋ถ€๋ถ„ QueryString์œผ๋กœ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค. ์ด๋กœ ์ธํ•ด CDN์—์„œ ์บ์‹œ๋ฅผ ์ ์šฉํ•˜๊ธฐ ์กฐ๊ธˆ ์–ด๋ ค์› ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์ด ์ปฌ๋Ÿฌ, ์‚ฌ์ด์ฆˆ ์ˆœ์„œ์˜ ์š”์ฒญ๊ณผ ์‚ฌ์ด์ฆˆ, ์ปฌ๋Ÿฌ ์ˆœ์„œ์˜ ์š”์ฒญ์€ ์„œ๋กœ ๋‹ค๋ฅธ ๋ณ„๊ฐœ์˜ ์บ์‹œ๋กœ ๊ธฐ๋ก๋ฉ๋‹ˆ๋‹ค. ์ฆ‰, ๊ฐ™์€ ์š”์ฒญ์ด์ง€๋งŒ 2๊ฐœ์˜ ์บ์‹œ๊ฐ€ ์ƒ๊ธฐ๋Š” ๋ฌธ์ œ์ ์ด ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ๋ฌธ์ œ์— ๋Œ€ํ•ด QueryString๋ณด๋‹ค๋Š” Path ๊ธฐ๋ฐ˜์œผ๋กœ ์ ์šฉํ•˜์—ฌ ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์ด src=์ด๋ฏธ์ง€์ฃผ์†Œ&q=80&w=200์˜ QueryString ๊ธฐ๋ฐ˜์ด ์•„๋‹Œ width=80,quality=75/์ด๋ฏธ์ง€์ฃผ์†Œ์™€ ๊ฐ™์ด Path ๊ธฐ๋ฐ˜์œผ๋กœ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

์ด ์•„์ด๋””์–ด๋Š” ์ง์ ‘ ๊ณ ์•ˆํ•ด๋‚ธ ๋ฐฉ๋ฒ•์€ ์•„๋‹ˆ๊ณ , Cloudflare์˜ ์ด๋ฏธ์ง€ ์ตœ์ ํ™” API์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋ฒ• ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ์ด ๋ฐฉ๋ฒ•์„ ๋„์ž…ํ•˜์—ฌ ์บ์‹ฑ ๊ธฐ๊ฐ„์„ ๋งŽ์ด ๋Š˜๋ฆด ์ˆ˜ ์žˆ์—ˆ๊ณ  ๊ด€๋ฆฌ๋„ ์‰ฌ์›Œ์ง€๋Š” ์žฅ์ ์„ ์–ป์—ˆ์Šต๋‹ˆ๋‹ค.

๋žŒ๋‹ค ์ตœ๋Œ€ ์‘๋‹ต ํŽ˜์ด๋กœ๋“œ ์ œํ•œ

๋˜ ๋‹ค๋ฅธ ์‹œํ–‰์ฐฉ์˜ค๋Š” ๋žŒ๋‹ค์˜ ์ตœ๋Œ€ ์‘๋‹ต ํŽ˜์ด๋กœ๋“œ์˜ ํฌ๊ธฐ์— ์ œํ•œ์ด ๊ฑธ๋ ค์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. 6MB๋ฅผ ๋„˜๋Š” ์š”์ฒญ์€ ๋น„์šฉ์„ ๋” ์ง€๋ถˆํ•ด๋„ ํ•ด๊ฒฐํ•  ์ˆ˜ ์—†๋Š” ๋ฌธ์ œ์˜€์Šต๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ 6MB๋ฅผ ๋„˜๋Š” ์š”์ฒญ์€ ์ œ๋Œ€๋กœ ๋œ ์‘๋‹ต์„ ์ฃผ์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค.

ํ† ์Šค์—์„œ๋Š” ์•ž์„œ ์„ค๋ช…ํ•œ ๋น„๋””์˜ค ์ธ๋„ค์ผ ์„œ๋น„์Šค์—์„œ 6MB๊ฐ€ ๋„˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ€๋กœ ์˜์ƒ๊ณผ ์„ธ๋กœ ์˜์ƒ์ด ์กด์žฌํ•˜๋Š”๋ฐ, ๊ฐ€๋กœ ์˜์ƒ๋งŒ ์ƒ๊ฐํ•˜๊ณ  ๊ฐ€๋กœ ๊ธธ์ด๋กœ ์ด๋ฏธ์ง€ ์ตœ์ ํ™”๋ฅผ ํ•˜๋‹ค ๋ณด๋‹ˆ ์„ธ๋กœ ์˜์ƒ์˜ ๊ฒฝ์šฐ๋Š” ์ธ๋„ค์ผ ์ด๋ฏธ์ง€ ์‚ฌ์ด์ฆˆ๊ฐ€ ์—„์ฒญ ์ปค์ €๋ฒ„๋ฆฌ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ฒฐ๊ตญ 400, 500 ๋“ฑ์˜ ์‘๋‹ต์„ ๋ฐ›๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฒฝ์šฐ๊ฐ€ ๋ฐœ์ƒํ•˜๋”๋ผ๋„ ์‹ค์ œ ์„œ๋น„์Šค์—์„œ๋Š” ์ด๋Ÿฐ ๋ฌธ์ œ๊ฐ€ ๋‚˜ํƒ€๋‚˜๋ฉด ์•ˆ ๋œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ํ˜น์‹œ๋‚˜ 6MB๋ฅผ ๋„˜๋Š” ์š”์ฒญ์ด ๋ฐœ์ƒํ•˜์˜€๋”๋ผ๋„, ์ž์ฒด์ ์ธ ์„œ๋ฒ„ ์šด์˜ ๋“ฑ์˜ ๋ฐฉ๋ฒ•์„ ํ†ตํ•ด ์„œ๋น„์Šค์— ์ง€์žฅ์„ ์ฃผ์ง€ ์•Š๊ฒŒ ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

CDN Vary Header

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

์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์š”์ฒญ ํ—ค๋”๋ฅผ Vary ํ—ค๋”๋กœ ์„ค์ •ํ•˜์—ฌ ์œ ์ € ์—์ด์ „ํŠธ๊ฐ€ ๋‹ฌ๋ผ์ง€๋ฉด ์บ์‹œ๋ฅผ ๋ณ„๋„๋กœ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ๋ช…์‹œ์ ์œผ๋กœ ์„ธํŒ…ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ ˆ๋งํŽธ ์ •๋ฆฌ

์‹œํ–‰์ฐฉ์˜ค ๋‚ด์šฉ๋“ค์„ ์ •๋ฆฌํ•˜๋ฉด, ์„œ๋น„์Šค๋ฅผ ์ด์ค‘ํ™”๋ฅผ ํ•˜๋ฉด ๋‹ค์–‘ํ•œ ์—…์ฒด์— ๋Œ€ํ•ด ๊ด€๋ฆฌํ•ด์•ผ ํ•˜๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ๊ณ , ๋žŒ๋‹ค๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ Node.js์˜ ๋ฒ„์ „์„ ์ž˜ ์ฑ™๊ฒจ์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฒคํŠธ์„ฑ ํŠธ๋ž˜ํ”ฝ์€ ์บ์‹ฑ์ด ์–ด๋ ต๊ธฐ ๋•Œ๋ฌธ์— ํŠธ๋ž˜ํ”ฝ ๋น„์šฉ์„ ์ž˜ ๊ณ ๋ คํ•ด์•ผ ํ•˜๊ณ , QueryString๋ณด๋‹ค๋Š” Path ๊ธฐ๋ฐ˜์˜ ์ธํ„ฐํŽ˜์ด์Šค๋กœ ๋งŒ๋“ค๊ธฐ๋ฅผ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค. ๋žŒ๋‹ค์˜ ์‘๋‹ต ์ตœ๋Œ€ ํฌ๊ธฐ๋Š” 6MB๋ผ๋Š” ์ ์„ ๊ธฐ์–ตํ•˜๊ณ  ์ด๋ฅผ ์ดˆ๊ณผํ•˜๋Š” ๊ฒฝ์šฐ๋ฅผ ๋Œ€๋น„ํ•ด์•ผ ํ•˜๊ณ , Vary ํ—ค๋”๋ฅผ ์ž˜ ์‚ฌ์šฉํ•˜์—ฌ ์บ์‹ฑ ์ •์ฑ…์„ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๋งŒ๋“ค์–ด ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.


๋งˆ์น˜๋ฉฐ

์ง€๊ธˆ๊นŒ์ง€ ํ”„๋ก ํŠธ์—”๋“œ์— ๋ฒ„ํ”„๋ฅผ ๊ฑธ๊ธฐ ์œ„ํ•œ 7๊ฐ€์ง€ ๋งˆ๋ฒ•์— ๋Œ€ํ•ด ํฌ๋ง ํŽธ๊ณผ ์ ˆ๋ง ํŽธ์œผ๋กœ ๋‚˜๋ˆ„์–ด ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค. 7๊ฐ€์ง€ ๋งˆ๋ฒ•์„ ์ž˜ ํ™œ์šฉํ•˜์—ฌ ์•ˆ์ •์„ฑ ๋†’๊ณ  ๊ฐœ๋ฐœํ•˜๊ธฐ ์‰ฌ์šด ํ”„๋ก ํŠธ์—”๋“œ ์ธํ”„๋ผ๋ฅผ ๊ตฌ์ถ•ํ•˜๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค. ๋˜, ์ ˆ๋ง ํŽธ์—์„œ ์†Œ๊ฐœํ•œ ์‹œํ–‰์ฐฉ์˜ค ๋‚ด์šฉ๋“ค๋„ ์œ ์˜ํ•˜์—ฌ ์•ž์œผ๋กœ ๋งŒ๋‚˜๊ฒŒ ๋  ๋ฌธ์ œ์ ๋“ค์„ ์ด๊ฒจ๋‚ด๋Š” ๋ฐ ๋„์›€์ด ๋˜๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค.

7๊ฐ€์ง€ ํ”Œ๋žซํผ ์„œ๋ฒ„๋กœ ํ”„๋ก ํŠธ์—”๋“œ ๋ฒ„ํ”„ ๋งˆ๋ฒ• ๊ฑธ๊ธฐ (1)

ํ† ์Šค ์ฝ”์–ด์—๋Š” 86๋ช…์˜ FE ๊ฐœ๋ฐœ์ž๋“ค์ด ํ•จ๊ป˜ ์žˆ๊ณ  250๊ฐœ์˜ ์„œ๋น„์Šค๋ฅผ ์šด์˜ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ œ๊ฐ€ ์†ํ•œ ํ”Œ๋žซํผ ํŒ€์—์„œ๋Š” 86๋ช…์˜ FE ๊ฐœ๋ฐœ์ž๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋…ธ๋ฆฌํฌ๋ฅผ ๊ด€๋ฆฌํ•˜๋ฉฐ 250๊ฐœ ์„œ๋น„์Šค์˜ ๋ฐฐํฌ๋ถ€ํ„ฐ ๋ชจ๋‹ˆํ„ฐ๋ง๊นŒ์ง€ ๊ฐ™์ด ๊ด€๋ฆฌํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฐ ์ธํ”„๋ผ ๊ด€๋ฆฌ๋ฅผ ์ข€ ๋” ์‰ฝ๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ IaC๋ฅผ ํ†ตํ•ด ํ˜•์ƒ ๊ด€๋ฆฌ๋ฅผ ์ž๋™ํ™”ํ•˜๊ณ  ์žˆ๊ณ , ๋‹ค์–‘ํ•œ ๊ฐœ๋ฐœ์ž๋“ค์ด ๊ธฐ์—ฌํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ† ์Šค ์ฝ”์–ด ํŒ€์˜ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ด๋Ÿฌํ•œ ๋‹ค์–‘ํ•œ ์—…๋ฌด๋“ค์— ์ง‘์ค‘ํ•˜๋Š” ๋ชฉ์ ์ด ๋ฌด์—‡์ผ๊นŒ์š”? ๊ฐ€์žฅ ํฐ ๋ชฉ์ ์€ ํ† ์Šค์˜ ํ”„๋ก ํŠธ์—”๋“œ UX/DX๋ฅผ ์„ธ๊ณ„ ์ตœ๊ฐ•์œผ๋กœ ๋งŒ๋“ค๊ธฐ ์œ„ํ•จ์ž…๋‹ˆ๋‹ค. ํ† ์Šค์˜ ํ”„๋ก ํŠธ์—”๋“œ ํ”Œ๋žซํผ์ด ์„ธ๊ณ„ ์ตœ๊ฐ•์˜ ํ”„๋ก ํŠธ์—”๋“œ๊ฐ€ ๋˜๊ธฐ ์œ„ํ•ด ์–ด๋–ค ๋…ธ๋ ฅ์„ ํ•˜๊ณ  ์žˆ๋Š”์ง€ ํ•˜๋‚˜์”ฉ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

  1. FEConf2024์—์„œ ๋ฐœํ‘œ๋œ โ€˜7๊ฐ€์ง€ ํ”Œ๋žซํผ ์„œ๋ฒ„๋กœ ํ”„๋ก ํŠธ์—”๋“œ ๋ฒ„ํ”„ ๋งˆ๋ฒ• ๊ฑธ๊ธฐโ€™/์ •์„ํ˜ธ ํ† ์Šค ์ฝ”์–ด Frontend Infra Ops Unit Lead โ†ฉ๏ธŽ