Skip to content

[1팀 박용호] Chapter 2-3. 관심사 분리와 폴더구조#55

Open
ParkYongHo1 wants to merge 12 commits intohanghae-plus:mainfrom
ParkYongHo1:main
Open

[1팀 박용호] Chapter 2-3. 관심사 분리와 폴더구조#55
ParkYongHo1 wants to merge 12 commits intohanghae-plus:mainfrom
ParkYongHo1:main

Conversation

@ParkYongHo1
Copy link

@ParkYongHo1 ParkYongHo1 commented May 1, 2025

과제 체크포인트

배포링크 https://parkyongho1.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가 아닌 선언적인 함수형 프로그래밍이 적절히 적용되었는가?
  • 캐싱과 리프레시 전략이 올바르게 구현되었는가?

과제 셀프회고

과제에서 좋았던 부분

  1. FSD폴더 구조를 제대로 공부해 볼 수 있었던 한 주였습니다 !
  2. 평소 관심 있었던 tanstack-query와 zustand를 써볼수 있는 과제였습니다 ! 직접 사용해보면서 쓰는 법을 조금은 익힌듯합니다,,,
    하지만 처음 써보는것들이라 AI에 너무 의존을 했던 한주였던것 같습니다... 과제 제출에 급급하여 막 쓴게 아쉬웠습니다,,

Copy link

@ywkim95 ywkim95 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

용호님 고생 많으셨어요!

코드가 너무 깔끔하게 잘 작성되어 있어서 파고들 틈이 거의 없네요 ㅎㅎ
용호님 코드를 보니 제가 아직 부족하다는게 많이 느껴지네요!

과제 고생하셨습니다~~!

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

다른 파일은 전부 1개의 로직만 존재하도록 분리하셨는데 해당 파일은 왜 로직이 2개를 선언했는지 궁금하네요!

Comment on lines +4 to +7
export const postKeys = createQueryKeys("posts", {
fetch: (props: SearchParams & { searchQuery: string; tag: string }) => [props],
tags: () => ["tags"],
})
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

신기하네요 이 라이브러리는 어떻게 동작하는 건가요?

import { deleteComment } from "@/entities/comment/api"

export const useDeleteCommentMutation = () => {
const queryClient = useQueryClient()
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

쿼리 클라이언트를 매번 선언하신 이유가 있을까요? 궁금하네요!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants