모든 글
React 앱의 layer
Juntao Qiu의 React 모듈화 글을 따라 결제 화면을 view, model, data로 나눈다. 예제 저장소를 직접 돌려 찾은 useMemo 무력화와 fetch 반복, 이 구조를 언제 쓸지에 대한 판단도 정리했다.
결정 모델, Jev와 Kev
텍스트 대신 확률을 돌려주는 모델 Jev가 나왔다. confidence는 학습된 값이 아니라 산술이고, calibration은 모델이 아니라 분포의 성질이다. 공개된 Jev 실측 5,743건과, 재현 구현 Kev를 이 블로그의 음차 게이트에 직접 돌린 결과로 확인한다.
overlay-kit
모달 열림 여부를 전역 상태로 들고 있던 코드를 await 한 줄로 바꾸며 얻은 것과 잃은 것. overlay-kit의 이벤트와 리듀서, openAsync 코어 로직을 소스로 따라가고, 재열기 동작을 직접 테스트해 문서와 어긋나는 지점까지 확인한다.
LLM calibration과 overconfidence
calibration은 정확도가 아니라 자기가 몇 퍼센트 맞힐지 아는 능력이다. ECE가 그 어긋남을 어떻게 재는지, GPT-4 기술 보고서에서 post-training 뒤 ECE가 0.007에서 0.074로 나빠진 결과와 그 원인이 어디까지 밝혀졌는지 정리한다.
공유 언어
기획자와 개발자가 같은 단어로 다른 것을 말하고 있을 때 무엇을 해야 할까. Evans의 ubiquitous language와 Clark의 grounding 이론으로 타직군 소통 실패의 구조를 짚고, 해상도를 맞추는 실무 도구까지 정리한다.
Harness(Systems) Engineering
프롬프트에서 컨텍스트 엔지니어링으로, 그 다음은 어디인가. Anthropic 엔지니어링 블로그의 최근 흐름을 단서로 harness 설계, eval, containment(격리) 세 방향과 토큰 절약 논의의 연결을 정리한다.
Kalyx
React headless DatePicker Kalyx를 왜 만들었고 Ark UI, React Aria, react-day-picker와 무엇이 다른지 정리했다. ISO 8601 UTC 값 모델, Intl 기반 DST 처리, timezone 속성 테스트를 다룬다.
토큰 절약법
AI 코딩 도구의 토큰 비용은 어디서 발생하고 어떻게 줄일까. Anthropic 가격표와 prompt caching, subagent, MCP 다이어트, context engineering, Cursor Composer까지 절약 패턴을 React POC로 측정한다.
토큰의 원리
AI 토큰은 단어도 글자도 아니다. BPE 토크나이저가 토큰을 만드는 법, 토큰이 임베딩 벡터로 바뀌어 모델에 들어가는 과정, 입력보다 출력이 비싼 prefill/decode 구조, KV 캐시가 단가를 깎는 원리까지 비용의 뿌리가 되는 토큰 동작 원리를 정리한다.
Context file
CLAUDE.md, AGENTS.md, SKILL.md, Cursor rules가 언제 어떻게 에이전트에게 읽히는지 정리한다. user message 주입 구조와 context 망각, ETH Zurich 연구로 context file에 무엇을 적을지 기준을 세운다.
Code intelligence의 네 계층
AI 코딩 에이전트의 코드 탐색 비용을 줄이는 도구를 네 계층으로 비교한다. Repomix의 context packing, Aider의 tree-sitter repo map, CodeGraph 지식 그래프, Serena 같은 LSP 기반 도구가 코드를 얼마나 이해하는지 본다.
MCP와 function calling
MCP가 function calling과 무엇이 다른지 프로토콜 구조로 정리한다. 여섯 가지 primitive, stdio와 Streamable HTTP, tools/list에서 tool_use 루프까지의 흐름, Tool Poisoning 같은 보안 문제를 다룬다.
상태 관리
프론트엔드 상태 관리를 지역·전역·서버·폼·URL·외부·가드 7가지 범주로 나누고, 범주마다 맞는 도구와 경계를 정리한다. 마지막에는 상태를 만들기 전에 던질 네 가지 질문으로 압축한다.
도메인 모델
프론트엔드에서 도메인 로직을 어디에 둘지 종합소득세 예시로 다룬다. 컴포넌트에 섞인 세금 계산을 순수 함수로 분리하고, 빈약한 도메인 모델, API 응답 변환 계층, ViewModel 분리, Class와 함수형의 응집 차이, 분리를 멈출 기준까지 정리한다.
도메인 용어
도메인, 도메인 모델, 도메인 오브젝트, 도메인 오브젝트 모델이 어떻게 다른지 Eric Evans와 Martin Fowler의 정의로 정리한다. API 응답 타입이 왜 도메인 모델이 아닌지, Entity와 Value Object를 어떻게 구분하는지 종합소득세 예시로 설명한다.
Toss Frontend Fundamentals 모의고사 2회차 리팩토링 후기
Toss Frontend Fundamentals 모의고사 2회차 회의실 예약 앱 리팩토링 경험을 공유한다. 모놀리식 컴포넌트 분리, 도메인 로직 추출, 테스트 기반 리팩토링 과정을 정리했다.
AI 프론트엔드 엔지니어
AI가 코드를 대신 짜는 시대, 프론트엔드 엔지니어는 어떻게 성장할 수 있을까? Karpathy의 agentic engineering, Vercel v0, METR 연구를 바탕으로 검증·명세·판단력 중심의 새 역량을 정리한다.
추상화
프론트엔드에서 추상화란 무엇이고, 좋은 추상화와 나쁜 추상화는 어떻게 다른가. 추상화 수준, 의도를 드러내는 이름, 부품 조립 방식을 React 컴포넌트와 함수 설계 관점에서 정리한다.
queryKey
TanStack Query의 queryKey 관리 방식이 인라인 배열, 상수 객체, query key factory를 거쳐 v5 queryOptions까지 어떻게 진화했는지 정리한다. 작성 규칙과 DataTag 타입 추론, 무효화 패턴을 실무 관점으로 다룬다.
queryKey 비교 원리
TanStack Query가 렌더링마다 새로 만들어지는 queryKey 배열을 같은 키로 판단하는 방식을 정리한다. hashKey 직렬화가 키 순서, undefined, Map 같은 값을 어떻게 바꾸는지와 필터가 키 구조를 비교하는 방식까지 다룬다.
ErrorBoundary 배치
React Router 와 TanStack Query 를 쓰는 화면에서 ErrorBoundary 를 몇 개, 어디에 둘지 정하는 기준을 설치본 소스로 확인한다. 라우트, 화면, 영역마다 받는 에러와 되돌리는 방법, fallback 을 하나로 맞추는 법, 재시도 조건까지 다룬다.
재시도 버튼이 안 듣는 이유
react-error-boundary 의 재시도 버튼을 눌러도 같은 fallback 이 다시 뜨는 세 경우를 설치본 소스로 확인한다. 쿼리 에러는 QueryErrorResetBoundary, 렌더 에러는 queryFn 검사, React.lazy 청크 실패는 새로 고침으로 푼다.
에러 전이
같은 에러를 일곱 자리에서 던져 보면 넷만 ErrorBoundary 에 닿는다. 렌더와 생명주기, 컴파일 타임, 서버 데이터, 페이지 전환, 외부 라이브러리, 이벤트와 비동기가 각각 어디로 전이되는지를 공식 문서와 설치본 소스로 확인한다.
React Fiber 완전 정복
React Fiber를 Stack Reconciler부터 Fiber 노드, double buffering, Lane 우선순위, Work Loop, Render Phase와 Commit Phase, Concurrent Features까지 React 소스코드로 분석한다.
React가 MessageChannel을 쓰는 이유
React Scheduler가 requestIdleCallback, requestAnimationFrame, setTimeout 대신 MessageChannel로 작업을 예약하는 이유를 React PR 기록과 setTimeout 4ms 지연의 Chrome 실측으로 정리한다.
Biome이 ESLint와 Prettier를 대체할 수 있을까?
Biome의 린팅과 포매팅 성능을 ESLint, Prettier와 비교한다. Rust 기반 올인원 툴체인의 실무 도입 경험과 마이그레이션 가이드를 정리했다.
Zustand, 너 뭔데 ProviderLess 인 거야?
Zustand가 Provider 없이 상태관리를 해내는 원리를 소스코드 분석을 통해 파헤친다. React Context API와의 차이점과 모듈 스코프 기반 설계를 알아보자.
압축 알고리즘에 대해 알아보자
ZIP, GZIP, ZSTD, BZIP2, XZ, Brotli의 구조와 속도, 압축률을 비교한다. tar.gz가 zip보다 작아지는 솔리드 아카이브의 원리와, 빌드 결과물을 올릴 때 tar.gz와 tar.zst 중 무엇을 고를지 정리한다.
LZ77과 LZ78의 차이
LZ77과 LZ78이 사전을 다루는 방식이 어떻게 다른지 정리한다. Sliding window와 명시적 사전의 차이, 오래된 내용을 잊는 방식의 차이, 그리고 DEFLATE를 거쳐 ZIP, GZIP, Zstd로 이어진 LZ77 계열의 계보를 설명한다.