[210919] React와 Firebase를 연동해보자

firebase가 무엇인지 모른다면 지난 포스팅에 firebase에 대해 간단하게 설명한 포스팅을 참고하자.

https://kth990303.tistory.com/142

[React] Backend 역할을 해주는 Firebase에 대해 알아보자

이번 시간엔 react의 create-react-app을 이용하여 firebase와 연동해보는 포스팅을 작성해보겠다.

개인적으로 환경세팅으로 고통받는 것을 매우매우 극혐하기 때문에,

다음에 따로 고통받지 않기 위해, 그리고 다른 사람들이 연동하는 데에 고통받지 않게 하기 위해 포스팅을 작성해보겠다.

 

Settings

VSCode

Firebase: V9

npm: 7.20.1

node: v14.15.4

---

1. create-react-app을 이용한 리액트 환경설정

CMD 창을 열고, 프로젝트를 생성할 폴더로 이동한 후에 npx create-react-app {프로젝트명} 을 입력해주자.

그럼 자동으로 리액트 환경이 설치가 되며, 설치시간은 최대 3~5분 정도 소요될 것이다.

 

설치가 완료되면 Happy Hacking! 이 뜰텐데,

그럼 code {프로젝트명} 을 입력해주자. 그럼 자동으로 VSCode에서 프로젝트를 띄워줄 것이다.

맨처음 디렉토리 구조

적당히 필요없는 디렉토리 구조는 지워주자.

나는 아래 디렉토리 구조대로 진행할 예정이다.

 

사실 reportWebVitals.js도 지워도 될 것 같은데, 리액트의 성능을 측정해줄 때 필요하다고 하니, 걍 남겨둘려고 한다. 나도 정확힌 모르겠다... (출처: https://chaelin1211.github.io/study/2021/03/12/React-start.html )

 

2. Firebase 프로젝트 생성

구글 로그인을 진행하고, firebase 시작을 해주자.

https://console.firebase.google.com 

로그인 - Google 계정

여기서 프로젝트 추가를 눌러서 만들어주자.

 

1단계: 프로젝트명을 입력하면 되나, 리액트앱과 이름이 같을 필요는 없다.

2단계: 구글 애널리틱스를 사용할 것인가? 나는 그냥 사용하는 것으로 진행했다. 만약 구글 애널리틱스 계정이 없다면 사용하지 않는 것이 더 편할 것이다.

 

그럼 이제 위 화면이 뜰 것인데, 

나는 웹개발자이기 때문에, 그리고 웹을 만들 것이기 때문에 </> 모양의 버튼을 클릭해주었다.

 

1단계: Register App의 이름을 써주고, 호스팅 여부를 선택한다. 흠... 나는 일단 선택을 해주었는데, 선택을 안해도 나중에 바꿀 수 있는 모양이다.

2단계: ADD Firebase SDK : 드디어 Firebase API Key가 나왔다. 쉽게 말해서 firebase 정식 사용 유저임을 인증해주는 인증키라 보면 된다. 윈도우10도 정품인증을 해야 제대로 사용할 수 있지 않은가. 그거랑 마찬가지인 셈이다.

 

참고로 이 API key 정보들은 아래 화면에서 언제든지 다시 볼 수 있다.

여기서 맨 밑쪽으로 스크롤 내리면 된다.

 

이제 npm을 이용해 firebase를 설치해주자!

ctrl + ` 를 눌러 터미널을 열어주고 npm i --save firebase를 입력해주자! --save랑 firebase 순서가 바껴도 상관없다는 것은 모두 잘 알고 있을 것이다.

참고로 client, backend 함께 진행하는 프로젝트라면, client 쪽 폴더에 입력해주어야 한다.

이제 src에 firebase.js를 추가해주자.

firebase.js

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
    // 인증키
};

export default firebase.initializeApp(firebaseConfig);

firebase V9 환경에서는 위와 같이 firebase/compat/app 에서 import해주어야 에러가 나지 않는다!

참고로 인증키를 따로 .env 파일에 보관하여 gitignore를 이용해 적절하게 보안처리해주는 것을 추천한다.

 

그 작업은 아래와 같이 하면 된다.

먼저, 프로젝트 루트 폴더에 .env 파일을 생성해주자.

.env

REACT_APP_FIREBASE_APIKEY="//인증키",
REACT_APP_FIREBASE_AUTH_DOMAIN="//",
REACT_APP_FIREBASE_DATA_BASEURL="//",
REACT_APP_FIREBASE_PROJECTID="//",
REACT_APP_FIREBASE_STORAGEBUCKET="//",
REACT_APP_FIREBASE_MESSAGINGSENDERID="//",
REACT_APP_FIREBASE_APPID="//",
REACT_APP_FIREBASE_MEASUREMENTID="//"

여기서 주의할 점은, 우리는 create-react-app으로 프로젝트를 생성해주었기 때문에,

위와 같이 환경변수의 맨 앞에 REACT_APP_를 입력해주어야 리액트가 인식해줄 수 있다.

이걸 입력해주지 않으면 리액트가 인식을 못해 에러가 뜰 것이다.

Firebase.js

import firebase from 'firebase/compat/app';
import 'firebase/compat/analytics'
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATA_BASEURL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECTID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGEBUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGINGSENDERID,
    appId: process.env.REACT_APP_FIREBASE_APPID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENTID
  };

  export default firebase.initializeApp(firebaseConfig);

이제 잘 작동되는지 확인해보기 위해 npm run start를 해주자.

참고로 아직 import firebase는 선언만 하고, 따로 사용하지 않았으며,

import firebase 부분은 원래 자동완성이 안되므로 걱정하지 말자.

 

나의 경우 작동이 잘 됐다.

여기까지 하면 firebase 연동 세팅은 완료된 것 같다~

이후에 추가적으로 해야될 일이 있으면 수정하여 추가하겠다.