[FE] feat: 리뷰 목록 페이지에 변경된 API 연동 후, 리액트 쿼리 적용 및 무한 스크롤 구현

[soosoo22]

• resolves [FE] 리뷰 목록 페이지에 변경된 API 연동 후, 리액트 쿼리를 적용하고 무한 스크롤을 구현한다 #140

---

🚀 어떤 기능을 구현했나요 ?

리뷰 목록페이지에 변경된 API 연동 후, 리액트 쿼리를 적용하고 무한 스크롤을 구현했어요.

🔥 어떻게 해결했나요 ?

변경된 API 적용

size, lastReviewId가 없어지고 revieweeName, projectName이 추가되었습니다.

export interface ReviewPreviewList {
  revieweeName: string;
  projectName: string;
  reviews: ReviewPreview[];
}

export interface ReviewPreview {
  id: number;
  createdAt: string;
  contentPreview: string;
  keywords: Keyword[];
}

getReviewListApi를 사용할 때 groupAccessCode를 인자로 받고 헤더에 groupAccessCode를 포함시킵니다.

export const getReviewListApi = async (groupAccessCode: string) => {
  const response = await fetch(endPoint.gettingReviewList, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      GroupAccessCode: groupAccessCode,
    },
  });

  if (!response.ok) {
    throw new Error(createApiErrorMessage(response.status));
  }

  const data = await response.json();
  return data as ReviewPreviewList;
};

리액트 쿼리

• ReviewPreviewListPage에서 리액트 쿼리의 useInfiniteQuery 훅을 사용해서 리뷰 목록 데이터를 비동기적으로 가져오도록 했습니다.
• 리뷰 목록 API 호출 함수인 getReviewListApi를 사용해서 데이터를 불러왔습니다.

src/index.tsx ⇒ 리액트 쿼리 적용을 위해 QueryClientProvider 추가했습니다.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';


const queryClient = new QueryClient();

// 중간 코드 생략...


root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={theme}>
        <Global styles={globalStyles} />
        <RouterProvider router={router} />
      </ThemeProvider>
    </QueryClientProvider>
  </React.StrictMode>,
);

무한 스크롤

• useInfiniteQuery 훅을 사용해서 무한 스크롤 기능을 구현했습니다.
• 페이지의 마지막 리뷰가 화면에 보일 때 자동으로 다음 페이지의 리뷰를 불러오기 위해 IntersectionObserver를 설정했습니다.

📝 어떤 부분에 집중해서 리뷰해야 할까요?

api가 계속 변경될 것 같아서 일단은 msw를 사용해서 목 데이터 기반으로 무한 스크롤 기능을 테스트해 주시기 바랄게요!

// src/index.tsx에 전 코드 주석 처리 후 아래 코드를 추가
async function enableMocking() {
  if (process.env.MSW) {
    const { worker } = await import('./mocks/browser');
    return worker.start();
  }
}

enableMocking().then(() => {
  root.render(
    <React.StrictMode>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider theme={theme}>
          <Global styles={globalStyles} />
          <RouterProvider router={router} />
        </ThemeProvider>
      </QueryClientProvider>
    </React.StrictMode>,
  );
});

📚 참고 자료, 할 말

• 레벨 2 미션 상품 목록 코드를 참고했습니다.
• 무한스크롤 정말 어렵네요~~^^

[BadaHertz52]

일단 무스를 끝낸 것에 박수를 보내요.👏👏👏👏👏👏
쑤쑤 리뷰 남겼어요.

[BadaHertz52]

data-id를 사용한 이유가 있을까요?

data-id가 개발자 도구를 켰을때 보이는 거라 서버에서 받은 데이터가 개발자 도구에 바로 보일 거라 보안상 우려가되네요.

[soosoo22]

#164 (comment)

아하.. 보안 이슈도 있군요..
에프이에게 비슷한 질문을 받아서 해당 답변을 읽어보면 될 것 같아요!

[BadaHertz52]

svg를 Icon을 뒤에 붙여주세요.

