Javascript 카카오(다음) 주소 API 사용해서 주소 검색 기능 만들기

개발 계획

다음에서 제공하는 우편번호 서비스를 사용하여 주소 검색 기능을 만드는 방법입니다.

제가 만들 주소 검색 기능은 다음과 같습니다.

1. 주소 검색 버튼을 클릭하면 다음 주소 API 창을 불러온다.
2. 주소를 검색하고 나온 결과값을 주소 칸에 받아와서 표시한다.

개발 코드

필요 코드 임포트

다음 주소 API를 사용하기 위해서는 다음 코드를 넣어 API를 임포트 해줘야합니다.

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

 

버튼에 함수 연결

주소 검색 버튼을 클릭했을 때 주소 검색창이 나오게 하기 위해서는 버튼에 클릭 이벤트를 연결해야 합니다.

버튼에 클릭 이벤트가 발생했을 때 findAddr() 함수가 작동하도록 설정해 주었습니다.

<label for="c_main_address">주소</label>
<input type="text" id="c_main_address" placeholder="배송받을 주소를 검색해주세요" readonly>
<button type="button" id="addressSearch" onclick="findAddr()">주소 검색</button>

javascript에 주소 API 코드 작성

다음은 findAddr() 함수에 주소 검색창을 띄우고 검색 결과를 받아오는 코드를 작성하겠습니다.

<script>
	// findAddr() 함수 정의
	function findAddr() {
		new daum.Postcode({
        	oncomplete: function(data) {
            	// 사용자 주소를 받아올 변수를 정의한다.
                var addr = '';
                
                //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우(R)
                    addr = data.roadAddress;
                } else { // 사용자가 지번 주소를 선택했을 경우(J)
                    addr = data.jibunAddress;
                }
                
                // 부모창의 주소칸에 받아온 주소를 넣는다.
                $("#c_main_address").val(addr);
        	}
     	}).open();
	}
</script>

1. 먼저 사용자 주소를 저장할 변수 addr를 정의합니다.
2. 사용자가 선택한 주소 타입을 도로명 주소와 지번 주소로 구분합니다. data.userSelectedType이 R일 경우 도로명 주소를 의미하고, J일 경우 지번 주소를 의미합니다.
3. addr 변수에 받아온 주소값을 저장합니다. 도로명 주소는 data.roadAddress, 지번 주소는 data.jibunAddress로 받아올 수 있습니다.
4. addr에 저장된 주소값을 부모창의 주소칸에 넣습니다. 주소칸의 id를 c_main_address로 설정했으므로 val() 함수를 이용해 주소칸에 접근하고 값을 설정해줍니다.

val()함수에 대한 설명은 아래 게시글에서 볼 수 있습니다.

Javascript를 jQuery로 변환하기(1) - innerHtml, style, value / html(), css(), val()

개발 결과

주소 검색 버튼을 클릭하면 다음 주소 API 창이 나오고 지번 주소를 클릭하면 지번 주소값이, 도로명 주소를 클릭하면 도로명 주소의 주소값이 부모창의 주소칸에 들어가게 됩니다.