들어가며 …
경희대학교 GDSC 스프린트 챌린지를 진행하며 실시간으로 데이터를 띄워 줄 일이 생겼다. (주기는 약 5분 정도)
정말 간단한 프로젝트지만 지도 API를 웹 상에서 띄워보는 것은 처음이기도 하고,
실시간으로 어떻게 데이터를 뿌려주는 게 좋을지 고민이 되었다.
따라서 이 프로젝트를 진행하며 학습하고자 하는 것은 아래와 같다.
- 사용자의 위치에 따라 데이터를 fetch 하되, 특정 주기마다 자동으로 업데이트 된다. (5분 정도)
- 지도를 이동시키면 해당 위치에 맞게 데이터를 fetch 해온다.
이번 포스팅 목표: 네이버 클라우드 플랫폼에서 서비스를 등록해 api 키를 발급 받고, 프로젝트에 연결한다.
1. API KEY 발급
먼저 네이버 클라우드(https://www.ncloud.com/)로 접속해, (계정이 없다면) 회원가입 후 로그인한다.
그리고 서비스를 이용하려면 필수적으로 결제수단도 등록해주어야 한다.
2. 콘솔 접속
완료 되었다면 콘솔에 접속해, Services ⇒ AI/NAVER API로 이동한다.
3. application 등록
Map api의 요금 정보이다.
기본적인 지도 제공 api인 Web Dynamic Map을 사용하려고 한다. 월 600만 건까지 무료이다. (24년 11월부터 1000 ⇒ 600 으로 변경되었다)
다음과 같이 서비스 명을 작성하고,
서비스 환경도 등록해주었다.
vite project라서 일단 localhost:5173 입력
추후 배포 시 도메인을 다시 입력해줄 예정이다!
또, 찾아보니 https와 http는 구분하지 않는다고 한다.
4. 완료, client ID 보관하기
등록 버튼을 누르면 완료된다.
client ID를 프로젝트에서 사용한다!
5. react 프로젝트에서 지도 불러오기 ( + api key 숨기기 )
https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html
NAVER Maps API v3
NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.
navermaps.github.io
(공식 문서에 설정 뿐만 아니라 예제까지 잘 나와있다.)
React + Vite 프로젝트에서 네이버 지도 설정하기
1) .env 파일을 프로젝트의 최상단에 생성
2) api key 입력
// .env
REACT_APP_MAP_KEY = 12345678 // CRA
VITE_MAP_KEY = 12345678 // VITECRA와 VITE의 경우가 다르다.
VITE는 “VITE_” 접두사를 붙여야 인식하고, CRA의 경우 "REACT_APP_" 을 붙여야 한다.
이거 몰라서 왜 안될까.. 삽질했던
3) .gitignore (중요)
//.gitignore
.env.env 입력 (push할 때 .env 파일을 제외하기 위함)
4) index.html의 <head> 태그에 <script> 태그 추가
<script type="text/javascript"
src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=%VITE_MAP_KEY%">
</script>VITE_MAP_KEY 부분만 수정해서 입력해주면 된다.
5) Map 객체 호출, 렌더링
import { useEffect, useState } from 'react'
import './App.css'
import Header from './components/Header';
function App() {
const [map, setMap] = useState(null);
// 맵 호출
useEffect(()=>{
const initMap = () => {
const map = new naver.maps.Map("map", {
center: new naver.maps.LatLng(37.5665, 126.9780), // 초기 위치
zoom: 18,
});
setMap(map);
}
initMap();
},[]);
return (
<>
<Header/>
<div id="map" style={{ width: "100%", height: "100vh" }} />
</>
)
}
export default App
렌더하고 싶은 태그에 객체 생성 시 넣어준 동일한 id를 주면 된다.
나의 경우 그냥 "map"으로 했다.
마치며
마커, 현재 위치 설정, 데이터 fetch 등 더 자세한 내용은 다음 포스팅에서 다룰 예정이다!
'웹' 카테고리의 다른 글
| [색인 설정] 내 티스토리 블로그가 구글에서 검색되지 않는 이슈 (3) | 2025.04.07 |
|---|---|
| Web Workers API : 자바스크립트에서도 멀티쓰레딩이 가능하다? (1) | 2025.01.22 |
| [네이버 지도] 2. 현재 위치 설정하기 (Geolocation web api + React custom hook) (0) | 2024.11.24 |