TIL #34 | 뉴스피드 프로젝트

kibi·2023년 11월 27일

Firebase React TIL redux

TIL (Today I Learned)

목록 보기

33/83

프로젝트 기획: 자유로운 사람들을 위한 취미 공유 뉴스피드 웹 구현하기

개발 언어 및 라이브러리

개발 언어

Javascript 기반의 React

라이브러리

React Router
Redux
Styled components

각 언어 및 라이브러리 정보는 공식 문서를 참고하였습니다.

React
React Router
Redux
Styled components

프로젝트 셋업 과정

yarn을 사용하여 동일한 개발환경을 유지하였습니다.

CRA으로 프로젝트 생성 : yarn create react-app [project]

패키지 설치

React Router : yarn add react-router-dom
Redux : yarn add redux react-redux
styled components :yarn add styled-components

파일 구조

src
 ┣ assets
 ┃ ┣ default-post.jpeg
 ┃ ┣ default-profile.jpeg
 ┃ ┗ header-logo.png
 ┣ components
 ┃ ┣ CarouselCard.jsx
 ┃ ┣ Fileupload.jsx
 ┃ ┣ HeaderNav.jsx
 ┃ ┣ Login.jsx
 ┃ ┣ Modal.jsx
 ┃ ┣ PostCarousel.jsx
 ┃ ┣ PostForm.jsx
 ┃ ┣ ProfileBox.jsx
 ┃ ┣ ProfileFigure.jsx
 ┃ ┣ TabNavigation.jsx
 ┃ ┣ TopicPostList.jsx
 ┃ ┣ UserPostList.jsx
 ┃ ┗ socialLogin.jsx
 ┣ context
 ┣ pages
 ┃ ┣ Detail.jsx
 ┃ ┣ Home.jsx
 ┃ ┣ Mypage.jsx
 ┃ ┣ Topic.jsx
 ┃ ┗ Write.jsx
 ┣ redux
 ┃ ┣ config
 ┃ ┃ ┗ configStore.js
 ┃ ┗ modules
 ┃ ┃ ┣ auth.js
 ┃ ┃ ┣ posts.js
 ┃ ┃ ┣ topics.js
 ┃ ┃ ┗ user.js
 ┣ shared
 ┃ ┣ Layout.jsx
 ┃ ┗ Router.jsx
 ┣ App.jsx
 ┣ GlobalStyle.js
 ┣ firebase.js
 ┗ index.jsx

코드포맷팅 규칙 설정

.prettierrc.js 파일 생성

/**  @type {import("prettier").Config} */

const config = {
  trailingComma: 'es5',
  tabWidth: 2,
  semi: false,
  singleQuote: true,
}

module.exports = config

settings.json 파일 설정

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  }
}

git을 사용한 협업

프로젝트에서 사용한 git flow

dev 파일을 default로 설정하고, 각자의 기능 브랜치를 만들어 PR 하였고
기능 브랜치는 크게 feature/home, feature/topic, feature/detail, feature/write, feature/login으로 나눴습니다.
후에 배포할 때 dev에서 main으로 PR하여 사용했습니다.

Firebase를 이용한 Database 관리

Firebase 프로젝트 생성

Firebase 에서 데이터베이스를 구성하고 관리하였습니다.

순서 : Firebase console 이동 > 프로젝트 생성 > cloud Firestore에서 데이터 베이스 만들기

위의 과정을 마친 후 프로젝트 src 경로에 firebase.js 파일을 생성한 후 생성한 프로젝트 설정에서 firebase config 정보를 가져와줍니다.

❗️firbase config는 API와 같은 개인의 구성 정보를 가지고 있습니다.
정보 은닉을 위해서 값은 따로 .env.local 파일에 저장해서 정보 유출을 막아줍니다.

root 경로에 환경변수 (.env.local) 셋업

REACT_APP_FB_API_KEY="MY_API_KEY"
REACT_APP_FB_AUTH_DOMAIN="MY_AUTH_DOMAIN"
REACT_APP_PROJECT_ID="MY_PROJECT_ID"
REACT_APP_STORAGE_BUCKET="MY_STORAGE_BUCKET"
REACT_APP_MESSAGING_SENDER_ID="MY_MESSAGING_SENDER_ID"
REACT_APP_APP_ID="MY_APP_ID"

firebase에서 .env 파일에 저장된 변수 가져오기

const firebaseConfig = {
apiKey: process.env.REACT_APP_FB_API_KEY,
authDomain: process.env.REACT_APP_FB_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,
}