[1팀 김민석] Chapter 3-3 기능 중심 아키텍처와 프로젝트 폴더 구조

[kju1018]

과제 체크포인트

배포 링크입니다! https://kju1018.github.io/front_7th_chapter3-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의 Devtools가 정상적으로 작동하는가?

최종과제

• 폴더구조와 나의 멘탈모데일이 일치하나요?
• 다른 사람이 봐도 이해하기 쉬운 구조인가요?

과제 셀프회고

이번 과제를 통해 이전에 비해 새롭게 알게 된 점이 있다면 적어주세요.

사실 FSD라는 개념도 최근에야 알게 되었고, entities, features 등 레이어를 나누는 기준에 대해서는 아직도 모호하게 느껴지는 부분이 많습니다.
이번 과제를 통해 FSD 아키텍처라는 구조가 존재한다는 점, 그리고 단방향 의존성과 단일 책임을 가져야 한다는 이론적 배경을 새롭게 이해할 수 있었습니다.

본인이 과제를 하면서 가장 애쓰려고 노력했던 부분은 무엇인가요?

결과적으로 완벽하게 구현하지는 못했지만,
이번 과제에서 제가 가장 노력했던 부분은 누구나 납득할 수 있는 폴더 구조와 컴포넌트 분리를 시도하는 것이었고,
각각의 레이어가 어떤 책임을 가지는지 최대한 이해해보려는 과정이었습니다.

아직은 막연하다거나 더 고민이 필요한 부분을 적어주세요.

아직은 features와 entities를 나누는 기준이 어느 정도 이해된 것 같으면서도, 여전히 많이 헷갈리는 상태입니다.
처음에는 명확하게 “이건 features에 가깝다”고 느꼈던 부분도, 시간이 지나 다시 보면 entities에 더 어울리는 것처럼 보이기도 했습니다.
전체적으로 정리가 잘 안되어있어서 모든게 막연한느낌? 입니다.

이번에 배운 내용 중을 통해 앞으로 개발에 어떻게 적용해보고 싶은지 적어주세요.

아직은 이 구조를 바로 실무에 적용하겠다고 말할 만큼 충분히 이해한 단계는 아니지만,
우선 개인 프로젝트를 진행하면서 한 번 적용해보고 싶다는 생각이 들었습니다.
그리고 이후 재직 중인 회사에서 폴더 구조를 개편하거나 신규 프로젝트를 진행하게 된다면,
그때 FSD 구조를 도입해보는 것도 충분히 시도해볼 만하다고 느꼈습니다.

챕터 셀프회고

클린코드와 아키테쳑 챕터 함께 하느라 고생 많으셨습니다!
지난 3주간의 여정을 돌이켜 볼 수 있도록 준비해보았습니다.
아래에 적힌 질문들은 추억(?)을 회상할 수 있도록 도와주려고 만든 질문이며, 꼭 질문에 대한 대답이 아니어도 좋으니 내가 느꼈던 인사이트들을 자유롭게 적어주세요.

클린코드: 읽기 좋고 유지보수하기 좋은 코드 만들기

• 더티코드를 접했을 때 어떤 기분이었나요? ^^; 클린코드의 중요성, 읽기 좋은 코드란 무엇인지, 유지보수하기 쉬운 코드란 무엇인지에 대한 생각을 공유해주세요

과제를 본격적으로 시작하려고 코드를 처음 봤을때 사실 '어디서부터 뭘 해야하지?' 라는 생각에 막막했던거같습니다.
우선 제가 생각하는 읽기 좋은 코드는, 코드를 처음 보았을 때 특별한 불편함이 느껴지지 않고, 내용을 이해하기 위해 굳이 여러 번 다시 읽지 않아도 되는 코드라고 생각합니다.
제가 생각하는 유지보수하기 쉬운 코드는, 변경 사항이 생겼을 때 어디를 수정해야 할지가 바로 떠오르는 코드라고 생각합니다.
반대로, 수정이 필요함에도 불구하고 어디를 고쳐야 할지 찾기 어려운 코드라면, 그만큼 유지보수가 어려운 코드라고 느껴집니다.

결합도 낮추기: 디자인 패턴, 순수함수, 컴포넌트 분리, 전역상태 관리

• 거대한 단일 컴포넌트를 봤을때의 느낌! 처음엔 막막했던 상태관리, 디자인 패턴이라는 말이 어렵게만 느껴졌던 시절, 순수함수로 분리하면서 "아하!"했던 순간, 컴포넌트가 독립적이 되어가는 과정에서의 깨달음을 들려주세요

처음에는 features에 posts, comments, users 폴더를 만들고 그 안에 model, ui, api를 구성했지만,
이후 features/posts/add-post처럼 사용자 행동 단위로 폴더 구조를 나누면서 구조가 훨씬 직관적으로 느껴졌습니다.
폴더 구조만 보더라도 어떤 동작과 관련된 로직이 들어 있는지 바로 파악할 수 있었고,
기능 단위로 사고하게 되는 계기가 되었습니다.

응집도 높이기: 서버상태관리, 폴더 구조

• "이 코드는 대체 어디에 둬야 하지?"라고 고민했던 시간, FSD를 적용해보면서의 느낌, 나만의 구조를 만들어가는 과정, TanStack Query로 서버 상태를 분리하면서 느낀 해방감(?)등을 공유해주세요

이번 과제에서는 폴더 구조를 미리 찾아보고 시작하기보다는,
이론을 먼저 이해한 뒤 제가 느낀 방향대로 구조를 잡아보았습니다.
처음에는 features 아래에 posts, comments, users 폴더를 만들고 그 안에 model, ui, api를 구성했지만,
점점 하나의 폴더에 많은 기능이 모이면서 구조가 복잡하게 느껴졌습니다.
이후 사용자 행동 단위로 폴더 구조를 다시 나누면서,
폴더만 보아도 어떤 기능을 담당하는지 한눈에 파악할 수 있었고
이전보다 훨씬 직관적인 구조라고 느꼈습니다.

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

아직 제가 FSD에 대한 이해가 충분하지 않아서 그렇게 느끼는 것일 수도 있지만,
FSD 아키텍처를 적용하다 보면 분명 경계가 애매하거나 모호하게 느껴지는 지점들이 존재한다고 생각했습니다.
이런 경우에 코치님께서는 어떤 기준으로 레이어를 나누시는지 궁금하고,명확하게 판단하기 어려운 상황에서는레이어의 정합성보다도 일관성을 유지하는 것이 더 중요하다고 보시는지 궁금합니다!