[11팀 서예림] Chapter 2-3. 관심사 분리와 폴더구조

[yerimmseo]

과제 체크포인트

기본과제

목표 : 전역상태관리를 이용한 적절한 분리와 계층에 대한 이해를 통한 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가 아닌 선언적인 함수형 프로그래밍이 적절히 적용되었는가?
• 캐싱과 리프레시 전략이 올바르게 구현되었는가?

과제 셀프회고

과제에서 좋았던 부분

이번 과제를 통해서 FSD를 처음 접하게 되었는데 각 계층의 역할이 명확하게 구분되어있어서 인상깊었습니다. 기존에는 컴포넌트 중심으로 구조를 나누다보니 규모가 커질수록 관심사에 따라서 분리하는게 어려울 때가 있었고 로직을 어디에 위치하면 좋을까 고민도 많았었는데 이번 구조를 활용했을 때 해소되는 점이 있지 않을까...? 한 번 생각해보았습니다.

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

처음에는 이론적인 내용만 읽었을 때 각 용어들이 너무 추상적이게 느껴지고 정확한 개념을 알기가 어려웠습니다. ㅠㅠ 그래도 이번에 직접 프로젝트 구조를 나눠보면서 저 자신만의 기준이 생긴 것 같습니다. entities는 주로 고유한 ID를 가지는 단위로 나누도록 접근했고, features는 이러한 entities를 조합하거나 사용자 관점에서 동작이라고 인식되는 부분을 주로 나누었습니다. widgets도 나름 재사용성과 독립성을 고려하여 분리해보았습니다.

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

이번 과제는 Page 하나를 나누는 것인데도 FSD 방식의 구조를 적용했을 때 생각보다 폴더 수가 꽤 많아진 것을 느꼈습니다. 이것보다 더 복잡하고 큰 규모의 프로젝트에서는 폴더가 훨씬 많아질텐데 그때는 어떻게 관리해야 할지 조금 막연하게 느껴지기는 합니다....!!
그래도 각 기능과 도메인별로 잘 모여있어서 해당 기능과 관련된 폴더만 보면 전반적인 흐름이나 책임을 파악하기 좋을 것 같습니다. 처음 보는 사람도 파일 구조만 따라가면 코드의 흐름을 이해할 수 있을 정도로 역할이 명확히 나뉘는 점은 큰 장점이라고 느꼈습니다.

평소 Vue 기반의 프로젝트를 주로 진행하다보니 React, TypeScript가 익숙하지 않고 Zustand도 처음 사용해보았는데 상태를 정의하고 컴포넌트를 나누는 과정에서 생각보다 시간이 오래 걸린 것 같습니다... ㅠㅠ 만약에 React 환경에 좀 더 익숙했다면 더 빠르게 구조화하고 동작까지 안정적으로 구현할 수 있지 않았을까 하는 아쉬움이 남습니다. TanStack Query도 적용해보고 싶었지만 시간 부족으로 시작하지 못 해본게 아쉽습니다 ..........

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

• 저는 users와 tags는 초기 한 번만 호출해서 전역 상태로 관리하면 될 것 같다고 판단해서 app/api/initApp.ts 파일을 만들었는데요, 거기서 데이터를 불러오고 App.tsx에서 호출하도록 구성했는데 이런 구조와 위치가 적절한지 궁금합니다.....!
  그리고 아직 구현은 안 했지만, 이후에 예를 들어 회원가입을 통해 새로운 유저가 생기는 경우 같은 동적인 상황을 고려하면 일정 주기로 캐시를 갱신하거나 재요청하는 방식이 필요할 수도 있을 것 같은데요. 구조적으로는 어디서 다뤄주는 게 좋을까요? 그대로 app에서 다루면 좋을까요 ?!