[soosoo22]

또또또 까먹었네요....😭

[BadaHertz52]

alt가 리뷰 공개/비공개에 따라 달라지면 좋겠어요.

리뷰 공개/비공개에 따른 src,alt, span의 text를 객체로 만들어서 관리하면 좋을것 같아요.

[BadaHertz52]

'px' 또 찾았다!!

[soosoo22]

전체검색에서 px 찾아서 다 고쳤습니다~~~

[BadaHertz52]

pageParam이 무엇일까요?
pageParam이 lastReviewId로 사용되는데, 제가 알고 있기로는 서버에서 lastReviewId를 넘겨주지 않으면 빈값이여야해요. 그런데 pageParam의 기본값이 0이라서 서버에서 lastReviewId가 없을 때 빈값이 아닌 0이 lastReviewId 값으로 들어가게 돼요. 그렇다면 실제 서버와 api연동 시 리뷰 목록 불러오기에서 오류가 날것 같아요.

[soosoo22]

pageParam이 카드 목록 중 마지막 카드 아이템 id예요. 그래서 pageParam 값을 lastReviewId에 넣었어요.

생각해보니 pageParam이 0이 되면 안되는데 0값을 계속 넣어주고 있었네요ㅠㅠ 고마워요!

[BadaHertz52]

1이라는 매직넘버 발견!

코드가 많아서 상수를 분리하는 것을 놓칠 수 있죠
이렇게 놓치는 것을 잡아주는데 코드 리뷰의 순기능일지도?
😊!!

[BadaHertz52]

쑤쑤 ErrorSection의 변경 사항 제꺼에 반영했어요.
ButtonContainer가 삭제되면서 flagment 가 생겼는데 이유는 뭘까요?

[BadaHertz52]

loading,error 에 Suspense, ErrorBoundary를 아직 적용이 안되는 건가요?

error시에도 error.message를 띄워주니 ErrorSection처럼 피그마에 적용한 오류 시안을 ui로 적용하고 있지않네요.

[BadaHertz52]

질문1: console.log는 무한 스크롤을 확인하기 용도인가요? 그렇다면 push에서는 console.log를 지워주어야 하지 않나요?

질문2: 무한 스크롤로 데이터를 불러오는 동안, lastReviewElementRef에서 로딩 중임을 보여주는 UI가 필요해요.

[soosoo22]

질문1 답변 : 무한스크롤 확인하려고 넣었던 코드인데 지우질 않았네요😅

질문2 답변 : 그 부분을 제가 놓치고 있었네요. LoadingBar 컴포넌트를 넣을게요!

[BadaHertz52]

lastReviewId은 타입도 number로 되어있어서 이거를 수정해야겠네요.

[BadaHertz52]

쑤쑤 우선 무스 기능 구현을 성공한 것에 박수를 보내요.👏👏👏👏👏👏👏👏 역시 쑤쑤가 해낼 줄 알았지

쑤쑤의 성장을 바라며 코멘트를 남겨뒀어요. 확인 부탁드려요.

[chysis]

미션 할 때 무한 스크롤 때문에 고생했던 기억이 눈에 선하네요🥲 정말 고생 많았어요
useInfiniteQuery를 사용한 부분은 함께 이야기 나눈 부분이라 별도로 피드백을 남기진 않았어요. 코멘트 확인 부탁해요!

[chysis]

rem 단위로 통일시키면 좋을 것 같아요👀

[soosoo22]

아이고~~~~ 또 px을 썼네요😭
다시는 이런 실수를 반복하지 않겠습니다!!!!!!

[chysis]

<S.ButtonContainer> 내부에서 map을 사용하고, Button 컴포넌트에 key를 추가하는 것은 어떨까요?

