수정사항
tanstack Query
- 기존에 구현되어있는 RTK thunk를 걷어내는 작업이 진행된다면 걷어내기 전보다 걷어낸 이후에 어떤 부분들에서 이점이 생겼는지, 어떤것들이 불편했는지에 대한 내용정리가 필요하다. 또한 기존의 사용방법(기술) + tanstack으로 변경했을 때의 사용방법(기술)이 같이 정의되어야 의미가 생길것 같습니다.
- ErrorBoundary , Suspense를 통해서 로딩처리 에러처리가 더 유연하게 되어야 할 것 같고 무한스크롤이 적용되어야 하는 부분들은 적용시키는것도 좋을 것 같다고 생각합니다. 기존에 메인페이지의 페이지네이션은 잘 사용되는것 같은 느낌이었는데 우측에 유저정보, 게시글의 댓글(얜 무한스크롤이 되는지 모르겠네요) 정도는 무한스크롤도 좋겠다는 의견입니다.
React-hook-form / formik
- 게시글작성, 회원가입, 로그인에 훅폼을 적용해서 에러관리를 조금 더 빡빡하게 해야할 것 같아요
- yup / zod 추가로 유효성 검사 추가
UI/UX
- 모바일 대응이 안된다는 점
- px단위로 고정되어있는걸 모두 수정하면 좋겠습니다.
- 화면상에 전체 규격을 잡아놓고 알아서 div의 크기가 어느정도는 반응형으로 동작하는게 낫다고 생각합니다.
- flex, padding, margin, gap, grow, shrink같은애들을 사용해서 규격을 맞춰가면 좋겠습니다.
- UX적인 부분이 고려되지 않은 요소들이 많은것 같아서 어색한 부분들은 ux고려해서 반영해보면 좋겠습니다
디자인시스템
- 기존에 셋팅해놓은 디자인시스템을 조금 더 잘활용하기 위해서는 컴포넌트를 구체화 할 필요가 있을 것 같습니다. → 예를들어 모든 버튼의 사용처를 모아서 props로 variant를 내려주고 styled-component를 더 잘 활용해보는거죠
Storybook도 도입해봐야 할 것 같아요셋팅에 대한 우려가 있었는데 시간이 여유로워졌으니 삽질해보면 좋을 것 같아요.디자인시스템은 만들어져있는데 Storybook으로 확인할 수 없으니 뭔가 결과물이 없는느낌이라 써보면 더 가치있을 것 같아요
CI/CD
- 스토리북이 도입되고 Vercel 배포가 Github Actions을 사용해서 리뷰할 때 테스트용으로 계속보면 좋겠습니다.
- Vercel이 비용에 관한 문제때문에 각자 팀에서 사용해본 배포가지고 얘기해보고 하나로 정하면 좋을 것 같습니다
- CI/CD부분은 누군가 맡아서 진행하게되면 반드시 깔끔하게 어떠한 과정으로 진행하는지 정리해주면 다른사람들도 다음 프로젝트나 개인프로젝트에 반영해볼 수 있을 것 같습니다. → 문서화 정리 잘해주세요 ^—-^
재설계
- 컴포넌트, 디자인시스템에 대한 초기 재설계가 필요하다고 생각합니다
- 중복컴포넌트가 많이 사용되고있는것 같고, 중복으로 사용되어야 하는데 중복으로 되지않은애들은 중복으로 만들어가는 초기 설계과정에서 한번 잘 잡아가는것도 좋아보입니다
코드스타일
- 코드리뷰를 더 빡빡하게 하면 좋겠어요
- 네이밍 - Styled-component, Interface, 변수, 상수까지 대충 규격을 잡아놓고 가보면 어떨까 싶어요
- 컨벤션 - ESLint , Prettier 까지 도입해서 빡빡~하게 가보면 좋겠습니다
- 이건사실 아예 처음부터 잡아야 할 것 같네요..
- 폴더구조
로직분리``
- 각 페이지, 컴포넌트별로 로직이 막 붙어있는데 로직과 UI를 조금이나마 분리해보는 과정이 있으면 어떨까 싶습니다 ← 진행하는 과정에서 각자의 의견을 리뷰로 설명하고 이야기 나눠보고 하면서 배우는 목적이 클 것 같아요
React
- SEO를 조금 더 올리고 코드스플린팅하고 하면서 프로젝트 자체 퀄리티도 높여보면 좋겠어요
타입스크립트
- any로 추론되는애들 → 정제
- Axios로 제네릭활용해서 타입을 제한해보자
1. 폴더구조
타입분리 : 이거 그냥 같이 있는게 낫지않을까.. ⇒ types.ts파일 다 지우자
components/Edit/Description
- Response, Request ⇒ axios / api 폴더안에서 정의해주고 export
- EditPage/components/Description ←이게 더 직관적인것 같다
2. Sqush Merge 하기
main-dev-feature
main-dev←feature : 여기서 스쿼시머지하기
3. RTK → axios+tanstack 필요한 이유
- Error처리
- Loading처리
- 데이터 캐싱
- 코드퀄리티
- useInfinity ⇒ 페이지 네이션
- axios를 잘 사용한다면 타입추론이 더 잘 될것으로 예상합니다.
여기서부터 진짜 리팩토링
4. RTK → Tanstack으로 변환하는 과정
- 작성한코드 → 어떻게 쓰는지, 왜 이렇게 구현했는지 : 리뷰보고 알아서 판단하면 좋겠지만 꽤 어렵다
- API 호출 → Axios 추상화, apis 폴더 생성 , Response타입 재정의, Request타입 재정의 , axios.Instance로 되어있는 코드를 tanstack 코드로 변경해야 한다.
- ErrorBoundary(전부 다 응답이 200일걸요? - 에러떠도)
- 로딩처리 (스켈레톤 or 또 다른 로딩로직 구현)
- 리뷰를 해야되잖아요
→ 변수명이름 왜이렇게 지었냐 , 여기서 코드분리 더 할 수 있지않겠냐, api호출, 비즈니스로직이 분리가 잘 되어있는데
├─ src │ ├─ App.tsx │ ├─ assets │ ├─ components │ │ └─ 공통 컴포넌트 - 디자인 시스템 │ ├─ hooks │ │ └─ Slice코드 + 공통 훅 │ ├─ main.tsx │ ├─ pages │ │ └─ pageName │ │ ├─ components │ │ │ ├─ First │ │ │ └─ Second │ │ ├─ index.tsx │ │ └─ style.ts