React 네이버지도api 기본편(feat : client key 숨기기)

import { useEffect } from "react";
import { MAP_SDK_ID } from "src/assets/constant/HTML_ID";

const NAVER_CLIENT_KEY = import.meta.env.VITE_NAVER_CLIENT_KEY;

const MapTest = () => {
  const script = document.createElement("script");
  script.id = MAP_SDK_ID;
  script.src = `https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${NAVER_CLIENT_KEY}&callback=map_callback`;
  script.async = true;
  document.head.appendChild(script);

  useEffect(() => {
    let map = null;
    let marker = null;
    const initMap = () => {
      map = new naver.maps.Map("map", {
        //지도 추가, 좌표를 기점으로 주변 지도가 추가된다.
        center: new naver.maps.LatLng(37, 127.039573),
        zoom: 13,
      });

      // marker = new naver.maps.Marker({
      //   position: new naver.maps.LatLng(37, 127.039573), //Marker 추가, 좌표에 마커가 찍힌다.
      //   map,
      //   icon: {
      //     content: `
      //       <img alt="marker" src={vectorIcon} /> //마커에 사용할 이미지
      //     `,
      //   },
      // });
    };
    initMap();
  }, []);

  const mapStyle = {
    width: "340px",
    height: "220px",
    margin: "0 auto",
    borderRadius: "30px",
  };

  return <div id="map" style={mapStyle} />;
};

export default MapTest;