Worksheet · Week 10 · Firestore 데이터 모델 + 보안 규칙

LUNA CODE LAB · CLASS II · WORKSHEET

Firestore 데이터 모델 + 보안 규칙

WEEK 10 / 12 · 120분

이름

날짜

01 컬렉션 설계 — 이름 · 필드 · 타입 · 예시 ⏱ 10분

Firestore = "컬렉션 > 문서 > 필드". 컬렉션은 폴더, 문서는 파일, 필드는 그 안의 데이터.

필드명	타입	예시 값 / 설명
name	string	예) "장준영"
message	string	예) "사진 잘 봤어요!"
createdAt	timestamp	자동 — serverTimestamp()

💡 타입 종류: string · number · boolean · timestamp · array · map(객체) · reference

02 방명록 데이터 구조 — guestbook 컬렉션 ⏱ 8분

실제로 저장될 JSON 형태. 빈칸 채워서 한 줄 메시지 만들기.

guestbook / {auto-id}

{
  "name": "",
  "message": "",
  "createdAt": serverTimestamp(),
  "emoji": "", // ❤️ 🔥 ✨
  "ip": // 보안상 클라이언트는 못 채움. 서버가 채워야 함.
}

⚠️ 안 넣어야 할 것: 비밀번호 · 이메일 풀텍스트 · 전화번호 · 주소 · IP (브라우저가 직접). 클라이언트는 누구나 볼 수 있음!

LUNA CODE LAB · CLASS II · WORKSHEET

Firestore 데이터 모델 + 보안 규칙

WEEK 10 / 12 · 120분

03 Firestore 보안 규칙 — allow read/create/update/delete ⏱ 12분

기본은 전부 차단. allow로 하나씩 허용. test 모드 절대 두지 말 것!

방명록 규칙 (예시 + 빈칸 채우기)

rules_version = '2';
service cloud.firestore {
  match /databases/{db}/documents {

    // 방명록 — 누구나 읽기, 누구나 쓰기 OK, 수정/삭제는 금지
    match /guestbook/{id} {
      allow read: if ;
      allow create: if
        request.resource.data.message.size() < &&
        request.resource.data.name.size() < ;
      allow update, delete: if ; // false 추천
    }

  }
}

❌ 절대 금지: allow read, write: if true; — 누구나 다 지우고 쓸 수 있음. 며칠 안에 욕설/광고로 도배됨.

04 onSnapshot — 실시간 리스너 코드 ⏱ 8분

새 글 들어오면 새로고침 없이 바로 화면에 뜨는 마법. 빈칸 채우기.

실시간 구독 (최신순 50개)

import { collection, query, orderBy, limit, onSnapshot } from 'firebase/firestore';

const q = query(
  collection(db, ''),
  orderBy('createdAt', ''), // 'desc' = 최신순
  limit() // 한 번에 몇 개?
);

onSnapshot(q, (snap) => {
  const list = snap.docs.map(d => d.data());
  // list 를 화면에 그리기
  render();
});

05 XSS 방어 + 입력 길이 제한 CHECK

🛡 화면에 그릴 때 innerHTML 금지, textContent 사용 (HTML 태그를 글자로 처리)

🛡 입력 길이 제한 — 클라이언트(maxlength) + 보안 규칙(size() < 500) 양쪽 모두

🛡 이름 50자 · 메시지 500자 이내로 제한

🛡 제출 후 폼 비우기 — 같은 글 중복 등록 방지

🛡 rate limit — 한 사람이 10초 안에 여러 번 못 쓰게 (localStorage 타임스탬프)

🛡 욕설 필터 (선택) — 키워드 배열로 간단 차단

🚨 관리자 삭제 — Firebase Console에서 수동 삭제 가능 (보안 규칙은 false라도 owner는 가능)

📊 일일 사용량 점검 — Firestore 무료 한도 (read 50,000/day · write 20,000/day)

✨ 친구에게 URL 보내서 진짜 글 한 줄 받아보기 — 라이브 검증

LUNA CODE LAB · CLASS II · GLOSSARY

이번 주 용어 사전

WEEK 10 / 12 · 용어집

이번 주에 나오는 용어들. 처음 듣는 게 정상입니다. 막힐 때 사전처럼 펴서 보세요.

파이어스토어Firestore

Firebase의 NoSQL 데이터베이스. 실시간 동기화·서버리스. 예: 폼에 글 쓰면 1초 안에 모두에게 표시.

데이터베이스Database · DB

데이터를 모아 두는 저장소. 글·사진·사용자 정보를 보관. 예: 학교 도서관의 전자 카탈로그.

노에스큐엘NoSQL

표 형식이 아닌 자유 구조 DB. JSON처럼 항목마다 다른 필드 가능. 예: 엑셀 시트 vs 노션 페이지의 차이.

컬렉션Collection

같은 종류 문서들을 모아 둔 상자. "users" 컬렉션엔 사용자 정보들이 모임. 예: 학교의 1학년 반 명단.

문서Document

컬렉션 안의 데이터 한 개. 각 사용자 하나하나가 문서. 예: 명단 안 학생 한 명의 카드.

필드Field

문서 안의 항목. name·email·age 같은 각각의 속성. 예: 학생 카드의 이름·번호·연락처 칸.

스냅샷onSnapshot

Firestore 실시간 리스너. 데이터 변경되면 자동으로 알림. 예: 카톡 메시지가 새로고침 없이 뜨는 원리.

보안 규칙Security Rules

DB 접근 권한 설정. 누가 읽고·쓰고·삭제할 수 있는지. 예: 본인 글만 수정 가능, 남의 글은 읽기만.

읽기·쓰기 허용allow read · write

보안 규칙 키워드. read=조회, write=생성·수정·삭제. 예: allow read: if true → 누구나 조회 가능.

엑세스XSS

Cross-Site Scripting. 사용자 입력으로 악성 코드를 박는 공격. 예: 댓글에 <script> 박아 비번 훔치기.

새니타이즈sanitize

입력값을 안전하게 정리해 XSS 방어. 태그를 글자로 변환. 예: <를 <로 바꿔 코드 실행 차단.

타임스탬프timestamp

시간을 표시하는 데이터 타입. serverTimestamp()는 서버 시간 자동 입력. 예: 글 쓴 시각이 "방금 전"으로 표시.

📄 Worksheet · Week 10 · Firestore 데이터 모델 + 보안 규칙