🚀 첫 웹사이트 배포하기

📖 정의

**웹사이트 배포(Deployment)**는 로컬 컴퓨터에서 개발한 웹사이트를 인터넷에 공개하여 누구나 접속할 수 있게 만드는 과정입니다. Vercel과 Netlify는 무료로 정적 웹사이트와 프론트엔드 애플리케이션을 배포할 수 있는 플랫폼으로, GitHub과 연동하면 코드를 푸시할 때마다 자동으로 배포됩니다.

🎯 비유로 이해하기

책 출판하기

웹사이트 배포를 책 출판에 비유하면:

로컬 개발 = 원고 작성
├─ 컴퓨터에서만 볼 수 있음
└─ 수정과 실험 자유롭게

GitHub = 출판사에 원고 제출
├─ 버전 관리 (초고, 2차 수정...)
└─ 협업자와 공유

배포 플랫폼 = 인쇄 및 배포
├─ Vercel/Netlify = 출판사
├─ 도메인 = 책 제목과 ISBN
└─ 누구나 접근 가능

자동 배포 = 자동 재인쇄
└─ 원고 수정하면 자동으로 새 판 출간

상점 오픈

개발 환경 (localhost:3000)
└─ 집에서 만든 시제품

배포 환경 (yoursite.com)
└─ 거리에 오픈한 실제 상점

누구나 방문 가능!
24시간 365일 운영!
전 세계 어디서든 접속!

⚙️ 작동 원리

1. 배포 프로세스

1. 코드 작성 (로컬)
   └─ HTML, CSS, JavaScript 개발

2. Git 커밋
   └─ 변경사항 저장

3. GitHub 푸시
   └─ 원격 저장소에 업로드

4. 자동 배포 트리거
   ├─ Vercel/Netlify가 푸시 감지
   ├─ 코드 다운로드
   ├─ 빌드 실행 (필요시)
   └─ 서버에 배포

5. 배포 완료
   └─ URL로 접속 가능!

2. Vercel vs Netlify

Vercel
├─ Next.js 최적화
├─ 서버리스 함수 지원
├─ Edge Network (빠른 속도)
├─ 자동 HTTPS
└─ GitHub 자동 배포

Netlify
├─ 모든 프레임워크 지원
├─ Form 처리 내장
├─ Identity (인증) 기능
├─ 자동 HTTPS
└─ GitHub 자동 배포

공통점: 무료, 쉬움, 빠름!

💡 실제 예시

준비물 확인

# 1. Node.js 설치 확인
node --version
# v18.0.0 이상 권장

# 2. Git 설치 확인
git --version
# 2.0 이상

# 3. GitHub 계정 생성
# https://github.com 에서 무료 가입

# 4. 텍스트 에디터
# VS Code 추천 (https://code.visualstudio.com/)

방법 1: 정적 HTML 사이트 배포 (가장 간단)

Step 1: 프로젝트 생성

# 1. 프로젝트 폴더 생성
mkdir my-first-website
cd my-first-website

