#react

Next.js 16.3 Instant Navigation - Deep Dive 1

클릭했는데 왜 아무 일도 안 일어나는가

List 디자인 시스템 · 10편

같은 List를 만들었는데 왜 플랫폼 구현은 달라야 했을까

세 플랫폼이 공유할 의미와 각 플랫폼이 소유할 실현을 나누기

List 디자인 시스템 · 9편

List를 나눈 것은 모양이 아니라 '상태의 소유권'이었다

동일한 화면 구조의 목록을 왜 두 개의 Recipe로 나누어야 했을까

List 디자인 시스템 · 8편

ListRow에서 List로 올라와도 새 Recipe는 생기지 않았다

목록의 공간을 제목과 본문으로 나누고 그 위에 구분선과 배경 두 축을 세우기까지

List 디자인 시스템 · 7편

ListRow마다 유효하던 코드가 List 전체에서는 어긋났다

ListRow와 List의 책임 경계를 다시 긋고 무엇을 List가 소유할지 가르기

List 디자인 시스템 · 6편

ListRow에 열 수 있었던 prop을 왜 열지 않았을까

이 결정을 누가, 어디서, 몇 번 하는지로 갈랐다

List 디자인 시스템 · 4편

ReactNode 슬롯은 ListRow에 들어올 컴포넌트를 제한하지 못했다

컴포넌트의 정체성을 검사하는 대신 정해진 데이터만 받기까지

List 디자인 시스템 · 3편

List API의 유연성은 어디에 두어야 했을까

같은 ListRow를 Flat, Compound, Recipe로 만들자 잘하는 일이 갈렸다

List 디자인 시스템 · 2편

List를 화면이 아니라 구조로 나누자 Recipe의 기준이 생겼다

화면 사례를 anatomy로 나누고 Recipe와 Variant의 경계를 정한 세 가지 질문

List 디자인 시스템 · 1편

List 디자인 시스템은 왜 자유도를 제한해야 했을까

오픈소스 컴포넌트와 사내 컴포넌트가 다른 답을 고르는 이유

웹뷰 시스템 폰트 크기 대응, 리뷰에서 설계까지

그 플래시는 useLayoutEffect로 막을 수 없었다

인앱약정 SDK · 9편

웹뷰 라우팅과 뒤로가기 핸들링

같은 document인가, 새 document인가

인앱약정 SDK · 8편

로딩을 띄웠는데 사용자는 보지 못했다

소유권, 시점, document 경계, 종료 조건. 원인은 네 갈래였다

인앱약정 SDK · 2편

화면만 그리면 되는 일이라고 생각했다

금융사 도메인 위에서 시작한 SDK의 첫 번째 설계 결정

RSC는 왜 필요했고, CVE-2025-55182는 왜 발생했을까

Flight 디코더가 프로토타입을 검사하지 않았다

대출 갈아타기 계산기 · 1편

대출 갈아타기 계산기, 반응형 웹 설계 회고

프레임, 커밋, 구독, 그리고 상태

Mark Erikson의 “2025년 리액트 커뮤니티 현황” 읽기

리액트 커뮤니티가 왜 이렇게 갈라졌는지, Vercel 음모론은 사실인지, RSC는 어떤 경로로 만들어졌는지 — Redux 메인테이너의 긴 글을 팀 공유용으로 정리했다

React useState를 언제 작별해야 할까?

useState가 나쁜 게 아니라, 너무 간단해서 복잡한 자리에 잘못 놓인다. 다섯 가지 문제 상황과 각각의 대안을 실무 경험과 함께 정리했다

리액트 스케줄러 완전 분석: MessageChannel을 선택한 이유

동료의 질문에 requestIdleCallback이라고 답했는데 틀렸다. 리액트가 MessageChannel을 고른 이유부터 Lane 우선순위, useEffect가 paint 전에 실행되는 경우까지 소스코드로 따라간 기록

React 동시성 렌더링: Fiber가 가능하게 한 혁신

단일 스레드와 동기적 렌더링이 만들던 버벅거림을, Fiber의 중단 가능한 구조와 우선순위 시스템이 어떻게 풀었는지 정리한다

React Fiber 아키텍처와 Reconciliation 심화 이해

React의 핵심 엔진인 Fiber가 Reconciliation을 어떻게 수행하는지, 그리고 그 이해가 왜 성능 최적화로 이어지는지 살펴본다

React Server Components: 서버와 클라이언트의 경계를 넘어

React의 가장 혁신적인 패러다임 전환인 RSC가 우리가 알던 SSR과 어떻게 다른지 깊이 파헤쳐본다

React SSR의 진화: Next.js Page Router에서 App Router로의 여정

왜 Page Router에서는 스트리밍이 안 되고 App Router에서는 될까. renderToString의 동기적 한계부터 renderToPipeableStream, Chunked Transfer Encoding, 선택적 하이드레이션까지 따라간다

React Fiber 아키텍처: 선언적 UI의 마법을 가능하게 하는 엔진

「전문가를 위한 리액트」 스터디에서 Fiber 아키텍처를 파고들며 얻은 인사이트를, Stack Reconciler의 한계부터 스케줄러와 실무 최적화까지 정리했다

React 19 cache()로 서버 컴포넌트 워터폴 페칭 막기

서버 컴포넌트에서 부모에서 자식으로 요청이 줄줄이 늘어지는 워터폴 페칭을, React 19 cache()의 프리로딩 패턴으로 푸는 방법을 정리했다

Flame Graph로 보는 클라이언트 사이드 렌더링

성능 패널의 그 알록달록한 막대들을 어떻게 읽는지, 그리고 그 그래프가 클라이언트 사이드 렌더링의 비용을 어떻게 드러내는지 — 원문을 읽고 팀에 공유하려고 정리한 글

React 개발자를 위한 초기 로딩 성능: 심층 탐구

TTFB부터 FCP·LCP까지 무엇을 재는지, 그리고 느린 서버·좁은 대역폭·높은 지연·캐시가 각각 그 숫자를 어떻게 흔드는지 — 팀 내 발표용으로 원문을 읽고 정리한 글

React 개발자를 위한 SSR 심화 가이드

메타 태그 프리렌더링부터 전체 페이지 SSR, 하이드레이션, SSG까지 — 각 단계가 무엇을 해결하고 무슨 비용을 청구하는지, 그리고 SSR이 오히려 초기 로드를 느리게 만드는 조건까지