노션 API 이미지 URL 불러올 때 타입 에러 해결하기

🔒 배경

노션 API를 통해 가져오는 cover 이미지가 정상적으로 보이지 않았다. 이미지에 접근하려고 하면 아래와 같이 URL이 정의되지 않았다는 TypeError가 발생했다.

🔐 원인

로컬에서 업로드 한 이미지는 에러가 뜨지만 아래와 같이 노션 데이터베이스에서 기본적으로 설정할 수 있는 갤러리 이미지의 경우에는 잘 출력되는 것을 확인했다.

원인 파악을 위해 Notion Developers 문서를 살펴본 결과 cover 속성은 external과 file 이라는 두 종류의 type을 갖는다는 것을 알게 되었다.

• external : 외부 URL에서 호스팅 되는 이미지
• file : Notion에 직접 업로드 하여 저장한 이미지 (Notion 서버에서 호스팅)

🔓 해결

이를 위해 project.cover 객체가 존재하지 않거나 external 또는 file 속성이 정의되지 않은 경우에도 안전하게 코드를 실행할 수 있도록 처리해주었다.

{
  projects.map((project) => {
    const coverUrl = project.cover?.external?.url || project.cover?.file?.url;
    // ...기타

    return (
      <img
        src={coverUrl}
        className="w-full h-44 object-fit"
        alt="project image"
      />
      //...기타
    );
  });
}