플러스프로젝트 배경
1) 문제점 Firebase 관련 프로젝트 지원 시 "Firebase 실무 경험이 있나요?"라는 질문에 코드로 답할 수 있는 실동작 포트폴리오가 없었습니다. Firebase Auth, Firestore CRUD, Security Rules는 각각 문서로 학습할 수 있지만, 세 가지를 하나의 앱에서 유기적으로 연결한 데모가 없으면 실무 경험을 설득하기 어렵습니다. 특히 Firestore 서브컬렉션 구
프로젝트 성과
전체 인증·CRUD 흐름 완성
로그인 → 팀 생성 → 선수 관리 → 실시간 반영까지 Firebase 핵심 3요소(Auth·Firestore·Security Rules)가 단일 앱에서 end-to-end로 작동하는 실동작 데모 완성.
15개 소스 파일 · 5개 화면 구현
인증, 팀 목록, 팀 생성, 팀 상세(선수 CRUD), 에러 처리까지
실무 수준의 컴포넌트·훅 분리 구조로 완성.
실무 수준의 컴포넌트·훅 분리 구조로 완성.
Security Rules 권한 분리 검증 완료
coachId 기반 팀 수정·삭제 권한, 서브컬렉션 선수 쓰기 시
부모 문서 get() 참조 방식으로 데이터 정합성을 유지하면서
권한 분리 검증.
부모 문서 get() 참조 방식으로 데이터 정합성을 유지하면서
권한 분리 검증.
실시간 동기화 구조 확립
onSnapshot 구독 + useEffect cleanup 패턴으로 새로고침 없이
팀·선수 변경이 즉시 UI에 반영되며 메모리 누수 없는
구독 관리 구조 구현.
팀·선수 변경이 즉시 UI에 반영되며 메모리 누수 없는
구독 관리 구조 구현.
핵심 기능
이메일 인증 + 보호 라우팅
Firebase Auth 이메일 로그인·회원가입과 AuthGuard 컴포넌트로
미인증 사용자의 접근을 자동 차단하고 안전한 페이지 전환 구현.
미인증 사용자의 접근을 자동 차단하고 안전한 페이지 전환 구현.
진행 단계
기획 및 설계
2026.03.
도메인 선택(축구팀·선수 관계), Firestore 데이터 모델 설계(teams 컬렉션 → players 서브컬렉션), coachId 기반 권한 모델 및 Security Rules 구조 사전 정의.
프로젝트 상세
【 1) 포트폴리오 소개 】 Firebase 핵심 3요소(인증·데이터베이스·보안 규칙)를 하나의 앱에서 유기적으로 연결한 풀스택 웹 데모입니다. 축구팀·선수 관리 도메인으로 Firestore 계층 데이터 모델, onSnapshot 실시간 동기화, coachId 기반 Security Rules 권한 분리를 구현했습니다. Next.js 14 App Router + Firebase 10 + TypeScri
