프로젝트 설정

Project setup

Claude Code는 함께 작업할 프로젝트가 있을 때 훨씬 흥미롭습니다. 강의용으로 준비한 작은 UI 생성 앱(uigen)을 내려받아 의존성을 설치하고, npm run dev로 실행하는 과정을 정리합니다.

전체 내레이션영상 나레이션 한국어 번역 (전체)›

Stephen Grider · 강사

Claude Code는 함께 다뤄 볼 프로젝트가 있을 때 훨씬 재미있습니다. 그래서 작은 프로젝트를 하나 준비했습니다. 앞선 영상에서 보여 드렸던 것과 같은 UI 생성 앱입니다. 꼭 이 프로젝트를 따라 돌리지 않아도 되고, 원하시면 본인 코드베이스로 나머지 강의를 따라오셔도 됩니다.

이 프로젝트는 약간의 설정이 필요합니다. 먼저 로컬에 Node.js가 설치돼 있어야 합니다. 다음으로 이 강의에 첨부된 uigen.zip 파일을 내려받아 압축을 풉니다.

프로젝트 폴더 안에서 npm run setup을 실행하면 의존성이 설치되고 로컬 SQLite 데이터베이스가 준비됩니다.

선택 사항입니다. 이 프로젝트는 UI 컴포넌트를 생성할 때 Anthropic API를 통해 Claude를 사용합니다. 앱을 완전히 돌려 보고 싶다면 API 키가 필요한데, 이 단계는 건너뛰어도 됩니다. 키가 없어도 앱은 정적인 가짜 코드를 만들어 보여 줍니다. 키를 넣으려면 console.anthropic.com에서 키를 발급받아, .env 파일의 your-api-key-here 자리를 발급받은 키로 바꿔 넣으면 됩니다.

마지막으로 npm run dev로 프로젝트를 실행합니다. 그러면 로컬에서 앱이 뜨고, 다음 강의부터 이 앱을 가지고 Claude로 작업해 보겠습니다.

이 장에서 배우는 것What you'll learn

약 3분

샘플 프로젝트 = 작은 UI 생성 앱(uigen)

먼저 로컬에 Node.js 설치 필요

uigen.zip 내려받아 압축 해제

npm run setup — 의존성 + SQLite 준비

(선택) .env에 Anthropic API 키 입력

npm run dev로 앱 실행

먼저 짚고 갈 용어

Node.js: 자바스크립트 실행 환경. npm 명령으로 의존성을 설치·실행한다.
npm run setup: 프로젝트가 정의해 둔 설정 스크립트. 의존성 설치 + 로컬 DB 준비를 한 번에 한다.
SQLite: 파일 하나로 동작하는 가벼운 데이터베이스. 별도 서버 없이 로컬에 데이터를 저장한다.
.env 파일: 환경 변수(API 키 등)를 담는 파일. your-api-key-here를 실제 키로 바꾼다.

왜 프로젝트가 필요할까

A project to work with

Claude Code는 실제 코드가 있는 프로젝트에서 진가를 발휘합니다. 강의에서는 작은 UI 생성 앱(uigen)을 함께 씁니다 — 앞선 영상에서 본 그 앱입니다.

꼭 이 앱이 아니어도 됩니다

이 프로젝트를 그대로 돌리지 않아도 괜찮습니다. 원하시면 본인 코드베이스로 나머지 강의를 따라오셔도 됩니다.

설정 단계

Setup steps

설정은 간단합니다. 아래 단계를 차례로 따르면 됩니다. 각 항목을 눌러 자세한 내용을 펼쳐 볼 수 있습니다.

설정 단계 · 항목을 눌러 펼쳐 보세요

Node.js 설치 확인

로컬에 Node.js가 깔려 있어야 합니다. 없다면 설치 안내를 따라 먼저 설치합니다.

uigen.zip 내려받기

이 강의에 첨부된 uigen.zip을 내려받아 압축을 풉니다.

npm run setup

프로젝트 폴더 안에서 실행합니다. 의존성을 설치하고 로컬 SQLite 데이터베이스를 준비합니다.

API 키 입력선택

console.anthropic.com에서 키를 발급받아 .env의 your-api-key-here를 바꿔 넣습니다. 건너뛰어도 앱은 정적 예시 코드를 보여 줍니다.

npm run dev

프로젝트를 실행합니다. 로컬에서 앱이 뜨면 준비 완료입니다.

4번 API 키는 선택입니다 — 넣지 않아도 앱은 정적인 예시(가짜) 코드를 생성해 보여 줍니다.

정리 & 점검

Recap & check

핵심 정리

샘플 프로젝트는 작은 UI 생성 앱(uigen). 본인 코드베이스로 대체해도 된다.
준비물: 로컬 Node.js + 첨부된 uigen.zip 압축 해제.
npm run setup → 의존성 설치 + 로컬 SQLite 준비.
(선택) .env에 Anthropic API 키 입력. 없어도 정적 예시 동작.
npm run dev로 실행.

Q1의존성 설치와 로컬 데이터베이스 준비를 한 번에 하는 명령은?

npm run setup이 의존성 설치와 로컬 SQLite 준비를 함께 처리합니다. 실행은 npm run dev입니다.

Q2Anthropic API 키를 넣지 않으면 어떻게 되나요?

다음 장

프로젝트가 실행됐습니다. 다음은 Claude에게 꼭 필요한 컨텍스트를 더해 주는 방법입니다 — 컨텍스트 관리의 핵심입니다. → 컨텍스트 추가

왜 프로젝트가 필요할까

설정 단계

정리 & 점검

여기부터는 등록한 분에게 열립니다.