JavaScript / 다음(카카오) 우편번호 검색 서비스 사용하는 방법

다음(카카오)에서 우편번호 검색 서비스를 무료로 제공한다. 팝업 창에 Powerd by kakao가 표시되고, 기본 모양이 투박하다는 단점이 있지만, 빠르게 주소 검색 서비스를 구현해주는 고마운 서비스임에는 틀림이 없다.

자세한 사용법은 아래 링크에 있다.

https://postcode.map.daum.net/guide

너무 상세한 설명이라 이해가 어렵다면, 최소한의 코드로 만들고, 필요한 것을 하나씩 추가하는 게 좋다.

기본 예제와 작동 방식

아래는 최소한의 코드로 작성한 것이다. [우편번호 찾기]를 클릭하면 팝업이 뜨고, 검색 후 주소를 클릭하면 우편번호와 주소가 입력된다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
    <style>
      * {
        box-sizing: border-box;
      }
      input {
        height: 40px;
        vertical-align: middle;
        border: 1px solid #dadada;
        padding: 0px 15px;
      }
    </style>
  </head>
  <body>
    <p>
      <input type="text" id="zip-code" placeholder="우편번호">
      <input type="button" onclick="execDaumPostcode()" value="우편번호 찾기">
    <p>
    </p>
      <input type="text" id="address-1" placeholder="도로명주소" style="width: 500px">
    <p>
    </p>
      <input type="text" id="address-2" placeholder="상세주소" style="width: 500px">
    </p>
    <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
    <script>
      function execDaumPostcode() {
        new daum.Postcode( {
          oncomplete: function( data ) {
            document.getElementById( 'zip-code' ).value = data.zonecode;
            document.getElementById( 'address-1' ).value = data.address;
          }
        } ).open();
      }
    </script>
  </body>
</html>

작동 순서는 다음과 같다.

  1. 우편번호 찾기를 클릭하면 execDaumPostcode() 함수를 호출한다.
  2. 팝업이 뜬다.
  3. 주소를 검색하고 결과 목록에서 주소를 클릭하면, 주소 정보를 양식에 전송한다.

가져올 정보와 어떤 양식에 값을 넣을지는 아래와 같은 코드로 정한다. 우편번호(data.zonecode)를 ID가 zip-code인 양식에 넣으라는 뜻이다.

document.getElementById( 'zip-code' ).value = data.zonecode;

가져올 수 있는 정보 목록은 아래 링크에 있다.

https://postcode.map.daum.net/guide#attributes

상세 주소에 포커스 맞추고, 전송 받은 정보는 읽기 전용으로 만들기

주소 검색 후 상세 주소에 바로 입력할 수 있게 하려면 아래와 같은 코드를 추가한다.

document.getElementById( 'address-2' ).focus();

가져온 값을 변경하지 못하게 하려면 inputreadonly를 추가한다.

<input ... readonly>

아래는 지번 주소를 추가하고, 가져온 정보는 읽기 전용으로 만들고, 상세 주소에 포커스를 맞춘 것이다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
    <style>
      * {
        box-sizing: border-box;
      }
      input {
        height: 40px;
        vertical-align: middle;
        border: 1px solid #dadada;
        padding: 0px 15px;
      }
    </style>
  </head>
  <body>
    <p>
      <input type="text" id="zip-code" placeholder="우편번호" readonly>
      <input type="button" onclick="execDaumPostcode()" value="우편번호 찾기">
    <p>
    </p>
      <input type="text" id="address-1" placeholder="도로명주소" style="width: 500px" readonly>
    <p>
    </p>
    <input type="text" id="address-1-1" placeholder="지번주소" style="width: 500px" readonly>
  <p>
    </p>
      <input type="text" id="address-2" placeholder="상세주소" style="width: 500px">
    </p>
    <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
    <script>
      function execDaumPostcode() {
        new daum.Postcode( {
          oncomplete: function( data ) {
            document.getElementById( 'zip-code' ).value = data.zonecode;
            document.getElementById( 'address-1' ).value = data.address;
            document.getElementById( 'address-1-1' ).value = data.jibunAddress;
            document.getElementById( 'address-2' ).focus();
          }
        } ).open();
      }
    </script>
  </body>
