리팩토링 리스트 (호민)

• Axios 코드 추상화
  • 프로젝트 당시에 axios 코드에 대한 추상화가 전혀 진행이 안되었던걸로 기억하는데 해당 내용이 반영되면 좋을 것 같습니다.
• RTK → tanstack Query
  • 전체 코드에 반영한다기보단 학습이 주 목적일 것 같습니다.
  • RTK에 대한 기술공유가 되어있지 않아서 둘다 기술공유가 되면 좋을 것 같아요.
  • tanstack을 사용했을 때 Suspense나 ErrorBoundary를 통해서 로딩, 에러처리를 쉽게 할 수 있을 것 같아요
• styled-component
  • 현재 styled-component에 네이밍이 적용이 안되어있어서 하나의 네이밍 컨벤션이 잡히면 통일성 갖추기가 좋을 것 같아요.
  • 화면 레이아웃 잡을 때 각자 레이아웃을 잡아서 통일성이 없는데 디자인 + 수정을 같이하는 방향도 좋겠어요
  • 시맨틱 태그 적용도 같이하면 좋겠네요.
• accessToken 메모리 보관
  • accessToken이 웹 스토리지에 보관되면 탈취에 대한 위험성이 존재합니다.
  • 전역상태관리로 관리하는것도 좋은 방법일 것 같고 tanstack을 통해서 관리하면 좋을 것 같아요.
• 폴더구조 변경
  • 현재 페이지별 컴포넌트도 src/components 에 포함되어있는데 해당 페이지별로 구분하면 좋을 것 같아요.
  • 그리고 Interface Styled 위치해야하는 곳을 명확하게 구분하면 좋겠어요
• Custom Hooks
  • 컴포넌트별로 기능해야하는것들이 Custom Hooks로 나눠져있지 않는 코드들이 많은데 코드분리가 있으면 좋겠습니다
  • ex) API 호출코드 , Form 상태관리 등
• React-Hook-Form
  • 폼 상태관리가 현재 state 와 useEffect로 관리되는게 많은데 저희 QA받았던대로 React-Hook-Form 를 사용해서 효과적으로 관리하는것도 좋아보입니다.
• Story book
  • 스토리북 도입해보면 좋을 것 같아요.
  • Storybook을 통해서 ui 스토리 테스트를 해볼 수 있을 것 같아요
  • msw를 통해서 API 를 모킹해서 테스트를 해볼 수 있을 것 같아요
• 코드컨벤션 규정 변경 및 적용
  • 코드컨벤션을 정했는데 실질적으로 사용하면서 반영하기 어려웠던것도 많았고 반영이 안된애들도많아서 같이 적용하면 좋을 것 같아요

⇒ 기술적인 변경사항들도 포함되고 코드 퀄리티적인 수정들도 존재하는데 리팩토링의 목적을 학습으로 놓고 생각했을 때 모든 내용은 수정보단 기술공유에 초점을 두는게 좋을 것 같아요. *개인적인 의견입니다.

리팩토링 리스트 (수혁)

• Status 파일 삭제
  • Status 는 리덕스 슬라이스로 로딩 및 에러 처리를 하려고 만들었지만, 사용하기 번거롭고 확장성있게 구현된 것이아니라. 더 기능을 붙이기에 애매해진 상태입니다. 더군다나 메인 페이지서만 적용된 상태입니다. 탠스택으로 리팩토링 작업을 한다면 해당 슬라이스를 제거하는것이 좋아보입니다.
• 컴포넌트들을 더 읽기쉽게 리팩토링
  • 명령형으로 작성되어있거나, 로직의 흐름이 흩어져있는 컴포넌트들을 읽기 쉽게 리팩토링해야할것 같습니다.
• 컴포넌트 재설계
  • 컴포넌트들을 애초에 중복이 발생하지않도록 필요한 기능들과, 중복될 컴포넌트들 혹은 함수들을 미리 추상화할수있도록 예상하여 재설계 해보는것도 좋을것 같습니다. 물론 코드를 다 대체하진 못하겠지만 여건이된다면 몇몇 부분은 재설계된 코드로 대체해보는것도 좋을것 같습니다.
• Import 구문 린트 규칙 구현
  • 저번에 해당 린트를 완벽히 설정하지않아서 일일이 순서에맞게 import 를 재정렬 해줬는데. 린트규칙을 만들어 해당부분을 자동화 할수 있을것 같습니다.
• 테스트배포 서버를 띄우기
  • 이번 3차팀에선 해당 부분을 구현 해주셔서. Pr 이올라가면 바로 해당 구현을 웹에서 테스팅 해볼수 있습니다. 이번에 미리 cicd? 를 구현하여 작업한다면. 직접 로컬에서 브랜치를 바꿔 실행하여 테스트 하지않아도될것 같습니다. 마찬가지로 스토리북을 배포해보는것도 좋을것 같습니다.

리팩토링 리스트 (지호)