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

• 문제점 : 컴포넌트에 타입 정의를 이상하게 내리고 있었다.
• 해결 방안 : 

export const fetchTheaterDetail = async (id: string): Promise<TheaterDetail> => {
  const apiKey = process.env.NEXT_PUBLIC_SEE_WHAT_API_KEY;

  const theaterDetail = await fetch(`http://www.kopis.or.kr/openApi/restful/prfplc/${id}?service=${apiKey}`);
  if (!theaterDetail.ok) throw new Error(`fetchTheaterDetail api정보를 받아오지 못했습니다`);

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

  // console.log('detailData', detailData.dbs.db);
  return detailData.dbs.db;
};

 

api 요청을 하는 fetchTheaterDetail 함수에서 타입에 대한 정의를 이런식으로 했다. 

 

 

여기까진 오케이 아주 잘했으~

 

interface TheaterDetailProps {
  params: { id: string };
}

const TheaterDetailPage = async ({ params }: TheaterDetailProps) : Promise<TheaterDetail> => {
  const { id } = params;

  const theaterInfo = await fetchTheaterDetail(id);

  return ( 중략 )

export default TheaterDetailPage;

 

근데 문제는 이제 이 함수를 사용해서 디테일 페이지에 받아온 데이터를 뿌려줘야하는데

처음에 타입을 이렇게 주고 있었다. 

 

저게 왜 잘못된건지 이해하지 못하고 있었음. 근데 뜯어보면 너무 이상함. 

TheaterDetailPage 이 페이지는 리액트 컴포넌트를 반환하는데 promise를 왜 저기다 주고 있는거임?? 

애초에 이 컴포넌트가 promise를 반환하는 함수가 아닌데다가 이 TheaterDetail 타입은 이미 fetchTheaterDetail 함수에서 자기의 쓰임을 다 함!@!

 

여기서 굳이굳이 또 끌고와서 쓸 하등의 이유가 없는것이다!!!!

 

• 느낀점 : 타입스크립트... 어렵다 어려워 제대로 개념을 안잡고 냅다 프로젝트에 뛰어드니까 진짜 말같지도 않게 실수하는 구나...