[React] Firebase 연동 + CRUD (1)

작년에 진행했던 사이드 프로젝트의 API가 동작하지 않아 일부 기능을 Firebase로 변경하는 작업을 진행했다.

React에서 Firebase 연동하는 방법에 대해 기록하고자 한다.

 

1. Firebase 프로젝트 생성

- 생성하러 가기 👉 https://console.firebase.google.com/

 

2. 웹 앱에 Firebase 추가

- 생성한 firebase 프로젝트에서 웹 앱을 추가

 

3. Firebase SDK 추가

- 앱 등록 후 생성된 SDK 정보를 다른 곳에 저장

- 여기 👉 프로젝트 설정 > 일반 > 내 앱 > SDK 설정 및 구성 에서 확인 가능

 

4. React 프로젝트에서 Firebase 설치

$ npm install firebase // npm 사용시
$ yarn add firebase // yarn 사용시

 

5. .env 파일 생성 후 환경변수 지정

- 보안 이슈로 dotenv로 관리하도록 하자

- 최상위 위치에 .env 파일 생성

- .gitignore 파일에 .env 반드시 추가

// firebase database config - SDK
NEXT_PUBLIC_API_KEY=...
NEXT_PUBLIC_AUTH_DOMAIN=...
NEXT_PUBLIC_PROJECT_ID=...
NEXT_PUBLIC_STORAGE_BUCKET=...
NEXT_PUBLIC_MESSAGING_SENDER_ID=...
NEXT_PUBLIC_APP_ID=...
NEXT_PUBLIC_MEASUREMENT_ID=...

- 예를 들어, apiKey='ABC...GHIJ' 라면 NEXT_PUBLIC_API_KEY=ABC...GHIJ 처럼 작성하면 된다.

💡 여기서 잠깐! Next.js 프로젝트라면 NEXT_PUBLIC 으로 React 프로젝트라면 REACT_APP 으로 시작하는 것도 잊지 말 것!!

 

6. Firebase, Firestore와 연결

- firebase > firebaseClient.ts 파일 생성

// 참고 https://firebase.google.com/docs/web/setup?hl=ko#available-libraries
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
};

// Initialize Firebase
const firebase = initializeApp(firebaseConfig);
const fireStore = getFirestore(firebase);
const auth = getAuth(firebase);

export { fireStore, auth };

- 다른 파일에서 사용 시 아래와 같이 import 하면 된다.

import { fireStore } from '../../firebase/firebaseClient';

- 상대 경로로 사용한 이유는 위에서 설치한 firebase 라이브러리 경로와 겹치기 때문!!

- 폴더 이름을 변경하거나 최상위로 파일 위치를 변경해도 된다. 그러면 경로가 달라지겠죠? (cc. 자동완성)

---

기본적인 세팅은 여기까지!

CRUD 사용법 보러가기 👉 https://yihoeyiho.tistory.com/91

[React] Firebase 연동 + CRUD (2)