Gatsby 코드에서 map을 불러오는 코드를 작성중입니다

카카오맵 API (지도/로컬)
1

/global kakao/
import React , { useEffect } from ‘react’;

export default () => {

useEffect(() => {
    // document.cookie = 'same-site-cookie=foo; SameSite=None; Secure';
    // document.cookie = 'cross-site-cookie=bar; SameSite=None; Secure';

    const script = document.createElement('script');

    script.async = true;
    script.src = "https://dapi.kakao.com/v2/maps/sdk.js?appkey=나의 앱키&autoload=false";

    document.head.appendChild(script);

    script.onload = () => {
        kakao.maps.load(() => {
            let el = document.getElementById('map');
            let map = new kakao.maps.Map(el, {
                center: new kakao.maps.Coords(523951.25, 1085073.75)
            });
        });
    };
}, []);  

return (
    <div>            
        
        <div id="map" style={{ width: "100%", height: "100%" }}>

        </div>                  
    </div>        
)

}

지도불러오는 코드입니다.

이코드를 작동시키면

chrome console화면에
image

이렇게 화면에 표시되는데 문제가 있는것인지 궁금해서 문의드립니다.

2

다른 사이트에서 구워진 쿠키 중, kakao.com 도메인에서 구운 쿠키가
브라우저의 쿠키 보안 정책 중, 특정 스펙을 만족하지 못해서 발생하는 경고입니다.

만약 kakao의 어떤 서비스를 이용하시고 있고(결제나 로그인 등등)
그 서비스가 쿠키 기반으로 동작한다면 문제가 될 수 있겠지만,
(만약 현재 문제가 된다 하더라도 당사에서 브라우저에서 블락이 되지 않도록 빠른 조치가 있을 예정입니다.)
지도 JS SDK는 쿠키를 기반으로 하는 동작은 없으므로
지도 어플리케이션을 개발하시는 입장에서는 무시하셔도 됩니다.

개발시점에 해당 로그가 거슬린다면
브라우저 쿠키를 비우시거나, (주의: 이러면 쿠키 기반의 로그인 페이지들은 모두 로그아웃됩니다.)
(크롬기준)개발자도구 => Application => Storage => Cookies 에서 보이는 테이블에서

  • Domain: .kakao.com
  • SameSite: (None 이 아닌) 빈 값

으로 되어 있는 쿠키들을 선택적으로 삭제해 보세요.

(위와 같이 한다고 하더라도 다시 그 쿠키를 구운 *.kakao.com 사이트를 접속하거나 거기서 로그인 하면 다시 지워야 하는 귀찮은 점이 있습니다. -_-; 너그러이 무시하시는게…)