프로젝트 회의 기록 (24.03.10)

리팩토링 리스트 (호민)

• 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? 를 구현하여 작업한다면. 직접 로컬에서 브랜치를 바꿔 실행하여 테스트 하지않아도될것 같습니다. 마찬가지로 스토리북을 배포해보는것도 좋을것 같습니다.

리팩토링 리스트 (지호)

• 모바일 대응
• 모바일 대응을 못한게 걸려서 코드 마크업을 다듬고 싶어졌습니다. 코드 확인 & 구현물 확인 모두 괜찮게 보이려면 어느정도 대응은 되어야 하지 않을까 고민되네요

• 메인 화면 FCP 개선
• 첫 화면에서 대기 시간이 길어지면 이용자 유출 확률이 높아지는 만큼 빠른 화면을 보여줘야할텐데, API 불러오는 양이 많아서 이를 좀 줄일 방법은 없을까 싶어졌습니다. (딱히 방법이 떠오르는건 아니에요)

• 그 외에도 tanstack-query, react-hook-form 모두 좋은 것 같아요 학습 목적에서 이제 실제 잘 사용하는 기술로 마이그레이션 한다 보면 의미있는 원인과 개선책이라 생각되구요.