[1팀 김세준] Chapter 2-3. 관심사 분리와 폴더구조

[kk3june]

과제 체크포인트

https://kk3june.github.io/front_5th_chapter2-3/

기본과제

목표 : 전역상태관리를 이용한 적절한 분리와 계층에 대한 이해를 통한 FSD 폴더 구조 적용하기

• 전역상태관리를 사용해서 상태를 분리하고 관리하는 방법에 대한 이해
• Context API, Jotai, Zustand 등 상태관리 라이브러리 사용하기
• FSD(Feature-Sliced Design)에 대한 이해
• FSD를 통한 관심사의 분리에 대한 이해
• 단일책임과 역할이란 무엇인가?
• 관심사를 하나만 가지고 있는가?
• 어디에 무엇을 넣어야 하는가?

체크포인트

• 전역상태관리를 사용해서 상태를 분리하고 관리했나요?
• Props Drilling을 최소화했나요?
• shared 공통 컴포넌트를 분리했나요?
• shared 공통 로직을 분리했나요?
• entities를 중심으로 type을 정의하고 model을 분리했나요?
• entities를 중심으로 ui를 분리했나요?
• entities를 중심으로 api를 분리했나요?
• feature를 중심으로 사용자행동(이벤트 처리)를 분리했나요?
• feature를 중심으로 ui를 분리했나요?
• feature를 중심으로 api를 분리했나요?
• widget을 중심으로 데이터를 재사용가능한 형태로 분리했나요?

심화과제

목표: 서버상태관리 도구인 TanstackQuery를 이용하여 비동기코드를 선언적인 함수형 프로그래밍으로 작성하기

• TanstackQuery의 사용법에 대한 이해
• TanstackQuery를 이용한 비동기 코드 작성에 대한 이해
• 비동기 코드를 선언적인 함수형 프로그래밍으로 작성하는 방법에 대한 이해

체크포인트

• 모든 API 호출이 TanStack Query의 useQuery와 useMutation으로 대체되었는가?
• 쿼리 키가 적절히 설정되었는가?
• fetch와 useState가 아닌 선언적인 함수형 프로그래밍이 적절히 적용되었는가?
• 캐싱과 리프레시 전략이 올바르게 구현되었는가?

과제 셀프회고

과제에서 좋았던 부분

과제를 하면서 새롭게 알게된 점

• 응집도, 결합도, 단일책임 등 프론트엔드로써 코드 퀄리티를 높이기 위한 기본적인 지식에 대해 다시 한번 생각해보게 되었습니다.
  해당 개념들은 면접 준비할 때나 생각하고 실제 현업할 때는 그렇게 중요성을 깨닫지 못한 채 작업을 진행했었는데, 이번 과제를 진행하면서 유지 보수 하기 쉬운 코드, 가독성이 좋은 코드를 위해 어떻게 코드를 작성해야할지 위 개념들이 왜 중요한 것인지 몸소 느낄 수 있었습니다.

과제를 진행하면서 아직 애매하게 잘 모르겠다 하는 점, 혹은 뭔가 잘 안되서 아쉬운 것들

• 과제를 하다보니 코드가 뒤죽박죽 되어, 리팩토링 이후에 오히려 코드를 더 알아보기 힘든 지경에 다다른 느낌이라 무척 아쉽습니다. 복잡해진 코드 때문에 과제 진행이 더욱 뎌뎌지고, tanstack-query로 적용하지 못한 점이 아쉽습니다 ㅠ

리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문

• 현업에서 리팩토링을 진행할 때 어떤 과정으로 진행하시나요?
  shared 컴포넌트 분리 -> widget 단위의 컴포넌트 분리 -> 개별 entites 단위로 분리 -> feature 단위 분리 -> 전역상태 관리와 tanstack-query 적용 본래 의도는 이와 같은 순서로 리팩토링을 진행하려고 했습니다. 그런데 막상 코드를 분리하고 작업을 하다보니, 어떤 테스트 케이스가 왜 깨졌는지 원인을 찾기 어려웠습니다. 그래서 코드를 다시 롤백하고, 눈에 띄는 것부터 순차적으로 리팩토링을 진행하였습니다. 코드를 분리하면서 테스트 케이스가 깨질 때마다 하나씩 대응을 해나가면서 리팩토링을 진행했더니 이번에는 코드가 뒤섞여서 어느서부터 손을 대야할지 난감할 정도로 복잡도가 매우 올라가는 느낌을 받았습니다. 또한 테스트 케이스가 깨질때마다 하나씩 통과를 시키면서 작업을 했더니 테스트는 통과하지만 실제 기능은 동작하지 않는 사이드 이펙트가 발생했습니다.
  리팩토링을 하는 스킬 자체에도 문제가 있었겠지만, 어떤 과정을 통해서 리팩토링을 해나가야할지 감이 잘 잡히지 않았습니다.

• 코드를 파일 단위로 분리할 때 어떤 기준을 갖고 분리하시나요?
  예를 들어, features/api/index.ts와 같은 한 파일에서 getPost, addPost, updatePost, deletePost 를 한번에 import 해서 사용하는 방식과 api 폴더 하위에 각각의 getPost.ts, addPost.ts 등 개별 파일로 관리하는 방식을 달리 할 때 어떤 기준을 갖고 하시는지 궁금합니다.

[ywkim95]

세준님 고생 많으셨어요!

탠스택쿼리를 적용을 못하신 것 같아요!
아마 시간이 부족하셔서 그런걸로 보입니다...
저도 4기 때 시간이 부족해서 심화를 완성하지 못했는데, 완성하지 못한 부분에 대해서 굉장히 공감이 되네요... ㅠㅠ

나머지 영역은 굉장히 깔끔하게 잘 나누어 주신 듯한데... 거의 다왔는데 아깝습니다!
이번 기회를 발판 삼아 조금 더 익숙해지셨으면 좋겠습니다 ㅎㅎ
과제 고생하셨습니다~~!

[ywkim95]

해당 부분은 tanstack-query를 위해서 분리해두신건가요? 지금 여러가지의 도메인이 뒤섞여 있어서 Post에만 어울리는 파일이라고 생각이 들지않아요! 조금 더 분리해보시면 가독성과 feature가 가지고 있는 역할이 분명하게 드러날 것이라고 생각이 듭니다!