구글 로그인과 데이터베이스 사용 개발

1. firebase홈페이지접속 (2026.5.18 현재 UI기준)
2. 프로젝트를 생성한다. (나머지 default 설정으로 일단 진행)
3. "설정->일반"에서:
   1. "프로젝트 ID"와 "프로젝트 번호"(messagingSenderId)를 확인한다.
   2. 하단, "내 앱"에서 웹 아이콘(</>)을 선택해서 apikey를 생성한다.
      1. 앱 등록: 앱 이름을 입력
      2. Firebase SDK추가: npm, <script>테그 사용 중 선택(테그로 선택)
      3. 제공하는 테그를 내 javascript파일에 붙인다.
4. 로그인 기능 요청
   1. "보안 > Authentication" (AI가 잘못된 내용으로 가이드)
   2. "시작하기"
   3. "Google"선택 ('로그인 선택' 탭)
   4. "사용 설정"토글 -> 사용
      1. 웹 화면이 전체화면 아닐경우 클릭이 안되는 경우가 있음
   5. "이메일" 선택
   6. "저장"
5. 추가 도메인 승인 요청
   1. "보안 > Authentication"
   2. "설정"tab에서 > '도메인' > '승인된 도메인'
   3. "127.0.0.1"추가 (테스트용, 포트번호 필요없음)
   4. (예시) "iseohyun.com" (웹 게시용 사이트 추가)
6. 데이터 베이스 생성
   1. "데이터베이스 및 스토리지" > "Firestore"
      1. 1단계: Standard 버전(무료버전) 선택
      2. 2단계:
         1. 데이터베이스ID: (default) (수정불가)
         2. 위치: asia-northeast3 (Seoul)
      3. 3단계: "테스트모드에서 시작"
         1. 기본 보안 규칙, 누구나 향후 30일동안 모든DB수정 가능
   2. 규칙 정하기
      1. "Firestore" > "규칙"탭 (드레그 되지 않음. 커서로 선택하면 edit cursor가 깜빡이는데, backspace로 삭제하고 복붙하면 해결됨)

> rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // 각 사용자의 개인 학습 데이터(통계, 로그) 컬렉션 규칙
    match /users/{userId} {
      // 1. 자기 자신의 데이터만 읽고 쓸 수 있도록 허용 (인증된 사용자 필수)
      allow read, update, delete: if request.auth != null && request.auth.uid == userId;	      
      // 2. 회원가입 시 생성을 위한 규칙
      allow create: if request.auth != null;
    }

    // (선택) 만약 전체 랭킹 시스템이나 공용 데이터를 만들 경우를 대비한 규칙
    match /leaderboard/{docId} {
      allow read: if true; // 누구나 읽을 수 있음
      allow write: if request.auth != null; // 로그인한 사람만 기록 가능
    }
  }
}

문제점 해결

• Failed to load resource: the server responded with a status of 404 ()
  • 서버를 정확히 명시하지 않았음, 예를들어:
    • https://www.gstatic.com/firebasejs/10.x.x/firebase-app.js라는 테스트 코드를 그대로 가져왔을경우 발생, '10.11.0'등으로 서버를 명확히 해주어야 함. 실제 있는 버전이어야 하고, 신기능을 써보고 싶을 때, 업데이트 해줘야 함.
• Uncaught SyntaxError: The requested module './data.js' does not provide an export named 'CHARACTER_SETS' (at engine.js:1:10)
  • js간의 통신을 하려고 할 때, 공유되는 자원은 export로 지정해주어야 함
• https://identitytoolkit.googleapis.com/v1/projects?key=AIzaSyBrKY4jgkwE_1Di3wyaLkcc--n6iXnY_xU 400 (Bad Request)
  • Firebase에 로그인 기능이 아직 요청되지 않았다.
• auth-handler.js:25 Login Error: auth/unauthorized-domain
  • 콘솔에서 허가된 도메인을 설정하지 않았을 때