[UniUnity 개발일지] 2. Node.js 서버에 카카오 지도 API연결하기

UniUnity 개발일지 카카오지도 사용하기

진행하는 파트의 중점적인 부분이 지도 API에 불러온 상점들의 위치를 표시해주고 분류별로 나누어주는건데,

그러기 위해서는 지도 API가 필수적으로 필요하기 때문에 API를 뭘 쓸지 좀 고민했다.

우선 카카오 지도 API를 사용하게된 이유는

1. 구글의 경우는 한국을 중점으로 한 지도가 아니기 때문에 상대적으로 날 것(?)의 느낌이 강함
2. 네이버 지도의 경우는 좀 복잡하고 관련 자료가 공식 문서 외에는 잘 찾기가 힘듬. 추가로 네이버 지도 앱은 종종 위치를 잘 못 찍는다는 사례를 많이 봐왔기 때문...

결과적으로 1. 한국에 중점적인 지도인가? 2. 해당 API에 관한 외부 자료가 많이 있나?를 충족하는게 카카오였다.

그리고 생각보다 카카오 지도 api를 많이 사용하시는 듯..!

 

---

​

우선 지도만 띄우는 작업은 서버를 건들일 일이 없기 때문에 해당 작업은 ejs,css, js만 건드렸다.

우선 카카오 개발자 웹 사이트에 들어가서 로그인을 하면 '내 애플리케이션' 이라는 공간이 있는데, 여기서 자신이 사용하려는 프로젝트 이름 적어서 만들면 인증키를 바로 발급해준다.

나는 웹 애플리케이션을 사용하기 때문에 사용하는 웹 도메인 주소를 등록해줘야 한다. 아직 외부 서버 주소를 발급/연결하지 않았고, 현재는 우선 해당 지도 API가 잘 받아와지는지에 대한 과정이기 때문에 나는 우선 localhost:3000으로 설정했다.

http://localhost:3000/retailer 연결하였을 때 지도 API가 나오기 때문에 그 주소를 써줘야 하나?라고 생각했는데 url주소에 '/'가 들어가면 안된단다. 결과적으로 http://localhost:3000로 등록했을 때 잘 됐음.

그리고 인증받은 "자바스크립트 KEY"를 사용하면 되는데, 본인이 리액트로 개발한다 하면 리액트 인증키도 다 발급해주기 때문에 그걸 쓰면 된다. 본인한테 필요한거 사용하면 됨.

그리고는 아래의 코드를 html(ejs) 파일에 추가해준다. header에 쓰던 body에 쓰던 상관 없음.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됨"></script>

그리고 body부분에 지도를 넣을 부분 생성하기

나는 style부분은 따로 css파일로 관리해서 빼줬다.

<div id="map" style="width:500px;height:400px;"></div>

그리고 아래의 자바스크립트 코드를 넣어야 하는데,

var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
	center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
	level: 3 //지도의 레벨(확대, 축소 정도)
};

var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

나는 이걸 retailerPage.js라는 파일을 따로 생성해서 거기다가 넣어주고, 그리고 해당 js파일을 retailer.ejs로 불러오는 식으로 했는데 그런 식으로 했더니 안됐음... 아마도 저걸 연결 해줘야 하는 부분이 있을텐데 내 능력 부족

그래서 retailer.ejs에 있는 body부분에 script 태그로 감싸서 바로 넣어줬다.

참고로 저 LatLng은 위경 좌표(위도, 경도)를 인자로 넣어서 생성하는 클래스로, 해당 center는 지도 생성 시 가장 기본(처음)으로 나오는 위치를 나타낸다.

아무튼 페이지에서는 잘 나오긴 한다.

​

카카오 지도 API에서 제공해주는 문서가 있으니까 이 문서를 참고하면서 이용해야함!

https://apis.map.kakao.com/web/guide/

---

++

retailerPage.js로 script js파일 따로 생성해서 head부분에

<script src="/js/home/ratailerPage.js"></script>

해었는데 안된 이유가,

저 선언을 지도를 넣기 위해 만들어준 'map' div태그 뒤에 선언되었어야 했었음.

앞에 넣으니 retailerPage.js -> map으로 읽게 되어서 retailerPage.js에서 'map'이라는 객체를 못찾은게 이유가 된것 같음....

선언 순서를 생각 안하고 했어서 이런 문제일거라고 생각도 못함...

결과적으로 아래와 같은 순서로 코드에서 선언했더니 아주 잘 연결되었다는...

<!-- 카카오 지도 API 사용 -->
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 key"></script>
<!-- 지도 -->
    <div class="col" id="map">
<!-- 지도 사용 JS -->
    <script src="/js/home/ratailerPage.js"></script>

뭐 이런 바보가...(근데 예전에는 JS파일 선언 코드를 위로 보내줘도 잘 작동한 것 같은데...)