개발일지 2
Last updated
Last updated
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
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])
백엔드 ERD, API 명세 작성 완료
추가기능에 대한 논의 필요
고민 끝에 NextJS말고 ReactJS로 프로젝트를 진행하게 되었다.
아직 NextJS가 왜 필요한지, 어떤 부분에서 유용한지 제대로 느끼지 못할 것이라고 생각하기도 했고 ReactJS 기반이기 때문에 이걸 먼저 잘 다룰 수 있어야 된다고 생각했다.
기본 세팅에서 부터 정말 오래걸렸다. 다 까먹기도 했고 처음부터 공식문서를 참고했으면 좋을 것을 다른 사람 글을 참고했다가 많이 꼬였다.
특히 eslint와 prettier는 프론트가 나 혼자라서 설정을 할지 말지 고민했는데 일관성을 유지하기 위해 필요하고 또 지금 아니면 언제해보겠나 싶어서 설정했다.
prettier는 거의 기본설정이라서 의미가 있나 싶긴한데,, 그래도 나중에 필요로 하게 되면 해당 부분을 추가하면 되니까!
데이터 페칭 관련해서도 swr과 react-query사이에서 고민을 했는데 단순히 데이터를 GET하기만 하면 당연히 swr을 썼을 것이지만 이번엔 좀 데이터를 섬세하게 다룰 필요가 있다고 생각해서 react-query를 고르게 되었다.
github 기본 세팅 완료