01 / 15
SESSION 49 · Part 8 AI 이해와 활용

첫 웹/앱 프로젝트
완성과 배포

React · TypeScript · Tailwind · Firebase · Vercel

02 / 15
💭

왜 배포까지
가야 할까?

내 컴퓨터에서만 돌아가는 프로젝트는 실존하지 않는 것과 같다.
세상에 URL 하나를 내놓는 순간, 진짜 개발자가 된다.

"강의 100시간" vs "작동하는 URL 1개" — 후자가 훨씬 강하다.

03 / 15
🎯

이 세션에서
배우는 것

🔗
스택 연결
React+TS+Tailwind+Firebase를 실제로 연결해 앱을 만든다
🌐
라이브 URL
GitHub → Vercel 자동 배포로 세상에 URL을 내놓는다
🔄
전체 흐름 경험
기획 → 개발 → 배포 — 처음부터 끝까지 직접 체험한다
04 / 15
🗺️

전체 5단계 흐름

이 5단계를 따라가면 아이디어가 라이브 URL이 된다.

⚙️ 셋업
(Vite + React)
→
💾 데이터
(Firestore)
→
🔐 인증
(Firebase Auth)
→
🤖 AI 페어
코딩
→
🚀 배포
(Vercel)

각 단계가 끝날 때마다 동작하는 화면을 확인하자.

05 / 15
⚙️

1단계 — Vite 셋업

명령어 몇 줄로 React+TS+Tailwind가 준비된다.

1
프로젝트 생성
npm create vite@latest my-app -- --template react-ts
2
의존성 설치
cd my-app && npm install
3
Tailwind 추가
npm install -D tailwindcss postcss autoprefixer → 설정 파일 생성
4
Firebase SDK 설치
npm install firebase → 프로젝트 설정 키 복사
5
개발 서버 실행
npm run dev → localhost:5173에 첫 화면 등장
06 / 15
💾

2단계 — Firestore 연결

서버 코드 0줄. React에서 바로 읽고 쓰기가 된다.

🔥 Firebase 콘솔
프로젝트 생성
→
📋 Firestore
DB 생성
→
📁 컬렉션
"items" 추가
→
⚛️ React에서
addDoc / getDocs

핵심: 백엔드 서버·API 코드 없음 — Firebase SDK가 모두 처리한다.

⚠️ 보안 규칙(Security Rules) 설정 필수 — 기본은 테스트 모드, 배포 전 변경

07 / 15
🔐

3단계 — Authentication

Firebase Authentication으로 로그인 화면 완성 — 코드 수십 줄이면 끝.

📧
이메일·비번
createUserWithEmailAndPassword + signInWithEmailAndPassword
🔑
구글 로그인
signInWithPopup(googleProvider) — 한 줄로 OAuth 완성
👤
로그인 상태 감시
onAuthStateChanged — 로그인/로그아웃 자동 감지

결과: 비밀번호 저장, 세션 관리, OAuth 모두 Firebase가 처리 — 우리는 UI만

08 / 15
🤖

4단계 — AI와 함께 만들기

Cursor·Claude Code에 화면 단위 기능을 요청하고 받은 코드를 검토·수정하자.

👤
냉장고 식재료 추가 화면 만들어줘. 이름·수량·유통기한 입력받고 Firestore에 저장. React+TS+Tailwind로.
🤖
AddItemForm.tsx를 만들어드릴게요. useState로 폼 상태 관리, addDoc()으로 Firestore에 저장, Tailwind로 모바일 반응형 디자인. 폼 검증도 포함했습니다.
👤
좋아. 이제 등록한 아이템 목록 보여주는 컴포넌트도
🤖
ItemList.tsx를 만들겠습니다. useEffect + onSnapshot으로 실시간 동기화, 삭제·편집 버튼 포함, 빈 상태 UI도 추가합니다.
09 / 15
⚠️

AI 페어 주의점

AI는 강력하지만, 그대로 믿지는 말자.

