React + Firebase Setup 환경 설정

React 환경설정

vscode에서 새 윈도우를 생성하고 터미널을 열어서

cd ---- 로 패키지 경로 설정을 한 이후에 

npx create-react-app (패키지명) 을 통해서 react 패키지 설치하기.

 

터미널에 code nwitter를 입력하여 새창으로 프로젝트 오픈

 

이후 Github에 업로드시 새 레파지토리 생성을 하고

해당 레파지토리의 주소를 복사한다.

 

터미널에서 git remote add origin " 생성한  레파지토리  URL " 입력

입력후

error: remote origin already exists.

에러 발생시

 

git remote remove origin 명령어를 입력해서 기존에 연결되어 있는 원격 저장소와의 연결을 끊어줍니다.

git remote add origin [새롭게 연결할 깃 레파지토리 주소] 명령어를 입력합니다.

git remote -v 명령어를 입력해서 로컬 저장소를 원격 저장소에 연결시켜줍니다.

git push origin master 명령어를 입력해서 소스코드를 올리면 됩니다.

 

 

https://coding-factory.tistory.com/619

참고 사이트

 

이후 vscode에서 src파일 정리해주기

App.js / index.js 에서 필요한부분만 남기고 나머지 파일은 정리하기

 

package.json파일에서 테스트를 진행하지 않으면

"scripts" : {"test": "react-scripts test"} 삭제하기

 

git add .  

git commit -m " commit message 작성하기 "

git push origin master 

 

github 레파지토리에 폴더가 업로드 된다.

 

 

 

Firebase 환경설정

 

https://firebase.google.com/?hl=en

Firebase | Google’s Mobile and Web App Development Platform

firebase사이트에서 구글 로그인을 진행한 이후에 오른쪽 상단의 Go to console 클릭하고 프로젝트 생성하기

 

 

Web 버튼 클릭하고 app 생성하기

 

https://firebase.google.com/docs/reference/js?authuser=0&hl=en

API Reference  |  Firebase JavaScript API reference

연결하는 방식으로는 세가지가 있다.

• CDN
• npm package
• Bower package

 

터미널을 사용해 설치하는 방법으로

npm i firebase 를 사용하며

지정버전을 설치하기 위해서는

npm i firebase@9.6.1

위와같이 뒤에 버전을 명시해준다.

 

 

 

import * as firebase from "firebase/app";

 

const firebaseConfig = {

  apiKey: "AIzaSyDVQx8_EuVgA7zuy900FtgZlypeSW3SVfo",

  authDomain: "nwitter-19df0.firebaseapp.com",

  projectId: "nwitter-19df0",

  storageBucket: "nwitter-19df0.appspot.com",

  messagingSenderId: "36406489889",

  appId: "1:36406489889:web:b8848bf464731bb17d8460"

};

 

export default firebase.initializeApp(firebaseConfig);

이후 firebase.js파일을 생성해주고 위 코드를 작성한다.

 

 

import firebase from './firebase';

index.js파일에 firebase를 import해준다.

 

 

 

 

// .env 사용하지 않은경우

const firebaseConfig = {

  apiKey: "AIzaSyDVQx8_EuVgA7zuy900FtgZlypeSW3SVfo",

  authDomain: "nwitter-19df0.firebaseapp.com",

  projectId: "nwitter-19df0",

  storageBucket: "nwitter-19df0.appspot.com",

  messagingSenderId: "36406489889",

  appId: "1:36406489889:web:b8848bf464731bb17d8460"

};

 

// .env사용한 경우

const firebaseConfig = {

    apiKey: process.env.REACT_APP_API_KEY,

    authDomain: process.env.REACT_APP_AUTH_DOMAIN,

    projectId: process.env.REACT_APP_PROJECT_ID,

    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,

    messagingSenderId: process.env.REACT_APP_MESSAGIN_ID,

    appId: process.env.REACT_APP_APP_ID

  };

firebase.js

 

REACT_APP_API_KEY=AIzaSyDVQx8_EuVgA7zuy900FtgZlypeSW3SVfo

REACT_APP_AUTH_DOMAIN=nwitter-19df0.firebaseapp.com

REACT_APP_PROJECT_ID=nwitter-19df0

REACT_APP_STORAGE_BUCKET=nwitter-19df0.appspot.com

REACT_APP_MESSAGIN_ID=36406489889

REACT_APP_APP_ID=1:36406489889:web:b8848bf464731bb17d8460

.env

 

.env 파일로 환경변수 설정해주기

create-react-app으로 사용한 경우 환경변수 설정을 할 땐 앞에  REACT_APP_ 을 명시해줘야 한다.

사용할땐 process.env.REACT_APP_--------- 로 사용한다.

.gitignore파일에 .env 명시가능, env파일은 프로젝트 최상위에 존재해야한다 ( package.json 과 같은선상 )

 

 

 

Routes를 만들기위해서 

npm i react-router-dom을 작성하기

지정버전을 설치하고싶으면 

npm i react-router-dom@5.3.0 로 작성하기