코드를 로컬에서 실행하기

이 과정의 모든 것은 Scrimba의 브라우저에서 실행되므로 굳이 떠날 필요가 없습니다. 하지만 어느 시점에 프로젝트를 자신의 머신에 받으려고 할 수 있습니다. 과정을 마친 후에도 계속 개발하고 싶거나, 자신이 선호하는 에디터를 사용하고 싶거나, Git 저장소에 올리고 싶을 때입니다.

이 페이지에서 그 방법을 다룹니다. 이 내용은 선택 사항이며, 과정의 나머지 부분이 이것에 의존하지 않습니다.

먼저 필요한 것

지원되는 LTS 버전의 Node.js입니다. Node 24를 권장하며 Node 22도 작동합니다. 현재 설치된 버전을 확인하세요:

$ node --version
v24.18.0

"command not found"라고 표시되면 nodejs.org에서 LTS로 표시된 버전을 설치하세요.

npm입니다. Node에 npm이 포함되어 있으며, Scrimba 다운로드는 npm 프로젝트입니다. npm을 사용할 수 있는지 확인하세요:

$ npm --version
11.18.0

Juno먼저 필요한 것 지원되는 Node.js LTS 릴리스를 사용하세요. Node 24를 권장하고 Node 22도 작동합니다. 이 과정은 Node 20.12를 최소 버전으로 요구하는데, 이는 Node에서 환경 파일 API를 기본 제공하기 시작한 버전이기 때문입니다. 하지만 호환성 최소 버전을 충족한다고 해서 유지보수되는 릴리스를 사용하는 것과는 다릅니다.

코드 받기

Scrimba 에디터에서 프로젝트 제목을 우클릭하고 Download as Zip을 선택하세요. 다운로드한 아카이브를 압축 해제한 후 터미널에서 해당 폴더로 이동하세요:

$ cd intro-to-ai-agents-lesson

폴더 내용을 확인해보세요. server.js, package.json, package-lock.json, environment.js, vite.config.js, 그리고 이 강의의 JavaScript 파일들이 있어야 합니다.

Juno코드 받기 프로젝트를 Zip으로 다운로드하고 압축을 푼 후, cd를 사용해 package.json이 있는 폴더로 이동하세요. 이 폴더가 이 페이지의 모든 명령을 실행하는 위치입니다.

설치 및 실행

Scrimba와 자신의 머신 사이의 실제 차이는 여기이며, 사람들이 자주 놓치는 단계입니다.

Scrimba에서는 AI_URL, AI_KEY, AI_MODEL이 계정 설정에 저장되고, Scrimba가 실행 중인 프로젝트에 이들을 주입합니다. 브라우저 버전에 .env 파일이 없는 이유는 거기서는 필요 없기 때문이며, 공유 에디터에 키를 저장하는 것도 좋은 방법이 아니기 때문입니다.

자신의 머신에서는 아무것도 이를 주입하지 않으므로 직접 제공해야 합니다. Scrimba 계정 설정을 열고 같은 세 개의 값을 복사해 프로젝트 폴더에 .env 파일로 저장하세요. package.json 옆에 놓으면 됩니다:

AI_URL=<Scrimba 설정에서 붙여넣기>
AI_KEY=<Scrimba 설정에서 붙여넣기>
AI_MODEL=<Scrimba 설정에서 붙여넣기>

한 줄에 하나의 이름씩, 따옴표나 = 주위의 공백은 없어야 합니다. environment.js는 프로젝트가 시작할 때 이 파일을 읽으며, Node에 기본 제공되는 환경 파일 지원을 사용합니다. 이것이 앞서 설명한 최소 버전 요구 사항의 이유입니다.

이 프로젝트를 자신의 Git 저장소에 넣을 계획이라면 .env는 제외하세요. AI_KEY는 자격증명이고, 공개 저장소에 도달한 키는 반드시 교체해야 하는 키입니다. 프로젝트 폴더에 한 줄짜리 .gitignore 파일을 만들면 됩니다:

