여러분들은 주소나 길을 검색할 때 어떤 방법을 사용해서 검색을 하시나요?
아마 검색창으로 주소를 검색하게 되면 마주하게 되는 첫번째 페이지가
바로 지도 페이지를 먼저 보게 되실겁니다.
주소지를 검색하게 되면 위와 같이 지도 페이지가 나타나고
우리는 이 지도에서 쉽게 경로나 주소를 파악할 수 있습니다.
상대방에게 현재 내가 있는 위치를 알려주기에도 매우 적합한 방식이고
이 맵을 내 프로젝트 안으로 적용할 수 있다면 내가 만든 페이지에 접속하는 사용자에게
좀 더 좋은 편의성을 제공해줄 수 있지 않을까요?
그럼, 카카오 맵 API 를 이용해서
내 프로젝트 안에 지도를 직접 구현해보도록 하겠습니다.
1. 카카오 맵 (Kakao Map) 적용하기
카카오 맵을 구현하기 위해 필요한
카카오 맵 API 를 먼저 받아와 보겠습니다.
카카오에서 제공하고 있는 카카오 지도 API 페이지로 접속합니다.
페이지에 접속했다면,
어떤 브라우저에서 카카오 맵 API 를 사용할 건지를 선택해야 하는데
가운데에 있는 Web 을 선택해야 합니다.
Web 홈페이지에 접속한 후,
왼쪽 하단의 메뉴바에서 [ 키 발급 ] 메뉴를 클릭해 발급 페이지로 들어갑니다.
현재, 로그인이 되어 있지 않다면
카카오 아이디를 이용해 로그인을 해주셔야 정상적으로 접속할 수 있습니다.
로그인까지 완료하셨다면,
아래의 페이지에서 [ 애플리케이션 추가하기 ] 버튼을 클릭합니다.
추가하기 버튼을 클릭하면,
애플리케이션 추가하기 모달이 새로 오픈이 됩니다.
여기에서는 앱 이름과 사업자명을 필수로 입력해주신 후,
저장 버튼을 클릭하면 새로운 애플리케이션이 생성됩니다.
❗ 위의 앱 이름 codeCampMap 과 사업자명은 예시입니다.
사용하기 편한 이름으로 입력해주세요.
애플리케이션을 생성하셨나요?
생성하신 애플리케이션을 클릭하면 상세 정보를 볼 수 있는 페이지로 이동할 수 있습니다.
방금 생성한 애플리케이션을 클릭해보세요!
여러가지 종류의 앱 키가 생성된 걸 볼 수 있는데
이 앱 키를 이용해서 카카오 맵 API 와 연동을 할 수 있습니다.
각각의 용도에 맞는 키를 이용하면 되는데,
우리는 JavaScript 키를 이용해서 연동을 해야하므로
JavaScript Key 값만 제대로 나오는지 확인해주시면 됩니다.
이제, 방금 생성한 JavaScript 앱 키를 이용해서
내 프로젝트에 카카오 맵을 구현해보도록 하겠습니다.
Kakao maps API 페이지의 Guide 페이지로 이동하면
카카오 맵을 적용하는 방법이 상세하게 정리되어 있습니다
카카오 맵 왼쪽 탭에서
Guide 탭을 클릭해서도 이동 가능합니다.
Guide 페이지로 들어왔다면, [ 지도를 띄우는 코드 작성 ] 부분에서
카카오 맵을 설정하는 가이드 라인을 찾을 수 있습니다.
위의 방법을 이용해서
프로젝트에 카카오 맵을 적용할 수 있습니다.
그런데.. 저 코드를 Next JS 에서는
어디에 넣어야 할지 감이 오시나요?
위의 가이드 라인은 바닐라 (Original) JavaScript 에서는
HTML 과 결합해서 사용이 가능한 코드이지만
React 에서, 특히 Next JS 에서는 HTML 로 접근할 수 있는 방법이
한정적이기 때문에 위의 가이드라인으로는 구현할 수가 없습니다.
무엇보다 가이드라인에서 사용하고 있는 document 객체는
서버사이드 렌더링을 지원하는 Next JS 에서는 화면을 렌더하기 전에는
생성되지 않는 값 (= undefiend) 을 가지게 되므로
가이드라인의 방식을 그대로 구현하게 되면 오류를 발생시키게 됩니다.
자, 그럼 다른 방식으로
Nest JS 에서 카카오 맵을 구현해보도록 하겠습니다.
먼저 설정해야 되는 부분이 있습니다.
바로 카카오 맵에서 제공하는 스크립트를 내 프로젝트 안에 적용시켜줘야 합니다.
아래의 코드를 프로젝트 최상위에 호출해주세요.
import Head from 'next/head';Head는 Next JS 에서 기본적으로 제공하는 기능입니다.
HTML 에서 Head 태그 안으로 다른 기능들을 호출해서 사용할 수 있는 것 처럼
Next JS의 Head 컴포넌트를 이용해 동일한 기능을 사용할 수 있습니다.
Head컴포넌트를 불러오셨다면, 해당 페이지가 return 하는 시점에서
카카오 맵 스크립트를 호출할 수 있는 코드를 새로 추가해줍니다.
// return(
// <>
<Head>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey='JavaScript 앱 키 입력'"></script>
</Head>
// </>
//)
스크립트를 추가하실 때,
src 속성으로 카카오 맵의 스크립트를 가져오게 되는데
'appkey=' 속성 안에 자신의 계정의 JavaScript App Key 값을 넣어주셔야 합니다.
앱 키 값까지 넣어줬다면, 이제 내 프로젝트에서
카카오 맵의 스크립트 파일을 호출할 수 있게 됩니다.
호출한 스크립트과 HTML 을 결합해서
화면에 카카오 맵을 출력시켜 보도록 하겠습니다.
카카오 맵을 호출시켜줄 수 있는 JS 코드와
카카오 맵을 호출받아 출력시켜 줄 수 있는 div 태그를 하나 생성해줍니다.
const container = document.getElementById('map');
//지도를 담을 영역의 DOM 레퍼런스
const options = {
//지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
new kakao.maps.Map(container, options);
//지도 생성 및 객체 리턴
// return(
// ...
<div id='map' style={{ "width" : "500px", "height" : "400px" }}></div>
// )
JS 코드의 경우에는
container 라는 상수 값에 'map' 의 이름을 가지는 id 태그를 가져와 담아준 후,
new kakao.maps.Map 의 카카오 스크립트의 기능을 이용해 id 태그에 지도를 생성해줍니다.
options 상수는 카카오 맵을 호출할 때의
초기값을 설정해주는 역할을 합니다.
'map' 이라는 id 태그에 지도를 생성해주므로,
return 부분에 'map' 의 id 이름을 가지는 div 태그도 하나 생성해주셔야겠죠?
여기까지가 가이드라인의 카카오 맵 출력 방법입니다.
저장 후, 페이지를 새로고침 해볼까요?
아! 전에 설명드린 것과 같이
페이지가 렌더 되는 시점에서는 document 가 undefined 한 값을 가진다고 했었죠?
서버사이드 렌더링의 특징 중 하나입니다!
그러면, document 를 사용하는 시점을
document 가 생성된 시점 이후로 변경해주는 코드가 필요할 거 같습니다.
useEffect 를 이용해서
페이지가 렌더되고 document 객체가 생성된 이후에서
카카오맵을 호출할 수 있도록 변경해줍니다.
여기까지 저장하신 후
페이지를 새로고침 해보세요.
카카오 맵이 잘 출력 되시나요?
마우스를 클릭해서 지도를 이동해보세요!
2. 카카오 맵 (Kakao Map) Custom
카카오 맵도 웹 에디터와 동일하게
원하는 기능들로 커스텀을 할 수가 있습니다.
📖 카카오 맵 API 페이지 - Sample 페이지를 참고해보세요!
a. 지도 초기 위치 설정하기
📖 카카오 맵의 [ 지도 생성하기 ] 페이지를 참고해보세요!
적용한 카카오 맵 페이지를 실행시켜 보면
카카오 본사의 위치가 초기 위치로 잡혀 있습니다.
카카오 맵을 적용한 페이지의 useEffect 부분을
한번 살펴볼까요?
options 라는 이름으로 선언된 객체 안에
center 라는 키 값으로 주소값이 지정되어 있는 부분이 있습니다.
첫번째 인자는 초기 위치에 대한 경도 값,
두번째 인자는 초기 위치에 대한 위도 값을 받아옵니다.
설정된 경도와 위도값에 따라서
처음 카카오 맵을 호출할 때 초기 위치 값을 변경시킬 수 있습니다.
아래의 코드로 한번 변경시켜 볼까요?
center: new kakao.maps.LatLng(37.4848929702844, 126.89537799629241)
페이지를 새로 고침한 후,
초기에 위치 값이 잘 변경되었는지 확인해보세요!
경도와 위도 값을 쉽게 알아보는 방법은
구글 지도에서 오른쪽 마우스로 쉽게 확인할 수 있습니다.
💯 도전 ::
초기 위치값을 강남역으로 설정해보세요.
b. 마커 추가하기
📖 카카오 맵의 [ 마커 생성하기 ] 페이지를 참고해보세요!
지도에서 표시를 고정하고 싶을 때는 마커를 이용합니다.
우리가 추가했던 카카오 맵에서도 마커 기능을 제공하고 있습니다.
한번, 마커도 추가해볼까요?
일단 추가할 마커의 초기 위치 값을 잡아주겠습니다.
const markerPosition = new kakao.maps.LatLng(37.4848929702844, 126.89537799629241);지도의 초기 위치 값을 설정해주는 방법과 동일하게
마커에 대한 초기 위치값을 경도, 위도로 설정해줄 수 있습니다.
카카오 맵을 호출해주는 useEffect 함수 안으로 추가해주시면 됩니다.
초기 위치 값을 설정했으니,
화면에 출력해줄 마커에 대한 정보를 설정해줍니다.
const marker = new kakao.maps.Marker({
position: markerPosition
});마커를 생성할 때,
옵션으로 받는 position 에 마커의 위치값을 넣어주면
설정된 초기 위치 값에 마커를 생성하게 됩니다.
자, 여기까지가 마커에 대한 설정부분이고
화면에 출력되는 건 아직 아무것도 없습니다.
마커를 생성했으니, 생성한 마커를
화면에 출력시켜줘야겠죠?
marker.setMap(map);생성된 마커의 .setMap 메소드를 이용하는데
어떠한 맵에 해당 마커를 생성할 건지에 대한 지도 정보를 넣어줘야 합니다.
아, 근데 지도에 대한 정보는 어디서 받아와야 할까요?
이미 우리는 앞의 과정에서 만들어 놓은 게 있습니다.
kakao.maps.Map 을 이용해서
지도를 담을 영역인 container 와 초기 위치값을 설정하는 options 로
카카오 맵을 화면에 출력했던 걸 기억하시나요?
이 정보값을 map 이라는 상수에 할당을 하고
생성할 마커에게 '이 지도에 마커를 생성해 줘' 라는 의미로
map 상수를 setMap 메소드의 인자값으로 넣어줄 수 있습니다.
저장 후, 새로 고침을 해보세요.
위와 같이 지도에 마커가 잘 표시되나요?
💯
도전 1 ::
지도에 표시되는 마커의 스타일을 변경해보세요.
도전 2 ::
마커에 클릭 이벤트를 이용해 함수를 실행해보세요.
