Next.js 16.3 Instant Navigation - Deep Dive 1
클릭했는데 왜 아무 일도 안 일어나는가
개발
웹뷰 브릿지를 WebMessageListener로 마이그레이션하기
Android 브릿지를 addJavascriptInterface에서 WebMessageListener로 옮기자 동기 호출이 알아서 해 주던 요청·응답 맞추기와 실패 감지를 웹이 떠안았다. 요청과 응답을 맞추는 네 가지 방법을 비교하고, 메서드 이름 키와 토큰 요청 합치기를 고른 이유와 requestId가 필요해지는 경우를 정리했다.
토요일 오후, 서비스 전체가 흰 화면이 되면서 배운 것들
장애를 계기로 우리 프론트엔드 인프라를 처음부터 따라가 본 기록
앱 배포 없이 바뀌는 모달 웹뷰를 설계한 이야기
최초 도입은 앱 배포가 필요했다. 그 이후를 웹 배포만으로 바꾸는 것이 목표였다
RSC는 왜 필요했고, CVE-2025-55182는 왜 발생했을까
Flight 디코더가 프로토타입을 검사하지 않았다
FSD에서 배럴 파일 사용 가이드
배럴 파일은 FSD에서 Public API 역할을 하지만, 잘못 쓰면 순환 import와 tree shaking 실패를 부른다. 계층별 사용 기준과 성능 함정을 정리했다
FSD 아키텍처 소개
모노레포 구조의 서비스마다 폴더 구조가 너무 달랐다. 공통 컨벤션이 필요한 상황에서 왜 FSD인가에 대한 이야기
Node.js, require(esm) 공식 지원
CJS와 ESM이 갈라져 있던 15년. top-level await만 없으면 ESM도 동기 평가가 가능하다는 발견이 어떻게 require(esm)로 이어졌는지 — Joyee Cheung의 발표를 보고 정리한 글
Vanilla Web: You don't need that library
라우팅·상태 관리·템플릿팅·컴포넌트를 라이브러리 없이 브라우저 표준만으로 푸는 방법을 짚은 발표 정리다. 도구를 고르기 전에 그 도구가 가리고 있는 웹 플랫폼을 먼저 보자는 이야기다.
JavaScript의 미래: JIT를 넘어 AOT 컴파일의 시대로 (feat. Porffor)
hello world 하나를 위해 100MB짜리 런타임을 들고 다니는 게 당연한가. Porffor가 보여준 AOT 컴파일의 가능성 — 발표 영상을 보고 팀 내 공유용으로 정리한 글
Mark Erikson의 “2025년 리액트 커뮤니티 현황” 읽기
리액트 커뮤니티가 왜 이렇게 갈라졌는지, Vercel 음모론은 사실인지, RSC는 어떤 경로로 만들어졌는지 — Redux 메인테이너의 긴 글을 팀 공유용으로 정리했다
React useState를 언제 작별해야 할까?
useState가 나쁜 게 아니라, 너무 간단해서 복잡한 자리에 잘못 놓인다. 다섯 가지 문제 상황과 각각의 대안을 실무 경험과 함께 정리했다
Playwright를 활용한 E2E 테스트 작성 가이드
팀이 E2E 테스트를 같은 기준으로 쓰게 하려고 정리한 문서. 무엇을 테스트할지부터 선택자·대기·모킹 전략, 빌더 패턴과 Given-When-Then 구조까지
Astro Islands Architecture: 성능 중심 웹 개발의 새로운 패러다임
Next.js로 만든 블로그를 Astro로 다시 만들면서 재본 것들 — Islands Architecture, Content Collections 증분 빌드, 그리고 Next.js가 PPR로 향하는 방향까지
AI를 동료로서 협업하는 효율적인 방법
Claude Code의 Plan Mode·CLAUDE.md·메모리·커스텀 명령어부터 TaskMaster·Sequential Thinking·Context7·Figma MCP와 Git Worktree 병렬 작업까지, AI를 동료로 앉히는 작업 환경을 사내 발표용으로 정리했다
Next.js 미들웨어의 복잡성을 해결하는 파이프라인 라이브러리 개발기
인증 체크 하나로 시작한 middleware.ts가 500줄이 됐다. Express의 next() 패턴을 Next.js Edge Runtime에 맞게 다시 만들면서 어댑터 패턴과 fail-open을 고른 기록
리액트 스케줄러 완전 분석: 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, 선택적 하이드레이션까지 따라간다
데이터가 화면에 도달하기까지의 여정: OSI, TCP/UDP, HTTP
브라우저에 주소를 치고 엔터를 누른 뒤 화면에 무언가 그려지기까지, 데이터가 어떤 계층을 지나 어떤 프로토콜을 거치는지 — 원문을 읽고 팀에 공유하려고 정리한 글
빌드 시간 75% 단축하기: Turborepo 최적화
동료가 빌드 5분이 길다고 했다. Turborepo는 이미 쓰고 있었는데 캐시 히트는 0회였다. 무엇이 캐시를 깨뜨렸고, 무엇을 왜 그렇게 바꿨는지에 대한 기록
React Fiber 아키텍처: 선언적 UI의 마법을 가능하게 하는 엔진
「전문가를 위한 리액트」 스터디에서 Fiber 아키텍처를 파고들며 얻은 인사이트를, Stack Reconciler의 한계부터 스케줄러와 실무 최적화까지 정리했다
React 19 cache()로 서버 컴포넌트 워터폴 페칭 막기
서버 컴포넌트에서 부모에서 자식으로 요청이 줄줄이 늘어지는 워터폴 페칭을, React 19 cache()의 프리로딩 패턴으로 푸는 방법을 정리했다
Tailwind vs Linaria: 성능 조사
Tailwind가 CSS를 줄이고 HTML을 늘리는 건 맞는데, 초기 로드에는 아무 영향이 없었다. 대신 예상 못 한 곳에서 차이가 났다 — 원문을 읽고 팀에 공유하려고 정리한 글
Flame Graph로 보는 클라이언트 사이드 렌더링
성능 패널의 그 알록달록한 막대들을 어떻게 읽는지, 그리고 그 그래프가 클라이언트 사이드 렌더링의 비용을 어떻게 드러내는지 — 원문을 읽고 팀에 공유하려고 정리한 글
React 개발자를 위한 초기 로딩 성능: 심층 탐구
TTFB부터 FCP·LCP까지 무엇을 재는지, 그리고 느린 서버·좁은 대역폭·높은 지연·캐시가 각각 그 숫자를 어떻게 흔드는지 — 팀 내 발표용으로 원문을 읽고 정리한 글
Astro 5.0으로 개발자 블로그 마이그레이션 경험기
실시간 반영이 중요할 줄 알고 Next.js ISR로 시작했는데, 정작 글을 매일 쓰지 않았다. 블로그에 필요한 복잡도가 어디까지인지 다시 따져보고 Astro로 옮긴 기록
React 개발자를 위한 SSR 심화 가이드
메타 태그 프리렌더링부터 전체 페이지 SSR, 하이드레이션, SSG까지 — 각 단계가 무엇을 해결하고 무슨 비용을 청구하는지, 그리고 SSR이 오히려 초기 로드를 느리게 만드는 조건까지
디자인 QA 지옥에서 탈출하기: 픽셀 비교 기반 자동화 테스트 도입기
기능 테스트는 전부 그린인데 버튼은 깨져 있었다. 시각적 회귀 테스트를 어떤 기준으로 고르고 Playwright로 어떻게 붙였는지, 그리고 무엇이 남았는지