<S.Container>
  <S.ButtonContainer>
    {buttons.map((button) => (
      <Button
        // ...
      />
    )}
  </S.ButtonContainer>
</S.Container>

[soosoo22]

아하 key를 추가하는 게 좋겠네요!
<S.ButtonContainer>는 불필요해서 제거했고 <S.Container>안에서 map을 돌리고 Button에 key를 추가했어요!

 <S.Container>
        {buttons.map((button, index) => (
          <>
            <Button
              key={index}
              buttonType={button.buttonType}
              text={button.text}
              image={button.image}
              imageDescription={button.imageDescription}
              onClick={button.onClick}
            />
          </>
        ))}
      </S.Container>

[chysis]

data attribute를 사용한 이유가 궁금해요!

[soosoo22]

export interface ReviewPreview {
  id: number;
  isPublic: boolean;
  reviewerGroup: {
    id: number;
    name: string;
    thumbnailUrl: string;
  };
  createdAt: string;
  contentPreview: string;
  keywords: Keyword[];
}

ReviewPreviewCard 컴포넌트에는 원래 reviewerGroup, createdAt, contentPreview, keywords, isPublic만 필요했지만, 새로운 인터페이스를 정의하지 않고 기존의 ReviewPreview 인터페이스를 재사용하기 위해 id를 추가했어요. id를 사용할 자리가 없어 data-id 속성을 활용했어요.

[BadaHertz52]

data-id={id}

서버에서 받아온 리뷰의 id를 data-id에 써서, html에서 리뷰 id가 노출될 것 같아요.
data-id가 어디에서 사용되고 있는건가요?

[soosoo22]

ReviewPreviewCard 컴포넌트에서 사용되고 있어요. id 제거할게요!

[ImxYJL]

무한 스크롤 끝까지 붙잡고 있던 쑤쑤에게 박수~
크리티컬한 건 이미 바다가 잡아줘서 저는 비교적 간단한 코멘트만 남기고 어프루브 할게요!

[ImxYJL]

Container에서 Content로 이름을 바꾼 이유가 궁금합니다!

[soosoo22]

Layout 안에 Header, Main을 기준으로 Header안에 HeaderContainer가 있는 게 어색한 것 같아서 HeaderContent로 바꿨어요!

<S.Layout>
  <S.Header>
    <S.HeaderContent />
  </S.Header>
  <S.Main />
</S.Layout>

[ImxYJL]

이렇게 123456을 사용하는 부분도 가능하다면 상수화나 간단한 주석이 있으면 나중에 알아보기 더 편할 것 같아요!

[soosoo22]

아하! 고마워용!!! 상수처리 너무 중요하죠!

[ImxYJL]

이렇게 디테일하게 get 핸들러 함수를 작성한 이유는 무한 스크롤 로직(API가 보내주는 데이터를 프론트에서 의도한 대로 처리하고 있는지)이 정상적으로 작동하는지 확인하기 위함이었나요?

[soosoo22]

네 맞아요. 서버에는 리뷰 목록 개수가 많지 않아서 무한스크롤을 제대로 확인하기 힘들어서 get 핸들러 함수에 디폴트 페이지, 추가적으로 불러오는 페이지 개수 등을 구체적으로 명시해서 제대로 기능이 작동하는지 확인했어요

[ImxYJL]

지금은 바빠서 무리겠지만 ㅎㅎ;
IntersectionObserver를 이용한 무한 스크롤 로직은 별도의 훅으로 분리해보면 좋을 것 같아요.
제가 예전에 무한스크롤 훅에 대한 글을 썼었는데 참고해보세용~~ 이거

[soosoo22]

추후 리팩할 부분 중 하나였는데 짚어주셔서 너무 감사해요!!!
참고자료까지 너무 고마워요 올리❤️

[github-actions]

Test Results

24 tests  +12   24 ✅ +12   1s ⏱️ ±0s
10 suites + 4    0 💤 ± 0 
10 files   + 4    0 ❌ ± 0 

Results for commit e237151. ± Comparison against base commit 24e8d94.

[BadaHertz52]

쑤쑤 고생 많았어요.

[chysis]

저엉말 고생많았어요😵‍💫👍

[ImxYJL]

우하하

[BadaHertz52]

😝

[ImxYJL]

돼라!

[donghoony]

수수 최고..