[FireBase] 파이어 베이스 n.indexOf is not a function문제

나범수·2024년 6월 18일

오류/트러블슈팅

목록 보기

3/5

1. 발생 상황

본격적으로 프로젝트를 진행하기 전 firebase를 한번 해보자는 마음가짐으로 firebase 사용법에 대해서 공부하던 중 아래와 같은 문제가 발생했습니다.
firebase 사용법에 대해 사용한 곳 : https://kmuhan-study.tistory.com/1

제가 사용한 react 파일은 예전에 라우팅 공부차 사용했던 파일로 사실상 메인화면에 app.js로 사용하셔도 무방합니다.

Home.jsx (라우팅 부분 제외하고 app.jsx로 하셔도 무방합니다.)
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router'
import {db} from '../firebase'
import { doc, getDoc } from 'firebase/firestore';



function Home() {
    const navigate = useNavigate();
    const [test,setTest] = useState()
    async function getTest(){
      const docRef = doc(db, "item", "1")
      const docSnap = await getDoc(docRef)

      if (docSnap.exists()) {
        setTest(docSnap.data())
      }
    }
    useEffect(() => {
      getTest()
    }, [])

  return (
    <div>
        Home
        <br/>
        <button onClick={() => {
            navigate("/contact")
        }}>works로 이동 </button>

        {test !== undefined && 
        <div>{test.name}</div>}
    </div>
  )
}

export default Home

그리고 firebase는 이렇게 설정했습니다 apikey등은 .env 파일로 정리했습니다.

firebase.js
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: process.env.REACT_APP_apiKey,
    authDomain: process.env.REACT_APP_authDomain,
    projectId: process.env.REACT_APP_projectId,
    storageBucket: process.env.REACT_APP_storageBucket,
    messagingSenderId: process.env.REACT_APP_messagingSenderId,
    appId: process.env.REACT_APP_appId,
    measurementId: process.env.REACT_APP_measurementId
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app)

export {db}

그리고 현재 파이어스토어 db는 이렇게만 있습니다.

이제 원래 구현되는 상태는 이렇습니다.

[덩그러니 놓여있는 화면. 원래는 아래 test age까지 붙어져 있어야 성공입니다.]

그러나 진행을 하면서 예상치 못한 문제에 도달했습니다.

2. 발생 오류

?? n.indexOf라니 구글링을 해보았지만 다른 경우는 타입스크립트로 사용한 경우이기 때문에 저의 경우와는 다르게 느껴졌습니다.

그래서 파이어베이스에 대한 오류를 찾고 있던 중 현재 연습중인 블로그에서 firebase의 오류에 대한 글이 있는 것을 확인하고 바로 확인해본 결과 제가 고쳐야할 몇가지 부분이 있었습니다.

[FirebaseError] : https://kmuhan-study.tistory.com/3

1. .env 파일의 형식 확인

2. 웹 애플리케이션 서버의 재시작

3. firebase 규칙 재설정

3개의 경우가 눈에 들어왔고 전부 우선 1번 2번의 경우만 변경한 상태에서 진행해보았습니다.

그 결과는..... 똑같은 오류가 발생하고 있었습니다!

그래서 이렇게 된거 차라리 .env의 있는 코드를 통째로 가져와서 정상적으로 실행이 되나 테스트해보았고

그 결과 ....

기존과는 다른 오류가 발생했다는 것을 알 수 있었습니다.
여기서 얻어낸 사실은
1. 현재 firebase의 코드는 옳게 작동하고 있다.
2. 단 다른 구간에서 오류가 발생해 결과적으로 파이어베이스가 값자체를 못받아오는 상태
라고 생각했고 해당 오류에 대해 열심히 돌아다녔습니다. 그렇게 해보니 결국 결과는 이미 나온 상태였습니다

"3. firebase 규칙 재설정"

네. 맞습니다. 알고보니 firebase는 외부 이용자들이 해당 코드로 접속할 것인지에 대한 보안을 설정할 수 있었고 보안 설정을 하지 않은 것이었습니다...

파이어베이스의 규칙 재설정 방법은 간단합니다.

우선 파이어베이스 사이트로 들어간 뒤 사용하고 있는 본인의 프로젝트에 들어갑니다.
저는 이것이 첫 연습이므로 하나밖에 없는 저 프로젝트에 들어갔습니다.

그 후 'firestore database'에 들어가 주세요

그 후 표시되어있는 '규칙'으로 가시면

이런 화면이 나와있습니다.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

이렇게 정리되어 있는 화면에서 false를 true로 바꿔주면 됩니다.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

이렇게 바꾸고 기존에 실행 되어 있는 npm 서버를 종료시키고 다시 시작하면

정상적으로 구동이 되신것을 확인할 수 있습니다.

+ 그럼 기존의 코드 뜨던 문제는 무엇인가?

이 문제는 사실은 저의 코드 실수 였는데요
.env의 경우 사용하실 콤마, 쌍따옴표를 사용해서는 안되며 반드시 아래와 같은 형식으로 작성해야합니다.

  REACT_APP_apiKey=apikey
  REACT_APP_authDomain=authDomain
  REACT_APP_projectId=projectId
  REACT_APP_storageBucket=storageBucket
  REACT_APP_messagingSenderId=messagingSenderId
  REACT_APP_appId=appId
  REACT_APP_measurementId=measurementId

여기에 저같은 경우는 콤마를 붙였기 때문에 발생한 오류였습니다. 이부분 해결하니 정상적으로 출력!