# 2. HTML 파일 생성
cat > index.html << 'EOF'
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 첫 웹사이트</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            background: white;
            padding: 60px 40px;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            text-align: center;
            max-width: 500px;
        }

        h1 {
            color: #667eea;
            font-size: 2.5em;
            margin-bottom: 20px;
        }

        p {
            color: #555;
            font-size: 1.2em;
            margin-bottom: 30px;
            line-height: 1.6;
        }

        .button {
            background: #667eea;
            color: white;
            padding: 15px 40px;
            border: none;
            border-radius: 50px;
            font-size: 1.1em;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .button:hover {
            transform: scale(1.05);
            background: #764ba2;
        }

        .counter {
            font-size: 3em;
            color: #667eea;
            font-weight: bold;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎉 환영합니다!</h1>
        <p>이것은 제가 배포한 첫 번째 웹사이트입니다.</p>

        <div class="counter" id="counter">0</div>

        <button class="button" onclick="incrementCounter()">
            클릭해보세요!
        </button>

        <p style="margin-top: 30px; font-size: 0.9em; color: #999;">
            Vercel/Netlify로 배포됨
        </p>
    </div>

    <script>
        let count = 0;

        function incrementCounter() {
            count++;
            document.getElementById('counter').textContent = count;

            // 애니메이션 효과
            const counter = document.getElementById('counter');
            counter.style.transform = 'scale(1.2)';
            setTimeout(() => {
                counter.style.transform = 'scale(1)';
            }, 200);
        }

        // 부드러운 전환을 위한 CSS
        document.getElementById('counter').style.transition = 'transform 0.2s';
    </script>
</body>
</html>
EOF

# 3. 로컬에서 테스트
# VS Code에서 Live Server 확장 설치 후 실행
# 또는 Python으로 간단한 서버 실행
python3 -m http.server 8000
# 브라우저에서 http://localhost:8000 접속

Step 2: GitHub에 업로드

# 1. Git 저장소 초기화
git init

# 2. .gitignore 생성 (선택사항)
cat > .gitignore << EOF
.DS_Store
Thumbs.db
node_modules/
.env
EOF

# 3. 파일 추가 및 커밋
git add .
git commit -m "첫 커밋: 웹사이트 초기 버전"

# 4. GitHub에서 새 저장소 생성
# https://github.com/new 에서 저장소 생성
# 저장소 이름: my-first-website
# Public으로 설정
# README, .gitignore 추가하지 않음

# 5. 원격 저장소 연결 (GitHub에서 제공하는 명령어 사용)
git remote add origin https://github.com/YOUR_USERNAME/my-first-website.git
git branch -M main
git push -u origin main

# 성공! GitHub에서 코드 확인 가능

Step 3: Vercel로 배포

# 방법 A: Vercel CLI 사용

# 1. Vercel CLI 설치
npm install -g vercel

# 2. 로그인
vercel login
# 이메일로 인증 링크 전송됨

# 3. 배포
vercel

# 프롬프트 답변:
# Set up and deploy? [Y/n] y
# Which scope? (본인 계정 선택)
# Link to existing project? [y/N] N
# What's your project's name? my-first-website
# In which directory is your code located? ./
# Want to override the settings? [y/N] N

# 🎉 배포 완료!
# Preview: https://my-first-website-xxx.vercel.app

# 4. 프로덕션 배포
vercel --prod

# 최종 URL: https://my-first-website.vercel.app

# 방법 B: Vercel 웹사이트 사용 (더 쉬움!)

# 1. https://vercel.com 접속
# 2. GitHub로 로그인
# 3. "Add New Project" 클릭
# 4. GitHub 저장소 import
#    └─ my-first-website 선택
# 5. 설정 확인
#    Framework Preset: Other (정적 HTML)
#    Build Command: (비워둠)
#    Output Directory: .
# 6. "Deploy" 클릭
#
# ⏱️ 30초 후 배포 완료!
# 🌐 URL: https://my-first-website-xxx.vercel.app
#
# ✨ 이제부터 GitHub에 푸시하면 자동 배포!

Step 4: Netlify로 배포

# 방법 A: Netlify CLI 사용

# 1. Netlify CLI 설치
npm install -g netlify-cli

# 2. 로그인
netlify login
# 브라우저에서 인증

# 3. 배포
netlify deploy

# 프롬프트 답변:
# Create & configure a new site? y
# Team: (본인 팀 선택)
# Site name: my-first-website
# Publish directory: .

# 🎉 Draft URL 생성 (미리보기)
# https://random-id--my-first-website.netlify.app

# 4. 프로덕션 배포
netlify deploy --prod

# 최종 URL: https://my-first-website.netlify.app

# 방법 B: Netlify 웹사이트 사용 (추천!)

# 1. https://netlify.com 접속
# 2. GitHub로 로그인
# 3. "Add new site" → "Import an existing project"
# 4. GitHub 연결 및 저장소 선택
#    └─ my-first-website 선택
# 5. 빌드 설정
#    Build command: (비워둠)
#    Publish directory: .
# 6. "Deploy site" 클릭
#
# ⏱️ 1분 후 배포 완료!
# 🌐 URL: https://random-name.netlify.app
#
# 💡 팁: Site settings에서 도메인 이름 변경 가능
# random-name → my-first-website

방법 2: React 앱 배포

Step 1: React 프로젝트 생성

# 1. Create React App으로 프로젝트 생성
npx create-react-app my-react-app
cd my-react-app

# 2. 로컬에서 실행 테스트
npm start
# http://localhost:3000 에서 확인

# 3. 간단한 수정 (src/App.js)
cat > src/App.js << 'EOF'
import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  return (
    <div className="App">
      <header className="App-header">
        <h1>🚀 내 첫 React 앱</h1>

        <div style={{ margin: '30px 0' }}>
          <input
            type="text"
            placeholder="이름을 입력하세요"
            value={name}
            onChange={(e) => setName(e.target.value)}
            style={{
              padding: '10px',
              fontSize: '16px',
              borderRadius: '5px',
              border: '2px solid #61dafb',
              marginBottom: '20px',
              width: '250px'
            }}
          />
          {name && <p style={{ fontSize: '20px' }}>안녕하세요, {name}님! 👋</p>}
        </div>

        <div style={{
          background: 'rgba(255,255,255,0.1)',
          padding: '30px',
          borderRadius: '15px',
          margin: '20px 0'
        }}>
          <p style={{ fontSize: '48px', fontWeight: 'bold' }}>{count}</p>
          <div style={{ display: 'flex', gap: '10px', marginTop: '20px' }}>
            <button
              onClick={() => setCount(count + 1)}
              style={{
                padding: '15px 30px',
                fontSize: '18px',
                background: '#61dafb',
                color: '#282c34',
                border: 'none',
                borderRadius: '10px',
                cursor: 'pointer',
                fontWeight: 'bold'
              }}
            >
              증가
            </button>
            <button
              onClick={() => setCount(count - 1)}
              style={{
                padding: '15px 30px',
                fontSize: '18px',
                background: '#ff6b6b',
                color: 'white',
                border: 'none',
                borderRadius: '10px',
                cursor: 'pointer',
                fontWeight: 'bold'
              }}
            >
              감소
            </button>
            <button
              onClick={() => setCount(0)}
              style={{
                padding: '15px 30px',
                fontSize: '18px',
                background: '#888',
                color: 'white',
                border: 'none',
                borderRadius: '10px',
                cursor: 'pointer',
                fontWeight: 'bold'
              }}
            >
              리셋
            </button>
          </div>
        </div>

        <p style={{ marginTop: '30px', opacity: 0.7 }}>
          Vercel/Netlify로 배포된 React 앱
        </p>
      </header>
    </div>
  );
}

export default App;
EOF

# 4. 빌드 테스트
npm run build
# build 폴더 생성됨 (배포할 파일들)

Step 2: GitHub에 업로드

# 1. Git 저장소 초기화 (이미 되어있음)
git add .
git commit -m "React 앱 초기 버전"

# 2. GitHub 저장소 생성 및 푸시
git remote add origin https://github.com/YOUR_USERNAME/my-react-app.git
git branch -M main
git push -u origin main

Step 3: Vercel 배포 (React 최적화)

# Vercel CLI로 배포
vercel

# 자동으로 감지:
# - Framework: Create React App
# - Build Command: npm run build
# - Output Directory: build

# 🎉 자동 배포 완료!
# https://my-react-app.vercel.app

Step 4: Netlify 배포

# Netlify 웹사이트에서 배포
# 1. Import from Git
# 2. 저장소 선택
# 3. 빌드 설정 (자동 감지됨)
#    Build command: npm run build
#    Publish directory: build
# 4. Deploy
#
# 🎉 배포 완료!
# https://my-react-app.netlify.app

커스텀 도메인 연결

Vercel에서 도메인 연결

# 1. 도메인 구매 (권장 사이트)
#    - Namecheap (https://namecheap.com)
#    - GoDaddy (https://godaddy.com)
#    - Gabia (국내, https://gabia.com)

# 2. Vercel 대시보드
# Project Settings → Domains → Add Domain

# 3. 도메인 입력
# 예: myawesomesite.com

# 4. DNS 설정 (도메인 제공업체에서)
# A Record:
#   Type: A
#   Name: @
#   Value: 76.76.21.21

# CNAME Record:
#   Type: CNAME
#   Name: www
#   Value: cname.vercel-dns.com

# 5. 검증 대기 (최대 24시간)
# ✅ SSL 자동 설정됨
# https://myawesomesite.com 으로 접속!

Netlify에서 도메인 연결

# 1. Site settings → Domain management → Add domain

# 2. 도메인 입력
# 예: myawesomesite.com

# 3. DNS 설정
# Netlify Nameservers 사용 (권장):
#   dns1.p01.nsone.net
#   dns2.p01.nsone.net
#   dns3.p01.nsone.net
#   dns4.p01.nsone.net

# 또는 기존 DNS 사용:
# A Record:
#   Type: A
#   Name: @
#   Value: 75.2.60.5

# CNAME Record:
#   Type: CNAME
#   Name: www
#   Value: your-site.netlify.app

# 4. HTTPS/SSL 자동 활성화
# Let's Encrypt 인증서 자동 발급

# 🎉 커스텀 도메인 완료!

환경변수 설정 (API 키 등)

Vercel 환경변수

# 방법 A: CLI
vercel env add API_KEY

# 프롬프트:
# What's the value of API_KEY? your-secret-key
# Add to which Environments? Production, Preview, Development

# 방법 B: 웹 대시보드
# Project Settings → Environment Variables
#
# Key: API_KEY
# Value: your-secret-key
# Environments: Production, Preview, Development

# React에서 사용 (.env.local)
# REACT_APP_API_KEY=your-secret-key

# 코드에서 접근
const apiKey = process.env.REACT_APP_API_KEY;

# ⚠️ 주의: .env 파일은 .gitignore에 추가!

Netlify 환경변수

# Netlify 대시보드
# Site settings → Build & deploy → Environment

# Environment variables:
# Key: REACT_APP_API_KEY
# Value: your-secret-key

# 저장 후 재배포
# Deploys → Trigger deploy → Deploy site

# React에서 사용
const apiKey = process.env.REACT_APP_API_KEY;

자동 배포 워크플로우

# 개발 → 배포 사이클

# 1. 로컬에서 개발
# 코드 수정
# 로컬 테스트 (npm start)

# 2. 커밋 및 푸시
git add .
git commit -m "기능 추가: 다크모드"
git push origin main

# 3. 자동 배포 시작 🚀
# Vercel/Netlify가 자동으로:
# - GitHub 푸시 감지
# - 코드 다운로드
# - 의존성 설치 (npm install)
# - 빌드 실행 (npm run build)
# - 배포

# 4. 배포 완료 알림
# 이메일/Slack 알림 (설정 가능)
# GitHub 커밋에 배포 상태 표시

# 5. 실시간 확인
# https://your-site.vercel.app
# 변경사항 즉시 반영!

# 평균 배포 시간: 30초 ~ 2분

배포 상태 확인 및 롤백

# Vercel: 배포 히스토리

# 웹 대시보드
# Deployments 탭에서 모든 배포 확인

# 각 배포마다:
# ✅ Status (Success/Failed)
# ⏱️ Duration (빌드 시간)
# 🔗 Preview URL
# 📝 Commit Message
# 👤 Author

# 이전 버전으로 롤백
# 1. 원하는 배포 선택
# 2. "Promote to Production" 클릭
# 3. 즉시 이전 버전으로 복구!

# CLI로 확인
vercel ls
vercel inspect [deployment-url]

# Netlify: 배포 관리

# Deploys 탭
# - Production deploys
# - Deploy previews (PR)
# - Branch deploys

# 롤백 방법
# 1. 이전 배포 선택
# 2. "Publish deploy" 클릭
# 3. 10초 만에 롤백 완료!

# CLI
netlify deploy --prod
netlify open:site

프리뷰 배포 (Pull Request)

# 자동 프리뷰 배포 설정

# 1. 새 브랜치에서 작업
git checkout -b feature/new-design

# 2. 코드 수정 및 푸시
git add .
git commit -m "새 디자인 적용"
git push origin feature/new-design

# 3. GitHub에서 Pull Request 생성

# 4. 자동으로 프리뷰 배포 생성! 🎉
# Vercel: https://my-site-git-feature-new-design.vercel.app
# Netlify: https://deploy-preview-123--my-site.netlify.app

# 5. PR 코멘트에 프리뷰 URL 자동 추가
# 팀원들이 실제 작동하는 사이트 확인 가능!

# 6. PR 머지하면
# - 프리뷰 삭제
# - Production 자동 배포

성능 최적화 및 모니터링

# Vercel Analytics 설정

# 1. package.json에 추가
npm install @vercel/analytics

# 2. _app.js 또는 index.js에 추가
import { Analytics } from '@vercel/analytics/react';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  );
}

