01 / 14
SESSION 30 · Part 6 서버/DB
Firebase와
BaaS
서버 코드 한 줄 없이 — 풀스택 앱을 만드는 가장 빠른 길
02 / 14
🎯
이 세션에서
배우는 것
☁️
BaaS의 정체
Backend as a Service가 무엇이고 왜 입문자에게 유용한지 설명할 수 있다
🔥
Firebase 핵심 기능
Firestore, Authentication, Storage가 각각 무엇을 담당하는지 구분한다
🚀
서버 없는 데이터 흐름
서버 코드를 직접 쓰지 않고 데이터를 저장·조회하는 흐름을 이해한다
03 / 14
💭
왜 BaaS가
필요할까?
앱 하나를 만들려고 했더니 서버, DB, 로그인, 파일 업로드를
전부 직접 구축해야 한다면? 본업(앱 만들기)에 도달하기까지 너무 멀다.
BaaS는 "이미 다 만들어진 백엔드"를 빌려 쓰는 방식이다.
프론트엔드 코드 몇 줄로 로그인·DB·파일 저장이 끝난다.
04 / 14
직접 구축 vs BaaS
같은 결과물을 만드는 데 걸리는 시간과 노력의 차이
❌ 직접 구축
- 서버 임대 · OS 설치 · DB 설치
- 인증 시스템 직접 구현 (수일~수주)
- 파일 업로드 서버 · 보안 · 백업까지
- 장애 대응 · 모니터링 · 운영 부담
✓ BaaS 사용
- 웹 콘솔에서 프로젝트 생성 (수 분)
- 로그인 토글 한 번으로 인증 완성
- 이미지 업로드 함수 한 줄로 끝
- 운영·백업·확장은 제공자가 책임
05 / 14
Firebase 핵심 4인방
풀스택 앱이 필요로 하는 거의 모든 백엔드 기능을 한 묶음으로 제공한다.
📂
Firestore
문서·컬렉션 구조의 NoSQL DB. 실시간 동기화 지원
🔐
Authentication
이메일·구글·깃허브 로그인을 몇 줄로 연동
🗄️
Storage
이미지·동영상·파일을 업로드·다운로드하는 클라우드 저장소
🌐
Hosting
정적 웹사이트를 CDN으로 빠르게 배포
06 / 14
🖥️
Firebase Console —
웹 화면에서 다 된다
코드 없이도 프로젝트 관리, 데이터 확인, 사용자 관리가 가능하다.
1
프로젝트 생성
console.firebase.google.com에서 클릭 몇 번으로 새 프로젝트 시작
2
기능 활성화
Firestore, Authentication, Storage를 토글로 켜기만 하면 사용 가능
3
데이터 직접 확인
저장된 문서를 표 형태로 보고, 직접 추가·수정·삭제할 수 있다
4
사용자 관리
가입한 사용자 목록 확인, 비밀번호 재설정 메일 보내기까지
07 / 14
📂
Firestore —
문서와 컬렉션
표(Table)가 아니라 문서(Document)와 컬렉션(Collection)이라는 NoSQL 구조다.
📁 users
(컬렉션)
→
📄 user_001
(문서)
→
{ name: "민수",
email: "..." }
컬렉션 = 폴더, 문서 = JSON 파일.
문서 안에 또 다른 컬렉션을 중첩할 수도 있다.
08 / 14
⚡
SDK —
React에서 바로 호출
firebase-js-sdk를 설치하면, 서버 한 줄 없이도 데이터를 읽고 쓸 수 있다.
// 1. SDK import
import { initializeApp } from "firebase/app";
import { getFirestore, collection, addDoc } from "firebase/firestore";
// 2. 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// 3. 데이터 추가 — 서버 코드 0줄!
await addDoc(collection(db, "posts"), {
title: "첫 글",
createdAt: new Date()
});
09 / 14
🔐
Authentication —
로그인을 몇 줄로
이메일·비밀번호부터 SNS 로그인까지, 인증 시스템을 직접 만들 필요가 없다.
10 / 14
🗄️
Storage —
파일 업로드 흐름
이미지나 동영상을 클라우드에 업로드하고 URL로 받아오는 과정.
📷 사용자
파일 선택
→
🚀 SDK
uploadBytes()
→
☁️ Firebase
Storage
→
🔗 다운로드
URL 발급
발급받은 URL을 Firestore 문서에 저장하면 끝 —
이미지·동영상이 들어가는 앱이 서버 없이 완성된다.
11 / 14
🏢
Firebase는 풀옵션 사무실이다
건물을 직접 짓지 말고, 이미 갖춰진 사무실에 입주해서 일만 하자.
🏢 풀옵션 사무실 비유
사무실 임대
=
Firebase 프로젝트 생성
책상·캐비넷
=
Firestore — 데이터 저장 공간
출입증 발급기
=
Authentication — 사용자 신원 확인
창고·자료실
=
Storage — 파일·이미지 보관소
건물 짓기
=
서버를 직접 구축 — 본업 아닌 일에 시간 낭비
12 / 14
🤖
이걸 알면
AI에게 이렇게 물어요
BaaS 개념을 알면 Firebase 관련 질문의 정확도가 확 올라간다.
🤖
목적과 환경을 알려주시면 더 좋은 답을 드릴 수 있습니다.
👤
React 앱에 Firebase Authentication으로 Google 로그인을 붙이고, 사용자 정보를 Firestore의 users 컬렉션에 저장하는 코드 보여줘.
🤖
네! signInWithPopup으로 구글 로그인을 호출하고, 성공 콜백에서 setDoc으로 users/{uid} 문서를 만들면 됩니다. 전체 코드를 보여드리겠습니다...
13 / 14
📌
핵심 정리
☁️
BaaS
백엔드를 직접 구축
대신 빌려 쓰는 방식
🔥
Firebase
Google이 제공하는
대표적인 BaaS
📂
Firestore
문서·컬렉션 구조의
NoSQL 실시간 DB
🔐
Authentication
이메일·SNS 로그인을
몇 줄로 연동
🗄️
Storage
이미지·파일을 위한
클라우드 저장소
⚡
SDK
firebase-js-sdk로
프론트에서 바로 호출
14 / 14
🚀
다음 세션
Session 31 · 인증과 보안 기초
BaaS를 쓰더라도 보안은 직접 신경 써야 한다.
인증과 인가의 차이, JWT의 동작 원리, XSS·CSRF·SQL 인젝션 — 실전 보안의 기초를 배운다.
💡 기억할 것: Firebase = 풀옵션 사무실. 입주만 하면 책상·캐비넷·출입증이 다 있다.