리팩토링

스프린트

• 1차: 24.04.06 ~ 24.04.09
• Get 요청 관련 부분들을 모두 공부 후 코드에 적용시켜보며 공부했던 부분들을 공유하기

• 240409
• useQuery isFetching 얼리리턴 해결! ⇒ state.userInfo 전부 쿼리로 이동…
• prefetch !!?!?! 혹은 queryKey에 240408 등..

• 2차 24.04.09 ~ 24.04.15
• useQuery 로 캐싱할 데이터 찾아보고 적용해보기
• mutation 부분까지 공부하고 가능한만큼 적용해보기 ~.~

• 240415
• detailPost staleTime 1분으로둡시다!
• 글수정, 타임테이블 투표 등 변경mutation후에 refetch!
쿼리훅 컨벤션
현재) /hooks/queryHooks 안에서 모든 쿼리훅들 다 관리 중
컨벤션) /hooks/query/use@@@.ts 로 개별파일만들기!
쿼리 키 컨벤션
src/constants/queryKeys
src/constants/@@,,, url 등..
• props 규칙
• 2단계 이상 props drilling인 경우 각 컴포넌트에서 캐싱데이터에 접근

• 3차 24.04.16 ~ 24.04.19 20시
• DetailPage
• DetailPage에서 쿼리캐싱 → props로 넘기기, 다만 2단계 드릴링이 필요한 경우 컨벤션처럼 자식 컴포넌트에서 캐싱데이터에 접근하게끔 수정.
• useMutation 공부 ….^^,,,
• 본문수정/타임테이블 수정 시 useMutation → invalidateQueries
• useQuery의 select 함수!?!?!?
• 응답데이터 중 일부 필드만 골라 반환시킬수있음!
• 지금 response가 무거운데, 이를 활용해서 drilling을 좀 막을 수 있지않을가..!

• 240419
• DetailPage
• 게시글 좋아요 클릭하는 데이터를 ‘클라이언트’ ⇒ ‘서버’ 데이터를 사용함으로써 불필요한 리렌더링을 줄여보자.
• DetailPage 만의 전역상태 postId
• 일단, context API 적용

• 4차 24.04.20 ~ 24.04.25 오전 (목 오전에 진행 상황 DM 보내기)
• 건호님) 폴더구조 바뀐거 반영 → refactor/tanstackQuery 브랜치에 PR
• Suspense 규칙 생각해보기
• DetailPage에서 suspense를 적용할 부분이 크게 post / comment 2가지이다.
→ 본문이 완료되기 전까진 본문+댓글 전체에 로딩

<전체Suspense> !!!!
	<본문>x
	<댓글suspense> 
		<댓글>o
	</댓글suspense>
</전체Suspesne>

• 메인 : <접속중 > <~Card>영역
• query & mutation 남은거
• 좋아요
• card
• 로그인쪽,,, ((((
• useQuery vs useQueryClient
• 어떤 차이가 있을까? 알아보기

• 240426
• Unschedueld → useSuspenseQuery
• Scheduled → useSuspenseQuries
• Mainarea.tsx에서 둘을 감싸는 <Suspense>

• 5차 24.04.27 ~ 24.05.01 20시
• useSuspenseQuries, 4차 해온거 정리해서 tanstackQuery 브랜치로 PR → 이후 Release로 PR
• 성능최적화 종류 / 방법 찾아오기 !!

• 240502
• 배포!

• 6차 24.05.03 ~ 24.05.12 일요일 20시
• 접근성, SEO 올릴 방안 + 시도 해오기
• 이날모일래 mutation적용
• 이날 모일래를 그냥 탠스택없이 axios만 쓰고 있음
• ⇒ 캐싱안되고있음 → 새로 카드 만드는 등 일어났을 때 반영이 안됨..
• invalid쓰려면 mutation,query가 있어야함

• 7차 24.05.13 ~ 24.05.17 금 (20시)
• 공통 컴포넌트 추상화
• 반응형
• Main Page
• Detail Page
• Profile Page
• 탭, 카드 겹침
• 프로필 수정 컴포넌트에 margin-left 부여하기
• 기타 버그
• DetailPage textarea 크기 조절 기능 (좌우로는 안되게끔 막기)
🐞
ㅇㅅㅇ
• 코드스플리팅
코드스플리팅 정리

• 7차 24.05.18 ~ 24.05.23 목 (20시)
• 공통 컴포넌트 추상화 ( 참고 : https://www.youtube.com/watch?v=edWbHp_k_9Y 진유림님 클린 코드)
• feather-icons import 방식 수정 알아보기
• 로직이나 컴포넌트 분리 등 코드 리팩토링 할거 리스트업
리팩토링2
깃허브 위키 정리

• 8차 24.05.24 ~ 24.05.31 금 (20시)
• 위키 초안 써오겠습니다 ㅎ
• 개발일지에 적을거 정리해두기
• 리팩토링2 할만 한것들 바로바로 시작해서 이슈 올리고 작업하기

Redux-Thunk를 Tanstack-Query로 교체하기

• TanstackQuery사용하면서 Errorboundary, Suspense 적용하면 좋을듯

axios 훅 개선

const { response, error, isLoading } = useAxios<IPost[]>(() =>
  getApi(`/posts/channel/${unscheduledChannelId}`),
);

const res = await getApi<IUser[] | IPost[]>(`/search/all/${values}`);

클라이언트 상태관리 이사가볼까