2021.02.26 TIL

velog를 쓰지 못한 약 한달 반동안 굉장히 많은 일이 있어서 ㅠㅠ 오랜만에 쓴다.
이번에는 우리 팀의 프로토타입으로 테스트를 진행하기로 했는데 웹 플랫폼을 구축하기로 함.
그렇지만 내가 프론트엔드만 공부한 관계로 전체 서비스를 구축하기 전 테스트는
firebase로 백엔드+서버설정을 대체하면서 테스트 버전 구축 예정!!

firebase를 활용하는 방법은
https://nomadcoders.co/nwitter
를 참고함

react 개발환경 세팅은 똑같음
1. mkdir 만들 디렉토리명
2. npx create-react-app app-name
3. cd app-name
4. yarn start

1. React + Firebase Setup

1. firebase

• https://firebase.google.com/ 여기서 프로젝트 만들어서 준비
• 내 프로젝트에 firebase SDK 를 추가할 때 html방식으로 body에 추가해줄수도 있으나
  React를 사용해 프로젝트를 진행하기 때문에 모듈번들러를 사용하는 방식으로 진행

1) package.json파일은 있으니 npm init은 생략
2) npm install --save firebase
3) index.js에서 firebase import

• import firebase from 'firebase/app';

2. Securing the Keys

• key값을 github 상에서 노출되지 않도록 조치
• 완전히 노출되지 않도록 하는 보안적인 조치는 아님
• .env파일에서 환경변수를 별도로 설정함으로써 github 상에 key값이 업로드되지 않도록 함
• .env 파일을 .gitignore에 추가해서 commit되지 않게 함
• 이렇게 해도 key값은 브라우저상에서 react가 실행될때 표시가 될 것임
• 보안조치는 추후에 추가예정

.env
REACT_APP_API_KEY=key값
REACT_APP_AUTH_DOMAIN=key값
REACT_APP_PROJECT_ID=key값
REACT_APP_STORAGE_BUCKET=key값
REACT_APP_MESSAGING_SENDER_ID=key값
REACT_APP_APP_ID=key값

.firebase.js
import firebase from "firebase/app";

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_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_APP_ID,
  };


export default firebase.initializeApp(firebaseConfig);

3. Router Setup

을 하려고 했으나...
Hook에 대해 먼저 알고 오라고 해서
Hook부터 공부

3. React Hooks

3-1. Hook이란?

• class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줌.