# 3. Vercel 대시보드에서 확인
# Analytics 탭
# - 페이지 뷰
# - 방문자 수
# - 성능 점수
# - Web Vitals (LCP, FID, CLS)

# 무료: 월 10만 이벤트

# Netlify Analytics

# Site settings → Analytics → Enable

# 제공 정보:
# - 페이지 뷰
# - 고유 방문자
# - 상위 페이지
# - 리퍼러
# - 대역폭 사용량

# 💰 유료 ($9/월)
# 하지만 Google Analytics 무료 대안 사용 가능

🤔 자주 묻는 질문

Q1. Vercel과 Netlify 중 어느 것을 선택해야 하나요?

# Vercel을 선택하는 경우:
✅ Next.js 프로젝트
✅ Vercel의 Edge Network 활용
✅ 서버리스 함수 많이 사용
✅ React 중심 프로젝트

예시 프로젝트:
- Next.js 블로그
- React 포트폴리오
- SaaS 랜딩 페이지

# Netlify를 선택하는 경우:
✅ 정적 사이트 (HTML/CSS)
✅ 다양한 프레임워크 (Vue, Svelte...)
✅ Form 처리 필요
✅ Identity/인증 기능 필요
✅ CMS 연동 (Netlify CMS)

예시 프로젝트:
- Gatsby 블로그
- Vue.js 앱
- 정적 포트폴리오
- 문서 사이트

