Firebase로 React 프로젝트 구축하기

들어가면서...

이전에 만들었던 프로젝트 Portfolly를 Firebase 서버를 기반으로 새롭게 다시 만들고, 그 과정을 천천히 기록하려 합니다.

 

 

프로젝트 폴더 생성 & Firebase 연동하기

이번에도 Vite + React + Typescript 환경을 기반으로 프로젝트를 만들려고 합니다.

 

터미널에 아래 코드를 입력해 프로젝트 폴더를 생성합니다.

npm create vite@latest portfolly --template react-ts

 

 

Firebase CLI를 설치해 로컬 컴퓨터에서 파이어베이스 프로젝트를 관리할 수 있게 만듭니다.

npm install -g firebase-tools

 

 

터미널에서 다음 명령어로 Firebase에 로그인합니다.

firebase login

 

 

아래 명령어로 Firebase 프로젝트를 초기화합니다.

firebase init

 

 

Firebase의 어떤 기능을 사용할 건지 묻는 체크란이 나타납니다. 이렇게 체크 했습니다.

 

 

이제 리액트 프로젝트 root 경로에 firebase-config.js 파일을 만들고, Firebase 홈페이지에서 생성한 프로젝트 SDK 코드를 붙여넣기 해줍니다. 저는 그 안에 들어있는 Config 값들을 .env 환경변수로 관리했습니다.

 

import firebase from "firebase/compat/app";
import "firebase/compat/firestore";

const firebaseConfig = {
    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
    projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
    storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
    appId: import.meta.env.VITE_FIREBASE_APP_ID,
    measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
};

// firebaseConfig 정보로 firebase 시작
firebase.initializeApp(firebaseConfig);

// firebase의 firestore 인스턴스를 변수에 저장
const firestore = firebase.firestore();

// 필요한 곳에서 사용할 수 있도록 내보내기
export { firestore };

 

 

Vite와 CRA는 각각 환경변수 사용 방법이 다르기 때문에, 아래 블로그를 참고해서 환경변수 파일을 만들면 됩니다.

 

[React] 리액트에서 .env 환경변수 사용하기!

 

이제 다른 파일에서 Firebase를 import하여 사용할 수 있습니다.

 

 

그리고 App.tsx 파일에서 firestore를 console.log로 찍어보면 아래와 같이 projectId가 잘 출력됩니다.

import { useEffect } from "react";
import { firestore } from "./firebase-config";

function App() {

  useEffect(() => {
    console.log(firestore);
  });

  return (
    <>
    </>
  )
}

export default App;

 

콘솔 출력 결과

 

 

 

프로젝트 초기 환경 설치

아래 환경에서 Tailwind와 Storybook만 제외하고 사용합니다.

[Portfolly] Vite+TS+StyledComponents+Twin+Storybook 환경 설치 과정

 

 

 

 

참고 사이트

ReactJS | Firebase로 React 프로젝트 DB 연동 및 배포