콘텐츠로 이동

03. 문지기 세우기와 첫 인사 (Auth & MVP)

"단 한 명의 유효한 사용자만 있다면, 그것은 이미 서비스입니다."

내 컴퓨터에서만 작동하던 코드를 세상 밖으로 던질 시간입니다. 구글의 보안 기술을 빌려 로그인 기능을 구현하고, 나만의 고유한 웹 주소(.web.app)를 획득해 봅시다.

1. Firebase Auth: 구글 문지기 고용하기

복잡한 회원가입, 비밀번호 찾기 로직을 직접 짤 필요가 없습니다. 구글이 제공하는 인증 시스템을 우리 서비스에 이식합니다.

🛡️ Firebase 콘솔 설정

  1. Firebase Console에 접속하여 내 프로젝트를 선택합니다.
  2. 왼쪽 메뉴 빌드 > Authentication 클릭 후 '시작하기'를 누릅니다.
  3. Sign-in method 탭에서 Google을 선택하고 '사용 설정'을 켭니다.
  4. 프로젝트의 지원 이메일을 설정하고 [저장]을 누릅니다.

2. MVP 개발: 작동하는 껍데기 만들기

가장 단순하지만 핵심적인 기능(로그인)이 포함된 MVP(Minimum Viable Product)를 만듭니다.

🔐 Firebase SDK 설정 가져오기

Firebase 콘솔에서 프론트엔드 앱에 필요한 설정값을 가져옵니다.

  1. Firebase Console → 프로젝트 개요 페이지에서 웹 (웹) 아이콘 클릭
  2. 앱 닉네임 입력 (예: course-registration-web) 후 앱 등록
  3. Firebase 호스팅 설정 체크박스는 체크하지 않습니다 (이미 CLI로 설정했습니다)
  4. Firebase SDK 추가 섹션에 나오는 대로 npm install firebase 실행 
    cd frontend  # frontend 폴더로 이동 필수!
npm install firebase
cd ..
  5. SDK 설정 및 구성 코드 전체를 복사합니다 (const firebaseConfig = ... 부분 포함)

🤖 AI에게 설정 파일 생성 요청하기

복사한 설정 코드를 AI에게 넘겨 안전한 환경 변수 방식으로 변환할 수 있습니다.

AI 프롬프트 예시

내가 복사한 Firebase SDK 설정 코드를 줄게.

(여기에 복사한 코드 전체 붙여넣기)

이 내용과 동일한 내용으로 frontend/src/firebase.ts 파일을 만들어줘. 대신 frontend/.env 파일을 만들어서 환경 변수를 불러와야 해. (Vite 환경 변수 규칙인 VITE_ 접두사 사용)

또한, 로컬 환경(localhost 또는 127.0.0.1)에서 실행될 때는 자동으로 Firebase Emulator (Auth: 9099, Firestore: 8080)에 연결되도록 코드를 추가해줘.

📝 결과 예시

AI가 생성해 주는 파일들:

1. frontend/.env (Git에 올리지 마세요!)

VITE_FIREBASE_API_KEY=AIzaSy...
VITE_FIREBASE_AUTH_DOMAIN=course-registration-79d64.firebaseapp.com
VITE_FIREBASE_your-project-id=course-registration-79d64
VITE_FIREBASE_STORAGE_BUCKET=course-registration-79d64.firebasestorage.app
VITE_FIREBASE_MESSAGING_SENDER_ID=123456789
VITE_FIREBASE_APP_ID=1:123456789:web:abcdef

2. frontend/src/firebase.ts

import { initializeApp } from "firebase/app";
import { getAuth, connectAuthEmulator } from "firebase/auth";
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_your - project - id,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);

// 로컬 개발 환경에서는 자동으로 에뮬레이터에 연결
if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
  console.log("🔧 Using Firebase Emulators");
  connectAuthEmulator(auth, "http://127.0.0.1:9099");
  connectFirestoreEmulator(db, "127.0.0.1", 8080);
}

export default app;

3. Frontend: 로그인 구현 (AI Code Generation)

이제 설정은 끝났습니다. AI에게 명령하여 구글 로그인/로그아웃 버튼이 포함된 웹페이지를 만들어봅시다.

AI 프롬프트 예시