# 공통점:
✅ 무료 플랜 충분
✅ 자동 HTTPS
✅ 글로벌 CDN
✅ GitHub 자동 배포
✅ 커스텀 도메인

💡 팁: 둘 다 써보고 결정하세요!
프로젝트마다 다르게 사용해도 OK

Q2. 배포가 실패하면 어떻게 해결하나요?

# 일반적인 배포 실패 원인과 해결법

# 1. 빌드 에러
❌ Error: Build failed
✅ 해결: 로컬에서 빌드 테스트
npm run build
# 에러 메시지 확인 및 수정

# 2. 의존성 문제
❌ Error: Cannot find module 'react'
✅ 해결: package.json 확인
npm install
# package-lock.json도 커밋하기
git add package-lock.json
git commit -m "Fix dependencies"

# 3. 환경변수 누락
❌ Error: API_KEY is not defined
✅ 해결: 플랫폼에 환경변수 추가
# Vercel/Netlify 대시보드에서 설정

# 4. Node 버전 불일치
❌ Error: Node version not supported
✅ 해결: package.json에 engines 명시
{
  "engines": {
    "node": "18.x"
  }
}

# 5. 빌드 시간 초과
❌ Error: Build timeout
✅ 해결:
# - 불필요한 의존성 제거
# - 빌드 최적화
# - 유료 플랜 고려 (빌드 시간 제한 증가)

