[KAKAO MAP] 01 설정

[KAKAO MAP] 01 설정

Kakao map api 를 사용하기 위한 기본적인 설정을 다룹니다.

사용도구

  • vscode

다루는 내용

  • 프로젝트 생성
  • kakao 개발자 센터 계정 필요함
  • kakao 개발자 센터에서 애플리케이션 생성
  • 지도 띄우기

1.프로젝트 생성

샘플 프로젝트를 작성할 디렉토리를 원하는 위치에 생성합니다.

vscode 실행 후 메뉴에서 Open Folder 클릭후 방금 전 생선한 디렉토리를 선택합니다.

이제 이곳에서 코드를 만들 것입니다.

kakao 지도를 사용하기 위해 왼쪽 메뉴에서 두개의 파일을 생성합니다.

  • index.html - 지도를 보여줄 html 파일
  • app.js - 지도 관련 기능들을 이곳에 구현합니다.

  • New File 아이콘을 클릭해서 파일을 생성할 수 있습니다.

파일을 생성한 후 아래와 같이 두 장의 파일이 존재해야 합니다.

TXT
[PROJECT-ROOT]
  +- app.js
  +- index.html

메뉴에서 index.html 선택합니다.

편집창에 문자열 html을 입력 후 템플릿 목록에서 html:5를 클릭합니다.

  • 자동으로 html5 형식의 기본 템플릿 생성됨

아래와 같이 템플릿이 생성된 것을 확인합니다.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>kakao map demo</title>
</head>
<body>
  
</body>
</html>
  • ctrl+s로 저장

지도를 사용하는데 필요한 설정 정보를 확인한 후 코드를 작성할 것입니다.

2. kakao 개발자 센터 계정

계정이 없다면 https://developers.kakao.com/ 에서 새로운 계정을 준비합니다.

로그인 후 상단의 내애플리케이션을 클릭합니다.

아래와 같이 새로운 애플리케이션을 등록하는 화면이 나옵니다.

  • 애플리케이션이란 지도를 이용할때 필요한 키값과 키 접속을 허용할 도메인 등을 설정하는 곳입니다.(애플리케이션이라고 하지만 설정 정보와 같음)

애플리케이션 추가하기를 클릭해서

  • 앱이름
  • 사업자명

...을 아무 값이나 입력합니다.(기능에 문제없음)

아래와같이 애플리케이션이 생성되면 클릭해서 설정 화면으로 이동합니다.

설정 화면에서는 두군데를 확인해야 합니다.

  • 앱키 - 구현할 지도 애플리케이션에서 사용할 키를 확인합니다.(가져다 써야 함)
  • 플랫폼 - 앱키 사용을 허가할 도메인 정보를 입력합니다.

2.1. 앱키 확인

메뉴에서 앱키를 클릭하면 4개의 키값이 나옵니다.

웹브라우저에서 지도를 사용하려면 JavaScript 키를 사용해야 합니다.

2.2. 플랫폼

메뉴에서 플랫폼 클릭 후 WEB 플랫폼 등록을 클릭합니다.

아래와 같이 JavaScript 키를 사용할 수 있는 도메인 정보를 입력하는 화면이 나타납니다.

section 3 에서 코드를 작성하고 도메인과 포트번호를 확인한 후에 사이트 도메인을 입력할 것입니다(일단 위치만 확인함)

3. 샘플 코드 작성

section 2에서 확인한 값을 사용해서 지도를 그려줍니다.

3.1. 라이브러리 추가

다시 vscode로 돌아가서 index.html 에 지도를 띄울 코드를 추가합니다.

index.html
<!DOCTYPE html>
<html lang="en">
  ...
<body>
    <!-- 지도가 보여질 영역 -->
    <div id="map" style="width: 500px; height: 400px"></div>
</body>

  <!-- 1. import kakao api -->
  <script
    type="text/javascript"
    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=[JavaScript키값]"
  ></script>

  <!-- 2. import app js file -->
  <script src="app.js"></script>
</html>
  • body 태그 안에 <div></div> 를 생성하고 id 속성값을 map으로 지정함. id="map" 은 javascript로 지도를 삽입할 위치를 찾는데 사용됨. 너비와 높이는 각자 적절히 지정함
  • section 2.2. 플랫폼 에서 사이트 도메인 설정은 아직 하지 않았습니다. section 3에서 테스트서버를 실행한 후에 설정을 추가합니다.

