Load 28

Writing on code & systems.

Alla11yagileaiarchitectureauthenticationawsbmadbrowsercacheclaudecompilercomponentcontextcookiecsrfcssdata-modelingdata-structuredatabasedesign-systemdeveloper-toolsdevelopmentdnsdxeffecteffect-tsenterpriseentireeslintfiberfido2functionfunctional programmingfunctional-programminggenericgitgraphqlgrpci18njavascriptloadingmathnext.jsnitrooauthoptimizationpasskeyperformancepnpmprotobufqueryqwikreactreconciliationredisrefactoringreflectionremixrenderingrscrustschemasecurityserverside-projectspec-drivenssrstreamingtanstacktanstack-querytestingtokiotype-systemtypescriptunicodeunjsuxvalidationvanilla-extractwebauthnwebsocketxssyarnzod
react12 postsโœ•
2026
Latest
2026.05.17ยท24 min read

Next.js Pages Router vs App Router ๋ Œ๋”๋ง ๋ชจ๋ธ ๋น„๊ต

Next.js์˜ App Router๋Š” Pages Router์™€ ๋‹จ์ˆœํžˆ "์ตœ์‹  ๋ฒ„์ „"์˜ ๊ด€๊ณ„๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ๋ Œ๋”๋ง ๋ชจ๋ธ ์ž์ฒด๊ฐ€ ๋‹ค๋ฅด๊ณ , ๊ฐ™์€ ์šฉ์–ด("Pre-rendering")๊ฐ€ ์„œ๋กœ ๋‹ค๋ฅธ ๋ฒ”์œ„๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค. ์ด ๊ธ€์€ ๋‘ ๋ผ์šฐํ„ฐ์˜ ์ฐจ์ด๋ฅผ ์šฉ์–ด ์ •์˜๋ถ€ํ„ฐโ€ฆ

03.14

Claude Code ์Šคํ‚ฌ๋กœ React ์ปจ๋ฒค์…˜์„ ๊ตฌ์กฐ์ ์œผ๋กœ ๊ฐ•์ œํ•˜๊ธฐ

AI ์ฝ”๋“œ ์–ด์‹œ์Šคํ„ดํŠธ์—๊ฒŒ "React ์ปดํฌ๋„ŒํŠธ ๋งŒ๋“ค์–ด์ค˜"๋ผ๊ณ  ๋งํ•˜๋ฉด, ์ฝ”๋“œ๋Š” ๋‚˜์˜ต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋‚ด ํŒ€์˜ ์ปจ๋ฒค์…˜๋Œ€๋กœ ๋‚˜์˜ฌ๊นŒ์š”? props ๋„ค์ด๋ฐ, ํด๋” ๊ตฌ์กฐ, ์ƒํƒœ๊ด€๋ฆฌ ํŒจํ„ด, ํ…Œ์ŠคํŠธ ๋ฐฉ์‹ โ€” ๋งค๋ฒˆ ๊ฐ™์€ ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ˜๋ณตํ•˜๊ณ  ์žˆ๋‹ค๋ฉด, ๋ฌธ์ œ๋Š” AI๊ฐ€ ์•„๋‹ˆ๋ผโ€ฆ

claudereactdx9 min
โ†’
03.10

React ๋กœ๋”ฉ UX ์ „๋žต

๋กœ๋”ฉ UI๋Š” ๋‹จ์ˆœํ•œ ์Šคํ”ผ๋„ˆ ์„ ํƒ์˜ ๋ฌธ์ œ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ๋กœ๋”ฉ์„ ์–ธ์ œ ๋ณด์—ฌ์ค„์ง€, ์•„์˜ˆ ์•ˆ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๋Š”์ง€, ๊ทธ๋ฆฌ๊ณ  ๋ฐ์ดํ„ฐ๊ฐ€ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฐ”๋€” ๋•Œ๋Š” ์–ด๋–ป๊ฒŒ ๊ฐฑ์‹ ํ• ์ง€๊นŒ์ง€ ๊ณ ๋ คํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ๋กœ๋”ฉ ํ”Œ๋ฆฌ์ปค ๋ฌธ์ œ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์„œ, ์บ์‹œ์™€ ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ๊นŒ์ง€โ€ฆ

