Skip to content

Conversation

@zero0205
Copy link
Collaborator

@zero0205 zero0205 commented Mar 2, 2025

#️⃣ 연관된 이슈

✨ 구현 기능 명세

  • Tanstack Query 설치 및 설정
  • 출석부와 유저 정보 데이터 페칭 로직을 useQuery로 리팩토링
  • 북마크 관련 기능을 useQueryuseMutation으로 변경
  • 방송 목록 무한 스크롤에 useInfiniteQuery 도입

🎁 PR Point

Tanstack Query 도입을 통한 서버 상태 관리 개선

  • 데이터 캐싱으로 중복 요청 감소 및 성능 최적화
  • 로딩/에러를 별도의 상태로 관리할 필요성 감소
  • React Query Devtools를 이용하여 서버 상태 확인 및 디버깅 가능

LiveList를 LivePreviewList로 이름 변경 후 일부분 features로 분리

  • 이름 변경 : LiveList라는 이름은 시청 페이지인 live 페이지와 혼동할 여지가 있다고 판단하여 좀 더 정확한 기능을 설명하도록 LivePreviewList로 이름을 변경했다.
  • features로 분리 : LivePreviewList 위젯에 사용되는 ui들이 모두 해당 widgets/LivePreviewList/ui에 존재했다. widgets 레이어는 features의 ui 코드를 조합해서 하나의 단독적인 기능을 수행하는 ui를 만들기 위한 레이어라고 생각했기 때문에 liveList의 데이터 페칭 로직과 검색, 필터링, 방송 프리뷰 카드 ui를 features 레이어로 분리했다.

정리 자료

🔗Tanstack Query 도입

😭 어려웠던 점

새로 구현하는 것보다 있는 코드 리팩토링이 더 어려운 것 같다. 웬만하면 처음에 개발할 때부터 리팩토링을 최대한 안 할 수 있도록 유지보수를 신경써서 개발하자.

- 상태 관리를 위한 @tanstack/react-query와 devtools 설치
- Query용 ESLint 플러그인 추가
- 무한 스크롤 구현을 위한 react-intersection-observer 설치
- features/liveList 추가
- widgets에 있던 라이브카드, 검색, 필터를 features/liveList로 이동
- useIntersect 훅 shared 레이어로 이동
- IconButton props 변경
@zero0205 zero0205 added ♻️ Refactor 코드 리팩토링 ✨ Feat 새로운 기능 추가 FE labels Mar 2, 2025
@zero0205 zero0205 self-assigned this Mar 2, 2025
@zero0205 zero0205 requested a review from a team as a code owner March 2, 2025 08:16
@zero0205 zero0205 linked an issue Mar 2, 2025 that may be closed by this pull request
4 tasks
Copy link
Member

@seungheon123 seungheon123 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
Collaborator

@g00hyun g00hyun left a comment

Choose a reason for hiding this comment

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

고생하셨습니다 :)

@seungheon123 seungheon123 merged commit 07609bf into develop Mar 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

FE ♻️ Refactor 코드 리팩토링 ✨ Feat 새로운 기능 추가

Projects

None yet

Development

Successfully merging this pull request may close these issues.

⚡️ [Feat] Tanstack Query 도입

5 participants