[Next.js] 전역 객체, .env 타입 설정하기

😥발생한 문제?

"use client";

import { useEffect } from "react";

const KakaoMap = () => {
  useEffect(() => {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_API}&autoload=false`;
    document.body.appendChild(script);

    script.onload = () => {
      window.kakao.maps.load(() => {
        const container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스
        const options = {
          //지도를 생성할 때 필요한 기본 옵션
          center: new window.kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
          level: 3, //지도의 레벨(확대, 축소 정도)
        };

        const map = new window.kakao.maps.Map(container, options); //지도 생성 및 객체
      });
    };
  }, []);
  return <div id="map" className="w-[500px] h-[500px]"></div>;
};

export default KakaoMap;

현재 카카오 맵을 사용하기 위해 카카오 맵 API를 Script로 불러온 상황입니다.

모든 코드가 정상적으로 작동 하지만, window.kakao 코드에서 타입 에러가 나는 상황입니다.

카카오 맵 API는 전역 객체에 kakao라는 객체를 추가해주는데, 이 부분의 타입 설정을 해보려 합니다.

😎문제 해결!

아주 간단하게 루트 디렉토리 type.d.ts 파일을 만들어 해결할 수 있습니다!

//types.d.ts
declare global {
  namespace NodeJS {
    interface ProcessEnv {
      NEXT_PUBLIC_KAKAO_MAP_API: string | undefined;
    }
  }
  interface Window {
    kakao: any;
  }
}

export {};

Window타입에 kakao 타입을 추가함으로써 타입 에러를 방지할 수 있었습니다!

덤으로 .env에 설정한 환경 변수들 역시 이곳에서 타입 설정을 할 수 있습니다!

🧐 왜 해결 되는 걸까?

d.ts 파일을 통해 타입스크립트가 자바스크립트로 컴파일 될 때 타입을 설정해주는 것인데, export{} 이 부분을 통해서 이 파일이 module로써 작동되게 해준다.

 

타입스크립트 책 한권을 정독해야 할 필요성을 느꼈다.