[JavaScript] 카카오 우편번호 API 간단하게 적용하기
- WEB
- 2021. 6. 28.
다음 카카오는 국내 우편번호 및 주소 DB를 서비스에 쉽게 적용할 수 있도록 API를 제공하고 있다. 행정안전부에서 제공하는 최신 DB를 업데이트해 사용하므로 정확하고 별도로 키를 발급받을 필요도 없어 좀더 간편하다. 단, API 호출을 위해서는 파일을 서버에 올려놓고 진행해야 한다. 그냥 HTML을 실행시키면 동작하지 않는다.
실습 목표는 위 화면처럼 '우편번호찾기' 버튼을 누르면 카카오에서 제공하는 우편번호 검색창이 나타나고 최종 주소를 확정하면 우편번호와 주소에 해당 값이 자동으로 입력되는 것이다.
우선 우편번호와 주소를 담을 테이블을 코딩한다. input 태그에서 우편번호를 담는 id값은 zipcode, 주소를 담는 id 값은 address로 지정했다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>카카오 우편번호 API TEST</title>
</head>
<body>
<table border="1">
<tr>
<td width="200">우편번호</td>
<td>
<input type="text" name="zipcode" id="zipcode" size="7">
<input type="button" value="우편번호찾기">
</td>
</tr>
<tr>
<td>주소</td>
<td>
<input type="text" name="address" id="address" size="70">
</td>
</tr>
</table>
</body>이제 자바스크립트를 통해 카카오의 우편번호 API를 사용하면 된다. 우편번호 서비스를 제공하는 카카오 사이트에 접속한다.
'기본 사용법'이라는 단락을 보면 우편번호 검색 팝업창을 띄우고자 하는 페이지에 삽입할 코드를 제공한다. 이 코드를 head 태그 사이에 넣어준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>카카오 우편번호 API TEST</title>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
// 예제를 참고하여 다양한 활용법을 확인해 보세요.
}
}).open();
</script>
</head>
<body>
<table border="1">
<tr>
<td width="200">우편번호</td>
<td>
<input type="text" name="zipcode" id="zipcode" size="7">
<input type="button" value="우편번호찾기">
</td>
</tr>
<tr>
<td>주소</td>
<td>
<input type="text" name="address" id="address" size="70">
</td>
</tr>
</table>
</body>oncomplete: function(data)의 인자인 data는 주소 정보를 담고 있는 객체다. 담고 있는 정보의 갯수가 꽤 많다.
이번엔 테스트를 위해 만들어놓은 zonecode와 address만 사용하도록 한다. 아래는 최종 구현 코드다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert</title>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function kakaopost() {
new daum.Postcode({
oncomplete: function(data) {
document.querySelector("#zipcode").value = data.zonecode;
document.querySelector("#address").value = data.address
}
}).open();
}
</script>
</head>
<body>
<table border="1">
<tr>
<td width="200">우편번호</td>
<td><input type="text" name="zipcode" id="zipcode" size="7"
readonly>
<input type="button" value="우편번호찾기"
onclick="kakaopost()"></td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" name="address" id="address" size="70">
</td>
</tr>
</table>
</body>
</html>- 스크립트 태그 사이
function kakaopost() {}: 카카오에서 제공한 기능을 하나의 함수 안에 넣어줌 - 우편번호 찾기 버튼:
onclick="kakaopost()"를 통해 버튼을 눌렀을 때 해당 기능을 호출 document.querySelector("#zipcode").value = data.zonecode;: zipcode라는 아이디를 가진 input 태그 value에 가져온 우편번호 값을 저장document.querySelector("#address").value = data.address: address라는 아이디를 가진 input 태그 value에 가져온 주소 값을 저장
반응형
'WEB' 카테고리의 다른 글
| [JavaScript] jQuery - each() 메서드 | 반복해서 요소에 접근 (0) | 2021.07.01 |
|---|---|
| [JavaScript] 원하는 HTML 요소(Element) 찾아가는 방법 (0) | 2021.06.29 |
| [JavaScript] .sort(function(a, b) { return a - b; })가 작동하는 원리? (2) | 2021.06.26 |
| [HTML / CSS] 복수 메뉴바 만들기 - float: left | overflow: hidden (0) | 2021.06.23 |
| [HTML] 입력 받는 <form> | Scanner와 작별 (0) | 2021.06.22 |