[Week6/mission] Tanstack Query 입문 1편: useQuery와 useInfiniteQuery로 무한 스크롤과 효율적인 데이터 패칭하기

[starvingorange]

✏️ 작업 내용

#️⃣ 연관된 이슈

#35

📷 작업 결과

작업 결과 사진을 업로드해주세요.

Week6.mp4

💡 함께 공유하고 싶은 부분

해당 주차를 공부하면서 함께 이야기하고 싶은 주제를 남겨주세요.

(어려웠던 부분과 해결 과정, 핵심 코드, 참고한 자료 등)

🤔 질문

해당 주차 워크북을 공부하면서 궁금했던 질문들을 남겨주세요.

✅ 워크북 체크리스트

• 모든 핵심 키워드 정리를 마쳤나요?
  
• 핵심 키워드에 대해 완벽히 이해하였나요?
  
• 실습/미션을 수행하였나요?
  

✅ 컨벤션 체크리스트

• pr 제목을 컨벤션에 맞게 작성하였나요?
  
• pr에 해당되는 이슈를 연결하였나요?
  
• 적절한 라벨을 설정하였나요?
  
• 코드리뷰를 요청하기 위해 reviewer를 등록하였나요?
  
• 닉네임/main 브랜치의 최신 상태를 반영하고 있나요?
  

[JeonSuna]

수고하셨어요!!
갱주님 많이 급하셨나봐요!!! /apis/lp.ts에서 comment api 불러올 때 v1앞에 "/"가 빠져있어욤!!
수정하면 좋을 거 같습니다.
수고하셨어용...즐엠티

[S-Gihun]

get 요청에 / 가 빠져서 못 불러오고 있는 거 같아요

[S-Gihun]

이런 식으로 구현한 이유가 따로 있을까요 ?
backgroundLocation으로 설정하면 어느 페이지에서 url만 바뀌고 Modal 형식으로 LpDetail이 뜨고 있는건지 헷갈리는 거 같아요

[duwlsssss]

고생하셨습니다!

[duwlsssss]

데이터를 처음 가져오는 부분에서 isLoading 을 사용했는데

isLoading은 에러가 발생했을 때도 true일 수 있어 안전하게 사용하려면 isPending으로 상태 체크를 하는 게 좋을 것 같아요!

참고자료
https://www.inflearn.com/community/questions/1338198/ispending-vs-isloading?srsltid=AfmBOopon1fTzslt4xl5Fe-YkjGvm225X6E0bigOQKUUI4W2Fta6MCSY

[duwlsssss]

스켈레톤 컴포넌트에는 개수만 넘기고 컴포넌트 안에서 배열로 처리해줘도 깔끔할 것 같아요!

[S-Gihun]

import { useLocation } from "react-router-dom";

const location = useLocation(); // 현재 위치 기억

{lps?.pages?.map((page) => page.data.data)?.flat()?.map((lp: Lp) => (
  <div key={lp.id} className="relative">
    <LpBoard
      lp={lp}
      onClick={() =>
        navigate(`/lps/${lp.id}`, {
          state: { backgroundLocation: location },
        })
      }
    />
  </div>
))}

현재 Layout에서 사용하는 Modal 형식으로 사용하고 싶으면 이런 식으로 코드를 고쳐야할 거 같네요 !