WEB API란?
- Framework - 특정 목적을 달성하기 위해 모여진 라이브러리 집합 + 제작을 위한 Convention & Rule
- Library - 누군가에 의해 개발 되어져, 가져다가 사용하기만 하면 되는 도구 개념
- API (Application Programming Interface
LIbrary 내에서 정보은닉 된 영역을 배제한 사용자에게 공개된 부분만을 칭하는 sub 집합
처음으로 카카오 개발 API를 사용해 보았습니다
<!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>Document</title>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
</head>
<!-- 주소 api사용법-->
<body>
<input type="text" id="postcode" placeholder="우편번호">
<input type="button" value="우편번호 찾기" id="btnSearch"><br>
<input type="text" id="address1" placeholder="주소">
<input type="text" id="address2" placeholder="상세주소">
<script>
document.getElementById("btnSearch").onclick = function(){
new daum.Postcode({
oncomplete: function (data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('postcode').value = data.zonecode;
document.getElementById("address1").value = data.jibunAddress; //roadAddress 도로명 주소
}
}).open();
}
</script>
<!--Postcode 생성자 안에 객체 리터럴을 전달받고 잇는데 key value 값으로들어간다 oncomplete = key 값 function = value 값-->
<!-- function (data) {} CALL BACK 함수
다른 함수에 파라머터로 넘겨지는 함수-->
</body>
</html>
카카오 개발 API를 사용하여 응용한
마우스 좌클릭을 누르면 마커를 찍고 우클릭을 누르면 생성된 마커가 제거 되는 API입니다
<!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>Document</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=b70a07e8ebffe5918d15f49ba310485f"></script>
</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>
<div id="clickLatlng"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=b8ea9148719ab9a486f4f297815871a1"></script>
<script>
let mapContainer = document.getElementById('map'); // 지도를 표시할 div
let mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption);
kakao.maps.event.addListener(map, 'click', function (mouseEvent) {
var latlng = mouseEvent.latLng;
var marker = new kakao.maps.Marker({
position: latlng
});
kakao.maps.event.addListener(marker, 'rightclick', function () {
this.setMap(null);
})
marker.setMap(map);
});
</script>
</script>
</body>
</html>