SOSOLOG

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

GitHubTwitter

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๋ฌธ์„œ์˜ ๋ฉ”ํƒ€ ๋ฐ์ดํ„ฐ ์ •๋ณด๋ฅผ ์ ๋Š” ๋ฐฉ์‹์— ๋Œ€ํ•œ ๊ทœ์•ฝโ€ฆ

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

React, Vue, Angular ๊ฐ™์€ Library ํ˜น์€ Framework๋กœ ๊ฐœ๋ฐœํ•  ๊ฒฝ์šฐ ๋นŒ๋“œ ๊ฒฐ๊ณผ๋ฌผ์ธ index.html์€ ์ž๋™์œผ๋กœ ์ƒ์„ฑ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ง์ ‘ ๋ณผ ํ•„์š”๊ฐ€ ์—†์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ, ์ตœ์ข… html์˜ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ž˜ ํŒŒ์•…ํ•˜๊ณ  ์žˆ๋‹ค๋ฉด ์„ฑ๋Šฅ ๊ฐœ์„ ์ด๋‚˜ ๋””๋ฒ„๊น…ํ•˜๋Š” ์ƒํ™ฉ์—์„œ ์šฉ์ดํ•˜๊ฒŒ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Parts 1ํŽธ: link, script tโ€ฆ

2020๋…„ ๋‚ด๊ฐ€ ์ƒ๊ฐํ•œ ์ข‹์€์ฝ”๋“œ

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