프로젝트 셋업

Claude Code는 실제 프로젝트를 가지고 실습하면 더 재미있게 활용할 수 있습니다. Claude Code로 탐색해볼 수 있도록 작은 프로젝트를 준비해 두었습니다. 이전 영상에 등장했던 UI 생성 앱과 동일한 프로젝트입니다.

! 참고: 이 프로젝트를 꼭 실행할 필요는 없습니다. 원한다면 본인의 코드베이스로도 이후 강의를 그대로 따라갈 수 있습니다.

설정

이 프로젝트는 약간의 사전 설정이 필요합니다.

1. 로컬에 Node.js가 설치되어 있는지 확인하세요. (설치 안내: https://nodejs.org/en/download)

2. uigen.zip 파일을 다운로드한 뒤 압축을 해제하세요.

   1. cc.sj-cdn.net

3. 프로젝트 디렉터리에서 npm run setup 을 실행하여 의존성을 설치하고 로컬 SQLite 데이터베이스를 설정하세요.

4. 선택 사항: 이 프로젝트는 Anthropic API를 통해 Claude를 사용하여 UI 컴포넌트를 생성합니다. 앱을 완전히 테스트해보고 싶다면 Anthropic API에 접근할 수 있는 API 키가 필요합니다. 이 단계는 건너뛰어도 되며, 그 경우에도 앱은 정적인(fake) 코드 일부를 생성합니다. API 키 설정 방법은 다음과 같습니다:

   1. https://platform.claude.com/ 에서 Anthropic API 키를 발급받습니다.

   2. .env 파일에 API 키를 입력합니다. Anthropic 콘솔에서 받은 키로 your-api-key-here 라는 리터럴 텍스트를 교체하세요.

5. npm run dev 를 실행해 프로젝트를 시작하세요.