비개발자를 위한 Vercel 배포 가이드

이 가이드는 개발 경험이 없는 맥 사용자가 압축된 프로젝트 코드를 받아서 Vercel에 배포하는 전체 과정을 안내합니다.

🚀 시작하기 전에

준비물

• 🖥️ 맥 컴퓨터
• 🔑 Vercel 계정 (이미 가입된 상태)
• 📦 압축된 프로젝트 코드 파일

---

📋 단계별 배포 가이드

1️⃣ 압축 파일 풀기

1. 받은 압축 파일을 찾아서 더블클릭하거나 우클릭 후 "압축 풀기" 옵션을 선택합니다.
2. 압축이 풀린 폴더를 기억하기 쉬운 위치(예: 바탕화면)에 저장합니다.

2️⃣ 터미널 열기

1. Spotlight 검색(⌘ + Space)을 열고 "Terminal" 또는 "터미널"을 입력한 후 Enter를 누릅니다.
2. 터미널 창이 열립니다.

3️⃣ Node.js 설치하기

Node.js는 자바스크립트 코드를 실행하기 위해 필요한 환경입니다.

1. 터미널에서 다음 명령어를 복사하여 붙여넣고 Enter를 누릅니다:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. 설치 과정에서 비밀번호를 입력하라는 메시지가 나타날 수 있습니다. 컴퓨터 로그인 비밀번호를 입력하세요.
3. Homebrew 설치가 완료되면 터미널에 다음 명령어를 입력합니다:

brew install node

4. 설치가 완료되었는지 확인하기 위해 다음 명령어를 입력합니다:

node -v

버전 번호가 표시되면 Node.js가 성공적으로 설치된 것입니다.

4️⃣ 프로젝트 폴더로 이동하기

터미널에서 cd 명령어를 사용하여 압축을 푼 프로젝트 폴더로 이동합니다. 예를 들어, 바탕화면에 "project-name"이라는 폴더가 있다면:

cd ~/Desktop/project-name

5️⃣ 프로젝트 종속성 설치하기

1. 프로젝트 폴더에서 다음 명령어를 입력하여 필요한 패키지들을 설치합니다:

npm install

2. 설치가 완료될 때까지 기다립니다. 이 과정은 인터넷 속도와 프로젝트 크기에 따라 몇 분 정도 소요될 수 있습니다.

6️⃣ Vercel CLI 설치하기

Vercel CLI는 터미널에서 Vercel에 프로젝트를 배포할 수 있게 해주는 도구입니다.

1. 다음 명령어를 입력하여 Vercel CLI를 설치합니다:

npm install -g vercel

2. 권한 오류가 발생하는 경우: 다음과 같은 오류 메시지가 나타날 수 있습니다:

npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/vercel
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied

이 경우 다음 방법 중 하나로 해결할 수 있습니다:

방법 1: sudo 사용하기 (가장 간단한 방법)

sudo npm install -g vercel

이 명령어를 입력한 후 컴퓨터 비밀번호를 입력하라는 메시지가 나타나면 입력합니다.

방법 2: npm의 글로벌 경로 변경하기 (더 안전한 방법)

1. 먼저 사용자 홈 디렉토리에 .npm-global 폴더를 생성합니다:

mkdir ~/.npm-global

2. npm 설정을 변경합니다:

npm config set prefix '~/.npm-global'

3. 환경 변수를 설정합니다:

echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.zshrc

또는 bash를 사용하는 경우:

echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bash_profile

4. 변경사항을 적용합니다:

source ~/.zshrc

또는 bash를 사용하는 경우:

source ~/.bash_profile

5. 이제 다시 Vercel CLI를 설치합니다:

npm install -g vercel

7️⃣ Vercel에 로그인하기

1. 터미널에 다음 명령어를 입력합니다:

vercel login

2. 이메일 주소를 입력하라는 메시지가 나타나면, Vercel 계정에 사용한 이메일 주소를 입력하고 Enter를 누릅니다.
3. 입력한 이메일로 확인 메일이 발송됩니다. 메일함을 확인하고 확인 링크를 클릭합니다.
4. 터미널에 로그인 성공 메시지가 표시됩니다.

 

8️⃣ 프로젝트 배포하기

1. 프로젝트 폴더에서 다음 명령어를 입력합니다:

vercel

2. 몇 가지 질문이 나타납니다:

질문	대답
"Set up and deploy..."	y를 입력하고 Enter를 누릅니다.
"Which scope..."	개인 계정이면 그냥 Enter를 누릅니다.
"Link to existing project?"	새 프로젝트면 n을 입력하고 Enter를 누릅니다.
"What's your project's name?"	프로젝트 이름을 입력하거나 기본값을 사용하려면 Enter를 누릅니다.
"In which directory is your code located?"	현재 디렉토리면 그냥 Enter를 누릅니다.

3. 배포가 시작되고, 완료되면 프로젝트 URL이 터미널에 표시됩니다(예: https://your-project.vercel.app).

9️⃣ 배포 확인하기

1. 터미널에 표시된 URL을 웹 브라우저에 붙여넣어 사이트가 성공적으로 배포되었는지 확인합니다.
2. Vercel 대시보드에 로그인하여 프로젝트 상태를 확인할 수도 있습니다.

---

⚠️ 문제 해결

만약 오류가 발생한다면:

일반적인 문제 해결

1. 에러 메시지를 잘 읽어보세요. 대부분의 에러는 문제를 설명하고 있습니다.
2. Node.js와 npm이 제대로 설치되었는지 확인하세요:

   node -v
   npm -v

3. 인터넷 연결을 확인하세요.
4. 프로젝트 코드에 문제가 있을 수 있으니 코드를 제공한 사람에게 문의하세요.

권한 관련 문제 해결

권한 관련 오류가 계속 발생하는 경우:

1. 터미널에 다음 명령어를 입력하여 현재 사용자 이름을 확인합니다:

   whoami

2. 다음 명령어로 폴더 권한을 수정합니다(사용자이름을 본인의 것으로 변경하세요):

   sudo chown -R 사용자이름 /usr/local/lib/node_modules

---

🔄 향후 업데이트 배포하기

코드를 수정한 후 다시 배포하려면:

1. 프로젝트 폴더에서 터미널을 열고 다음 명령어를 입력합니다:

   vercel

2. 기존 프로젝트에 연결하려면 y를 선택하고 안내에 따라 진행합니다.

---

📚 추가 자료

• Vercel 공식 문서
• Node.js 공식 웹사이트
• npm 명령어 치트시트

---

🎉 축하합니다! 이제 Vercel에 프로젝트를 성공적으로 배포하셨습니다. 문제가 발생하면 이 가이드를 다시 참조하세요.