</html>

초기화 버튼 만들기

inputreadonly를 추가한 경우 값을 지울 수 없다. 초기화 기능을 넣고 싶다면 다음과 같이 한다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
    <style>
      * {
        box-sizing: border-box;
      }
      input {
        height: 40px;
        vertical-align: middle;
        border: 1px solid #dadada;
        padding: 0px 15px;
      }
    </style>
  </head>
  <body>
    <p>
      <input type="text" id="zip-code" placeholder="우편번호" readonly>
      <input type="button" onclick="execDaumPostcode()" value="우편번호 찾기">
      <input type="button" onclick="execDaumPostcodeReset()" value="초기화">
    <p>
    </p>
      <input type="text" id="address-1" placeholder="도로명주소" style="width: 500px" readonly>
    <p>
    </p>
    <input type="text" id="address-1-1" placeholder="지번주소" style="width: 500px" readonly>
  <p>
    </p>
      <input type="text" id="address-2" placeholder="상세주소" style="width: 500px">
    </p>
    <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
    <script>
      function execDaumPostcode() {
        new daum.Postcode( {
          oncomplete: function( data ) {
            document.getElementById( 'zip-code' ).value = data.zonecode;
            document.getElementById( 'address-1' ).value = data.address;
            document.getElementById( 'address-1-1' ).value = data.jibunAddress;
            document.getElementById( 'address-2' ).focus();
          }
        } ).open();
      }
      function execDaumPostcodeReset() {
        document.getElementById( 'zip-code' ).value = null;
        document.getElementById( 'address-1' ).value = null;
        document.getElementById( 'address-1-1' ).value = null;
        document.getElementById( 'address-2' ).value = null;
      }
    </script>
  </body>
</html>
같은 카테고리의 다른 글
JavaScript / Object / String.substr() / 문자열 추출하는 메서드

JavaScript / Object / String.substr() / 문자열 추출하는 메서드

.substr() .substr()은 문자열에서 특정 부분만 골라낼 때 사용하는 메서드입니다. 문법 string.substr( start, length ) start로 시작 위치를 정하고 length로 잘라낼 문자열의 길이를 정합니다. 예를 들어 var str = '123456789'; document.write( '<p>substring( 1, 5 ) : ' + str.substr( 1, 5 ) + '</p>' ); 는 23456을 출력합니다. start 값은 필수이고, length를 지정하지 않으면 문자열의 끝까지를 가져옵니다. 예제 <!doctype html> <html lang="ko"> ...

JavaScript / Object / document.title / 문서의 제목을 가져오거나 변경하는 속성

JavaScript / Object / document.title / 문서의 제목을 가져오거나 변경하는 속성