위 코드에서 .../sdj.js?appkey=[...] 위치에 section 2.1. 에서 확인한 JavaScript키를 붙여넣습니다. 만일 키값이 3b0e6af2116ca8d6541860a2696da636 라면 아래와 같이 코드를 수정합니다.

HTML
  <!-- 1. import kakao api -->
  <script
    type="text/javascript"
    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3b0e6af2116ca8d6541860a2696da636"
  ></script>

나중에 지도 관련 코드를 작성할 app.js도 함께 import합니다.(현재는 아무런 코드가 없는 상태)

저장후(ctrl+s) 메뉴에서 index.html을 선택한 후 마우스 우클릭을 합니다.

위와같이 탭 오른쪽에 하얀 점이 보이면 수정 후 저장되지 않았다는 뜻입니다. 반드시 ctrl+s 를 눌러서 저장합니다.

3.2. Liver Server 설치

vscode에서 현재 작업중인 html, css 등을 테스트 서버에서 실행해볼 수 있습니다. 이를 위해서 Extension을 설치합니다.

vscode에서 Extension 버튼을 클릭합니다.

아래와같은 화면에서 Live Server 로 extension을 검색합니다.

  • 비슷한 아이콘이 있을 수 있으니 이름과 저작자를 잘 확인합니다.

검색결과를 클릭하면 오른쪽에 설치 페이지가 나옵니다. install 을 클릭해서 Live Server 를 설치합니다.

설치가 끝나면 Explorer 버튼을 눌러서 소스코드 편집 메뉴로 이동합니다.

3.3. Liver Server 실행

Explorer 메뉴에서 index.html 을 선택한 후 마우스 우클릭을 합니다.

Live Server가 설치되었다면 context menu에 Open with Live Server 메뉴가 등장합니다. 이 메뉴를 클릭하면 브라우저에서 index.html 을 확인할 수 있는 포트 정보가 나옵니다.

  • vscode 하단에 5500 번 포트에서 서버가 실행중이라고 나타남(각자 값이 다를 수 있음)

포트 번호를 결합해서 아래와 같은 주소를 브라우저 주소창에 붙여넣습니다.

TXT
http://localhost:5500
  • 각자의 포트번호를 확인

아직 플랫폼/사이트도메인 설정이 없기때문에 지도가 나타나지 않습니다.

문제를 확인하기 위해 브라우저에 내장된 유용한 도구를 사용할 것입니다.

401 Unauthorized 확인하기

브라우저 화면에서 마우스 우클릭 후 검사(inspect)를 클릭합니다.

브라우저 한쪽 면에 chrome dev tool 이 나타납니다.

  • 웹애플리케이션의 상태 및 문제를 확인할 수 있는 다양한 도구들

위와같은 화면에서 Network 탭을 클릭한 후 페이지를 새로고침하면 아래와 같이 로드에 실패한 리소스가 빨간색 글씨로 나타납니다.

  • Network 탭 클릭
  • All 클릭으로 모든 리소스 로드된 상태를 출력
  • 401 오류 확인 - kakao javascript 라이브러리 로드에 실패했음

401 오류 해결

이미 기술했듯이 플랫폼/사이트도메인 설정을 추가해서 오류를 수정합니다.

브라우저 주소창의 http://주소:포트번호를 복사한 후 section 2.3 의 화면으로 돌아가서 편집 화면에 붙여넣습니다.

저장을 누른 후 다시 브라우저로 돌아와서 지도가 올바로 나타나는지 확인합니다.

4. 소스코드 

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>kakao map demo</title>
  </head>
  <body>
    <h3>kakao map configuration</h3>
    <!-- 지도가 보여질 영역 -->
    <div id="map" style="width: 500px; height: 400px"></div>
  </body>

  <!-- javascript key!!!!!!!! -->
  <!-- 1. import kakao api -->
  <script
    type="text/javascript"
    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3b0e6af2116ca8d6541860a2696da636"
  ></script>

  <!-- 2. import app js file (order!!!) -->
  <script src="app.js"></script>
</html>

app.js
// 아무 내용 없음