Todo 앱 배포하기 | Vercel 배포

Overview

지금까지 작업한 Todo의 origin은 강의 저장소를 가리킵니다. 그대로 push하면 내 저장소가 아니라 강의 저장소를 향합니다. 이 레슨을 마치면 Todo를 내 저장소에서 관리하고 인터넷 주소로 배포할 수 있습니다.

학습 목표

• 강의 저장소의 main으로 전환해 배포할 시작 상태를 맞춥니다.
• 로컬 Todo를 개인 todo-tutorial 저장소에 올립니다.
• Vercel에 개인 저장소를 연결해 .vercel.app 주소에서 화면이 뜨는지 확인합니다.

시작하기 전 확인사항

• GitHub CLI 인증: 사전 준비에서 마친 gh auth login 상태를 그대로 씁니다.
• 강의 원본을 clone한 로컬 todo-tutorial 폴더

로컬 실행과 배포

지금까지 Todo는 bun dev로 내 노트북에서만 열렸습니다. 주소가 localhost라 나만 볼 수 있고, 터미널을 끄면 화면도 함께 닫힙니다. 이 화면을 누구나 접속하는 인터넷 주소로 올리는 일을 배포라고 합니다.

Vercel은 GitHub 저장소를 받아 배포를 대신 처리하는 서비스입니다. 저장소를 한 번 연결하면 코드를 빌드해 .vercel.app 주소로 띄우고, 이후 main에 push할 때마다 같은 주소를 자동으로 갱신합니다. Next.js를 만든 회사가 운영해서, Next.js로 만든 Todo는 따로 설정하지 않아도 그대로 배포됩니다.

Step 1: Part 2 완료 상태로 전환하기

VS Code에서 todo-tutorial 폴더를 열고 통합 터미널에서 main으로 전환합니다.

git checkout main

Step 2: Todo를 내 저장소로 올리기

현재 todo-tutorial의 origin은 강의 저장소를 가리킵니다. Claude Code에 개인 저장소를 만들고 연결을 바꿔 달라고 요청합니다.

Claude Code에 다음과 같이 요청합니다.

내 GitHub 계정에 todo-tutorial public 저장소를 만들고,
현재 main 브랜치를 올려줘.

이 폴더의 origin도 새 저장소로 바꿔줘.

github.com에서 todo-tutorial을 열어 main 브랜치와 프로젝트 파일이 보이는지 확인합니다. 이후 실습도 현재 로컬 todo-tutorial 폴더에서 계속 진행합니다.

Step 3: Vercel 계정 만들기

vercel.com을 열고 Sign Up을 클릭합니다. Continue with GitHub를 고른 뒤 이어지는 화면에서 Authorize를 누르면 가입이 끝납니다. 사전 준비에서 만든 GitHub 계정을 그대로 써서 새로 입력할 정보는 없습니다.

가입을 마치면 Vercel 대시보드가 열립니다.

Step 4: Vercel에 저장소 연결하기

Vercel 대시보드에서 ① Add New... 드롭다운을 열고, 메뉴에서 Project를 클릭합니다.

① Search 박스에 todo-tutorial을 입력하고, ② 옆의 Import 버튼을 클릭합니다.

다음 화면에서 Application Preset은 Next.js로 자동 감지됩니다. Todo는 외부 키 없이 브라우저에서 동작하므로 Environment Variables는 비워둔 채 ① Deploy 버튼을 클릭합니다.

Step 5: 배포 주소에서 Todo 확인하기

빌드가 끝나면 저장소 이름이 들어간 .vercel.app 주소가 생깁니다. 주소를 열어 로컬과 같은 Todo 화면이 뜨는지 확인합니다.

내 노트북에서만 실행되던 Todo가 인터넷에 올라갔습니다. 이제 이 주소를 누구에게든 공유할 수 있는 상태가 되었습니다.

핵심 포인트 정리

1. 개인 저장소로 연결 전환: 같은 로컬 todo-tutorial 폴더를 사용하면서 origin만 내 GitHub 저장소로 바꿉니다.
2. Vercel이 읽는 원본: Vercel은 연결한 개인 저장소의 main을 배포합니다.

FAQ

이어서 배울 내용

Todo를 내 저장소로 옮기고 배포까지 마쳤습니다. Part 2 정리에서 지금까지 Claude를 확장한 도구들을 한 번에 되짚어 봅니다.