Server/django

[Django] 장고 기초 - API

또잉코딩 2020. 2. 28. 20:40

API란?

Application Programming Interface의 약자로 응용프로그램에서 사용할 수 있도록 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있는 인터페이스를 뜻한다.

응용프로그램 → 우리가 만든 웹 서비스(django project)

운영 체제나 프로그래밍 언어가 제공하는 기능 → 우리가 갖고 있지는 않지만 사용하고 싶은 외부 기능들로 Google, Naver, Facebook, Kakao로 부터 끌어다 쓰고 싶은 기능들

인터페이스 → 연결지어주는 다리 역할

따라서, 우리가 만든 웹 서비스에서 사용할 수 있도록, 외부에서 끌어다 쓰고 싶은 기능을 제어할 수 있는 연결통로(연결수단)를 뜻한다.

 

Maps

NAVER CLOUD PLATFORM에서 회원가입과 결제 수단 등록을 다 해준 후에 아래 URL로 들어갑니다.

https://www.ncloud.com/product/applicationService/maps

 

NAVER CLOUD PLATFORM

cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification

www.ncloud.com

 

이용 신청하기를 눌러줍니다.

 

하단에 +Application 등록 버튼을 눌러줍니다.

 

Application 이름을 등록하고, Maps 중 원하는 service에 체크해줍니다. service 마다 과금 발생시 요금이 다르다고하니 염두해두시고 진행해주세요!!

 

스크롤을 내려 하단에 http://127.0.0.1:8000 를 입력하고 +추가 버튼을 누른 후 등록을 눌러줍니다.

 

그러면 아래와 같은 화면이 뜨는데 App 이름 칸에 있는 인증정보 버튼을 클릭해주세요.

 

Client ID를 복사해줍니다.

 

확인을 누르고 나와서 서비스구분 칸에 i모양 아이콘을 누르면 아래와 같은 설명서라는 info들이 나타나는데 Web Dynamic Map v3 사이트 바로가기 > 이 링크를 타고 가면 됩니다.

 

시작하기를 누르면 여기에 Maps API 예시코드가 있으니 이를 활용해 사용하면 됩니다.

 

저는 가장 기본적인 지도를 불러오는 코드를 가져와봤습니다. 이때, YOUR_CLIENT_ID에 아까 복사했던 Client ID를 적어주는 것을 꼭 기억해주세요!

<!DOCTYPE html>
<html>
<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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>간단한 지도 표시하기</title>
    
    <!--YOUR_CLIENT_ID에 아까 복사했던 Client ID를 적어줍니다.--> 
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script> 
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>

<script>
var mapOptions = {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
};

var map = new naver.maps.Map('map', mapOptions);
</script>
</body>
</html>