이 저장소가 대체 무엇인가.
how-claude-code-works는 Claude Code의 소스코드 저장소가 아니다. Claude Code 자체는 Anthropic이 npm 패키지로 배포하지만 소스는 공개하지 않는다(정확히는 minify된 번들만 배포). 이 프로젝트는 그 번들을 커뮤니티가 직접 읽고, Claude Code 스스로를 동원해("Claude Code와 함께 Claude Code 소스를 읽는다") 핵심 설계를 15개 전문 문서로 정리한 3자 리버스 엔지니어링 분석 문서다.
다루는 주제는 에이전트 루프의 이중 제너레이터 구조, 4단계 점진적 컨텍스트 압축, 66개 이상 도구의 통합 인터페이스, tree-sitter AST 기반 5층 방어 권한 시스템, 3가지 멀티 에이전트 협업 모드, 기억·기술(Skill) 시스템, Hook 확장 아키텍처 등 — 즉 "프로덕션급 AI 코딩 에이전트를 만들려면 무엇을 고민해야 하는가"의 실전 교과서에 가깝다.
블랙박스 자동차 엔진을 뜯어볼 수 없다고 하자. 대신 배기가스, 소음 패턴, 계기판 반응을 정밀 관찰해서 "이 엔진은 아마 4행정 터보차저 구조이고, 냉각 시스템은 이런 식으로 작동할 것"이라는 상세 리포트를 쓴 것이 이 저장소다. 실제 설계도(원본 소스)는 없지만, 관찰이 워낙 정밀해서 마치 설계도를 본 것 같은 착각이 들 정도로 상세하다.
트렌딩 이유 · 경쟁 자료 대비 장점.
Claude Code는 2026년 현재 가장 널리 쓰이는 AI 코딩 에이전트다. 하지만 정작 "어떻게 이렇게 잘 동작하는가"를 설명하는 자료는 거의 없었다 — Anthropic 공식 문서는 사용법 위주이고, 내부 아키텍처는 비공개다. 이 저장소는 그 공백을 정확히 메운다. AI 에이전트를 직접 만들고 싶은 개발자, Claude Code를 Hooks·CLAUDE.md로 깊이 커스터마이징하고 싶은 사용자, AI 안전 설계에 관심 있는 사람 모두에게 "실전 검증된 유일한 설계 레퍼런스"가 된다.
| 자료 유형 | 깊이 | 실전 검증 | 재현 가능성 | how-claude-code-works |
|---|---|---|---|---|
| 공식 사용 설명서 | 사용법 중심(얕음) | 공식이므로 정확 | — | 이 저장소는 내부 설계까지 파고듦 |
| 일반 AI Agent 이론 블로그 | 추상적 개념 위주 | 실제 코드 근거 없음 | 낮음 | 구체적 상수·함수명·줄 번호까지 인용 |
| 학술 논문(Agent 아키텍처) | 깊지만 프로덕션 디테일 부족 | 실험실 수준 | 낮음 | 수백만 사용자가 쓰는 실제 시스템 기반 |
| claude-code-from-scratch (자매 저장소) | 최소 구현(~4천 줄) | 동작하는 코드 | 매우 높음(직접 실행) | 이 저장소가 그 설계 근거를 제공 |
① 숫자로 말한다 — "빠르다", "안전하다" 같은 뭉뚱그린 서술이 아니라 "9단계 병렬 시작으로 임계 경로 약 235ms", "23항목 정적 보안 검사기", "4단계 압축 파이프라인" 처럼 구체적 수치와 메커니즘 이름을 인용한다. ② "왜"까지 설명한다 — 단순히 "5층 방어 체계가 있다"에서 멈추지 않고, 왜 정규식이 아니라 tree-sitter AST를 쓰는지, 왜 압축 단계가 4개(Snip→Microcompact→Context Collapse→Autocompact)로 나뉘는지 설계 이유를 파고든다. ③ 실습 짝꿍이 있다 — 각 챕터 끝에 자매 저장소 claude-code-from-scratch의 대응 구현으로 연결되는 링크가 있어, 읽고 끝나지 않고 직접 최소 버전을 만들어볼 수 있다.
"내 AI 에이전트가 컨텍스트 윈도우를 넘기면 어떻게 해야 하나?" 같은 질문에 인터넷에서 찾을 수 있는 답은 보통 "요약해서 압축하세요" 정도다. 이 저장소는 다르다 — "Claude Code는 4단계로 나눠서, 먼저 무비용 트리밍(Snip)을 시도하고, 그래도 부족하면 도구 결과 중복 제거(Microcompact), 그래도 부족하면 투영식 접기(Context Collapse), 최후의 수단으로만 서브 에이전트를 fork해서 전체 요약(Autocompact)을 만든다 — 이렇게 단계를 나누는 이유는 비용이 낮은 순서대로 시도해서 대부분의 대화가 비싼 API 호출 없이 끝나기 때문이다"라고 설명한다. 이 정도 구체성은 실제 프로덕션 코드를 본 사람만 쓸 수 있다.
이 저장소가 분석하는 Claude Code 자체의 기술 스택 + 저장소를 서빙하는 문서 사이트 스택.
주의할 점 하나 — 이 섹션 대부분은 이 저장소가 분석 대상으로 삼는 "Claude Code 본체"의 기술 스택이다. 저장소 자체(문서 사이트)는 훨씬 가벼운 Docsify 정적 사이트다. 두 스택을 구분해서 읽어야 한다.
| 계층 | 기술 선택 | 왜 이렇게 분석되었나 |
|---|---|---|
| 런타임 | Bun | 고성능 JS/TS 런타임. 컴파일 타임 feature() 매크로로 코드를 물리적으로 제거하는 Feature Gate를 지원 — 내부 전용 기능(협업자 모드 등)이 외부 배포판 바이너리에 아예 존재하지 않게 만든다. |
| 언어 | TypeScript (전량, strict) | ~1,332개 .ts 파일 + ~552개 .tsx 파일, 총 51만+ 줄. 엄격한 타입 검사로 66개 이상 도구의 통합 인터페이스 안전성을 보장. |
| UI 프레임워크 | React + 자체 제작 Ink 렌더러 | 터미널용 React 렌더러를 직접 만들어 src/ink/(약 1.0MB)에 유지. 권한 확인 다이얼로그, 스트리밍 코드 하이라이팅, 중첩 진행 표시 등 복잡한 상태 관리가 필요해 기성 라이브러리 대신 자체 개발. |
| 레이아웃 엔진 | Yoga (Facebook Flexbox 엔진) | 터미널 환경에 맞게 Flexbox 레이아웃을 적용. |
| 스키마 검증 | Zod | 도구 입력, Hook 출력, 설정 값의 런타임 타입 검증. 모델이 생성한 파라미터가 도구 실행 전 반드시 통과해야 하는 관문. |
| CLI 프레임워크 | Commander.js | 커맨드라인 인자 파싱 후 REPL/headless/SDK 3가지 실행 모드로 분기. |
| API 통신 | Anthropic SDK (TypeScript) | 스트리밍 응답을 지원하는 공식 SDK. 지수 백오프 + 모델 다운그레이드 재시도 로직이 감싸져 있음. |
| 보안 파싱 | tree-sitter (tree-sitter-bash) | Bash 명령을 정규식이 아니라 진짜 문법 트리로 파싱해 23항목 정적 보안 검사와 결합. |
| 서브시스템 | 핵심 파일/디렉토리 | 역할 |
|---|---|---|
| 메인 루프 | src/query.ts (1,729줄) | 압축→API 호출→도구 실행→계속/종료를 반복하는 상태 머신 제너레이터 |
| 세션 엔진 | src/QueryEngine.ts (1,295줄) | 대화 전체 생명주기(영속화·예산 추적·결과 조립) 관리 |
| 전역 상태 | src/bootstrap/state.ts (1,758줄, 150+ 접근자) | getter/setter 함수로 노출되는 집중식 상태 저장소 |
| 도구 정의 | src/Tool.ts | 모든 도구(내장/MCP/플러그인)가 구현하는 통합 인터페이스 |
| 압축 엔진 | src/services/compact/compact.ts (1,705줄) | 서브 에이전트를 fork해 대화 요약을 생성하는 최후 수단 압축 |
| API 클라이언트 | src/services/api/claude.ts (3,419줄) | 프롬프트 구성·캐시 제어·스트리밍 파싱을 담당하는 HTTP↔API 다리 |
| Bash 보안 | src/tools/BashTool/bashSecurity.ts (~1,200줄) | 23항목 정적 보안 검사기 |
| Hook 엔진 | src/utils/hooks.ts | 23개 이상 Hook 이벤트를 6단계 파이프라인으로 실행 |
| 협업자 시스템 | src/coordinator/ | Feature-gated 멀티 에이전트 협업자(Coordinator) 모드 |
| 메시지 처리 | src/utils/messages.ts (5,512줄) | API 전송 전 메시지 정규화·압축 경계 관리 |
| 항목 | 내용 |
|---|---|
| 언어 | TypeScript 버전 + Python 버전 두 가지 제공 |
| 규모 | 약 4,000줄, 11개 소스 파일, 11장 튜토리얼 |
| 백엔드 | Anthropic 네이티브 API + OpenAI 호환 API 듀얼 지원 (--api-base 옵션으로 전환) |
| 목적 | 이 저장소가 설명하는 설계 원리를 최소 규모로 직접 구현해보는 실습용 코드 |
| 구성 요소 | 기술 |
|---|---|
| 문서 사이트 엔진 | Docsify (정적 Markdown → 동적 렌더링 SPA, 빌드 스텝 불필요) |
| 콘텐츠 포맷 | Markdown (docs/*.md) + Mermaid 다이어그램 |
| 다국어 | 중국어(기본) + 영어(en/ 디렉토리, README_EN.md) |
| 배포 | GitHub Pages (index.html + .nojekyll) |
| 라이선스 | MIT |
_sidebar.md), 커버 페이지(_coverpage.md) 같은 특수 파일로 구조를 정의한다. 문서 프로젝트가 "그냥 마크다운 파일 모음"처럼 관리하기 쉬우면서도 웹사이트처럼 보이게 만드는 데 적합하다.이 저장소가 소스에서 분석한 Claude Code의 핵심 구조 + 4가지 설계 패턴. 이 섹션이 이 저장소의 진짜 가치다.
yield로 값을 여러 번 "조금씩" 내보낼 수 있게 하는 JavaScript/TypeScript 문법. Claude Code의 핵심 루프 query()는 async function*로 선언되어, 모델이 토큰을 생성할 때마다, 도구가 결과를 낼 때마다 즉시 yield로 상위 레이어(터미널 화면)에 흘려보낸다. 콜백이나 Promise 체인보다 스트리밍을 표현하기에 훨씬 자연스럽고, generator.return() 한 번으로 호출 체인 전체를 취소할 수 있다는 장점이 있다(Ctrl+C 처리에 활용).이 저장소가 가장 강조하는 구조적 결정 중 하나다. QueryEngine(외곽)은 "대화 전체가 얼마나 진행됐는지, 비용이 얼마인지, 사용자가 방금 뭘 입력했는지"를 관리한다. 내부의 query()는 "이번 한 사이클에서 압축이 필요한지, API가 뭘 반환했는지, 도구가 성공했는지"만 신경 쓴다. 왜 나누는가 — 관심사가 완전히 다르기 때문이다. 세션 레이어는 사용자 중단, 토큰 예산 소진, 대화 영속화 같은 생명주기 문제를 다루고, 쿼리 레이어는 "API 호출 → 응답 파싱 → 도구 실행 → 결과 조립"이라는 촘촘한 루프에만 집중한다.
| 차원 | QueryEngine (바깥) | query() (안쪽) |
|---|---|---|
| 범위 | 대화 전체 생명주기 | 단일 쿼리 루프 1회전 |
| 상태 | 영속적 (누적 메시지, 사용량) | 루프 내부적 (State 객체, 매 반복마다 재할당) |
| 예산 추적 | USD/턴 수 체크, 구조화 출력 재시도 | 압축을 넘나드는 Task Budget 이월 |
| 복구 전략 | 권한 거부, 고아 권한 재생 | PTL(프롬프트 초과) 배수, 압축 재시도 |
이 저장소가 "가장 정교한 설계"로 꼽는 부분이다. 컨텍스트 윈도우가 가득 차갈 때 한 번에 통째로 요약하는 대신, 4단계로 나눠 순차 시도한다. 각 단계는 이전 단계보다 "더 무겁고, 더 많은 세부 정보를 잃는다".
왜 4단계로 나누는가? Autocompact만 있다면 컨텍스트가 찰 때마다 반드시 API를 호출해 요약을 생성해야 한다 — 지연시간과 정보 손실 둘 다 발생한다. 무비용 Snip과 거의 무비용인 Microcompact를 먼저 시도하면, 대부분의 대화는 비싼 Autocompact까지 가지 않고 끝난다. 이 저장소는 실제 소스 주석을 인용해 그 근거를 뒷받침한다 — 서킷 브레이커(연속 3회 압축 실패 시 중단) 도입 배경으로 "1,279개 세션에서 연속 50회 이상(최대 3,272회) 압축 실패가 발생해 하루 약 25만 회의 API 호출을 낭비했다"는 실제 프로덕션 데이터를 인용한다.
Autocompact는 대화 히스토리를 요약으로 대체하므로, 압축 직전 편집한 파일의 세부 내용이 사라질 위험이 있다. 이 저장소가 분석한 대응책은 압축 직후 자동 복원이다 — 최근 편집한 파일 최대 5개(각 5K 토큰 이하)를 다시 읽어 첨부 메시지로 주입하고, 활성 기술(Skill)도 최대 25K 토큰 예산 내에서 재활성화한다. 압축이 "정보를 지우는 작업"이 아니라 "정보를 재배치하는 작업"에 가깝게 설계된 셈이다.
이 저장소가 "Claude Code가 왜 빠르게 느껴지는가"의 핵심 답으로 제시하는 메커니즘이다. 소박한 구현이라면: 모델 응답 전체 대기 → 도구 호출 파싱 → 순차 실행 → 결과 전송. Claude Code는 다르다 — 모델이 여전히 다음 텍스트를 생성하는 동안, 이미 완전히 파싱된 tool_use 블록은 즉시 실행을 시작한다.
이 저장소가 짚어낸 숫자로 말하면: 도구 하나 실행에 보통 약 1초가 걸리는데, 모델의 스트리밍 응답은 5~30초 지속된다. 3~4개의 도구 호출이 포함된 응답이라면, 이 겹침 효과로 사용자가 체감하는 종단 지연시간을 크게 줄일 수 있다. 도구는 queued → executing → completed → yielded 4가지 상태를 거치며, 오직 읽기 전용이고 isConcurrencySafe가 참인 도구끼리만 병렬 실행되고, 쓰기 작업은 독점 실행된다.
Claude Code는 사용자 컴퓨터에서 실제 명령을 실행하므로 보안이 타협 불가능한 전제조건이다. 이 저장소가 상세 분석한 방어선은(문서 간 표기가 5층/7층으로 다르게 등장하는데, 핵심 검사 체계 기준으로 보면 아래 흐름이다):
핵심 통찰은 각 층이 완전히 다른 기술을 쓴다는 점이다 — 규칙 매칭(문자열), 문법 분석(tree-sitter AST), 정적 패턴(정규식 23종), 머신러닝(경량 분류기), 인간 판단(확인창). 이 저장소는 "왜 하나의 통합 검사가 아니라 7층인가"에 이렇게 답한다 — 심층 방어의 핵심 가정은 "어떤 층이든 우회될 수 있다"는 것이다. tree-sitter 의미 분석이 우회되더라도, 경로 제약과 사용자 확인은 여전히 막을 수 있다.
r"m" -rf /, $(echo rm) -rf /, eval "rm -rf /" 같은 변형이 모두 정규식 매칭을 우회할 수 있다. tree-sitter는 실제 셸이 명령을 해석하는 방식과 동일한 문법 트리를 만들어, "이 명령이 실제로 무엇을 실행하는지"를 정확히 파악한다. 이 저장소가 인용한 소스 주석의 핵심 설계 원칙은 "FAIL-CLOSED — 이해하지 못하는 구조는 절대 해석하지 않는다"이다. 화이트리스트에 없는 AST 노드가 나오면 무조건 too-complex로 분류해 사용자 확인을 요구한다.이 저장소는 여러 에이전트가 협업하는 3가지 모드를 상세 분석한다.
| 모드 | 통신 방식 | 특징 |
|---|---|---|
| 서브 에이전트 (AgentTool) | fork-return | 가장 단순. 부모가 자식 완료를 기다림. 컨텍스트는 기본적으로 격리(자식이 부모 대화 이력을 못 봄) |
| 협업자(Coordinator) | 파생 + 종합 | 협업자는 직접 파일을 읽거나 코드를 쓸 수 없다 — 오직 Worker에게 작업을 위임하고 결과를 종합만 함. 이 제약이 "협업자가 직접 하는 게 빠르니까"라는 유혹을 원천 차단 |
| Swarm 팀 | 이름 붙은 사서함(mailbox) 통신 | 중앙 조정자 없이 에이전트 간 대등한 통신. Tmux/iTerm2/InProcess 3종 백엔드 지원 |
충돌 방지를 위해 시스템은 Git Worktree로 각 에이전트에 독립된 코드 사본을 제공한다. 작업이 끝났을 때 실질적 변경이 없으면 자동 정리되고, 변경이 있으면 경로와 브랜치명을 반환해 사용자가 병합 여부를 결정하게 한다.
이 저장소(문서 사이트) 자체의 구조 + 분석 대상인 Claude Code 소스 구조 요약.
예를 들어 파일명은 05-code-editing-strategy.md지만 README 목차에서는 "10장 코드 편집 전략"으로 소개된다. 14-system-prompt-design.md는 실제로는 "13장"이다. 이 저장소가 여러 차례 챕터를 재편성(예: "기억과 기술을 독립 장으로 분리", "3장 신설")하면서 파일명은 최초 생성 순서를 유지한 채 README의 목차 번호만 갱신된 것으로 보인다. 문서를 찾을 때는 파일명이 아니라 README의 장 제목으로 검색하는 편이 안전하다.
이 저장소에서 무엇을 배울 수 있는가 — 이 프로젝트 자체가 "학습 자료"이므로, 각 챕터가 곧 하나의 학습 포인트다.
챗봇과 에이전트의 근본 차이를 코드 레벨에서 배울 수 있다. 챗봇은 요청-응답 1회로 끝나지만, 에이전트는 while(true) 루프를 돌며 모델이 도구 호출을 포함하지 않는 순수 텍스트 응답을 낼 때까지 계속된다. 종료 신호나 카운터가 따로 없다 — "도구를 안 부른다"는 선택 자체가 곧 "끝났다"는 신호다. 이 저장소는 여기서 그치지 않고, 실전에서 이 단순한 루프가 왜 1,729줄로 자라야 했는지를 7개 Continue Site(장애 복구 재진입점)로 설명한다: 프롬프트 초과(PTL), 출력 토큰 한도, API 과부하, 압축 트리거 재시도 등 각각의 실패 시나리오.
배울 것: async generator로 스트리밍 루프 구현, 상태 머신으로 재시도 로직 정리, "에러 보류(withholding)" — 복구 가능한 에러는 사용자에게 노출하지 않고 내부에서 처리 후 계속 진행하는 패턴.
LLM 애플리케이션에서 가장 저평가된 주제를 정면으로 다룬다. 프롬프트 캐시는 바이트 단위로 완전히 동일해야만 히트한다 — 이 제약이 시스템 프롬프트 구성 순서, 도구 배열 정렬 방식, 심지어 어떤 정보를 메시지 앞에 붙이고 뒤에 붙일지까지 결정한다는 것을 배울 수 있다. "정적 콘텐츠는 앞, 동적 콘텐츠는 뒤"라는 한 문장 원칙이 시스템 전체 설계를 관통한다.
배울 것: KV 캐시(전위 캐시)의 작동 원리, 캐시 경계(cache_control) 설정 전략, <system-reminder> XML 태그로 시스템 메타정보를 사용자 발화와 섞이지 않게 주입하는 기법, memoize로 반복 계산을 회피하는 패턴.
"보안은 여러 층으로 만들어야 한다"는 원칙을 교과서가 아니라 실제 프로덕션 코드 수준에서 배울 수 있다. tree-sitter AST + 정규식 23종 + ML 분류기 + 인간 확인이 각각 독립적으로 동작하도록 설계된 이유, "FAIL-CLOSED"(이해 못 하는 구조는 무조건 차단)라는 원칙이 코드에 어떻게 반영되는지, 화이트리스트가 블랙리스트보다 안전한 이유(신규 속성 추가 시 기본값이 "거부"가 되도록)까지 배운다.
배울 것: 정규식 기반 보안 검사의 한계와 AST 기반 분석의 우위, fail-closed 기본값 설계, 사용자 확인 UI와 자동화 검사를 "경주"시켜 지연 없이 빠른 결정을 내리는 패턴.
대규모 플러그인/도구 생태계를 어떻게 설계해야 신규 도구 추가가 기존 코드를 건드리지 않게 되는지를 배운다. 모든 도구가 동일한 Tool 인터페이스를 구현하고, 안전 속성(isReadOnly, isConcurrencySafe)을 "입력값을 받는 메서드"로 선언해 같은 도구라도 입력에 따라 안전도가 달라질 수 있게 한 설계가 인상적이다.
배울 것: 개방-폐쇄 원칙(OCP)의 실전 적용, fail-closed 기본값 팩토리 패턴(TOOL_DEFAULTS), 대용량 도구 결과를 디스크로 스필오버하는 패턴, ToolSearch로 지연 로딩해 초기 프롬프트 크기를 줄이는 기법.
서브 에이전트를 만들 때 "부모 컨텍스트를 공유할 것인가, 격리할 것인가"라는 트레이드오프를 정면으로 다룬다. 기본은 격리("deny by default")지만, Fork 서브 에이전트는 예외적으로 부모의 전체 요청 전위(prefix)를 그대로 상속해 프롬프트 캐시를 공유하는 경제학적 이유를 설명한다.
배울 것: Git Worktree로 파일 시스템 격리하기, AbortController 체이닝으로 장애를 격리하는 패턴, "협업자는 실행하지 않는다"는 제약으로 역할을 강제 분리하는 설계.
15편 중 가장 긴 문서(14-system-prompt-design.md)가 다루는 주제. 시스템 프롬프트를 "그냥 긴 지시문 텍스트"가 아니라 7층으로 계층화된 아키텍처로 설계하는 법, 반패턴을 미리 "접종"(inoculation)해 모델이 흔한 실수를 피하게 만드는 프롬프트 기법, 위험 반경(explosion radius) 프레임워크로 조작의 위험도를 분류하는 사고방식을 배울 수 있다.
배울 것: 프롬프트를 코드처럼 버전 관리하고 계층화하는 법, 부정 예시(negative example)로 모델을 유도하는 기법, "실습 아이디어" — 자신의 에이전트 시스템 프롬프트에 "절대 하지 말 것" 섹션을 추가해 반패턴 접종을 실험해보기.
이 저장소는 문서 프로젝트라 요구사항이 가볍다. 로컬 미리보기와 GitHub Pages 배포 기준으로 정리.
| 항목 | 요구사항 |
|---|---|
| 이 저장소를 읽기만 할 때 | 브라우저만 있으면 됨 — 온라인 문서 사이트 바로 열람 가능 |
| 로컬 클론 + 미리보기 | Git, 정적 서버 도구(예: docsify-cli 또는 python3 -m http.server) |
| Node.js (docsify-cli 사용 시) | Node 14+ 권장 |
| 디스크 용량 | 저장소 자체는 수 MB 수준(대부분 텍스트 Markdown), 이미지 자산 포함해도 가벼움 |
| 네트워크 | Docsify는 CDN에서 Vue.js 등 런타임을 로드하므로, 완전 오프라인 사용 시 별도 설정 필요 |
| 배포 환경 | GitHub Pages (정적 호스팅, 빌드 스텝 불필요) |
이 저장소 자체는 어떤 실행 환경도 요구하지 않지만, 문서에서 설명하는 실제 동작을 체험하려면 Claude Code CLI(Node.js 기반, npm install -g @anthropic-ai/claude-code 등)를 별도로 설치해야 한다. 또한 자매 저장소 claude-code-from-scratch를 직접 실행하려면 Node.js(TypeScript 버전) 또는 Python 3(Python 버전) 런타임과 Anthropic API 키가 필요하다.
난이도별 5개 — 이 저장소를 그냥 읽지 않고 "체화"하기 위한 과제.
저장소를 클론하고 Docsify로 로컬 미리보기를 띄운다. 15편 전체를 다 읽기 전에 먼저 docs/quick-start.md(10분 요약본)로 전체 지도를 파악하는 것이 이 저장소가 직접 권장하는 순서다.
git clone https://github.com/Windy3f3f3f3f/how-claude-code-works.git
cd how-claude-code-works
npx docsify-cli serve . # 또는: python3 -m http.server 3000
# 브라우저에서 http://localhost:3000 접속
확인 포인트: quick-start.md를 읽은 뒤, "Agent Loop가 언제 멈추는가"를 자기 말로 한 문장 요약해본다. (정답 힌트: 모델 응답에 tool_use 블록이 없을 때.)
docs/03-context-engineering.md를 읽고, Snip → Microcompact → Context Collapse → Autocompact 4단계 각각의 "무엇을 지우는가", "비용은 얼마인가", "되돌릴 수 있는가"를 표로 정리한다. 이 문서의 설명을 보지 않고 자기 힘으로 채워본 뒤 원문과 비교한다.
확인 포인트: "왜 Context Collapse가 Autocompact보다 먼저 시도되는가"를 설명할 수 있는지 스스로 점검한다. (힌트: 투영식이라 되돌릴 수 있고, 90% 활용률에서 커밋되어 Autocompact 트리거를 종종 막아준다.)
자매 저장소를 클론해 실제로 실행해본다. 15장 분석 문서에서 설명한 "7개 Continue Site" 중 하나(예: 프롬프트 초과 시 대화 요약)를 최소 버전에는 어떻게 단순화했는지 비교한다.
git clone https://github.com/Windy3f3f3f3f/claude-code-from-scratch.git
cd claude-code-from-scratch
npm install
# ANTHROPIC_API_KEY 환경변수 설정 후
npm run build && npm start
# src/agent.ts의 while(true) 루프를 열어서 직접 수정해본다
확인 포인트: checkAndCompact() 함수를 찾아 압축 트리거 임계값(85%)을 90%로 바꿔보고, 실제로 더 늦게 압축되는지 관찰한다.
이 저장소는 "9단계 병렬 시작으로 약 235ms", "66+ 도구", "23항목 보안 검사" 같은 구체적 숫자를 많이 인용한다. 15편 문서를 훑으며 이런 구체적 수치·상수명을 모두 뽑아 표로 정리하고, 각각이 어느 챕터·어느 소스 파일 경로에서 인용됐는지 출처를 붙인다. (이 저장소는 3자 분석이므로 실제 Claude Code 버전에 따라 숫자가 달라질 수 있다는 점도 함께 메모한다.)
확인 포인트: 정리한 표가 docs/reference.md(속성 참조 페이지)와 얼마나 겹치는지 비교해, 자신이 놓친 핵심 상수가 있는지 확인한다.
docs/11-permission-security.md를 참고해, 아주 작은 규모(정규식 위험 명령어 목록 + 사용자 확인 프롬프트)로 자신만의 "위험 명령 차단기"를 Node.js나 Python으로 만들어본다. 그 다음 "정규식만으로는 왜 부족한가"를 직접 겪어본다 — $(echo rm) -rf . 같은 명령이 자신이 만든 정규식을 우회하는지 테스트해본다.
# 예시 위험 패턴 (최소 버전, 이 저장소의 23항목보다 훨씬 단순)
const DANGEROUS_PATTERNS = [
/\brm\s/, /\bsudo\b/, /\bmkfs\b/, />\s*\/dev\//, /\bkill\b/,
];
// 시도: "echo hi && $(echo rm) -rf ./test" 가 위 패턴을 통과하는지 확인
확인 포인트: 우회 사례를 하나 찾았다면, 이 저장소가 설명한 tree-sitter AST 접근이 왜 이 문제를 근본적으로 해결하는지(문자열이 아니라 "실행될 명령의 실제 구조"를 본다는 점) 스스로 설명해본다.
이 저장소를 발판 삼아 "나만의 코딩 에이전트"까지 가는 주차별 경로.
목표: 15편 문서를 순서대로(README가 권장하는 순서: 개요→메인루프→컨텍스트→도구시스템) 읽고 전체 아키텍처를 손으로 다이어그램화한다.
자료: 온라인 문서 사이트, 특히 docs/quick-start.md와 docs/reference.md.
실습: 이 딥다이브 4장의 시스템 구조도를 자기 손으로 다시 그려보고, 빠진 서브시스템(Hook, 기억, 기술)을 추가해 완전한 버전을 만든다.
목표: JavaScript/TypeScript의 async generator 문법을 익히고, "모델이 스스로 멈춘다"는 루프 종료 조건을 직접 구현해본다.
자료: MDN "Iterators and generators", docs/02-agent-loop.md, claude-code-from-scratch의 src/agent.ts.
실습: Anthropic SDK로 최소 도구 호출 루프(read_file, write_file, run_shell 3개 도구만)를 처음부터 작성해본다.
목표: LLM API의 프롬프트 캐싱 메커니즘(전위 캐시)을 이해하고, 캐시 히트율을 높이는 요청 설계 원칙을 체화한다.
자료: Anthropic 공식 Prompt Caching 문서, docs/03-context-engineering.md.
실습: 같은 대화를 두 가지 방식(매번 시스템 프롬프트 순서를 바꾸는 버전 vs 고정하는 버전)으로 반복 호출해 캐시 히트율(cache_read_input_tokens) 차이를 직접 측정한다.
목표: tree-sitter의 기본 사용법을 익히고, 셸 명령을 문법 트리로 파싱하는 경험을 쌓는다.
자료: tree-sitter 공식 문서, tree-sitter-bash 문법 정의, docs/11-permission-security.md.
실습: tree-sitter-bash로 간단한 명령을 파싱해 AST를 출력해보고, 명령 치환($())이 포함된 명령과 아닌 명령의 트리 구조 차이를 관찰한다.
목표: 통합 인터페이스 기반 플러그인 아키텍처를 설계하고, 읽기/쓰기 동시성 규칙을 구현한다.
자료: docs/04-tool-system.md, Model Context Protocol(MCP) 공식 스펙.
실습: 자신만의 도구 3~5개(파일 읽기/검색/셸 실행)를 Tool 인터페이스 스타일로 정의하고, 읽기 전용 도구끼리는 Promise.all로 병렬 실행, 쓰기 도구는 직렬 실행하도록 오케스트레이션 로직을 작성한다.
목표: 서브 에이전트 위임 패턴을 이해하고, 컨텍스트 격리 vs 캐시 공유의 트레이드오프를 실험한다.
자료: docs/07-multi-agent.md, Git Worktree 공식 문서(git worktree add).
실습: 부모 에이전트가 "리서치용 서브 에이전트"를 fork해 결과를 받아오는 최소 구현을 만들고, Git Worktree로 파일 시스템을 격리해 두 에이전트가 같은 파일을 동시에 안전하게 편집하지 못하게 막아본다.
목표: 지금까지 배운 요소(에이전트 루프, 압축, 보안 검사, 도구 병렬 실행)를 하나의 CLI 프로그램으로 통합한다.
자료: claude-code-from-scratch 전체 11장 튜토리얼, 이 딥다이브 15장 표(6장 학습 포인트) 재확인.
실습: 8주간 만든 컴포넌트를 조합해 "파일 읽기·검색·편집·셸 실행 4개 도구 + 85% 임계값 압축 + 위험 명령 확인창"을 갖춘 완결된 미니 코딩 에이전트를 완성하고, 실제 작은 버그 수정 작업을 시켜본다.
이 저장소를 이해하는 데 필요한 핵심 용어.
query() 함수(1,729줄)가 이를 구현한다.$()), 프로세스 치환(<()) 같은 정규식으로 우회 가능한 위협을 구조적으로 탐지한다. "이해 못 하는 구조는 무조건 차단"(FAIL-CLOSED)이 핵심 설계 원칙.더 깊이 파고들기 위한 공식 자료.