Context Engineering을 로컬에서 실행하기
이 페이지를 사용하여 추출한 요약 챌린지를 컴퓨터에서 실행할 수 있습니다. 잠긴 패키지를 설치하고, Scrimba 전용 환경 읽기 두 개를 Vite에 맞게 조정한 다음, 브라우저 프로젝트를 OpenRouter에 연결합니다. 일반적인 과정 프로젝트를 로컬에서 실행하기 가이드에서 공유된 Node와 npm 설정을 더 자세히 다룹니다.
먼저 필요한 것들
Node.js의 지원되는 LTS 버전을 설치합니다. Node 24를 권장하며 npm이 포함되어 있습니다.
두 명령이 모두 작동하는지 확인합니다:
$ node --version
v24.18.0
$ npm --version
11.18.0명령이 "command not found"를 출력하면, 계속 진행하기 전에 Node 설치를 완료합니다.
OpenRouter API 키와 계정에서 사용 가능한 모델 ID도 필요합니다. 이 학습 프로젝트가 브라우저에서 제공자 요청을 실행하므로 낮은 지출 한도가 있는 임시 키를 사용합니다.
node --version과 npm --version 명령이 모두 숫자를 출력하는지 확인한 후 진행합니다. 그런 다음 낮은 지출 한도가 있는 임시 OpenRouter 키를 준비합니다. 저는 한 번 Node 설치가 완료되지 않은 것이 실제 문제였는데 오후를 들여 프로젝트를 디버깅한 적이 있으므로, 이 두 확인은 10초의 가치가 있습니다! 프로젝트 열기 및 설치
package.json이 포함된 추출된 폴더에서 터미널을 열고 잠긴 패키지를 설치합니다:
$ cd path-to-your-downloaded-project
$ npm ci포함된 lockfile을 유지합니다. npm이 감사 결과를 보고하면, 변경 사항을 확인하지 않고 npm audit fix --force를 실행하지 않습니다. 해당 명령은 과정 종속성을 주 버전 간에 이동할 수 있습니다.
package.json이 있는 추출된 폴더에서 npm ci를 실행합니다. lockfile을 변경하지 않습니다: 과정이 기록된 정확한 패키지 버전을 나열합니다. 환경 변수 수정
main.js와 utils.js에서 다음 값을 검색합니다:
process.env.OPENROUTER_KEY
process.env.MODEL_ID모든 항목을 다음으로 바꿉니다:
import.meta.env.VITE_OPENROUTER_KEY
import.meta.env.VITE_MODEL_IDpackage.json 옆에 .env를 만듭니다:
VITE_OPENROUTER_KEY=your-openrouter-key
VITE_MODEL_ID=a-current-model-id-from-openrouterVite는 시작 시 .env를 읽습니다. 편집한 후 개발 서버를 다시 시작합니다.
현재 OpenRouter 계정에서 사용 가능하며 과정에서 수행된 호출을 지원하는 모델을 사용합니다. 제공자 카탈로그는 변경될 수 있습니다.
.gitignore를 만듭니다:
.env
node_modules/
dist/Git 핸드북은 파일 무시하기 및 좋은 습관에서 이 습관을 다룹니다.
OpenRouter 키는 브라우저에 표시됩니다
모든 VITE_ 값은 클라이언트 코드에 포함됩니다. 임시 학습 키를 사용하고, 낮은 지출 한도를 설정하며, 이 프로젝트를 게시하지 않습니다. 배포된 버전은 백엔드에서 제공자를 호출해야 합니다.
process.env 읽기를 일치하는 VITE_ 이름으로 바꾸고, .env를 만들고, 파일을 편집한 후 개발 서버를 다시 시작합니다. 그리고 여기서 임시 OpenRouter 키를 사용합니다: 이 브라우저 프로젝트는 키를 보는 누구에게나 보여주는데, 이는 처음에는 저를 놀라게 했습니다. 프로젝트 실행 및 확인
$ npm startVite가 출력한 Local URL을 열고 프로젝트가 이전 메시지를 요약할 때까지 대화를 계속합니다. 실행 중인 앱의 새로운 요약이 눈에 띄는 성공 결과입니다. Vite는 일반적으로 .env가 변경될 때 자동으로 다시 시작합니다. 새 값이 적용되지 않으면 Ctrl+C로 서버를 중지하고 다시 시작합니다.
npm start를 실행하고, Vite가 출력한 Local URL을 열고, 앱이 이전 메시지를 요약할 때까지 채팅합니다. 해당 요약이 나타나는 것은 OpenRouter 설정이 작동한다는 증거입니다. 완료되면 Ctrl+C로 서버를 중지합니다. 문제 해결
process is not defined: 최소한 하나의 환경 읽기가 main.js 또는 utils.js에 남아 있습니다. Vite 구성뿐만 아니라 두 파일을 모두 검색합니다.
모델이 404 또는 액세스 오류를 반환합니다: OpenRouter 오류 본문을 읽습니다: 401은 키를, 404는 모델 ID를, 429는 속도 제한을 가리킵니다. OpenRouter에서 현재 모델 ID를 복사하고 계정이 이를 사용할 수 있는지 확인합니다.
대화는 길어질 때까지 작동합니다: 이것이 이 과정이 탐색하는 동작입니다. 편집이 토큰 임계값, 요약 프롬프트 또는 과정이 제공하는 샘플 대화 데이터를 변경하지 않았는지 확인한 후 제공자를 진단합니다.
키가 정의되지 않은 상태로 남아 있습니다: VITE_ 철자를 확인하고, .env를 package.json 옆에 배치하고, Vite를 다시 시작합니다.
process.env 읽기를 위해 두 JavaScript 파일을 모두 검색한 다음 .env의 두 VITE_ 철자를 확인합니다. 대부분의 오류는 여기서 한 글자가 빠진 것이며, 이는 네 번째 읽기에서 내 것을 찾은 것을 알고 있습니다. 그리고 긴 대화가 요약을 트리거하는 것은 과정이 손상되는 것이 아니라 작동하는 것입니다.