Next.js 심화 프로젝트 SEEWHAT 트러블슈팅 1

• 문제점 1 : 뮤지컬을 상영중인 공연장의 이름을 받아오기 위해 api 요청을 했는데 한 공연장에서 여러 뮤지컬을 상영중이라 공연장 이름이 중복으로 들어옴

const TheaterListPage = async () => {
  const data = await fetchTheaterName();

  return (
    <>
      <div className="mt-32">
        {data?.map((name, _) => {
          return (
            <div key={_} className="border border-white text-white p-5 rounded-md mx-28 my-10 text-xl">
              <Link href={`/theater-list/${name}`}>{name}</Link>
            </div>
          );
        })}
      </div>
    </>
  );
};

 

이렇게 데이터를 받아왔을때는 이런식으로 공연장이 중복으로 들어왔었다.

 

• 해결방안 : 

const TheaterListPage = async () => {
  const data = await fetchTheaterName();

  const uniqueData = Array.from(new Set(data));

  return (
    <>
      <div className="mt-32">
        {uniqueData?.map((name, _) => {
          return (
            <div key={_} className="border border-white text-white p-5 rounded-md mx-28 my-10 text-xl">
              <Link href={`/theater-list/${name}`}>{name}</Link>
            </div>
          );
        })}
      </div>
    </>
  );
};

 

Set(data): 배열의 중복된 값을 제거해 고유한 값들로 구성된 Set 객체를 생성한다.

그리고 그걸 다시 Array.from(Set)을 함으로써 배열의 형태로 만들어준다. 

 

 

그러면 이제 중복된 값은 제거가 된다. 

 

 

---

 

 

 

문제점 2 : 첫번째 api에서 공연장 이름을 받아와서 두번째 api를 호출할 때 적용해야하는데 첫번째 api의 데이터가 배열형태로 들어와서 하나 하나씩 api에 어떻게 적용해야 할지 모르겠다.

 

해결방안 : 튜터님께 물어보니 Promise All을 사용하라고 하심.. 뭔지 모르겠고 나는 지금 너무 힘들고 오늘 하루종일 이 api 때문에 너무 머리가 아프다... 내일 해보겠다..