정중식의 개발공부로그

Firebase SDK 앱 추가

16 Sep 2023 | firebase

자세한 설명 X 짧고 간단한 설명 O

Firebase 프로젝트 생성

파이어베이스 홈페이지에서 프로젝트 생성

Firebase SDK 앱 추가

SDK는 파이어베이스 공홈에서 프로젝트를 생성하면 SDK 코드가 나온다.


src/firebaseApp.ts 파일생성

import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENTID,
};

// Initialize Firebase
const firebase = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebase);

export default firebase;

tsconfig.json 파일도 만져준다. (만약 경로 설정이 필요없으면 안만져도됨)
경로설정을 해주면 ‘../firebaseApp.ts’ 이렇게 안불러와도된다.
‘/firebaseApp.ts’ 바로 이렇게 불러오면 됨

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "path": {
    "pages/*": ["pages/*"],
    "components/*": ["components/*"],
    "firebaseApp/*": ["firebaseApp/*"] // 추가
  }
}

여기까지 했으면, 잘 설정이 되었나 체크해보자.
브라우저에서 f12를 눌러서 잘 뜨면 설정이 잘된거다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';

import firebase from 'firebaseApp'; // 추가
console.log(firebase); // 추가

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

Related Posts