# 디버깅 팁:
# 1. 배포 로그 자세히 읽기
# 2. 로컬과 동일한 환경 만들기
# 3. 단계별로 커밋하며 테스트
# 4. GitHub Actions로 CI 설정

Q3. 무료로 얼마나 사용할 수 있나요?

# Vercel 무료 플랜 (Hobby)
✅ 무제한 프로젝트
✅ 무제한 배포
✅ 100GB 대역폭/월
✅ 서버리스 함수: 100 GB-시간/월
✅ 팀원: 1명 (본인만)
✅ 자동 HTTPS
✅ 글로벌 CDN

# 제한:
⚠️ 상업적 사용 불가 (개인 프로젝트만)
⚠️ 동시 빌드: 1개

# Netlify 무료 플랜 (Starter)
✅ 무제한 프로젝트
✅ 300 빌드 분/월
✅ 100GB 대역폭/월
✅ 서버리스 함수: 125,000 호출/월
✅ 팀원: 1명
✅ 폼 제출: 100건/월

# 제한:
⚠️ 동시 빌드: 1개
⚠️ 빌드 시간: 15분/빌드

# 실제 사용 가능 규모:
📊 소규모 프로젝트
   월 10,000 방문자까지 무료로 충분!

📊 블로그/포트폴리오
   개인 사용: 완전 무료!

