[이제와서 시작하는 React 마스터하기 #20] React 앱 배포하기

게시 2025/10/08

React 앱 배포하기

By YonYonWare

9 분읽는 시간

[이제와서 시작하는 React 마스터하기 #20] React 앱 배포하기

React Day 20 - 드디어 마지막 시간이에요! 완성한 프로젝트를 인터넷에 올려서 전 세계 사람들이 볼 수 있게 만들어봅시다!

오늘 배울 내용

✅ 배포가 뭔가요?
✅ 어디에 배포하나요?
✅ 가장 쉬운 배포 방법
✅ 배포 후 할 일

배포가 뭔가요?

배포는 내가 만든 앱을 인터넷에 올리는 거예요.

일상 비유 🏠

집에서 요리를 했어요:

배포 전: 집 안에서만 먹어요

나만 볼 수 있어요
친구들이 먹을 수 없어요

배포 후: 식당을 열어요

누구나 올 수 있어요
친구들에게 주소를 알려줘요
포트폴리오에 올려요!

어디에 배포하나요?

입문자가 사용하기 좋은 무료 배포 서비스예요!

1. Vercel ⭐ (제일 추천!)

장점:

완전 무료
가장 쉬워요
Next.js 만든 회사
자동 HTTPS

단점:

없어요! (입문자에게는)

2. Netlify

장점:

무료
쉬워요
자동 배포

단점:

Vercel보다 조금 느려요

3. GitHub Pages

장점:

완전 무료
GitHub 계정만 있으면 돼요

단점:

설정이 조금 복잡해요
React Router 사용 시 추가 설정 필요

Vercel로 배포하기 (제일 쉬워요!)

준비물

React 프로젝트
GitHub 계정
Vercel 계정 (무료)

Step 1: GitHub에 코드 올리기

  
# 프로젝트 폴더에서
git init
git add .
git commit -m "첫 배포!"
git branch -M main

# GitHub에서 새 repository 만들고
git remote add origin https://github.com/yourname/your-project.git
git push -u origin main

Step 2: Vercel 배포

Vercel 가입
- https://vercel.com 접속
- “Sign up with GitHub” 클릭
프로젝트 추가
- “New Project” 버튼 클릭
- GitHub repository 선택
- “Import” 클릭
배포 설정
- 아무것도 안 바꿔도 돼요!
- “Deploy” 버튼만 클릭
완료! 🎉
- 2-3분 기다리면 끝
- https://your-project.vercel.app 주소를 받아요

이게 끝이에요! 진짜 이게 다예요!

Netlify로 배포하기

Step 1: 빌드하기

npm run build

build 폴더가 생겨요!

Step 2: Netlify에 업로드

Netlify 가입
- https://netlify.com 접속
- “Sign up with GitHub” 클릭
드래그 & 드롭
- “Sites” → “Add new site” → “Deploy manually”
- build 폴더를 드래그해서 올려요
완료!
- https://random-name.netlify.app 주소를 받아요

GitHub Pages로 배포하기

Step 1: 패키지 설치

npm install gh-pages --save-dev

Step 2: package.json 수정

  
{
  "name": "my-app",
  "homepage": "https://yourusername.github.io/repository-name",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

Step 3: 배포하기

npm run deploy

5분 후 https://yourusername.github.io/repository-name에서 확인!

배포 후 수정하려면?

Vercel/Netlify (GitHub 연동)

  
# 코드 수정 후
git add .
git commit -m "버그 수정"
git push

끝! 자동으로 다시 배포돼요! (2-3분 소요)

GitHub Pages

npm run deploy

매번 이 명령어를 실행하면 돼요.

자주 묻는 질문

Q1: 배포했는데 하얀 화면만 나와요!

원인: 경로 문제

해결책:

  
// package.json
{
  "homepage": "."  // 이렇게 바꾸기
}

Q2: React Router가 안 돼요!

Vercel 해결책: vercel.json 파일 만들기

  
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

Netlify 해결책: public/_redirects 파일 만들기

/*    /index.html   200

Q3: 환경 변수는 어떻게 설정하나요?

Vercel:

Settings → Environment Variables
REACT_APP_API_KEY 같은 형식으로 추가

중요: .env 파일은 GitHub에 올리지 마세요!

배포 체크리스트

배포하기 전에 확인하세요:

개발 모드가 아닌 프로덕션 빌드인가요?
API 키나 비밀번호가 코드에 없나요?
모든 기능이 잘 작동하나요?
모바일에서도 잘 보이나요?
README.md에 프로젝트 설명을 작성했나요?

배포 후 할 일

1. 친구들에게 자랑하기

"내가 만든 앱이야! https://my-app.vercel.app"

2. 포트폴리오에 추가하기

GitHub README에 데모 링크 추가
이력서에 프로젝트 링크 추가

3. 성능 체크하기

Google PageSpeed Insights에서 테스트
GTmetrix에서 속도 확인

4. 피드백 받기

커뮤니티에 공유하기
친구들에게 써보라고 하기
개선할 점 찾기

정리

배포 방법

✅ Vercel: 가장 쉽고 빠름 (제일 추천!) ✅ Netlify: 드래그 & 드롭으로 간단 ✅ GitHub Pages: GitHub만 있으면 OK

핵심 포인트

배포는 생각보다 쉬워요!
Vercel은 3분이면 완료
코드 수정하면 자동 재배포
전부 무료예요!

축하해요! 🎉

20일간의 React 여정을 완주하셨어요!

지금까지 배운 것

✅ React 기초 (Component, JSX, Props, State)
✅ Hooks (useState, useEffect, Custom Hooks)
✅ 라우팅 (React Router)
✅ 폼 처리와 검증
✅ 성능 최적화
✅ 상태 관리 (Context, Zustand, React Query)
✅ TypeScript, Next.js 맛보기
✅ 테스팅 입문
✅ 프로젝트 아이디어
✅ 배포하기

이제 뭘 해야 하나요?

1. 프로젝트를 만드세요!

배운 것을 실전에 적용하세요
작은 것부터 시작하세요

2. 코드를 읽으세요!

GitHub에서 인기 React 프로젝트 구경하기
다른 사람 코드에서 배우기

3. 계속 배우세요!

React 공식 문서 읽기
새로운 기술 시도하기

4. 커뮤니티에 참여하세요!

질문하기, 답변하기
블로그 글 쓰기
오픈소스 기여하기

마지막 조언

“늦었다고 생각할 때가 가장 빠를 때입니다.”

React를 배우기 시작한 것을 축하해요! 이제 시작일 뿐이에요. 계속 만들고, 계속 배우고, 계속 성장하세요!

화이팅! 🚀