.title .title 속성으로 문서의 제목을 가져오거나 변경할 수 있습니다. 문법 1 document.title 문서의 <title> 태그의 내용을 반환합니다. 문법 2 document.title = 'ABC' 문서의 <title> 태그의 내용을 ABC로 바꿉니다. 예제 문서의 제목 JavaScript를 출력하고, 제목을 CODING FACTORY로 바꿉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write ( '<p>' ...

JavaScript / 메모

JavaScript / 메모

인코딩 함수, 디코딩 함수 인코딩 함수 escape() encodeURI() encodeURIComponent() 디코딩 함수 unescape() decodeURI() decodeURIComponent() IE8에서 last-child, nth-child 등 가상 클래스 적용시키는 방법 selectivizr HTML 문서의 style 태그 안에 넣은 CSS 코드에는 적용되지 않는다. 외부 CSS 파일에만 적용됩니다. jQuery, prototype 등 다른 자바스크립트 라이브러리가 필요하다.

JavaScript / Object / Array.every() / 모든 원소가 조건에 맞는지 검사하는 메서드

JavaScript / Object / Array.every() / 모든 원소가 조건에 맞는지 검사하는 메서드

.every() .every()는 배열의 모든 원소가 조건에 맞는지 검사하는 메서드입니다. 모든 원소가 조건을 만족하면 true, 하나라도 만족하지 않으면 false를 반환합니다. 예제 배열의 원소를 오름차순으로 검사하고, 조건을 만족하지 않는 원소가 있으면 검사를 중지하고 false를 반환합니다. 모든 원소를 다 검사했는데 조건을 만족하지 않는 원소가 없으면 true를 반환합니다. 원소가 없는 빈 배열은, 조건은 만족하지 않는 원소가 없으므로 무조건 ...

JavaScript / Library

JavaScript / Library

Uncategorized html5shiv - IE 8 이하에서 HTML5 태그 지원하게 해주는 라이브러리 imagesLoaded - 이미지가 로드되었음을 감지하는 라이브러리 Masonry - 벽돌 쌓기 모양으로 요소를 배열해주는 라이브러리 Respond.js - IE8 이하에서 미디어 쿼리(Media Query)를 사용하게 해주는 라이브러리 turn.js - 책장을 넘기는 듯한 플립(flip) 효과를 만들어 주는 라이브러리

IE8, IE9에서 placeholder 적용되게 하는 방법

IE8, IE9에서 placeholder 적용되게 하는 방법

input이나 textarea에 placeholder 속성으로 어떤 내용을 입력할 지 안내할 수 있다. HTML5에 새로 추가된 속성으로 label을 대체할 수 있는 유용한 속성이다. placeholder를 이용한 간단한 예는 다음과 같다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Attribute | placeholder</title> <style> ...

JavaScript / Object / Array.reverse() / 원소의 순서를 반대로 만드는 메서드

JavaScript / Object / Array.reverse() / 원소의 순서를 반대로 만드는 메서드

.reverse() .reverse()는 배열의 원소의 순서를 반대로 만드는 메서드입니다. 순서가 바뀐 배열을 새로 만드는 것이 아니라, 기존 배열의 순서를 바꿉니다. 예제 4개의 원소를 가진 배열을 만들고 출력합니다.. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, sans-serif; } </style> </head> <body> <script> var jbAry = [ 1, 2, 3, 4 ...

JavaScript / Object / String.repeat() / 문자열을 반복한 값을 반환하는 메서드

JavaScript / Object / String.repeat() / 문자열을 반복한 값을 반환하는 메서드

.repeat() .repeat() – 문자열을 반복한 값을 반환하는 메서드입니다. IE는 Edge부터 지원합니다. 문법 string.repeat( count ) 예제 'abc'.repeat( 2 ) abc를 두 번 반복한 abcabc를 반환합니다.

JavaScript / Object / Element.removeAttribute() / 요소의 속성을 제거하는 메서드

JavaScript / Object / Element.removeAttribute() / 요소의 속성을 제거하는 메서드

.removeAttribute() .removeAttribute()는 요소의 속성을 제거하는 메서드입니다. 문법 element.removeAttribute( attributename ) 예를 들어 document.getElementsByTagName( 'h1' ).removeAttribute( 'class' ); 는 문서의 첫번째 h1 요소의 class 속성을 제거합니다. 예제 첫번째 h1 요소의 class 속성을 제거해서 글자색이 검정색이 됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } .abc { color: red; } </style> </head> <body> <h1 class="abc">Lorem ...

JavaScript / 연산자 / 비교 연산자

JavaScript / 연산자 / 비교 연산자

변수의 값을 어떤 값 또는 다른 변수와 비교할 때 사용하는 것이 비교 연산자(Cpmparison Operator)입니다. 비교 연산자는 8가지가 있는데, 각 연산자의 의미를 알아보겠습니다. == ==는 '같다'입니다. 변수 타입과 상관없이 값이 같으면 참입니다. 즉 5 == 5 도 참이고 '5' == 5 도 참입니다. != !=는 '같지 않다'입니다. === ===는 '엄격하게 같다'입니다. '엄격하게'의 의미는 변수 타입까지 고려한다는 것입니다. 변수의 값 뿐 아니라 ...