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.includes() / 특정 문자열을 포함하는지 확인하는 메서드

JavaScript / Object / String.includes() / 특정 문자열을 포함하는지 확인하는 메서드

.includes() .includes()는 문자열이 특정 문자열을 포함하는지 확인하는 메서드이다. IE는 Edge부터 지원한다. 문법 string.includes( searchString, length ) searchString : 검색할 문자열로 필수 요소이다. 대소문자를 구분한다. length : 검색을 시작할 위치이다. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 한다. 예제 abzcd가 z를 포함하는지 검사한다. z를 포함하므로 true를 반환한다. 'abzcd'.includes( 'z' ) zcd가 z를 포함하는지 검사한다. z를 포함하므로 true를 반환한다. 'abzcd'.includes( 'z', 2 ...

JavaScript / Plugin / Swiper / 슬라이더 플러그인

JavaScript / Plugin / Swiper / 슬라이더 플러그인

Swiper는 널리 사용되는 슬라이더 플러그인 중의 하나입니다. 다양한 옵션을 제공하며, 해상도에 따라 다른 옵션을 줄 수 있어 반응형 사이트에 사용하기 좋습니다. 홈페이지 : https://swiperjs.com/ GitHub : https://github.com/nolimits4web/swiper Swiper는 IE를 지원하지 않습니다. 만약 IE 지원이 중요하다면, IE를 지원하는 Swiper 구 버전을 사용하거나 다른 슬라이더를 사용하세요. 기본 사용법 스크립트 파일과 CSS 파일을 연결합니다. 다음은 CDN을 이용하여 연결하는 코드입니다. <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> <link ...

JavaScript / 함수 / isFinite() / 매개변수가 유한한 수인지 검사하는 함수

JavaScript / 함수 / isFinite() / 매개변수가 유한한 수인지 검사하는 함수

isFinite() isFinite()은 매개변수가 유한값인지 검사하는 함수입니다. 문법 isFinite( value ) value : 검사할 값을 입력합니다. 유한한 숫자이면 true, 무한한 숫자 또는 숫자가 아니면 false를 반환합니다. 예제 123.123은 유한한 숫자이므로 true를 반환합니다. Infinity는 무한한 숫자이므로 false를 반환합니다. Not a Number는 문자이므로 false를 반환합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript / 요소 추가하기 / .createElement(), .createTextNode(), .appendChild()

JavaScript / 요소 추가하기 / .createElement(), .createTextNode(), .appendChild()

자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. 이 때 필요한 자바스크립트 속성은 다음과 같습니다. .createElement() .createTextNode() .appendChild() .createElement()는 요소를 만듭니다. 예를 들어 .createElement( 'h1' ) 은 다음과 같은 코드를 생성합니다. <h1></h1> .createTextNode()는 선택한 요소에 텍스트를 추가합니다. 예를 들어 .createTextNode( 'My Text' ) 는 My Text라는 문자열을 만듭니다. .appendChild()는 선택한 요소 안에 자식 요소를 추가합니다. 다음은 Click이라는 텍스트를 가진 button 요소를 추가하는 예제입니다. <!doctype html> <html ...

JavaScript / Object / Date / 당월 말일 구하는 방법

JavaScript / Object / Date / 당월 말일 구하는 방법

다음은 2022년 3월 1일이다. Date( 2022, 2, 1 ) 날짜 자리에 0이 들어가면 전달 말일이다. 즉 다음은 2022년 2월 28일이다. Date( 2022, 2, 0 ) 이를 이용하여 현재 달의 말일을 구할 수 있다. 다음은 오늘 날짜를 출력하는 것이고... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...

JavaScript / 주석(Comment) 넣기

JavaScript / 주석(Comment) 넣기

한 줄 주석 한 줄 주석은 //로 만듭니다. // single line comment // 앞은 코드로 처리하고, // 뒤는 주석으로 처리합니다. 예를 들어 var jb = 'hi'; // Comment 라고 var jb = 'hi';는 코드로 인식합니다. 여러 줄 주석 여러 줄을 주석으로 만들 때는 /*와 */로 둘러쌉니다. /* Comment 1 Comment 2 ​*/ 읽기 좋게 다음과 같은 모양으로 만들기도 ...

JavaScript / Object / Date

JavaScript / Object / Date

현재 날짜와 시간 가져오기 Date()로 현재 날짜와 시간을 가져온다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; font-size: ...

JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트

JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트

JavaScript의 onsubmit 이벤트를 이용하면 폼의 값을 전송하기 전에 어떤 작업을 하게 할 수 있습니다. 간단한 예제로 어떻게 작동하는지 알아보겠습니다. 예제 1 간단한 회원 가입 페이지를 만듭니다. 전송 버튼은 input 태그로 만듭니다. Register를 클릭하면 ok.html로 이동합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript / Object / String.concat() / 문자열을 이어 붙이는 메서드

JavaScript / Object / String.concat() / 문자열을 이어 붙이는 메서드

.concat()  .concat()은 문자열을 이어 붙이는 메서드입니다. 문법 string1.concat( ) string1은 필수 요소, string2 등은 선택 요소입니다. 인수가 문자열이 아닌 경우 먼저 문자열로 변환한 다음 string1에 연결합니다. 예를 들어 'ab'.concat( 'cd', 'ef' ) 는 abcdef입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> ...

JavaScript / Object / Element.setAttribute() / 요소의 속성 값을 정하는 메서드

JavaScript / Object / Element.setAttribute() / 요소의 속성 값을 정하는 메서드

.setAttribute() .setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정합니다. 문법 element.setAttribute( 'attributename', 'attributevalue' ) attributename에는 속성 이름을, attributevalue에는 속성값을 넣습니다. 예를 들어 document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' ) id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다. 예제 id 값이 abc인 요소의 href 속성값을 변경하는 예제입니다. <!doctype html> <html lang="ko"> ...