리액트 심화 주차. (1)

신나는 알고리즘 풀이 시간. 

버거 가게에서 일을 하는 상수는 햄버거를 포장하는 일을 합니다. 함께 일을 하는 다른 직원들이 햄버거에 들어갈 재료를 조리해 주면 조리된 순서대로 상수의 앞에 아래서부터 위로 쌓이게 되고, 상수는 순서에 맞게 쌓여서 완성된 햄버거를 따로 옮겨 포장을 하게 됩니다. 상수가 일하는 가게는 정해진 순서(아래서부터, 빵 – 야채 – 고기 - 빵)로 쌓인 햄버거만 포장을 합니다. 상수는 손이 굉장히 빠르기 때문에 상수가 포장하는 동안 속 재료가 추가적으로 들어오는 일은 없으며, 재료의 높이는 무시하여 재료가 높이 쌓여서 일이 힘들어지는 경우는 없습니다.

 

예를 들어, 상수의 앞에 쌓이는 재료의 순서가 [야채, 빵, 빵, 야채, 고기, 빵, 야채, 고기, 빵]일 때, 상수는 여섯 번째 재료가 쌓였을 때, 세 번째 재료부터 여섯 번째 재료를 이용하여 햄버거를 포장하고, 아홉 번째 재료가 쌓였을 때, 두 번째 재료와 일곱 번째 재료부터 아홉 번째 재료를 이용하여 햄버거를 포장합니다. 즉, 2개의 햄버거를 포장하게 됩니다.

상수에게 전해지는 재료의 정보를 나타내는 정수 배열 ingredient가 주어졌을 때, 상수가 포장하는 햄버거의 개수를 return 하도록 solution 함수를 완성하시오.

 

나의 답(반만 정답.)

function solution(ingredient) {

  let answer = 0;

  let ingredientString = ingredient.join("");

  while (ingredientString.includes("1231")) {

    ingredientString = ingredientString.replace("1231", "");

    answer += 1;

  }

  return answer;

}

 

로직은 얼추 맞았지만, 시간 초과 문제로 오답 처리되었다. 

 

이럴 경우에는 stack을 사용하는 것이 더 좋다는 gpt의 말이 있었어서, 코드를 한 번 바꿔보기로 했다. 

function solution(ingredient) {

    let stack = [];

    let answer = 0;

 

    for (let i = 0; i < ingredient.length; i++) {

      stack.push(ingredient[i]);

 

      if (stack.length >= 4 && stack.slice(-4).join("") === "1231") {

        stack.splice(-4);

        answer++;

      }

    }

 

    return answer;

  }

 

stack이라는 배열을 따로 이용해서, 이 안에 계속해서 ingredient 안에 있는 요소들을 차례차례 순서대로 집어넣는 방식을 택하고 있다.

 

그리고 stack을 합친 것 중에서 마지막부터 세서 4개가 '1231'일 경우에, 그걸 없애고 answer에 1을 더하는 식으로 답을 구하고 있다. 

 

로직 자체는 어렵지 않았지만, stack이라는 개념을 처음 실제로 적용하게 되었다. 

아웃 소싱 프로젝트 진척도. 

트러블 슈팅

오늘은 유튜브 Search API를 사용하여 데이터를 가져오는 과정에서 발생한 트러블슈팅과 해결 과정을 정리해 본다. 특히, nextPageToken을 활용해 데이터를 페이징하고, 이를 **TanStack Query의 useInfiniteQuery**로 구현하는 방법에 대해 상세히 다뤄본다.

 

문제 상황

유튜브 Search API를 활용해 클라이밍 관련 영상 데이터를 가져오고, 무한 스크롤로 결과를 표시하는 기능을 구현하고자 했다.

다만, API가 제공하는 nextPageToken을 제대로 활용하지 못해 데이터 페이징 로직에서 문제가 발생했다.

결과적으로 nextPageToken을 중심으로 한 TanStack Query 구현으로 문제를 해결했다.

해결 과정

1. fetchClimbResults 함수 작성

먼저, 유튜브 API에서 데이터를 받아오는 함수를 작성했다.
이 함수는 pageParam을 통해 다음 페이지의 데이터를 가져올 수 있도록 설계했다.

const fetchClimbResults = async ({ pageParam = "" }) => {

  const data = await getClimbResults(pageParam); // API 호출

  return {

    items: data.items, // 현재 페이지의 데이터

    nextPageToken: data.nextPageToken, // 다음 페이지를 위한 토큰

  };

};

 

 