📊 프로토타입/데모
   무제한 사용 가능

💡 팁: 무료로 시작하고, 필요하면 업그레이드
     대부분의 프로젝트는 무료 플랜으로 충분합니다!

Q4. 기존 사이트를 배포하려면 어떻게 하나요?

# 기존 프로젝트 배포 단계별 가이드

# 1. 프로젝트 정리
cd existing-project

# .gitignore 확인
cat > .gitignore << EOF
node_modules/
.env
.env.local
.DS_Store
build/
dist/
.cache/
EOF

# 2. 빌드 스크립트 확인
# package.json에 빌드 명령어 있는지 확인
{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",  // 이게 있어야 함!
    "test": "react-scripts test"
  }
}

# 없으면 추가:
npm install --save-dev webpack webpack-cli
# 또는 프레임워크 설치

# 3. 로컬 빌드 테스트
npm install
npm run build

# 성공하면 build/ 또는 dist/ 폴더 생성됨

# 4. GitHub에 업로드
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/project.git
git push -u origin main

# 5. Vercel/Netlify에서 Import
# - Repository 선택
# - Framework 자동 감지 확인
# - Build settings 확인
#   * Build command: npm run build
#   * Output directory: build (또는 dist, public)
# - Deploy!

# 6. 배포 후 확인
# - 모든 페이지 정상 작동?
# - 이미지/CSS 로드?
# - API 연결 (환경변수 설정 필요)?

# 문제 해결:
# - 404 에러: 라우팅 설정 (SPA)
# - 이미지 안 보임: 절대 경로 → 상대 경로
# - API 에러: 환경변수 설정

Q5. SPA (React/Vue)의 라우팅이 404 에러가 나요!

# SPA는 클라이언트 사이드 라우팅 사용
# 서버에 /about 경로가 실제로 없어서 404 발생

# Vercel 해결 (자동 처리됨!)
# vercel.json 생성 (선택사항, 보통 불필요)
{
  "routes": [
    { "handle": "filesystem" },
    { "src": "/(.*)", "dest": "/index.html" }
  ]
}