reactuxtanstack-queryloading11 min
โ†’
02.11

๋ฐ์ดํ„ฐ ๊ธฐ๋ฐ˜ ํ•จ์ˆ˜ํ˜• ๋ฆฌํŒฉํ† ๋ง

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

reactfunctional-programmingrefactoringai6 min
โ†’
02.10

React Compiler ๋™์ž‘ ์›๋ฆฌ

React๋Š” ์ƒํƒœ๊ฐ€ ๋ฐ”๋€” ๋•Œ๋งˆ๋‹ค ํ•จ์ˆ˜๋ฅผ ๋‹ค์‹œ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค. ์„ฑ๋Šฅ ์ตœ์ ํ™”๋Š” useMemo, useCallback, React.memo๋กœ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ง์ ‘ ํ•ด์•ผ ํ–ˆ๊ณ , ์ด ์ˆ˜๋™ ๋ฉ”๋ชจ์ด์ œ์ด์…˜์˜ ํ•œ๊ณ„๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด React Compiler๊ฐ€ ๋“ฑ์žฅํ–ˆ์Šต๋‹ˆ๋‹ค.

reactcompileroptimization5 min
โ†’
02.02

DatePicker ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„

design system์—์„œ ์ง์ ‘ ์ž…๋ ฅ ๊ฐ€๋Šฅํ•œ DatePicker๋ฅผ ์„ค๊ณ„ํ•˜๊ณ  ๊ตฌํ˜„ํ•œ ๊ณผ์ •์„ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

reactdesign-systemcomponent5 min
โ†’
02.01

AI ์‹œ๋Œ€, frontend testing ์ „๋žต

AI๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ์‹œ๋Œ€์— ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฑด test code์ž…๋‹ˆ๋‹ค. AI๊ฐ€ ๋งŒ๋“  ์ฝ”๋“œ๊ฐ€ ์˜๋„๋Œ€๋กœ ๋™์ž‘ํ•˜๋Š”์ง€ ๊ฒ€์ฆํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•˜๋‹ˆ๊นŒ์š”. ๊ทธ๋Ÿฐ๋ฐ frontend์—์„œ testing์€ ์—ฌ์ „ํžˆ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.

testingeffect-tsreact3 min
โ†’
2025
03.16

Building Context-Query Library

๋ฆฌ์•กํŠธ์—์„œ๋Š” ์—ญํ™œ ๋ณ„๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‚˜๋ˆ„์–ด ์žฌ์‚ฌ์šฉ์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋•Œ ๊ฐ ์ปดํฌ๋„ŒํŠธ ๊ฐ„์˜ ์ƒํƒœ๋ฅผ ๊ณต์œ ํ•˜๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค.

reactcontextquery4 min
โ†’
02.15

Dynamic import in Next.js

Dynamic import๋ฅผ ์ด์šฉํ•˜๋ฉด ๋น„๋™๊ธฐ์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

reactnext.js2 min
โ†’
01.21

Why React Created Functional Components

ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ๋‚˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ž‘์„ฑ ํ•  ๋•Œ, ๋ณดํ†ต ๋‘๊ฐ€์ง€ ๋ฐฉ๋ฒ•์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

reactfunction2 min
โ†’
01.20

React Fiber Architecture

๋ฆฌ์•กํŠธ์˜ ๋ Œ๋”๋ง ๊ณผ์ •์€ ๋ฆฌ์•กํŠธ ์—˜๋ฆฌ๋จผํŠธ์—์„œ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.

reactfiberreconciliationrendering3 min
โ†’
2024
04.11

Tanstack Query for Angular

ํšŒ์‚ฌ์—์„œ๋Š” Angular๊ณผ ์ผ๋ ‰ํŠธ๋ก ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ˜‘์—… ํˆด์„ ์›น๊ณผ ์•ฑ์œผ๋กœ ๊ฐœ๋ฐœ ์ค‘์ž…๋‹ˆ๋‹ค.

reacttanstack2 min
โ†’
๋ชจ๋“  ๊ธ€์„ ์ฝ์œผ์…จ์Šต๋‹ˆ๋‹ค โœฆ