학습 목표
- 실전 2. 로그인과 데이터베이스 웹서비스의 역할과 적용 조건을 설명할 수 있다.
- React 개발 환경을 준비하고 별도 Firebase 프로젝트·에뮬레이터를 연결하세요.
- 선택한 호스팅에 검증된 버전을 배포하고 DB 정책·콜백·복구를 점검하세요.
사전 지식
앞선 실전 1. 개인 포트폴리오 웹사이트를 먼저 읽으면 용어를 이해하기 쉽습니다. 이미 아는 내용이면 이 장부터 시작해도 됩니다.
개념 이해
React와 Firebase를 예시로 로그인한 사람이 자신의 게시글과 프로필을 관리하는 작은 서비스를 만듭니다. 화면과 Rules를 함께 작성해 데이터가 사용자별로 분리되는지 확인합니다.
구현 범위
이메일 가입·Google 로그인·로그아웃·프로필·글 작성·수정·삭제·이미지 업로드·목록을 포함합니다. 메일 인증과 동의 요구도 서비스 정책으로 정합니다.
데이터와 권한
posts/ID의 ownerId는 로그인 UID이고 변경하지 못하게 합니다. 프로필과 파일은 UID로 분리하고 관리자 SDK는 서버에서만 사용합니다.
업로드와 배포
형식·크기·경로·저장 실패를 처리합니다. 연습 환경에서 비로그인·타인 접근을 막은 후 운영 도메인과 인증 설정을 연결합니다.
실제 사용 사례
서비스 작성자는 자신의 글을 수정할 수 있지만 다른 사람의 글은 읽기만 가능합니다. UI 버튼을 숨기는 것과 별개로 DB 정책이 수정 요청을 거절해야 합니다.
단계별 실습
실습은 운영 서비스가 아닌 별도 연습 프로젝트에서 진행하세요. 기존 파일이 있다면 변경 전 기록을 남깁니다.
- React 개발 환경을 준비하고 별도 Firebase 프로젝트·에뮬레이터를 연결하세요.
- 이메일 가입→Google 로그인→로그아웃→프로필 저장을 차례로 구현하세요.
- 글 스키마와 Rules를 먼저 적고 목록·작성·수정·삭제를 연결하세요.
- 업로드 크기·타입·소유자 경로·실패 메시지를 구현하세요.
- 두 연습 계정으로 타인 수정·삭제를 거절하고 모바일·메일·로그아웃을 확인하세요.
- 선택한 호스팅에 검증된 버전을 배포하고 DB 정책·콜백·복구를 점검하세요.
코드와 프롬프트
아래 코드는 별도 연습 Firestore의 posts 컬렉션에만 적용하는 정책 예시이며 다른 컬렉션과 필드 검증은 추가해야 하는 환경의 예시입니다. 실제 프로젝트의 버전과 기존 구성을 확인한 뒤 필요한 부분만 적용하세요.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /posts/{id} {
allow read: if true;
allow create: if request.auth != null
&& request.resource.data.keys().hasOnly(['ownerId','title','body'])
&& request.resource.data.ownerId == request.auth.uid
&& request.resource.data.title is string
&& request.resource.data.title.size() > 0
&& request.resource.data.title.size() <= 100
&& request.resource.data.body is string
&& request.resource.data.body.size() <= 10000;
allow update: if request.auth != null
&& resource.data.ownerId == request.auth.uid
&& request.resource.data.diff(resource.data).affectedKeys().hasOnly(['title','body'])
&& request.resource.data.title is string
&& request.resource.data.title.size() > 0
&& request.resource.data.title.size() <= 100
&& request.resource.data.body is string
&& request.resource.data.body.size() <= 10000;
allow delete: if request.auth != null && resource.data.ownerId == request.auth.uid;
}
}
}아래 요청에서 대괄호 부분을 내 프로젝트에 맞게 바꾼 뒤 AI 도구에 전달하세요.
React와 Firebase 연습 프로젝트로 회원 웹앱을 단계별 구현해줘. 이메일 가입, Google 로그인, 로그아웃, 프로필, 글 CRUD, 이미지 업로드를 포함하고 UID 소유권 Rules와 비로그인·타인·실패 검증을 먼저 설계해줘. 배포 전 환경과 개인정보 정책을 확인해줘.자주 발생하는 문제와 해결
| 문제와 원인 | 해결 방법과 확인 기준 |
|---|---|
| 글 작성자가 자기 ID를 다른 사용자로 바꿈 | 생성·수정 정책에서 ownerId를 고정합니다. |
| 로그인 후 모든 글을 수정할 수 있음 | 요청 사용자 UID와 저장 소유권을 비교합니다. |
핵심 요약
- 인증·UI·저장 정책을 함께 연결합니다.
- 본인 CRUD 성공과 타인 CRUD 거절이 핵심 완료 조건입니다.
완료 확인
참고자료
확인 기준일: 2026-10-20. 요금·사용 한도·제품 기능·설정 경로는 변경될 수 있으므로 작업 직전 공식 문서와 설치 버전을 확인하세요.