PM Development Instinct

2주차: GitHub & Firebase 배포

� GitHub 연동
🔥 Firebase Hosting
⏱️ 90분

1주차에서 제작한 감정 일기장 UI 목업을 GitHub에 업로드하고, Firebase App Hosting과 연동하여 실제 인터넷에서 접근 가능한 서비스로 배포합니다.

⚠️ 시작하기 전 필수 준비사항

🔥 Firebase Blaze 요금제 설정 필수

Firebase App Hosting을 사용하려면 Blaze (종량제) 요금제가 필요합니다.

무료 사용량 내에서는 비용이 발생하지 않으니 안심하세요!

✅ 설정 방법

  1. Firebase Console 접속
  2. 프로젝트 설정 → 사용량 및 결제
  3. "Blaze 요금제로 업그레이드" 클릭
  4. 결제 정보 입력 (신용카드 등)

💰 비용 걱정 없어요

  • • 무료 할당량 제공
  • • 소규모 프로젝트는 무료
  • • 사용한 만큼만 과금
  • • 예산 알림 설정 가능

💡 팁: 결제 정보를 설정해도 무료 할당량 내에서는 비용이 발생하지 않습니다!

🎯 학습 목표

� GitHub 버전 관리

Git의 기본 개념을 이해하고 GitHub을 통한 소스코드 관리 방법을 학습합니다.

🚀 배포 프로세스 마스터

개발환경에서 프로덕션까지의 배포 파이프라인을 이해하고 구축합니다.

� Firebase App Hosting

Firebase App Hosting을 통해 실제 인터넷에서 접근 가능한 웹 서비스로 배포합니다.

🛠️ 실습 가이드 (따라하기)

📋 준비사항

  • GitHub 계정 (없으면 github.com에서 회원가입)
  • 1주차에서 작업한 감정 일기장 프로젝트
  • Cursor 에디터 설치 및 GitHub 확장

🌐 GitHub 웹에서 저장소 생성하기

  1. GitHub.com 접속 → 로그인
  2. 우상단 '+' 버튼 → "New repository" 클릭
  3. Repository name: emotion-diary 입력
  4. Description: "감정 일기장 앱" 입력
  5. Public 선택 (무료 계정에서 배포 가능)
  6. Add a README file 체크 해제 (기존 프로젝트 있음)
  7. "Create repository" 버튼 클릭

