3부 · 제작

자신의 컴퓨터에서 에이전트 만들기

3부는 9개의 안내형 TypeScript 단계(0~8)와 9단계 전이 프로젝트로 구성됩니다. 이 페이지에서 로컬 도구를 준비하고 오프라인 0단계를 확인한 뒤, 웹사이트가 진행 상황을 볼 수 있는 척하지 않고 저장소로 안내합니다.

먼저 오프라인 0단계를 실행하세요→TypeScript 강의 열기↗브라우저 실습실로 돌아가기

온라인 IDE가 아닌 출발점

코드, 모델 키, 출력, 진행 상황은 로컬 복제본에 남습니다. 이 정적 웹사이트는 강의를 실행하지도 course/progress.json을 읽지도 않습니다.

강의 자체는 영어입니다. 사이트는 아홉 개 언어로 제공되지만 단계별 안내와 카페 메뉴, 스무 개의 시험 사례는 번역하지 않습니다. 측정 대상인 입력을 번역하면 연습 자체가 달라지기 때문이며, 실습실의 사례가 영어로 남아 있는 것도 같은 이유입니다.

시작하기 전에

  • 함수, 객체, 루프, await 같은 기본 TypeScript를 읽고 수정할 수 있습니다.
  • Git, Node.js 24, 터미널, 코드 편집기가 준비되어 있습니다.
  • 9개의 안내형 단계(0~8)에 약 네 시간을 잡으세요. 9단계 전이 프로젝트는 열린 과제이며, 필요할 때 멈췄다가 나중에 돌아와도 됩니다.

실습실을 마쳤다면 1~4단계는 복습입니다. 이번에는 코드를 직접 작성합니다.

먼저 오프라인 0단계를 실행하세요

  1. 1. 복제하고 설치하기

    공개 저장소를 복제하고 그 안으로 이동한 뒤 정확히 잠긴 의존성을 설치합니다.

    이 복제와 설치는 사이트 전체를 내려받습니다. 수백 메가바이트이며, 강의가 사이트의 매니페스트를 함께 쓰기 때문입니다. 강의 자체가 가져오는 패키지는 하나뿐입니다. 연결이 느리면 몇 분 잡아 두세요.

    git clone https://github.com/HUDongpin/agent-edu.git
cd agent-edu
npm ci

  2. 2. 0단계에서 한 곳 수정하기

    course/stage0-hello/run.ts를 열고 빈 QUESTION 문자열을 자신만의 질문으로 바꾸세요.

    export const QUESTION = "What should I notice about an API?";

  3. 3. 키 없이 실행하고 확인하기

    오프라인 모드는 함께 제공되는 결정론적 대체 모델을 사용합니다. 제공사 요청, 비공개 기록, 토큰 요금이 없는 가장 안전한 사전 점검입니다.

    npm run course:offline
npx tsx course/stage0-hello/run.ts --offline
npx tsx course/check.ts 0 --offline

다음이 보이면 검사에 성공한 것입니다

PASS  you asked the model something
PASS  an answer came back

  stage 0 complete.

준비가 되었을 때만 제공사를 선택하세요

미리 작성된 오프라인 모드

키가 필요 없고 유료 요청도 하지 않습니다. 코드 경로는 확인하지만 모델의 변동성은 보여 줄 수 없습니다.

--offline

DeepSeek

기본 실시간 제공사입니다. 터미널 프로세스가 DEEPSEEK_API_KEY를 읽습니다. 실시간 단계에는 DeepSeek 요금이 발생하며 측정된 지출을 출력합니다.

export DEEPSEEK_API_KEY=your_key_here

Claude

비교를 위한 선택적 로컬 제공사입니다. 키와 CAFE_PROVIDER를 설정하세요. Claude 요금은 훨씬 높을 수 있으므로 실행 전에 출력된 예상치를 확인하세요.

export ANTHROPIC_API_KEY=your_key_here
export CAFE_PROVIDER=anthropic

비용은 제공사 측에서 발생합니다

오프라인은 무료입니다. 실시간 합계는 선택한 모델, 토큰, 캐시, 현재 제공사 가격에 따라 달라집니다. 강의의 예상치는 특정 시점의 값으로 보고, 제공사 대시보드를 청구 기록으로 삼으세요.

진행 상황은 이 복제본에 속합니다

강의 검사기는 course/progress.json을 로컬에 기록합니다. 웹사이트는 그 파일을 볼 수 없어 3부의 진행률도 이어서 하기 상태도 보여 주지 않습니다 — 아래에서 직접 남기는 표시가 전부입니다.

npx tsx course/report.ts
# reads course/progress.json in this clone

이 페이지에서는 어떤 검사도 이루어지지 않습니다. 단계를 모두 마쳤다면 그 사실을 스스로 표시해 둘 수 있습니다. 이 표시는 이 브라우저에만 보관되고, 어디로도 전송되지 않으며, 언제든 지울 수 있습니다.

완료 후 가져갈 결과물

9단계에서는 카페를 넘어 자신이 아는 도메인의 에이전트를 문서화합니다. 검토 가능한 제출물에는 다음이 포함됩니다:

  • 문제의 경계와 모델이 결정해도 되는 범위;
  • 단순 규칙을 깨뜨리는 현실적인 실패 입력 하나;
  • 좋은 출력만 고른 것이 아닌, 증거를 갖춘 작은 평가 세트;
  • 되돌리기 가장 어려운 작업 전에 코드로 강제하는 게이트;
  • 제공사, 도구, 신뢰할 수 없는 입력의 경계;
  • 실패, 절충, 다음 테스트에 관한 짧은 회고.

로컬 설정이 너무 어렵다면

브라우저 실습실로 돌아가 규칙 → 프롬프트 → 평가를 먼저 연습하세요. 개발 환경을 설치하지 않고도 같은 제어권 인계를 배울 수 있습니다.

브라우저 실습실로 돌아가기TypeScript 강의 열기↗