프론트엔드에 React + Firebase + Tailwind CSS를 사용해서 구글 로그인/로그아웃 기능을 구현해줘.

  1. 기능:

    • 로그인 버튼을 누르면 구글 팝업 로그인을 실행.
    • 로그인 상태면 "환영합니다, [이름]님!" 메시지와 로그아웃 버튼 표시.
    • 로그아웃 상태면 "구글 로그인" 버튼 표시.

  2. 디자인:

    • Tailwind CSS를 사용해서 깔끔하고 모던한 카드 형태의 UI로 만들어줘.
    • 가운데 정렬된 컨테이너 안에 넣어줘.

  3. 📂 디렉토리 구조 가이드 (필수 준수): 아래의 폴더 구조 규칙에 맞춰서, 가장 적절한 파일명을 당신이 직접 지어서 코드를 작성해주세요. 모든 코드 블록의 최상단에는 // src/hooks/useExample.ts 처럼 파일 경로를 주석으로 명시해야 합니다.

    1. src/types/: 공통 인터페이스 정의
    2. src/hooks/: 데이터(State)와 로직(Filter)을 담당하는 Custom Hook
    3. src/components/: 로직 없이 UI만 담당하는 순수 컴포넌트
    4. src/pages/: Hook과 Component를 조립하는 페이지
    5. src/App.tsx: 위에서 만든 페이지를 불러오는 메인 파일

  4. 기술 스택:

    • Vite + React + TypeScript
    • Tailwind CSS

4. Git: 작업 내용 저장하기 (Save)

아직 라이브 배포를 하기에는 이릅니다. 완벽한 자동 배포(CI/CD)를 위해선 5장 GitHub Actions에서 배포에 필요한 비밀 키(Secrets) 설정을 먼저 마쳐야 하기 때문입니다.

지금은 작업한 내용을 develop 브랜치에 안전하게 저장만 해둡시다.

  1. Commit & Push: 
    git add .
git commit -m "Feat: Add Google Auth MVP"
git push origin develop

Next Step: 5장에서 이 코드를 main 브랜치로 합치는 순간, 전 세계에 배포될 것입니다!

5. [Check] 로컬 vs 배포 환경 구분하기

개발 중에는 내 컴퓨터의 에뮬레이터를 바라보고, 실제 서비스 중에는 클라우드를 바라보게 코드를 작성해야 합니다. frontend/src/firebase.ts 파일에 이미 설정되어 있어야 하지만, 다시 한번 확인해보세요.

// frontend/src/firebase.ts
// 로컬 환경(localhost 또는 127.0.0.1)일 때만 에뮬레이터에 연결하는 마법의 코드
if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
  connectAuthEmulator(auth, "http://127.0.0.1:9099");
}

에뮬레이터에서의 Google 로그인

위 코드가 적용된 상태에서 localhost로 접속해 'Google 로그인' 버튼을 누르면, 진짜 구글 로그인 창이 뜨지 않습니다. 대신 "Add New Account" 버튼이 있는 에뮬레이터 전용 가짜 로그인 창이 뜹니다.

여기서 아무 이름이나 입력하면 로컬 에뮬레이터 DB에만 존재하는 가짜 계정이 생성됩니다. 실제 구글 계정과 전혀 상관없으니 안심하고 테스트하세요!

6. 핵심 정리

용어 설명 비유
Auth (Authentication) 사용자가 누구인지 확인하는 절차 출입증 검사
SDK 구글 기능을 내 코드에서 쓰게 해주는 도구 모음 밀키트(조리도구+재료)
Build 코드를 브라우저가 읽기 좋게 압축하는 과정 이사 가기 전 짐 싸기
Deploy 빌드된 파일을 서버에 올리는 행위 짐 풀고 영업 시작

축하합니다! 이제 여러분은 단순히 코드를 짜는 학생이 아니라, 실제 웹 서비스를 운영하는 운영자가 되었습니다. 다음 04장에서는 내 컴퓨터 안에서 완벽하게 시뮬레이션하고 검증하는 Emulator와 TDD 전략을 배워보겠습니다!

실습 과제: 배포된 주소를 친구에게 공유하고, 친구가 구글로 로그인했을 때 내 Firebase 콘솔의 Users 탭에 친구의 이메일이 뜨는지 확인해 보세요!