React.js에서 Firebase 사용하기

1. 일단 터미널을 이용해서, 원하는 경로에 React.js를 설치한다. ( npm이 설치되어 있어야 합니다. )

[ Javascript ]
npx create-react-app '프로젝트 이름'

[ Typescript ]
npx create-react-app '프로젝트 이름' --template typescript

 

2. Firebase로 이동해서 프로젝트를 만든다.

 

- 아래 링크를 타고, 프로젝트 만들기 또는 프로젝트 추가를 클릭한다.

애널리틱스는 나중에 추가가 가능하기 때문에, 사용 설정을 꺼주어도 된다.

https://console.firebase.google.com/

로그인 - Google 계정

 

3. 웹앱을 클릭해서 앱을 하나 만들어준다.

 

이 사진 중에, </> 이 모양으로 되어 있는 것이 웹앱이다. 클릭을 한다.

 

앱의 닉네임을 적어준다. 난 testing이란 프로젝트를 만들었기 때문에, testing 이라고 적을 것이다. 꼭 그렇게 하지 않아도 된다.

 

닉네임을 적어주면, 밑에 사진처럼 뜰 것이다.

 

 

4. vs code로 리액트 폴더를 열어서 npm을 이용해 install 해주고 src 폴더에 Firebase.js 또는 Firebase.ts 라는 파일을 하나 생성하자.

 

- 만약 저 화면을 지나갔다면 방법이 있다. 앱 홈에 보면, 앱 1개가 뜰 것이다. 그걸 클릭한 뒤 설정 버튼(톱니바퀴)를 누르고

밑으로 내려가면, npm / cdn / 구성으로 나뉘어 있을 것이다. 그 중에 npm을 보면 된다.

 

- vs code를 켜고 맥북으론 command + j 윈도우로는 ctrl + j 버튼을 눌러, 터미널을 켜준 다음 npm install firebase를 입력해서

firebase 패키지를 설치해주자.

 

- src 폴더에, 자바스크립트를 사용한다면 "Firebase.js" 타입스크립트를 사용한다면 "Firebase.ts"라는 파일 만들어주자.

 

- 저 위의 사진과 같이 된 코드들을 복사한 뒤 밑에 코드처럼 만들어주자.

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "AIzaSyCUHqOw9SpvrZueh1eHCIzCjKn0ECU2aMU",
  authDomain: "test-wow-95d8e.firebaseapp.com",
  projectId: "test-wow-95d8e",
  storageBucket: "test-wow-95d8e.appspot.com",
  messagingSenderId: "728758293118",
  appId: "1:728758293118:web:be438d1fe9354471387e2f"
};

export default initializeApp(firebaseConfig);

 

그리고, 잘 연결이 되었는 지 확인하기 위해 index.js 또는 index.tsx 파일에 가서 밑에 코드를 입력해서, import 해주고

import firebase from "./Firebase"

ReactDom 윗 부분에, console.log(firebase)를 한 뒤, 터미널에서 npm start를 입력하여 실행해보고

브라우저에서 개발자 모드로 console 부분에서 로그가 잘 뜬다면 연결이 잘 된 것이다.