# Netlify 해결
# public/_redirects 파일 생성
/*  /index.html  200

# 또는 netlify.toml
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

# React Router 사용 시
# BrowserRouter 사용 (HashRouter 말고!)
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

# 배포 후 테스트:
# ✅ https://site.com/ (홈)
# ✅ https://site.com/about (어바웃)
# ✅ 새로고침해도 정상 작동!

🎓 다음 단계

첫 웹사이트 배포를 완료했다면, 다음을 학습해보세요:

환경변수 관리 - API 키와 비밀 설정 안전하게 관리
GitHub 협업하기 - 팀과 함께 개발하고 배포하기
REST API 서버 만들기 - 백엔드와 연동하기

실전 프로젝트 아이디어

# 초급
1. 개인 포트폴리오 웹사이트
   └─ HTML + CSS + JavaScript

2. 할일 목록 앱 (To-Do List)
   └─ React + LocalStorage

3. 날씨 앱
   └─ React + Weather API

# 중급
4. 블로그 플랫폼
   └─ Next.js + Markdown
   └─ 또는 Gatsby + Netlify CMS

5. 실시간 채팅 앱
   └─ React + Firebase

6. E-commerce 랜딩 페이지
   └─ React + Stripe (결제)

# 모든 프로젝트를 Vercel/Netlify에 배포하고
# 포트폴리오에 링크 추가하세요!

🎬 마무리

웹사이트 배포는 생각보다 간단합니다:

GitHub: 코드 저장 및 버전 관리
Vercel/Netlify: 무료 호스팅 및 자동 배포
커스텀 도메인: 전문적인 웹사이트 완성
HTTPS: 보안 자동 적용

이제 여러분의 프로젝트를 전 세계에 공개할 수 있습니다! 코드를 푸시하는 것만으로 자동으로 배포되는 마법을 경험해보세요. 🚀✨

첫 배포는 항상 특별합니다. 여러분의 웹사이트 URL을 친구들과 공유하고, 포트폴리오에 추가하세요!

📖 정의​

🎯 비유로 이해하기​

책 출판하기​

상점 오픈​

⚙️ 작동 원리​

1. 배포 프로세스​

2. Vercel vs Netlify​

💡 실제 예시​

준비물 확인​

방법 1: 정적 HTML 사이트 배포 (가장 간단)​

Step 1: 프로젝트 생성​

Step 2: GitHub에 업로드​

Step 3: Vercel로 배포​

Step 4: Netlify로 배포​

방법 2: React 앱 배포​

Step 1: React 프로젝트 생성​

Step 2: GitHub에 업로드​

Step 3: Vercel 배포 (React 최적화)​

Step 4: Netlify 배포​

커스텀 도메인 연결​

Vercel에서 도메인 연결​

Netlify에서 도메인 연결​

환경변수 설정 (API 키 등)​

Vercel 환경변수​

Netlify 환경변수​

자동 배포 워크플로우​

배포 상태 확인 및 롤백​

프리뷰 배포 (Pull Request)​

성능 최적화 및 모니터링​

🤔 자주 묻는 질문​

Q1. Vercel과 Netlify 중 어느 것을 선택해야 하나요?​

Q2. 배포가 실패하면 어떻게 해결하나요?​

Q3. 무료로 얼마나 사용할 수 있나요?​

Q4. 기존 사이트를 배포하려면 어떻게 하나요?​

Q5. SPA (React/Vue)의 라우팅이 404 에러가 나요!​

🎓 다음 단계​

실전 프로젝트 아이디어​

🎬 마무리​

📖 정의

🎯 비유로 이해하기

책 출판하기

상점 오픈

⚙️ 작동 원리

1. 배포 프로세스

2. Vercel vs Netlify

💡 실제 예시

준비물 확인

방법 1: 정적 HTML 사이트 배포 (가장 간단)

Step 1: 프로젝트 생성

Step 2: GitHub에 업로드

Step 3: Vercel로 배포

Step 4: Netlify로 배포

방법 2: React 앱 배포

Step 1: React 프로젝트 생성

Step 2: GitHub에 업로드

Step 3: Vercel 배포 (React 최적화)

Step 4: Netlify 배포

커스텀 도메인 연결

Vercel에서 도메인 연결

Netlify에서 도메인 연결

환경변수 설정 (API 키 등)

Vercel 환경변수

Netlify 환경변수

자동 배포 워크플로우

배포 상태 확인 및 롤백

프리뷰 배포 (Pull Request)

성능 최적화 및 모니터링

🤔 자주 묻는 질문

Q1. Vercel과 Netlify 중 어느 것을 선택해야 하나요?

Q2. 배포가 실패하면 어떻게 해결하나요?

Q3. 무료로 얼마나 사용할 수 있나요?

Q4. 기존 사이트를 배포하려면 어떻게 하나요?

Q5. SPA (React/Vue)의 라우팅이 404 에러가 나요!

🎓 다음 단계

실전 프로젝트 아이디어

🎬 마무리