[React] Firebase 연결시 API key 오류

 React에서 Firebase를 사용한 로그인 기능을 구현하기 위하여 API 키값이 들어있는 firebaseConfig를 입력하고 .env를 생성하여 환경변수를 만들어 줌으로써 key 값을 보호하여 불러오는 형식으로 진행하려고 했다. 하지만 키값을 정확하게 입력을 했음에도 불구하고 아래와 같이 오류가 발생하였다.

 

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
};

 

 

 

 키값을 불러오지 못하는 듯하여 재차 값을 정확하게 입력해 보았지만 소용이 없었다. 그래서 이유를 찾기 위해 구글링 한결과 같은 현상을 겪는 사람들의 글을 볼 수 있었고 보통은 다음과 같은 3가지 이유가 있었다.

1. env 파일이 루트 최상위 루트에 존재 하지 않는다.
2. API 키를 잘못 작성 했을 경우
3. firebaseConfig export 하고 다른 js 파일에서 import 시 오류

하지만, 나는 위의 경우에는 해당하지 않았다. 그러던 중 process.env는 실행시 로드되기 때문에 .env의 설정을 바꾸게 되면 React 프로젝트를 다시 구동해야 된다는 글을 보게 되었고 사용중인 리엑트 컴파일러를 껐다가 다시 실행해 주니 문제가 해결되었다.

어이가 없었지만 다른 경우의 오류 이유들도 확인할 수 있었고 새로운 사실도 알아서 도움이 되었다.