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

• 문제점 :

미션 1 - 공연 목록 api에서 뮤지컬 상영만 하는 극장 이름만 추리기

미션 2 - 추려낸 극장 이름으로 공연 시설목록 api에서 극장 이름과 극장 id값 추출하기

미션 3 - 극장 이름과 id 값으로 극장 리스트를 만들고 그 id값으로 각각 디테일 페이지 경로 설정해서 만들기

미션 4 - 공연시성상세 api를 받아와서 극장 디테일 페이지 뿌려주기

헉헉 바쁘다 바빠

근데 여기서 너무나도 큰 장벽이 있었으니... 하루 최대 1500건 api 요청.... 대략잡아도 뮤지컬만 하는 극장 수가 100곳 가까이 되는데 api요청을 15번만 하면 내 api key는 블락 ㅋ api가 개똥같다. 

그래서 모든 튜터님들과 고민해본 결과 가장 좋은 방법은...!

 

• 해결 방안 : 

극장이름과 id값을 한번에 받아 목데이터로 보관하기!

공연장 정보는 바뀔 일이 거의 없고 굳이 다른 데이터들과 상호작용하는 데이터들이 아니기 때문에 데이터베이스에 저장하기 보단 프론트엔드 측에서 목데이터로 보관하는게 나을것 같다는 판단! 

 

export const fetchTheaterNameList = async (): Promise<theaterName[]> => {
  const musicalInfo = await fetch(
    `http://www.kopis.or.kr/openApi/restful/pblprfr?service=df0e793f1d47463c9ab5f574c949d9c9&prfstate=02&stdate=20241201&eddate=20261231&cpage=1&rows=100&shcate=GGGA`
  );
  if (!musicalInfo.ok || !musicalInfo) throw new Error('버전정보를 가져오지 못했습니다');

  const text = await musicalInfo.text();
  const musicalData = await parseStringPromise(text, {
    explicitArray: false,
    trim: true
  });

  const newData = Object.values(musicalData.dbs.db);
  const facilityNames = newData.map((item) => item.fcltynm).sort((a, b) => a.localeCompare(b, 'ko'));
  // console.log(facilityNames);

  return facilityNames;
};

 

우선 뮤지컬로 걸러진 극장 이름을 가져오는 api 요청을 먼저 해준다.

 

export const fetchTheaterIdList = async (): Promise<theaterId[]> => {
  const musicalNameList = await fetchTheaterNameList();
  // console.log('???', musicalName);

  // Promise.all로 병렬적 api 요청
  const results = await Promise.all(
    musicalNameList.map(async (name) => {
      const musicalInfo = await fetch(
        `http://www.kopis.or.kr/openApi/restful/prfplc?service=df0e793f1d47463c9ab5f574c949d9c9&cpage=1&rows=100&shprfnmfct=${name}`
      );
      if (!musicalInfo.ok) throw new Error('fetchTheaterIdList api를 가져오지 못했습니다');

      const text = await musicalInfo.text();
      const musicalData = await parseStringPromise(text, {
        explicitArray: false,
        trim: true
      });
      const { fcltynm, mt10id } = musicalData.dbs.db;
      console.log({ fcltynm, mt10id });
      return { fcltynm, mt10id };
    })
  );

  return results;
};

 

ftchTheaterNameList 함수에서 받아온 이름들을 이용해서 promise.all로 각 공연장의 이름을 넣어 필요한 데이터 받아오기

 

 

이런 형태의 목데이터가 만들어졌다! 다행히 전국에 뮤지컬하는 공연장이 그렇게 많지는 않았다 70여개 정도였다. 충분히 프론트엔드 상에서 보관할 수 있는 크기의 데이터들이기 때문에 부담없이 결정!!

 

• 느낀점 :

api를 이용해서 어떤 프로젝트를 진행할 때 우리가 사용할 api에 대해서 깊이 생각을 하고 시작해야겠다... api 때문에 너무 고생 고생 생고생을 함 ㅠㅠ 

그리고 이번 기회에 promise.all 메소드도 사용해보고 이런식으로도 데이터를 관리 할 수도 있구나 라는걸 알게 돼서 좋았다!

결국 헤맨 만큼 내 땅!!!