3. twitter clone 하기 - 파이어베이스 환경 설정하기

1. 파이어베이스 설정하기

• firebase.google.com 접속하면 처음 화면에서 시작하기 누른 후 프로젝트 만들기
• 프로젝트 이름을 지정할 수 있는 화면이 생성되면 프로젝트 이름은 리액트 프로젝트 이름과 동일하게 작성합니다. 파이어베이스를 처음 사용한다면 "Firebase 약관에 동의합니다."에 체크 후 계속 버튼을 누릅니다.
• 다음 화면에서 "이 프로젝트에서 Google 애널리틱스 사용 설정" 을 끄고 프로젝트 만들기를 눌러서 설정을 마칩니다.
  => 구글 애널리틱스 : 사이트의 사용자 통계 수치 등을 알려주는 구글의 서비스 -> 여기서는 다루지 않기 때문에 사용해제를 권장
• "새 프로젝트가 준비되었습니다." 라는 문구가 나오면 계속 버튼을 눌러서 다음으로 갑니다.
• 프로젝트 만들기가 끝나면 파이어베으스 관리화면에서 </> 모양의 버튼을 눌러서 웹 애플리케이션을 등록합니다.
• 웹 앱에 Firebase 추가 화면에서 "또한 이 앱의 Firebase 호스팅을 설정하세요." 체크 해제 확인 후 앱 등록을 누릅니다.
• Firebase SDK 추가 내용 확인을 할 수 있습니다. 여기서 firebaseConfig 값을 복사합니다.
• VSCode로 돌아와서 터미널에 밑에 명령어를 입력해서 파이어베이스 SDK 리액트 버전을 설치 합니다.

npm install --save firebase

• src 폴더에 firebase.js 파일을 생성 후 복사한 값을 이용하여 코드를 입력합니다.

import firebase from "firebase/app"

const firebaseConfig = {
  apiKey: "AIzaSyCDWnPKoZAGpE1T-fCEe5rL6goQHGfhNiw",
  authDomain: "nwitter-65e58.firebaseapp.com",
  projectId: "nwitter-65e58",
  strageBucket: "nwitter-65e58.appspot.com",
  messagingSenderId : "367559533896",
  appId: "1:367559533896:web:67c6825a8982c4bc7aff7d"
}

export default firebase.initializeApp(firebaseConfig)

• index.js에서 파이어베이스가 잘 동작하는지 확인합니다.

import React from "react"
import ReactDOM from "react-dom"
import App form "./App"
import firebase from "./firebase"  // 추가
console.log(firebase)  // 추가

React DOM.render(
  <React.StricMode>
     <App />
  </React.StricMode>,
  document.getElementById("root")
)

• 터미널에 npm start를 입력하면 리액트 서버가 실행됩니다.
• firebase.js에 위에 코드로 작성하면 오류가 발생합니다.

firebase.js code error

• 아래에 작성한대로 firebase.js 코드를 수정하면 오류가 수정됩니다.

  // firebase/app 에 포함된 모든 모듈을 firebase 라는 객체에 부여한다라는 뜻
  import * as firebase from "firebase/app"
  
  // firebase 설정과 관련된 개인 정보
  const firebseConfig = { 
    apiKey: "AIzaSyCDWnPKoZAGpE1T-fCEe5rL6goQHGfhNiw",
    authDomain: "nwitter-65e58.firebaseapp.com",
    projectId: "nwitter-65e58",
    strageBucket: "nwitter-65e58.appspot.com",
    messagingSenderId : "367559533896",
    appId: "1:367559533896:web:67c6825a8982c4bc7aff7d"
  }
  
  // firebase.initializeApp -> initializeApp 함수를 firebase 객체에서 꺼내 사용한 것이라는 뜻
  export default firebase.initializeApp(firebaseConfig)

• 다시 터미널에 npm start 를 입력해서 리액트 서버를 실행시키면 오류가 수정되어서 나타납니다.

 

이 글은 Nomad Coder의 "트위터 클론코딩" 책을 바탕으로 작성되었습니다.