모바일 청첩장 프로젝트에서 ' 오시는 길 ' 을 안내하기 위해 Map API가 필요했습니다.

링크 를 따라가시면서 진행하면 편합니다.

애플리케이션 등록

Maps 이용 신청하기 해당 링크로 이동해서 애플리케이션 등록을 해줍니다.

Web Dynamic Map 을 선택해주고, 서비스 환경 등록의 Web 서비스 URL 란에 API를 사용할 곳을 적어줍니다.

저는 배포한 URL과, 로컬에서 구동하기 위해 https://localhost:5173을 등록해주었습니다.

등록 버튼을 클릭합니다.

지도 생성하기

생성된 애플리케이션에서 인증 정보를 클릭하여 Client ID를 가져옵니다.

링크 를 따라 진행합니다.

1. index.html에 아래 코드를 집어넣어줍니다.

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>

⚠️주의⚠️

이 때, key 값을 노출하면 안 된다! 라는 건 모두 알거라고 생각합니다.
따라서 키 값을 숨겨줍니다.
.env 파일을 하나 만들어줍니다.

VITE_APP_NAVERMAP_KEY = 키 값 입력

React는 REACT_APP_NAVERMAP_KEY 로 해줍시다. 저는 vite라서 이름을 다르게 해야합니다.

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=%VITE_APP_NAVERMAP_KEY%"></script>

이렇게 사용하면 됩니다.

2. 아래 명령어로 react-naver-maps를 설치해줍니다. (저는 pnpm을 사용합니다)

pnpm i react-naver-maps

3. 링크의 기본 예제를 갖다 써봅시다.

import { Container as MapDiv, NaverMap, Marker } from 'react-naver-maps';

const Map = () => {
  return (
    <MapDiv
      style={{
        width: '100%',
        height: '600px',
      }}
    >
      <NaverMap>
        <Marker defaultPosition={{ lat: 37.5666103, lng: 126.9783882 }} />
      </NaverMap>
    </MapDiv>
  );
};

export default Map;

결과

잘 불러오는 것을 확인할 수 있습니다❗

⚠️ Typescript를 사용한다면...

타입스크립트를 사용한다면... 해당 링크로 가십쇼...

pnpm i -D @types/navermaps

설치 후

import React, { useEffect } from 'react';

const Map = () => {
  useEffect(() => {
    const map = null;
    const initMap = () => {
      const map = new naver.maps.Map('map', {
        center: new naver.maps.LatLng(37.511337, 127.012084),
        zoom: 13,
      });
    };
    initMap();
  }, []);

  //지도 사이즈 관련 스타일
  const mapStyle = {
    width: '100%',
    height: '300px',
  };

  return (
    <React.Fragment>
      <div id="map" style={mapStyle}></div>
    </React.Fragment>
  );
};

export default Map;

이렇게 설정하십쇼... 공식 문서에 있는 거 따라했더니 ts오류 파티입니다 어케 쓰는거냐고ㅠㅠㅠ
위도, 경도 변환 사이트

• naver 부분에 ts 오류가 날 텐데,
  root 경로에 index.d.ts 추가 후,

declare global {
  interface Window {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    naver: any;
  }
}

export {};

그 다음, tsconfig.app.json 파일에 d.ts 파일 추가해줍니다.

"include": ["src", "index.d.ts"]

중간중간 아 const marker 너 안 썼는데????.. 등등은 @ts-expect-error 등으로 무시해줍시다.

최종

아래 지도를 골라 클릭하면 해당 주소가 검색된 창으로 이동합니다.

---

참고
React Vite에서 .env로 지도 API 키 숨기기
Ncloud 가이드
Maps 이용 신청하기
NaverMap Getting Start