.env

Git 핸드북의 파일 무시하기와 좋은 습관에서 더 넓은 관점에서 이 습관을 다룹니다.

이것을 준비한 후 의존성을 설치하세요:

$ npm install

npm은 package.json에서 의존성 목록을 읽고 package-lock.json에서 정확하게 해결된 버전을 읽으므로 강의가 녹화된 것과 같은 트리를 얻습니다. node_modules 폴더를 작성하는데, 이는 크기가 크고 다시 빌드할 수 있으므로 이것도 .gitignore에 포함되어야 합니다.

그다음 프로젝트를 시작하세요:

$ npm run dev

  ➜  Local:   http://localhost:5173/

출력되는 주소를 엽니다. 기본 Vite 설정에서는 http://localhost:5173/이며, 다음 섹션에서 다루는 이유로 이 라인을 읽는 것이 추측하는 것보다 낫습니다.

Juno설치 및 실행 Scrimba 설정에서 AI_URL, AI_KEY, AI_MODEL을 복사해 package.json 옆의 .env 파일에 저장하세요. 플랫폼 외에서는 아무것도 이를 주입하지 않기 때문입니다. 그다음 npm install과 npm run dev를 실행하세요. 커밋하기 전에 .env를 .gitignore에 추가하세요. 공개 저장소에 도달한 키는 반드시 교체해야 합니다.

포트가 이미 사용 중일 때

개발 서버는 사용 가능한 포트가 필요하고, 5173은 Vite의 기본값이므로 Vite를 실행 중인 다른 것이 이미 사용했을 가능성이 높습니다. 이것이 프로젝트를 깨뜨리지는 않습니다. Vite는 다음 포트를 시도하고, 그것을 알리고, 계속 진행합니다:

$ npm run dev
Port 5173 is in use, trying another one...

  ➜  Local:   http://localhost:5174/

5174도 사용 중이면 5175를 시도하고, 5176을 시도하고, 사용 가능한 포트를 찾을 때까지 계속 증가합니다. 따라서 포트는 중요하지 않으며 직접 선택할 필요가 없습니다. Vite가 출력하는 라인에서 URL을 읽고 그것을 열어야 합니다. 메모리에서 localhost:5173을 입력하기보다는 그 라인을 읽는 습관을 들이는 것이 나중에 "페이지가 로드되지 않음" 문제 해결을 막아줍니다.

특정 포트를 원할 때는 다음과 같이 전달하세요:

$ npm run dev -- --port 4000

맨 앞의 --는 라인의 나머지를 npm이 아니라 Vite에 전달합니다.

한 가지 경우는 다르게 작동합니다. 프로젝트가 vite.config.js에서 strictPort를 설정했다면, Vite는 계속 증가하지 않고 멈추며 Port 5173 is already in use를 출력합니다. 그러면 포트를 점유 중인 것을 종료하거나 위의 --port를 전달하세요.

Juno포트가 이미 사용 중일 때 Vite는 특정 포트가 필요하지 않습니다. 5173이 사용 중이면 5174로 이동하고, 5175로 이동하고, 도달한 포트를 출력하고, 어느 쪽이든 같은 방식으로 실행됩니다. 메모리에서 localhost:5173을 입력하는 대신 출력된 URL을 읽고, 특정 포트가 필요한 드문 경우에만 npm run dev -- --port 4000을 사용하세요.

여기서 다음으로 갈 곳

이제 가진 것은 정상적인 npm 프로젝트이므로, Node 도구에 대해 배우는 모든 것을 직접 적용할 수 있습니다. 버전 관리에 넣고 싶다면, 첫 저장소에서 첫 커밋을 단계별로 설명하며, 위의 .gitignore은 저장소를 만들기 전에 설정할 것입니다.

과정의 나머지 부분은 이 중 어느 것도 의존하지 않습니다. 로컬 복사본이 문제를 일으킨다면, Scrimba 버전은 여전히 거기에 있고 여전히 작동합니다.