"제 컴퓨터에선 안 되는데요?" "버전이 달라서 에러가 나요."

개발하다 보면 가장 짜증 나는 순간이 바로 **"내 컴퓨터에서만 안 될 때"**입니다. 서로 다른 도구, 다른 재료를 쓰고 있어서 그래요.

이걸 해결해주는 마법사가 있으니, 바로 **NPM (Node Package Manager)**입니다.

"이 프로젝트엔 양파 3개, 당근 1개가 필요해"라고 적힌 **레시피(package.json)**만 있으면, 누구든 **버튼 하나(npm install)**로 똑같은 재료를 준비할 수 있죠.

1단계: 레시피 확인하기 (package.json)

남의 코드를 받아오면(Clone), 폴더 안에 package.json이라는 파일이 꼭 있습니다. 열어보면 대충 이렇게 생겼어요.

{
  "name": "vibe-project",
  "dependencies": {
    "react": "^18.2.0",
    "supabase-js": "^2.0.0"
  }
}

이게 바로 **"이 요리 하려면 리액트랑 수파베이스가 필요해"**라고 적어놓은 장보기 목록입니다.

레시피로 요리하기 vs NPM으로 코딩하기 비교

이게 없으면 여러분이 일일이 하나씩 다운로드 받아야 해요. 끔찍하죠?

2단계: 장보기 시작 (npm install)

터미널을 열고, 프로젝트 폴더에서 딱 한 마디만 외치세요.

npm install

(또는 줄여서 npm i)

그럼 터미널이 미친 듯이 글자를 뿜어내며 뭔가를 다운로드합니다. 끝나고 나면 node_modules라는 폴더가 생겼을 거예요.

여기에 모든 재료가 배달된 겁니다. 이제 여러분 컴퓨터 환경은 옆자리 고수 개발자랑 완전히 똑같아졌어요.

💡 꿀팁: node_modules 폴더는 용량이 엄청 커요. 그래서 보통 깃(Git)에는 안 올립니다. (.gitignore에 적혀 있음) 어차피 npm install 하면 언제든 다시 생기니까요!

3단계: 비밀 재료 숨기기 (.env)

요리를 하는데 "우리 할머니만의 비법 소스"가 들어간다고 칩시다. 이 비법을 동네방네 소문내면 안 되겠죠?

개발에서도 API 키, 비밀번호 같은 건 코드에 적으면 안 됩니다. GitHub에 올리는 순간 해커들이 채가거든요.

그래서 **환경 변수 파일(.env)**을 씁니다.

  1. 프로젝트 최상위 폴더에 .env 파일을 만드세요. (이름 앞에 점 필수!)
  2. 안에 비밀 정보를 적으세요.
API_KEY=abcdefg12345
DB_PASSWORD=secret1234
  1. 그리고 코드를 작성할 땐 이렇게 씁니다.
/* 코드에는 비밀번호가 안 보임! */
const apiKey = process.env.API_KEY;

이렇게 하면, 코드는 공유해도 비밀번호는 내 컴퓨터에만 남게 됩니다. 안전하죠?

🚨 주의: .env 파일도 깃에 올리면 안 돼요! .gitignore 파일에 .env 한 줄을 꼭 추가해주세요.

정리: 완벽한 바이브 코더로 거듭나기

지금까지 배운 걸 총정리해볼까요?

  1. Terminal: 컴퓨터랑 대화하고 (명령)
  2. VS Code: 작업대에서 코드 짜고 (편집)
  3. Git: 망칠까 봐 세이브하고 (저장)
  4. NPM: 필요한 재료 한 방에 세팅 (준비)

이 4가지만 알면, 이제 세상의 어떤 튜토리얼도 따라 할 수 있습니다.

"근데 코딩은 언제 배워요?"

놀라지 마세요. 지금까지 배운 게 코딩의 절반입니다. 나머지 절반(코드 작성)은 AI가 옆에서 다 알려줄 거니까요.

이제 진짜 **'바이브 코딩'**을 시작할 준비가 끝났습니다. 준비되셨나요?

셀프체크

오늘 배운 내용, 제대로 이해했는지 확인해볼까요?

  • package.json에 적힌 라이브러리를 한 번에 설치하는 명령어는? (정답: npm install)
  • 비밀번호나 API 키를 저장하는 파일 이름은? (정답: .env)
  • node_modules 폴더를 Git에 올리면 안 되는 이유는? (정답: 용량이 크고 다시 설치하면 되니까)

다음 글 예고

고생 많으셨습니다! Part 2: 도구 준비가 모두 끝났습니다. 다음 편부터는 Part 3: 기술 개념 시각화로 넘어갑니다.

"프론트엔드? 백엔드? 그게 뭐죠?" "데이터베이스는 엑셀이랑 뭐가 달라요?"

이런 궁금증들을 아주 쉽고 재밌는 그림으로 풀어드릴게요. 10편 '프로그램의 종류'에서 만나요!