리팩토링 리스트 (호민)
- Axios 코드 추상화
- 프로젝트 당시에 axios 코드에 대한 추상화가 전혀 진행이 안되었던걸로 기억하는데 해당 내용이 반영되면 좋을 것 같습니다.
- RTK → tanstack Query
- 전체 코드에 반영한다기보단 학습이 주 목적일 것 같습니다.
- RTK에 대한 기술공유가 되어있지 않아서 둘다 기술공유가 되면 좋을 것 같아요.
- tanstack을 사용했을 때 Suspense나 ErrorBoundary를 통해서 로딩, 에러처리를 쉽게 할 수 있을 것 같아요
- styled-component
- 현재 styled-component에 네이밍이 적용이 안되어있어서 하나의 네이밍 컨벤션이 잡히면 통일성 갖추기가 좋을 것 같아요.
- 화면 레이아웃 잡을 때 각자 레이아웃을 잡아서 통일성이 없는데 디자인 + 수정을 같이하는 방향도 좋겠어요
- 시맨틱 태그 적용도 같이하면 좋겠네요.
- accessToken 메모리 보관
- accessToken이 웹 스토리지에 보관되면 탈취에 대한 위험성이 존재합니다.
- 전역상태관리로 관리하는것도 좋은 방법일 것 같고 tanstack을 통해서 관리하면 좋을 것 같아요.
- 폴더구조 변경
- 현재 페이지별 컴포넌트도
src/components에 포함되어있는데 해당 페이지별로 구분하면 좋을 것 같아요. - 그리고
InterfaceStyled위치해야하는 곳을 명확하게 구분하면 좋겠어요
- 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? 를 구현하여 작업한다면. 직접 로컬에서 브랜치를 바꿔 실행하여 테스트 하지않아도될것 같습니다. 마찬가지로 스토리북을 배포해보는것도 좋을것 같습니다.
리팩토링 리스트 (지호)
- 모바일 대응
- 모바일 대응을 못한게 걸려서 코드 마크업을 다듬고 싶어졌습니다. 코드 확인 & 구현물 확인 모두 괜찮게 보이려면 어느정도 대응은 되어야 하지 않을까 고민되네요
- 메인 화면 FCP 개선
- 첫 화면에서 대기 시간이 길어지면 이용자 유출 확률이 높아지는 만큼 빠른 화면을 보여줘야할텐데, API 불러오는 양이 많아서 이를 좀 줄일 방법은 없을까 싶어졌습니다. (딱히 방법이 떠오르는건 아니에요)
- 그 외에도 tanstack-query, react-hook-form 모두 좋은 것 같아요 학습 목적에서 이제 실제 잘 사용하는 기술로 마이그레이션 한다 보면 의미있는 원인과 개선책이라 생각되구요.