❌ 이렇게는 안 됨
  • 받은 코드를 그대로 복붙
  • 왜 동작하는지 모른 채 넘김
  • 에러 나면 또 AI에게만 의존
  • API 키를 코드에 그대로 둠
✓ 이렇게 하자
  • 받은 코드를 한 줄씩 읽어보기
  • 모르는 부분은 다시 물어보기
  • 문서 한 번 확인하기
  • .env에 키 저장, .gitignore 추가
10 / 15
🚀

5단계 — GitHub → Vercel 배포

한 번 연결하면 push할 때마다 자동 배포가 된다.

1
GitHub 저장소 생성 + push
git init → git add . → git commit → git push
2
Vercel에서 Import
vercel.com → New Project → GitHub 저장소 선택 → 자동 감지
3
환경 변수 설정
Firebase API 키 등을 Vercel 대시보드에 입력 — 코드에서 import.meta.env.VITE_*
4
Deploy 버튼 클릭
2~3분 후 my-app.vercel.app 라이브 URL 발급 — HTTPS도 자동
11 / 15
✅

배포 후 체크리스트

첫 배포 후 바로 확인하자 — 5분이면 끝난다.

🔒
HTTPS 자동 적용
Vercel이 무료 SSL 인증서 자동 발급 — URL 앞이 https://
📱
모바일 반응형
휴대폰에서 열어보기 — 레이아웃 깨지는 곳 없는지
⚠️
에러 메시지
실패했을 때 사용자에게 친절한 메시지 — "로그인 실패. 이메일 확인"
📖
README 작성
프로젝트 설명·스택·실행 방법·스크린샷 — GitHub 첫인상
🔐
Firestore 보안 규칙
테스트 모드 → 로그인 사용자만 읽기/쓰기로 변경
🗝️
API 키 관리
.env로 분리, .gitignore 추가, Vercel 환경 변수에 등록
12 / 15
🎤

첫 배포 = 첫 앨범 발매

완벽하지 않아도 세상에 내놓는 순간 진짜 창작자가 된다.

🎵 앨범 비유
작곡
=
개발 — 코드를 쓰는 과정
녹음
=
빌드 — 배포용 파일 만들기
발매
=
Deploy — 세상에 URL 공개
스트리밍
=
사용자 접속 — 내 것을 다른 사람이 씀
다음 앨범
=
v2, v3 — 반복이 창작자를 만든다
13 / 15
🛠️

배포하며 자주 겪는 문제

미리 알고 있으면 당황하지 않는다.

🚫
Build 실패
TypeScript 에러, import 경로 문제 — 로컬 npm run build로 미리 확인
🔑
API 키 미설정
Vercel 환경 변수에 VITE_ 접두사로 모두 추가했는지 확인
🌐
CORS 에러
Firebase 콘솔 → Authorized domains에 vercel.app 도메인 추가
📱
모바일 깨짐
Tailwind의 sm:/md:/lg: 접두사로 화면별 스타일 분리
🔄
404 / 새로고침
SPA 라우팅 — Vercel이 자동 처리, 별 설정 없이도 작동
💸
비용 걱정
Vercel·Firebase 무료 플랜으로 수백 명 사용자까지 무료
14 / 15
📌

핵심 정리

⚙️
셋업
Vite로 React+TS
Tailwind+Firebase
💾
Firestore
서버 코드 0줄
바로 읽기/쓰기
🔐
Auth
이메일·구글 로그인
수십 줄이면 끝
🤖
AI 페어
화면 단위로 요청
검토·수정·반복
🚀
Vercel 배포
push 한 번으로
라이브 URL
✅
체크리스트
HTTPS·반응형·에러
·README·키 관리
15 / 15
🚀

다음 세션
Session 50 · 회고와 다음 단계

드디어 작동하는 URL을 가지게 됐다.
마지막 세션에서는 50개 여정을 돌아보고, 여기서 어디로 더 깊이 갈 수 있는지
다음 단계의 지도를 함께 그린다.

💡 기억할 것: 완벽하지 않아도 세상에 내놓는 순간 — 진짜 창작자가 된다.

슬라이드 목록