일하며 배운 것과, 좋아하는 것들에 대해 씁니다.https://hyunbell.dev/ko-krhyunBellhttps://hyunbell.dev/posts/nextjs-16-3-instant-navigation-deep-dive-1/https://hyunbell.dev/posts/nextjs-16-3-instant-navigation-deep-dive-1/클릭했는데 왜 아무 일도 안 일어나는가Thu, 13 Aug 2026 00:00:00 GMT개발nextjsreactapp-routerppr렌더링https://hyunbell.dev/posts/list-exports-boundary-and-bundle/https://hyunbell.dev/posts/list-exports-boundary-and-bundle/exports로 패키지의 공개 경로를 설계하고, JavaScript와 CSS가 줄어드는 단위를 가르기Sun, 02 Aug 2026 00:00:00 GMT개발디자인시스템typescript설계번들csshttps://hyunbell.dev/posts/from-lead-back-to-ic/https://hyunbell.dev/posts/from-lead-back-to-ic/좋은 개발자가 되는 방식으로 리드를 하다, 다시 프론트엔드 IC를 선택하기까지Sat, 01 Aug 2026 00:00:00 GMT회고퇴사리더십커리어팀문화https://hyunbell.dev/posts/list-web-semantic-contract/https://hyunbell.dev/posts/list-web-semantic-contract/세 플랫폼이 공유할 의미와 각 플랫폼이 소유할 실현을 나누기Wed, 29 Jul 2026 00:00:00 GMT개발디자인시스템접근성reacttypescript설계https://hyunbell.dev/posts/list-selection-ownership/https://hyunbell.dev/posts/list-selection-ownership/동일한 화면 구조의 목록을 왜 두 개의 Recipe로 나누어야 했을까Sun, 26 Jul 2026 00:00:00 GMT개발디자인시스템typescriptreact접근성설계https://hyunbell.dev/posts/list-collection-anatomy/https://hyunbell.dev/posts/list-collection-anatomy/목록의 공간을 제목과 본문으로 나누고 그 위에 구분선과 배경 두 축을 세우기까지Wed, 22 Jul 2026 00:00:00 GMT개발디자인시스템typescriptreact설계csshttps://hyunbell.dev/posts/list-rules-beyond-a-single-row/https://hyunbell.dev/posts/list-rules-beyond-a-single-row/ListRow와 List의 책임 경계를 다시 긋고 무엇을 List가 소유할지 가르기Sun, 19 Jul 2026 00:00:00 GMT개발디자인시스템typescriptreact설계https://hyunbell.dev/posts/list-row-props-left-out/https://hyunbell.dev/posts/list-row-props-left-out/이 결정을 누가, 어디서, 몇 번 하는지로 갈랐다Thu, 16 Jul 2026 00:00:00 GMT개발디자인시스템typescriptreact설계csshttps://hyunbell.dev/posts/design-system-for-ai-agents/https://hyunbell.dev/posts/design-system-for-ai-agents/규칙을 문서에 적는 것과 시스템에 심는 것의 차이Wed, 15 Jul 2026 00:00:00 GMT개발디자인시스템ai아키텍처typescript설계https://hyunbell.dev/posts/list-shape-and-behavior-contract/https://hyunbell.dev/posts/list-shape-and-behavior-contract/화살표와 버튼이 동작 영역, DOM, 접근성까지 결정한 과정Mon, 13 Jul 2026 00:00:00 GMT개발디자인시스템typescript접근성dom설계https://hyunbell.dev/posts/list-descriptor-over-jsx-slot/https://hyunbell.dev/posts/list-descriptor-over-jsx-slot/컴포넌트의 정체성을 검사하는 대신 정해진 데이터만 받기까지Thu, 09 Jul 2026 00:00:00 GMT개발디자인시스템typescriptreact설계https://hyunbell.dev/posts/list-api-compile-time-guardrails/https://hyunbell.dev/posts/list-api-compile-time-guardrails/같은 ListRow를 Flat, Compound, Recipe로 만들자 잘하는 일이 갈렸다Mon, 06 Jul 2026 00:00:00 GMT개발디자인시스템typescriptreact설계https://hyunbell.dev/posts/list-anatomy-and-criteria/https://hyunbell.dev/posts/list-anatomy-and-criteria/화면 사례를 anatomy로 나누고 Recipe와 Variant의 경계를 정한 세 가지 질문Fri, 03 Jul 2026 00:00:00 GMT개발디자인시스템typescriptreact설계https://hyunbell.dev/posts/list-freedom-is-a-cost/https://hyunbell.dev/posts/list-freedom-is-a-cost/오픈소스 컴포넌트와 사내 컴포넌트가 다른 답을 고르는 이유Tue, 30 Jun 2026 00:00:00 GMT개발디자인시스템react설계https://hyunbell.dev/posts/loan-calculator-rendering-split/https://hyunbell.dev/posts/loan-calculator-rendering-split/미디어쿼리가 나눌 수 없는 축이 있다Sat, 27 Jun 2026 00:00:00 GMT개발nextjsssr성능fsd아키텍처https://hyunbell.dev/posts/loan-calculator-refactoring/https://hyunbell.dev/posts/loan-calculator-refactoring/변경 이유가 다르면 층을 나눈다Tue, 16 Jun 2026 00:00:00 GMT개발리팩토링아키텍처fsdtypescript테스트https://hyunbell.dev/posts/webview-bridge-java-object-is-gone/https://hyunbell.dev/posts/webview-bridge-java-object-is-gone/Java object is gone, 그리고 두 GC 영역 사이Tue, 09 Jun 2026 00:00:00 GMT개발androidwebviewchromiumjavascript디버깅https://hyunbell.dev/posts/sdk-project-retrospective/https://hyunbell.dev/posts/sdk-project-retrospective/먼저 맡겠다는 사람이 없었던 프로젝트를 끝까지 끌고 간 이유Tue, 02 Jun 2026 00:00:00 GMT회고sdk회고팀문화https://hyunbell.dev/posts/first-year-as-team-lead/https://hyunbell.dev/posts/first-year-as-team-lead/AI를 들이는 일과, 그 안에서 사람을 지키는 일Mon, 01 Jun 2026 00:00:00 GMT회고리더십팀문화커리어https://hyunbell.dev/posts/webview-system-font-scaling/https://hyunbell.dev/posts/webview-system-font-scaling/그 플래시는 useLayoutEffect로 막을 수 없었다Fri, 01 May 2026 00:00:00 GMT개발webviewreactcss렌더링androidhttps://hyunbell.dev/posts/pagination-focus-management/https://hyunbell.dev/posts/pagination-focus-management/노드를 지우지 않고 상태만 바꾼다Mon, 27 Apr 2026 00:00:00 GMT개발javascriptdom접근성설계https://hyunbell.dev/posts/pagination-headless-redesign/https://hyunbell.dev/posts/pagination-headless-redesign/커스텀 엘리먼트와 compound 구조, 그리고 SSRMon, 13 Apr 2026 00:00:00 GMT개발javascriptdomssr설계https://hyunbell.dev/posts/saturday-afternoon-white-screen/https://hyunbell.dev/posts/saturday-afternoon-white-screen/장애를 계기로 우리 프론트엔드 인프라를 처음부터 따라가 본 기록Wed, 08 Apr 2026 00:00:00 GMT개발인프라장애대응nextjs디버깅https://hyunbell.dev/posts/pagination-module-boundaries/https://hyunbell.dev/posts/pagination-module-boundaries/라이브러리를 쓰지 않기로 하고 처음부터 설계한 기록Mon, 06 Apr 2026 00:00:00 GMT개발javascript아키텍처접근성설계https://hyunbell.dev/posts/leading-a-design-system/https://hyunbell.dev/posts/leading-a-design-system/좌충우돌, 잘 모르는 자리에서 듣고, 묻고, 함께 기준을 만들어간 이야기Fri, 03 Apr 2026 00:00:00 GMT회고디자인시스템리더십팀문화https://hyunbell.dev/posts/modal-webview-without-app-release/https://hyunbell.dev/posts/modal-webview-without-app-release/최초 도입은 앱 배포가 필요했다. 그 이후를 웹 배포만으로 바꾸는 것이 목표였다Tue, 31 Mar 2026 00:00:00 GMT개발webview아키텍처설계nextjs성능https://hyunbell.dev/posts/sdk-deploy-dependency-and-final-architecture/https://hyunbell.dev/posts/sdk-deploy-dependency-and-final-architecture/아홉 편에서 만든 구조를 한 장에 정리하고, 금융사 30곳으로 가기 위해 남은 배포 문제를 다룬다Sun, 22 Feb 2026 00:00:00 GMT개발sdk아키텍처설계webviewhttps://hyunbell.dev/posts/sdk-navigation-and-back-handling/https://hyunbell.dev/posts/sdk-navigation-and-back-handling/같은 document인가, 새 document인가Sat, 31 Jan 2026 00:00:00 GMT개발sdkwebviewreact설계https://hyunbell.dev/posts/the-loading-users-never-saw/https://hyunbell.dev/posts/the-loading-users-never-saw/소유권, 시점, document 경계, 종료 조건. 원인은 네 갈래였다Fri, 30 Jan 2026 00:00:00 GMT개발sdkreact렌더링성능https://hyunbell.dev/posts/observing-at-the-boundary-we-control/https://hyunbell.dev/posts/observing-at-the-boundary-we-control/금융사가 삼킨 예외의 원인은 볼 수 없다Fri, 23 Jan 2026 00:00:00 GMT개발sdk디버깅설계javascripthttps://hyunbell.dev/posts/who-decides-the-next-screen/https://hyunbell.dev/posts/who-decides-the-next-screen/화면은 우리가 그리지만, 흐름의 책임은 어디에 둘 것인가Thu, 22 Jan 2026 00:00:00 GMT개발sdk설계아키텍처javascripthttps://hyunbell.dev/posts/sdk-standardization-for-30-partners/https://hyunbell.dev/posts/sdk-standardization-for-30-partners/차이를 없애지 않고 관리하는 방법Tue, 20 Jan 2026 00:00:00 GMT개발sdk아키텍처설계리팩토링https://hyunbell.dev/posts/sdk-loading-and-deploy-ownership/https://hyunbell.dev/posts/sdk-loading-and-deploy-ownership/커맨드 큐, 그리고 해시 파일명의 딜레마Tue, 13 Jan 2026 00:00:00 GMT개발sdkjavascript설계성능https://hyunbell.dev/posts/surviving-in-someone-elses-document/https://hyunbell.dev/posts/surviving-in-someone-elses-document/15개 금융사 도메인에서 Shadow DOM을 선택하기까지Mon, 12 Jan 2026 00:00:00 GMT개발sdkshadow-domcss설계https://hyunbell.dev/posts/sdk-first-design-decisions/https://hyunbell.dev/posts/sdk-first-design-decisions/금융사 도메인 위에서 시작한 SDK의 첫 번째 설계 결정Tue, 06 Jan 2026 00:00:00 GMT개발sdkreact아키텍처설계https://hyunbell.dev/posts/rsc-and-cve-2025-55182/https://hyunbell.dev/posts/rsc-and-cve-2025-55182/Flight 디코더가 프로토타입을 검사하지 않았다Sat, 27 Dec 2025 00:00:00 GMT개발reactrsc보안nextjshttps://hyunbell.dev/posts/why-we-embedded-an-sdk/https://hyunbell.dev/posts/why-we-embedded-an-sdk/남의 페이지에서 우리 서비스의 품질을 보장하는 방법Fri, 19 Dec 2025 00:00:00 GMT개발sdk아키텍처설계javascripthttps://hyunbell.dev/posts/loan-calculator-responsive-design/https://hyunbell.dev/posts/loan-calculator-responsive-design/프레임, 커밋, 구독, 그리고 상태Wed, 15 Oct 2025 00:00:00 GMT개발react성능애니메이션context렌더링https://hyunbell.dev/posts/fsd-barrel-file-guide/https://hyunbell.dev/posts/fsd-barrel-file-guide/배럴 파일은 FSD에서 Public API 역할을 하지만, 잘못 쓰면 순환 import와 tree shaking 실패를 부른다. 계층별 사용 기준과 성능 함정을 정리했다Mon, 28 Jul 2025 00:00:00 GMT개발fsd아키텍처설계성능https://hyunbell.dev/posts/fsd-architecture-intro/https://hyunbell.dev/posts/fsd-architecture-intro/모노레포 구조의 서비스마다 폴더 구조가 너무 달랐다. 공통 컨벤션이 필요한 상황에서 왜 FSD인가에 대한 이야기Sat, 26 Jul 2025 00:00:00 GMT개발fsd아키텍처설계https://hyunbell.dev/posts/nodejs-require-esm/https://hyunbell.dev/posts/nodejs-require-esm/CJS와 ESM이 갈라져 있던 15년. top-level await만 없으면 ESM도 동기 평가가 가능하다는 발견이 어떻게 require(esm)로 이어졌는지 — Joyee Cheung의 발표를 보고 정리한 글Sat, 26 Jul 2025 00:00:00 GMT개발javascriptnodejshttps://hyunbell.dev/posts/vanilla-web-you-dont-need-that-library/https://hyunbell.dev/posts/vanilla-web-you-dont-need-that-library/라우팅·상태 관리·템플릿팅·컴포넌트를 라이브러리 없이 브라우저 표준만으로 푸는 방법을 짚은 발표 정리다. 도구를 고르기 전에 그 도구가 가리고 있는 웹 플랫폼을 먼저 보자는 이야기다.Sat, 26 Jul 2025 00:00:00 GMT개발javascriptdom설계https://hyunbell.dev/posts/javascript-aot-compilation-porffor/https://hyunbell.dev/posts/javascript-aot-compilation-porffor/hello world 하나를 위해 100MB짜리 런타임을 들고 다니는 게 당연한가. Porffor가 보여준 AOT 컴파일의 가능성 — 발표 영상을 보고 팀 내 공유용으로 정리한 글Wed, 23 Jul 2025 00:00:00 GMT개발javascript성능https://hyunbell.dev/posts/react-community-2025-analysis/https://hyunbell.dev/posts/react-community-2025-analysis/리액트 커뮤니티가 왜 이렇게 갈라졌는지, Vercel 음모론은 사실인지, RSC는 어떤 경로로 만들어졌는지 — Redux 메인테이너의 긴 글을 팀 공유용으로 정리했다Mon, 07 Jul 2025 00:00:00 GMT개발reactrsc커뮤니티https://hyunbell.dev/posts/when-to-say-goodbye-to-usestate/https://hyunbell.dev/posts/when-to-say-goodbye-to-usestate/useState가 나쁜 게 아니라, 너무 간단해서 복잡한 자리에 잘못 놓인다. 다섯 가지 문제 상황과 각각의 대안을 실무 경험과 함께 정리했다Mon, 07 Jul 2025 00:00:00 GMT개발react설계https://hyunbell.dev/posts/playwright-e2e-testing-guide/https://hyunbell.dev/posts/playwright-e2e-testing-guide/팀이 E2E 테스트를 같은 기준으로 쓰게 하려고 정리한 문서. 무엇을 테스트할지부터 선택자·대기·모킹 전략, 빌더 패턴과 Given-When-Then 구조까지Thu, 03 Jul 2025 00:00:00 GMT개발테스트playwright팀문화https://hyunbell.dev/posts/astro-islands-architecture/https://hyunbell.dev/posts/astro-islands-architecture/Next.js로 만든 블로그를 Astro로 다시 만들면서 재본 것들 — Islands Architecture, Content Collections 증분 빌드, 그리고 Next.js가 PPR로 향하는 방향까지Mon, 30 Jun 2025 00:00:00 GMT개발astronextjs렌더링성능https://hyunbell.dev/posts/collaborating-with-ai-as-a-teammate/https://hyunbell.dev/posts/collaborating-with-ai-as-a-teammate/Claude Code의 Plan Mode·CLAUDE.md·메모리·커스텀 명령어부터 TaskMaster·Sequential Thinking·Context7·Figma MCP와 Git Worktree 병렬 작업까지, AI를 동료로 앉히는 작업 환경을 사내 발표용으로 정리했다Wed, 25 Jun 2025 00:00:00 GMT개발ai팀문화https://hyunbell.dev/posts/nextjs-middleware-pipeline/https://hyunbell.dev/posts/nextjs-middleware-pipeline/인증 체크 하나로 시작한 middleware.ts가 500줄이 됐다. Express의 next() 패턴을 Next.js Edge Runtime에 맞게 다시 만들면서 어댑터 패턴과 fail-open을 고른 기록Thu, 19 Jun 2025 00:00:00 GMT개발nextjs설계typescripthttps://hyunbell.dev/posts/react-scheduler-messagechannel/https://hyunbell.dev/posts/react-scheduler-messagechannel/동료의 질문에 requestIdleCallback이라고 답했는데 틀렸다. 리액트가 MessageChannel을 고른 이유부터 Lane 우선순위, useEffect가 paint 전에 실행되는 경우까지 소스코드로 따라간 기록Sun, 15 Jun 2025 00:00:00 GMT개발react렌더링javascripthttps://hyunbell.dev/posts/react-concurrent-rendering-fiber/https://hyunbell.dev/posts/react-concurrent-rendering-fiber/단일 스레드와 동기적 렌더링이 만들던 버벅거림을, Fiber의 중단 가능한 구조와 우선순위 시스템이 어떻게 풀었는지 정리한다Tue, 10 Jun 2025 00:00:00 GMT개발react렌더링성능https://hyunbell.dev/posts/react-fiber-reconciliation-deep-dive/https://hyunbell.dev/posts/react-fiber-reconciliation-deep-dive/React의 핵심 엔진인 Fiber가 Reconciliation을 어떻게 수행하는지, 그리고 그 이해가 왜 성능 최적화로 이어지는지 살펴본다Mon, 09 Jun 2025 00:00:00 GMT개발react렌더링아키텍처https://hyunbell.dev/posts/react-server-components-boundary/https://hyunbell.dev/posts/react-server-components-boundary/React의 가장 혁신적인 패러다임 전환인 RSC가 우리가 알던 SSR과 어떻게 다른지 깊이 파헤쳐본다Mon, 09 Jun 2025 00:00:00 GMT개발reactrscssr렌더링https://hyunbell.dev/posts/react-ssr-page-to-app-router/https://hyunbell.dev/posts/react-ssr-page-to-app-router/왜 Page Router에서는 스트리밍이 안 되고 App Router에서는 될까. renderToString의 동기적 한계부터 renderToPipeableStream, Chunked Transfer Encoding, 선택적 하이드레이션까지 따라간다Mon, 09 Jun 2025 00:00:00 GMT개발reactnextjsssr렌더링https://hyunbell.dev/posts/how-data-travels-osi-tcp-http/https://hyunbell.dev/posts/how-data-travels-osi-tcp-http/브라우저에 주소를 치고 엔터를 누른 뒤 화면에 무언가 그려지기까지, 데이터가 어떤 계층을 지나 어떤 프로토콜을 거치는지 — 원문을 읽고 팀에 공유하려고 정리한 글Thu, 05 Jun 2025 00:00:00 GMT개발네트워크http인프라https://hyunbell.dev/posts/turborepo-build-time-optimization/https://hyunbell.dev/posts/turborepo-build-time-optimization/동료가 빌드 5분이 길다고 했다. Turborepo는 이미 쓰고 있었는데 캐시 히트는 0회였다. 무엇이 캐시를 깨뜨렸고, 무엇을 왜 그렇게 바꿨는지에 대한 기록Tue, 03 Jun 2025 00:00:00 GMT개발turborepo성능인프라https://hyunbell.dev/posts/react-fiber-architecture-engine/https://hyunbell.dev/posts/react-fiber-architecture-engine/「전문가를 위한 리액트」 스터디에서 Fiber 아키텍처를 파고들며 얻은 인사이트를, Stack Reconciler의 한계부터 스케줄러와 실무 최적화까지 정리했다Sun, 01 Jun 2025 00:00:00 GMT개발react렌더링아키텍처https://hyunbell.dev/posts/react-19-cache-server-component-waterfall/https://hyunbell.dev/posts/react-19-cache-server-component-waterfall/서버 컴포넌트에서 부모에서 자식으로 요청이 줄줄이 늘어지는 워터폴 페칭을, React 19 cache()의 프리로딩 패턴으로 푸는 방법을 정리했다Fri, 30 May 2025 00:00:00 GMT개발reactrsc성능https://hyunbell.dev/posts/tailwind-vs-linaria-performance/https://hyunbell.dev/posts/tailwind-vs-linaria-performance/Tailwind가 CSS를 줄이고 HTML을 늘리는 건 맞는데, 초기 로드에는 아무 영향이 없었다. 대신 예상 못 한 곳에서 차이가 났다 — 원문을 읽고 팀에 공유하려고 정리한 글Fri, 30 May 2025 00:00:00 GMT개발csstailwind성능https://hyunbell.dev/posts/client-side-rendering-flame-graph/https://hyunbell.dev/posts/client-side-rendering-flame-graph/성능 패널의 그 알록달록한 막대들을 어떻게 읽는지, 그리고 그 그래프가 클라이언트 사이드 렌더링의 비용을 어떻게 드러내는지 — 원문을 읽고 팀에 공유하려고 정리한 글Thu, 29 May 2025 00:00:00 GMT개발react렌더링성능https://hyunbell.dev/posts/initial-load-performance-deep-dive/https://hyunbell.dev/posts/initial-load-performance-deep-dive/TTFB부터 FCP·LCP까지 무엇을 재는지, 그리고 느린 서버·좁은 대역폭·높은 지연·캐시가 각각 그 숫자를 어떻게 흔드는지 — 팀 내 발표용으로 원문을 읽고 정리한 글Thu, 29 May 2025 00:00:00 GMT개발react렌더링성능https://hyunbell.dev/posts/astro-5-blog-migration/https://hyunbell.dev/posts/astro-5-blog-migration/실시간 반영이 중요할 줄 알고 Next.js ISR로 시작했는데, 정작 글을 매일 쓰지 않았다. 블로그에 필요한 복잡도가 어디까지인지 다시 따져보고 Astro로 옮긴 기록Tue, 27 May 2025 00:00:00 GMT개발astronextjs성능https://hyunbell.dev/posts/ssr-deep-dive/https://hyunbell.dev/posts/ssr-deep-dive/메타 태그 프리렌더링부터 전체 페이지 SSR, 하이드레이션, SSG까지 — 각 단계가 무엇을 해결하고 무슨 비용을 청구하는지, 그리고 SSR이 오히려 초기 로드를 느리게 만드는 조건까지Mon, 26 May 2025 00:00:00 GMT개발reactssr렌더링성능https://hyunbell.dev/posts/visual-regression-testing-playwright/https://hyunbell.dev/posts/visual-regression-testing-playwright/기능 테스트는 전부 그린인데 버튼은 깨져 있었다. 시각적 회귀 테스트를 어떤 기준으로 고르고 Playwright로 어떻게 붙였는지, 그리고 무엇이 남았는지Wed, 07 May 2025 00:00:00 GMT개발테스트playwright디자인시스템