모든 글
공유 언어
기획자와 개발자가 같은 단어로 다른 것을 말하고 있을 때 무엇을 해야 할까. Evans의 ubiquitous language와 Clark의 grounding 이론으로 타직군 소통 실패의 구조를 짚고, 해상도를 맞추는 실무 도구까지 정리한다.
관측
회사에서는 Sentry를 쓰면서 정작 개인 블로그에는 에러 모니터링이 없었다. AI와 함께 계측을 붙이며 마주친 것들을 정리한다. 200 응답 뒤에 숨은 실패, gray failure, 65초 매달린 GA 호출, 그리고 검색 데이터까지.
Harness(Systems) Engineering
프롬프트에서 컨텍스트 엔지니어링으로, 그 다음은 어디인가. Anthropic 엔지니어링 블로그의 최근 흐름을 단서로 harness 설계, eval, containment(격리) 세 방향과 토큰 절약 논의의 연결을 정리한다.
토큰 절약법
AI 코딩 도구의 토큰 비용은 어디서 발생하고 어떻게 줄일까. Anthropic 가격표와 prompt caching, subagent, MCP 다이어트, context engineering, Cursor Composer까지 검증된 절약 패턴을 React POC로 직접 측정한다.
토큰의 원리
AI 토큰은 단어도 글자도 아니다. BPE 토크나이저가 토큰을 만드는 법, 토큰이 임베딩 벡터로 바뀌어 모델에 들어가는 과정, 입력보다 출력이 비싼 prefill/decode 구조, KV 캐시가 단가를 깎는 원리까지 비용의 뿌리가 되는 토큰 동작 원리를 정리한다.
AI 에이전트 도구
Claude로 프론트엔드 개발을 하며 마주친 도구들을 네 가지 관점에서 정리해본다. CLAUDE.md·AGENTS.md·SKILL.md의 차이, MCP의 원리와 Serena, CodeGraph 같은 코드 인텔리전스 도구의 동작 원리, 그리고 GitHub Trending을 읽는 법까지.
상태 관리
프론트엔드에서 가장 까다로운 작업으로 꼽히는 상태 관리. 지역·전역·서버·폼·URL·외부·가드 7가지 범주로 상태를 분류하고, 단일 진실 공급원·불가능한 상태 제거·State Colocation 등 4가지 안목으로 도구 선택과 모델링 기준을 정리한다.
도메인 모델
프론트엔드 관점에서 도메인, 도메인 모델, 도메인 오브젝트의 개념을 정리하고, Entity와 Value Object, 빈약한 도메인 모델, ViewModel 분리까지 다룬다. 종합소득세 도메인 예시로 React에서 도메인 로직을 분리하는 실전 방법을 알아보자.
Toss Frontend Fundamentals 모의고사 2회차 리팩토링 후기
Toss Frontend Fundamentals 모의고사 2회차 회의실 예약 앱 리팩토링 경험을 공유한다. 모놀리식 컴포넌트 분리, 도메인 로직 추출, 테스트 기반 리팩토링 과정을 정리했다.
AI 프론트엔드 엔지니어
AI가 코드를 대신 짜는 시대, 프론트엔드 엔지니어는 어떻게 성장하고 살아남을 수 있을까? Karpathy의 agentic engineering, Vercel v0, Stack Overflow Survey, METR 연구 등 검증된 자료를 바탕으로 검증·명세·판단력 중심의 새로운 역량과 학습 전략을 정리한다.
추상화
프론트엔드에서 추상화란 무엇이고, 좋은 추상화와 나쁜 추상화는 어떻게 다른가. 추상화 수준, 의도를 드러내는 이름, 부품 조립 방식을 React 컴포넌트와 함수 설계 관점에서 정리한다.
queryKey
TanStack Query의 queryKey가 어떤 원리로 동작하고 왜 인라인 배열에서 query key factory, queryOptions까지 진화해왔는지 정리한다. TkDodo 패턴과 v5 queryOptions, setQueryData 무효화까지 실무 관점으로 다룬다.
에러 핸들링
React Error Boundary, try/catch, TanStack Query의 throwOnError가 각각 어디까지 책임지고 어떻게 결합하는지 정리한다. 렌더 단계 에러와 비동기 에러를 구분하고 react-error-boundary의 reset 동작 원리까지 다룬다.
React Fiber 완전 정복
React Fiber 아키텍처를 Stack Reconciler부터 Lane 우선순위, 더블 버퍼링, MessageChannel 스케줄러, Concurrent Features까지 React 소스코드 기반으로 깊이 분석한다. 프론트엔드 면접 단골 주제.
Biome이 ESLint와 Prettier를 대체할 수 있을까?
Biome의 린팅과 포매팅 성능을 ESLint, Prettier와 비교한다. Rust 기반 올인원 툴체인의 실무 도입 경험과 마이그레이션 가이드를 정리했다.
Zustand, 너 뭔데 ProviderLess 인 거야?
Zustand가 Provider 없이 상태관리를 해내는 원리를 소스코드 분석을 통해 파헤친다. React Context API와의 차이점과 모듈 스코프 기반 설계를 알아보자.
압축 알고리즘에 대해 알아보자
ZIP, GZIP, ZSTD, Brotli 등 주요 압축 알고리즘의 원리와 성능을 비교한다. LZ77부터 현대 알고리즘까지, 빌드 결과물 압축에 최적인 선택은 무엇일까?