• pageParam: TanStack Query가 페이지네이션을 위해 전달하는 값이다. 초기 호출 시에는 빈 문자열("")로 설정된다.
• nextPageToken: API에서 제공하는 다음 페이지를 식별하는 토큰으로, 이를 이용해 추가 데이터를 요청한다.

2. TanStack Query의 useInfiniteQuery 설정

무한 스크롤 기능을 구현하기 위해 useInfiniteQuery를 사용했다.
다음은 주요 코드이다.

const {

  data: climbResult,

  fetchNextPage: fetchNextClimb,

  hasNextPage,

  isFetchingNextPage,

} = useInfiniteQuery({

  queryKey: ["climbResults"], // 쿼리 키

  queryFn: fetchClimbResults, // 데이터 패칭 함수

  getNextPageParam: (lastPage) => lastPage.nextPageToken || undefined, // 다음 페이지 토큰

  select: (data) => {

    return data.pages.map((page) => ({

      items: page.items.map((item) => ({

        id: item.id.videoId,

        title: item.snippet.title,

        thumbnail: item.snippet.thumbnails.high.url,

      })),

      nextPageToken: page.nextPageToken,

    }));

  },

});

 

 

코드 분석

1. queryKey
   ["climbResults"]로 쿼리를 식별한다. 여러 데이터 요청이 있을 때 키를 기준으로 구분한다.
2. queryFn
   데이터를 가져오는 fetchClimbResults 함수를 실행한다.
3. getNextPageParam
   lastPage.nextPageToken 값을 통해 다음 페이지를 요청할 수 있도록 한다.
   만약 토큰이 없으면 undefined를 반환해 요청을 종료한다.
4. select
   데이터의 구조를 가공한다.
   각 페이지에서 필요한 정보(id, title, thumbnail)만 추출하고, 클라이언트에서 다루기 쉽도록 단순화한다.

3. 데이터의 구조

클라이언트에서 다룰 데이터는 다음과 같은 형식을 가진다.

 

[

  {

    "items": [

      {

        "id": "cJQ0wgwqBzU",

        "title": "ㄹㅇ 감탄밖에 안나오는 세계1위 클라이머의 실력",

        "thumbnail": "https://i.ytimg.com/vi/cJQ0wgwqBzU/hqdefault.jpg"

      },

      ...

    ],

    "nextPageToken": "CAYQAA"

  }

]

 

4. 데이터 매핑

climbResult 데이터를 활용하려면, 페이지별로 순회하며 각 페이지의 items를 다시 매핑해야 한다.
다음은 매핑 코드이다.

 

climbResult?.map((page) => {

  return page.items.map((item) => {

    return (

      <div key={item.id}>

        <img

          width="300"

          height="180"

          src={item.thumbnail}

          className="rounded-md"

          onClick={() => {

            modalClickHandler(item);

          }}

        ></img>

        <span className="text-[14px]">

          {item.title.substring(0, 23).trim() + "..."}

        </span>

      </div>

    );

  });

});

코드 설명

1. climbResult?.map
   페이지 단위로 순회한다.
2. page.items.map
   각 페이지의 items를 순회하며 개별 데이터를 렌더링한다.
3. substring
   제목이 너무 길 경우, 23자로 자르고 "..."를 붙여 가독성을 높였다.

nextPageToken의 역할

nextPageToken은 다음 페이지의 데이터를 요청하기 위한 핵심 요소다.
TanStack Query의 getNextPageParam과 함께 사용되며, 페이지네이션을 원활히 처리한다.

• 작동 원리
  1. getNextPageParam에서 lastPage.nextPageToken을 반환.
  2. useInfiniteQuery가 해당 토큰을 fetchClimbResults의 pageParam으로 전달.
  3. 다음 페이지 데이터를 요청하여 기존 데이터에 병합.

배운 점

1. TanStack Query와 페이지네이션
   useInfiniteQuery와 getNextPageParam을 활용해 무한 스크롤을 구현하는 방법을 익혔다.
2. 데이터 구조 이해
   API 응답 데이터의 구조를 명확히 이해하고 필요한 부분만 가공하는 것이 중요하다.
3. UI 최적화
   너무 긴 제목은 잘라서 표시하고, 데이터를 효율적으로 매핑하여 깔끔한 UI를 구성할 수 있었다.