SOSOLOG

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

GitHubTwitter

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์„ค์ •์„ ์ ์šฉํ•˜๋Š”์ง€ ์‚ดํŽด๋ด…๋‹ˆ๋‹ค. ์„œ๋น„์Šค์›Œ์ปค๋ž€? ์„œ๋น„์Šค์›Œ์ปค๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ์‹คํ–‰ํ•˜๋Š” ์Šคํฌ๋ฆฝํŠธ๋กœ, ์›นํŽ˜์ด์ง€์™€๋Š” ๋ณ„๊ฐœ๋กœ ์ž‘๋™ํ•˜๋ฉฐ ์›นํŽ˜์ด์ง€ ๋˜๋Š” ์‚ฌ์šฉ์ž์˜ ์ธํ„ฐ๋ž™์…˜์ด โ€ฆ

Tailwindcss๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.(with. twin.macro + emotion)

TailwindCSS๋Š” utility-first CSS ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” utility-first CSS์— ๋Œ€ํ•œ ๊ฐœ๋…๊ณผ TailwindCSS๋ฅผ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. ํ‰์†Œ TailwindCSS์— ๊ด€์‹ฌ์ด ์žˆ์œผ์…จ๊ฑฐ๋‚˜ ๋„์ž…์„ ๊ณ ๋ คํ•˜๊ณ  ๊ณ„์‹œ๋‹ค๋ฉด ํ•œ๋ฒˆ์ฏค ์ฝ์–ด๋ณด์‹œ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. utility-first CSS utility-firsโ€ฆ

์„ฑ์žฅ์— ์€ํƒ„ํ™˜์€ ์—†๋‹ค

์ฒซ ํšŒ์‚ฌ์— ์ž…์‚ฌํ•˜๊ธฐ ์ „๋ถ€ํ„ฐ โ€˜๊ฐ™์ด ์„ฑ์žฅํ•  ์ˆ˜ ์žˆ๋Š” ํšŒ์‚ฌโ€™๋ฅผ ์ฐพ๊ณ  ์‹ถ์—ˆ๊ณ , ๋‚ด ๋ชฉํ‘œ๋Š” ๊ฐœ๋ฐœ์ž๋กœ์„œ โ€˜๋ฉˆ์ถ”์ง€ ์•Š๊ณ  ์„ฑ์žฅํ•˜๋Š” ๊ฒƒโ€™์ด๋‹ค. ์ž‘๋…„์— ์ด ์ฃผ์ œ๋กœ ๋งŽ์ด ๊ณ ๋ฏผํ–ˆ์—ˆ๊ณ  ๊ทธ ๋‚ด์šฉ์„ ๋ฐœํ‘œ์—์„œ ๊ณต์œ ํ•˜๊ธฐ๋„ ํ–ˆ์—ˆ๋‹ค. ์ง€๊ธˆ ๋‹ค์‹œ ์ƒ๊ฐํ•ด๋ณธ ์„ฑ์žฅ์— โ€˜์€ํƒ„ํ™˜โ€™์€ ์—†๊ณ  ๋งค๋ฒˆ ๋งŽ์€ ๊ณ ๋ฏผ์„ ํ†ตํ•ด ์ด๋ค„์ง„๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ๊ทธ ๋‚ด์šฉ์„ ์งง๊ฒŒ ์ •๋ฆฌํ•ด ๋ณด๋ ค ํ•œ๋‹ค. ์ •์˜ โ€˜์„ฑ์žฅโ€™์ด๋ผ๋Š” ๋‹จ์–ด๋Š” โ€ฆ

Cookie Recipes

์ž‘๋…„์— ๋ฐœํ‘œ๋œ Chrome SameSite ์ •์ฑ…๊ณผ ์›น ์‚ฌ์ดํŠธ์˜ ์ธ์ฆ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋Š” ๊ณผ์ •์—์„œ โ€˜์ฟ ํ‚คโ€™์— ๋Œ€ํ•ด ํ•œ ๋ฒˆ์ฏค ๋“ค์–ด ๋ณด์…จ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด ํฌ์ŠคํŒ…์—์„œ๋Š” ์ฟ ํ‚ค๊ฐ€ ๋ฌด์—‡์ด๊ณ , ์–ด๋–ค ์ข…๋ฅ˜๊ฐ€ ์žˆ๋Š”์ง€, ์ฟ ํ‚ค์˜ ํŠน์„ฑ๊ณผ ์—ฐ๊ด€๋œ ๋ธŒ๋ผ์šฐ์ € ์ •์ฑ…๋“ค์„ ์‚ดํŽด๋ด…๋‹ˆ๋‹ค. ์ฟ ํ‚ค ์ฟ ํ‚ค๋ž€ ์›น์‚ฌ์ดํŠธ์˜ ์ •๋ณด๋ฅผ ๋ธŒ๋ผ์šฐ์ € ์ชฝ์— ์ €์žฅํ•˜๋Š” ์ž‘์€ ํŒŒ์ผ์ž…๋‹ˆ๋‹ค. DB๋Š” ํด๋ผ์ด์–ธํŠธ์˜ ์š”์ฒญ์— ์˜ํ•ด ๋ฐ์ดโ€ฆ

์•Œ์•„๋‘๋ฉด ์“ธ๋ชจ ์žˆ๋Š” Navigator์ง€์‹

ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์—์„œ ๊ฐ์ฒด์— ๋Œ€ํ•œ ์‚ฌ์šฉ์„ ๋นผ๋†“์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ด ํฌ์ŠคํŒ…์—์„œ๋Š” navigator๊ฐ์ฒด์˜ ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์†์„ฑ๋“ค์— ๋Œ€ํ•ด ์‚ดํŽด๋ด…๋‹ˆ๋‹ค. ๊ฐ์ฒด๋Š” ๋Œ€ํ‘œ์ ์ธ User Agent๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์‚ฌ์šฉ์ž์˜ ์ƒํƒœ์— ๊ด€ํ•œ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ •๋ณด๋ฅผ ๋‹ด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. navigator์˜ ์†์„ฑ๋“ค์€ ์ฝ๊ธฐ ์ „์šฉ์œผ๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. react-adaptive-hooks ChromeLโ€ฆ

Saga Pattern๊ณผ redux-saga

redux ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•ด redux-saga๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์‹  ์ ์ด ์žˆ์œผ์‹ ๊ฐ€์š”? โ€œThe mental model is that a saga is like a separate thread in your application thatโ€™s solely responsible for side effects. redux-saga is a redux middlewarโ€ฆ

๋˜๋Œ์•„๋ณด๋Š” index.html - Part 2

Part 1์—์„œ๋Š” link tag์™€ script tag์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ํŽธ์—์„œ๋Š” OpenGraph(์ดํ•˜ og), favicon, charset, lang์— ๋Œ€ํ•ด ์•Œ์•„๋ด…๋‹ˆ๋‹ค. OpenGraph Protocol OpenGraph Protocol(์ดํ•˜ og)์ด๋ž€, Facebook์—์„œ ์ •์˜ํ•œ HTML๋ฌธ์„œ์˜ ๋ฉ”ํƒ€ ๋ฐ์ดํ„ฐ ์ •๋ณด๋ฅผ ์ ๋Š” ๋ฐฉ์‹์— ๋Œ€ํ•œ ๊ทœ์•ฝโ€ฆ