23차시. 빌드 & 배포

23차시. 빌드 & 배포

학습 목표

• npm run build를 실행할 수 있다
• Vercel에 배포할 수 있다
• 환경 변수를 설정할 수 있다
• 배포된 사이트를 확인할 수 있다

---

1. 빌드

1.1 빌드란?

빌드는 개발 코드를 프로덕션용으로 변환하는 과정입니다.

과정:

• 코드 최적화
• 파일 압축
• 번들링

1.2 빌드 실행

npm run build

결과:

• dist/ 폴더에 빌드 결과 생성
• 최적화된 파일들

---

2. Vercel 배포

2.1 Vercel이란?

Vercel은 프론트엔드 배포 플랫폼입니다.

특징:

• ✅ 무료 플랜 제공
• ✅ GitHub 연동
• ✅ 자동 배포
• ✅ 빠른 속도

2.2 배포 방법

방법 1: GitHub 연동

1. GitHub에 코드 푸시
2. Vercel에서 Import
3. 자동 배포

방법 2: Vercel CLI

npm install -g vercel
vercel

---

3. 환경 변수 설정

3.1 Vercel에서 설정

1. 프로젝트 Settings
2. Environment Variables
3. 변수 추가

---

4. 다음 차시 예고

다음 차시에서는 프로젝트 정리를 배웁니다:

• 코드 리팩토링
• README 작성
• 포트폴리오 정리

---

요약

핵심 개념

1. 빌드: 프로덕션용 코드 생성
2. Vercel: 배포 플랫폼
3. 환경 변수: 배포 환경 설정

체크리스트

• 빌드 실행 가능
• Vercel 배포 완료
• 환경 변수 설정 완료

---

다음 차시에서 만나요! 🚀