들어가며🤔
이번에 기회가 되어 싱크톤 공모전을 나가게 되었다. 개발단계에서 지도API를 사용하여 Map을 띄우는 부분을 맡게 되었다. map을 띄우는건 react-kakao-maps-sdk 를 사용하여 띄웠는데 문제가 생겼다. map이 초기에 렌더링이 되지 않고 페이지가 나온것이다.
문제점📝
react-kakao-maps-sdk 을 이용하여 Maps 이미지 렌더링이 되지 않는다. Test라는 글자 위에 Maps가 활성화 되어야 하는데 되지 않는 문제점이 발생 한 것이다.
해결방법💡
Script 불러오기
밑에 보이는 코드는 document.jsx 컴포넌트다. maps를 사용하려면 스크립트에 꼭 필수적으로 추가해야 할 것들이 보인다.
-
type : sciprt 의 타입은 text/javascript 로 입력해주어야 한다.
-
strategy : 스크립트의 로딩 전략. 쉽게 말해 웹 성능 최적화를 도와줄 속성이다. 사용할 수 있는 전략은 4가지가 있다. 자세한 설명은 Next.js Docs - Strategy 에서 참고 가능하다.
beforeInteractive: Next.js 코드 이전과 페이지 하이드레이션이 발생하기 전에 로드합니다.
afterInteractive: ( 기본값 ) 일찍 로드되지만 페이지에 약간의 수분 공급이 발생한 후입니다.
lazyOnload: 브라우저 유휴 시간 동안 로드됩니다.
worker: (실험적) 웹 워커에 로드합니다. -
//프로토콜 : KAKAO_SDK_URL 을 보면
//로 시작하는데 상대 프로토콜을 사용하면 사용자의 http,https 환경에 따라 자동으로 프로토콜을 따라서 실행된다고 설명되어 있다. Kakao 지도 Web API 가이드 -
librabies : src url에는 sdk 뒤에 사용할 라이브러리를 불러 올 수 있다.
libraries=사용할라이브러리 -
autoload : script를 동적으로 로드하게 되면 로드가 다 끝나기도 전에 kakao api를 불러오는 코드가 먼저 실행 될 수 있기 때문에 이 autoload를 false로 만들어 자동으로 로드 되는 것을 꺼준다음, 코드 실행 부분에서 load 메서드를 사용하면 된다.
// _document.jsx
const API = process.env.NEXT_PUBLIC_KAKAO_APP_JS_KEY;
const KAKAO_SDK_URL = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${API}&libraries=services,clusterer&autoload=false`;
import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';
export default function Document() {
return (
<Html lang="ko">
<Head>
<Script
type="text/javascript"
strategy="beforeInteractive"
src={KAKAO_SDK_URL}
></Script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}kakao is not defiend
Script 태그가 다 로드 되기 전에 Kakao API를 사용하는 코드가 먼저 실행 되었기 떄문에 발생하는 에러이다.
위에서 알려준 Script 태그에 auto=false 와 beforeInteractive 로 설정해주면 kakao 혹은 window is not defiend 오류를 만날 확률이 줄어든다.
참고사이트
Kakao Maps API - Docs
autoload=false관련 DevTalk
react-kakao-maps-sdk
