개발일지 2

ERD

ErdCloudLink

기술스택

ReactJS TypeScript MUI-emotion Redux React-query

초기 세팅

  • CRA

    • npx create-react-app client --template typescript

  • eslint / prettier

    • npx eslint --init eslint 관련 파일 생성

    • npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

    • npm install --save-dev --save-exact prettier .prettier 파일 생성 필요

    • npm install --save-dev eslint-config-prettier eslint-plugin-prettier

    typescript-eslint prettier

  • react-router

    • npm install react-router-dom localforage match-sorter sort-by

  • MUI + emotion

    • npm install @mui/material @emotion/react @emotion/styled

    • npm install @mui/icons-material

  • redux, redux-toolkit

    • npm install redux

    • npm install @reduxjs/toolkit

  • react-query

    • npm install react-query

파일 정리

  • public

    • favicon.ico index.html

  • src

    • App.tsx index.tsx

커밋 컨벤션

  • ✨[feat] 새로운 기능을 추가할 경우

  • 🐛[fix] 버그를 고친 경우

  • 💄[design] CSS 등 사용자 UI 디자인 변경

  • 🎨[style] 코드 포맷변경, 세미콜론 누락, 코드수정이 없는 경우

  • ♻[refactor] 프로덕션 코드 리펙토링할 경우

  • 💡[comment] 필요한 주석 추가 및 변경

  • 📝[docs] 문서를 수정한 경우

  • ✅[test] 테스트 코드 작업을 할 경우

  • 📦[chore] 빌드 테스트 업데이트, 패키지 매니저를 설정하는 경우

  • 🚚[rename] 파일 혹은 폴더명을 수정하거나 옮기는 작업만 하는 경우

  • 🔥[remove] 삭제하는 작업만 수행한 경우

  • 🚑[!HOTFIX] 급하게 치명적인 버그를 고침

  • 커밋은 작게 쪼개서 세부적으로 하기

  • PR은 기능 단위로

  • 주 1회 코드리뷰

  • PR 할 때 해당 기능에 대한 테스트코드 작성 꼭 하기

브랜치 전략

main-dev-be/dev(fe/dev)-be/[feat](fe/[feat])

2023 10월 4일 진행상황

  1. 백엔드 ERD, API 명세 작성 완료

  2. github 기본 세팅 완료 GithubLink

  3. 추가기능에 대한 논의 필요

생각

  • 고민 끝에 NextJS말고 ReactJS로 프로젝트를 진행하게 되었다.

  • 아직 NextJS가 왜 필요한지, 어떤 부분에서 유용한지 제대로 느끼지 못할 것이라고 생각하기도 했고 ReactJS 기반이기 때문에 이걸 먼저 잘 다룰 수 있어야 된다고 생각했다.

  • 기본 세팅에서 부터 정말 오래걸렸다. 다 까먹기도 했고 처음부터 공식문서를 참고했으면 좋을 것을 다른 사람 글을 참고했다가 많이 꼬였다.

  • 특히 eslint와 prettier는 프론트가 나 혼자라서 설정을 할지 말지 고민했는데 일관성을 유지하기 위해 필요하고 또 지금 아니면 언제해보겠나 싶어서 설정했다.

  • prettier는 거의 기본설정이라서 의미가 있나 싶긴한데,, 그래도 나중에 필요로 하게 되면 해당 부분을 추가하면 되니까!

  • 데이터 페칭 관련해서도 swr과 react-query사이에서 고민을 했는데 단순히 데이터를 GET하기만 하면 당연히 swr을 썼을 것이지만 이번엔 좀 데이터를 섬세하게 다룰 필요가 있다고 생각해서 react-query를 고르게 되었다.

할일

Previous개발일지 1NextJavaScript

Last updated