💻 Cursor에서 GitHub 연동하기

  1. Cursor 실행 → 감정 일기장 프로젝트 폴더 열기
  2. 왼쪽 사이드바 → "Source Control" 탭 (Git 아이콘) 클릭
  3. "Initialize Repository" 버튼 클릭
  4. 터미널 열기 (Ctrl+` 또는 View → Terminal)
  5. 터미널에 다음 명령어 입력:
    git remote add origin https://github.com/your-username/emotion-diary.git
git branch -M main
    * your-username을 본인 GitHub 사용자명으로 변경

📤 첫 번째 커밋 & 푸시하기

  1. Source Control 탭에서 "Changes" 섹션 확인
  2. 모든 파일 스테이징: "Changes" 옆 "+" 버튼 클릭
  3. 커밋 메시지 입력: "✨ 감정 일기장 UI 구현 완료"
  4. "Commit" 버튼 클릭
  5. "Publish Branch" 또는 "Push" 버튼 클릭
  6. GitHub 인증 창이 나타나면 로그인 진행

✅ 확인하기: GitHub 저장소 페이지를 새로고침하면 프로젝트 파일들이 업로드된 것을 확인할 수 있습니다!

🔥 Firebase 콘솔에서 프로젝트 생성

  1. Firebase Console 접속: console.firebase.google.com
  2. "프로젝트 만들기" 버튼 클릭
  3. 프로젝트 이름: "emotion-diary-app" 입력
  4. Google Analytics: 일단 비활성화 (나중에 활성화 가능)
  5. "프로젝트 만들기" 클릭 → 생성 완료까지 기다리기
  6. "계속" 버튼 클릭하여 프로젝트 대시보드 진입

🔨 배포 전 빌드 테스트 (중요!)

⚠️ Firebase에 배포하기 전에 로컬에서 빌드가 성공하는지 반드시 확인하세요!

  1. 터미널에서 프로젝트 폴더로 이동
  2. 빌드 명령어 실행:
    npm run build
  3. 빌드 성공 확인: "✓ Compiled successfully" 메시지 확인
  4. 빌드 실패 시: 에러 메시지를 읽고 코드를 수정한 후 다시 빌드

💡 왜 중요한가요?
로컬에서 빌드가 실패하면 Firebase에서도 배포가 실패합니다. 미리 확인해서 시간을 절약하고 문제를 빠르게 해결할 수 있습니다.

🚀 App Hosting 서비스 활성화

  1. Firebase 대시보드 → 왼쪽 메뉴에서 "Hosting" 클릭
  2. "시작하기" 버튼 클릭
  3. App Hosting (beta) 선택
  4. "GitHub로 계속" 클릭 → GitHub 인증 허용
  5. 저장소 선택: 방금 생성한 "emotion-diary" 저장소
  6. 브랜치 선택: "main" 브랜치
  7. 프레임워크: "Next.js" 선택
  8. 빌드 설정 확인:
    Build command: npm run build
Output directory: .next
  9. "백엔드 배포" 버튼 클릭

⚙️ 환경 변수 설정 (필요시)

현재 단계에서는 환경 변수가 필요하지 않지만, 나중에 API 키 등을 추가할 때 사용:

  1. App Hosting 대시보드 → "Environment" 탭
  2. "Add environment variable" 클릭
  3. 키-값 쌍으로 환경 변수 추가

✅ 진행 상황: 배포가 진행 중입니다. 보통 3-5분 정도 소요됩니다.

🌐 배포 상태 확인하기

  1. Firebase Console → Hosting → App Hosting 탭 확인
  2. 배포 상태: "Deployed" 상태가 될 때까지 기다리기
  3. 배포 중 오류 발생 시: "Logs" 탭에서 오류 내용 확인

🎉 실제 웹사이트 접속해보기

  1. 배포 완료 후 Firebase에서 제공하는 URL 복사
  2. 새 브라우저 탭에서 해당 URL 접속
  3. 감정 일기장 UI가 정상적으로 표시되는지 확인
  4. 모바일 반응형 확인 (브라우저 개발자 도구 활용)

📱 다양한 기기에서 테스트

  • 데스크톱: Chrome, Firefox, Safari에서 확인
  • 모바일: 실제 스마트폰에서 접속 테스트
  • 타블릿: iPad나 안드로이드 타블릿에서 확인
  • 친구들과 공유: URL을 친구들에게 보내서 피드백 받기

🎊 축하합니다! 여러분의 감정 일기장이 이제 전 세계 어디서든 접속 가능한 웹 서비스가 되었습니다!

✏️ 간단한 수정해보기

  1. Cursor에서 프로젝트 열기
  2. 메인 페이지 또는 컴포넌트 중 하나 선택
  3. 제목이나 텍스트 변경 (예: "감정 일기장 v1.1" 등)
  4. 변경사항 저장 (Ctrl+S 또는 Cmd+S)

📤 변경사항 GitHub에 푸시

  1. Source Control 탭 열기
  2. 변경된 파일 확인
  3. 커밋 메시지: "🔧 메인 제목 업데이트" 입력
  4. Commit & Push 클릭

🔄 자동 재배포 확인

  1. Firebase Console → App Hosting으로 이동
  2. 새로운 배포가 자동으로 시작되는 것 확인
  3. 배포 완료 후 웹사이트 새로고침
  4. 변경사항 반영 확인

💡 핵심 포인트: GitHub에 코드를 푸시하면 Firebase가 자동으로 감지해서 재배포합니다. 이게 바로 CI/CD(지속적 통합/배포)입니다!

📚 학습 자료 & 참고 링크

🎥 추천 영상

  • Git과 GitHub 초보자 가이드
  • Firebase Hosting 완벽 가이드
  • 웹 개발자를 위한 배포 전략

💪 다음 주 미리보기

3주차에서는 배포된 감정 일기장에 실제 데이터 저장 기능을 추가합니다. Firestore 데이터베이스를 연동하여 감정 일기를 작성하고, 수정하고, 삭제하는 CRUD 기능을 구현해보겠습니다!

← 1주차: Next.js 기본 & 감정 일기장 디자인📚 커리큘럼으로 돌아가기3주차: Firestore & 감정 일기 CRUD →