Chef Claude를 로컬에서 실행하기
이 페이지를 따라 Learn React에서 추출한 Chef Claude 레시피 프로젝트를 컴퓨터에서 실행합니다. Vite 앱이 사용하는 제공자 키를 설정하고, 선언된 이전 React 의존성을 설치하고, 로컬에서 레시피를 생성합니다. 프로젝트의 React 부분이 처음이라면 React 핸드북에서 기초부터 시작할 수 있습니다.
먼저 준비할 사항
지원되는 LTS 버전의 Node.js를 설치합니다. Node 24를 권장하며 npm이 포함되어 있습니다.
두 명령이 모두 작동하는지 확인합니다:
$ node --version
v24.18.0
$ npm --version
11.18.0또한 사용할 제공자의 API 키가 필요합니다. 강의 코드에는 Anthropic 경로와 Hugging Face 경로가 포함되어 있습니다. 제공자 가입, 모델 가용성, 가격은 변할 수 있으므로 제공자의 현재 계정 설명서를 참고합니다. 어느 경로를 선택하든 낮은 지출 한도가 있는 임시 키를 사용합니다. 이 프로젝트는 브라우저 코드에서 제공자를 호출하기 때문입니다.
프로젝트 폴더 열기
package.json이 포함된 추출된 Chef Claude 폴더에서 터미널을 엽니다:
$ cd path-to-your-downloaded-project무엇이든 실행하기 전에 package.json을 엽니다. scripts 블록은 프로젝트가 예상하는 명령을 보여주고, dependencies는 이 스냅샷이 구축된 정확한 React 및 제공자 패키지를 기록합니다.
package.json이 포함된 추출된 폴더에서 작업합니다. 이 페이지의 모든 명령과 파일은 여기에 속합니다. 명령이 파일이 누락되었다고 보고하면 다른 것을 변경하기 전에 터미널이 어느 폴더에 있는지 확인합니다. 시작할 때 잘못된 폴더로 인한 오류가 저를 몇 시간 동안 막았습니다! Vite에서 환경 변수 작동하도록 만들기
Scrimba의 에디터는 process.env.ANTHROPIC_API_KEY와 process.env.HF_ACCESS_TOKEN을 이해합니다. 로컬 Vite 앱은 브라우저에 process.env 객체를 제공하지 않습니다.
ai.js를 열고 Anthropic 값을 다음에서:
apiKey: process.env.ANTHROPIC_API_KEY,다음으로 변경합니다:
apiKey: import.meta.env.VITE_ANTHROPIC_API_KEY,Hugging Face 값을 다음에서:
const hf = new HfInference(process.env.HF_ACCESS_TOKEN)다음으로 변경합니다:
const hf = new HfInference(import.meta.env.VITE_HF_ACCESS_TOKEN)VITE_ 접두사는 Vite가 브라우저 코드에만 특별히 접두사가 붙은 환경 변수를 노출하기 때문에 필요합니다.
폐기된 Anthropic 모델 교체
다운로드된 Anthropic 함수는 폐기된 모델 claude-3-haiku-20240307을 사용합니다. getRecipeFromChefClaude 함수에서 다음을 변경합니다:
model: "claude-3-haiku-20240307",Anthropic의 문서화된 대체 모델로:
model: "claude-haiku-4-5-20251001",강의의 나머지 요청은 변경하지 않아도 됩니다.
.env에 키 추가
package.json 옆에 .env를 만듭니다. 사용하는 경로의 값을 추가합니다:
VITE_ANTHROPIC_API_KEY=your-anthropic-key-here
VITE_HF_ACCESS_TOKEN=your-hugging-face-token-here사용하지 않는 값은 생략할 수 있습니다. 프로젝트는 기본적으로 getRecipeFromChefClaude를 호출하므로, 해당 함수를 그대로 두면 Anthropic 값과 위의 모델 변경이 필요합니다. Mistral 모델을 호출하는 Hugging Face 경로를 사용하려면 강의의 제공자 전환 레슨을 따르고 해당 Hugging Face 모델이 여전히 사용 가능한지 확인합니다.
package.json 옆에 .gitignore를 만들고 다음을 추가합니다:
.env
node_modules/.env를 Git에서 유지하는 것은 아래 경고에 설명된 브라우저 노출만큼 중요합니다. 리포지토리 히스토리에 도달한 키는 파일을 삭제한 후에도 그대로 남아 있기 때문입니다. Git 핸드북은 파일 무시 및 좋은 습관에서 더 넓은 습관을 다룹니다.
이러한 키는 브라우저에서 볼 수 있습니다
VITE_ 접두사는 의도적으로 각 값을 프론트엔드 번들에 넣습니다. 로컬 학습 목적으로만 임시의 제한된 자격 증명을 사용합니다. 이 버전을 배포하거나 공유하지 말고, .env를 커밋하지 마십시오. 프로덕션 버전은 제공자 자격 증명을 서버에 유지하는 백엔드 또는 서버리스 함수가 필요합니다.
ai.js의 키 읽기와 폐기된 Anthropic 모델을 변경하고, 사용하는 키를 .env에 추가하고, 해당 파일을 Git에서 유지합니다. 키는 브라우저에서 계속 표시됩니다. 프로젝트 설치 및 실행
추출된 프로젝트는 React 19의 프리릴리스 버전을 해당 프리릴리스를 허용하지 않는 피어 범위가 있는 의존성과 함께 사용합니다. 따라서 일반적인 npm install은 ERESOLVE 오류로 중지됩니다. 피어 체크를 완화하여 이 강의 스냅샷을 설치합니다:
$ npm install --legacy-peer-deps
$ npm startVite는 다음과 같은 로컬 주소를 인쇄합니다:
VITE ready
Local: http://localhost:5173/정확한 Local URL을 엽니다. 5173이 사용 중이면 Vite는 다른 포트를 선택하고 인쇄합니다. 레시피를 요청할 재료를 충분히 추가합니다. 렌더링된 레시피는 두 가지를 확인합니다: 로컬 페이지가 작동하고, 선택된 제공자 키와 모델이 작동합니다. Ctrl+C로 프로젝트를 중지합니다.
.env을 변경한 후 Vite를 다시 시작합니다.
npm install --legacy-peer-deps를 실행한 다음 npm start를 실행하고 인쇄된 Local URL을 엽니다. 중지하려면 Ctrl+C를 누릅니다. 플래그는 경고처럼 들리며, 여전히 이 프로젝트의 올바른 선택이므로 뭔가 망가뜨렸다고 생각하지 말고 사용합니다. 문제 해결
ERESOLVE unable to resolve dependency tree: 이 추출된 프로젝트에 npm install --legacy-peer-deps를 사용합니다. 설치를 통과하기 위해 React 패키지를 삭제하거나 교체하지 마십시오.
process is not defined: Scrimba 스타일의 process.env 값 중 하나 또는 둘 다가 ai.js에 남아 있습니다. 위에 표시된 import.meta.env.VITE_... 형식으로 교체한 다음 Vite를 다시 시작합니다.
키가 undefined이거나 인증이 실패합니다: 정확한 VITE_ 변수 이름을 확인하고, .env이 package.json 옆에 있는지 확인하고, 프로젝트를 다시 시작합니다. 제공자 계정에서 자격 증명이 활성화되어 있는지 확인합니다.
Anthropic이 모델을 찾을 수 없거나 폐기되었다고 표시합니다: ai.js가 claude-3-haiku-20240307이 아닌 claude-haiku-4-5-20251001을 사용하는지 확인합니다. Anthropic이 나중에 대체 모델을 폐기하면 현재 모델 지원 중단 문서에 지정된 후속 모델을 사용합니다.
Hugging Face가 Mistral 모델을 거부합니다: ai.js의 모델이 계정에 연결된 추론 제공자를 통해 사용 가능한지 확인합니다. 모델 페이지는 선택한 호스팅 추론 제공자를 통해 사용할 수 없는 경우에도 다운로드할 수 있습니다.
이 페이지를 게시하려면: 이 프론트엔드 전용 버전을 게시하지 마십시오. AI 요청과 자격 증명을 먼저 백엔드로 이동합니다.
ERESOLVE가 표시되면 설치 플래그를 사용하고, process is not defined가 표시되면 모든 이전 키 읽기를 교체하고, .env을 편집한 후 프로젝트를 다시 시작합니다. 이러한 오류의 대부분은 메시지 자체 내에 해결 방법을 설명합니다. 뭔가를 변경하기 전에 전체 메시지를 읽습니다. 제가 배우는 데 훨씬 너무 오래 걸렸습니다!