SMS APP #3

이번에는 파이어베이스에서 데이터 생성을 진행하였다.

아래와 같은 에러가 계속 발생하였는데, 해결하고보니 당연한걸 생각하지 못해서 발생한 오류였다.

Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).
FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).

먼저 initializeApp()을 호출하라고 오류 메세지에서 안내해주고 있었는데,

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
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_MESSAGEINGSENDERID,
  appId: process.env.REACT_APP_APPID,
};

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);
const db = getFirestore(app);

export { auth, db };

위와 같이 파이어베이스 설정을 해주고 다른 파일에서 import하여 사용하고 있었으므로 왜 오류가 뜨는지 이해를 할 수 없었다. 이런저런 검색을 하다가 "자바스크립트는 위에서부터 아래로 순서대로 읽어 내려갈텐데 그럼 App을 호출하기 전에 불러줘야 되지 않을까?" 싶어서 import 위치만 App위로 변경해주었더니 해결이 되었다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './firebase/firebase'; // initialize Firebase before render App component
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

import 구문을 작성할 때도 이런 순서에 대해서 생각하며 작성해야겠다고 새삼 다시 깨닫게 되었다.