[API] 다음 주소 찾기 API

주로 회원가입 부분을 만들 때, 우편번호나 도로명 주소를 검색하고 입력하는 기능을 추가하기도 한다. 요청, 허가 없이 누구나 쓸 수 있는 다음 주소 찾기 API를 사용하여, 회원가입의 우편번호 입력 기능을 구현해보자

 

 

 

 

 

일단 HTML과 CSS, JS로 회원가입 부분을 만들었다. 주목해야 할 곳은 우편번호 찾기 부분이다. 우편번호 찾기를 눌렀을 시, 검고 투명한 배경 그리고 x 표시와 함께 하얀색 네모박스를 생성하도록 만들었고, x 표시를 누르면 다시 사라지도록 했다. 우리는 하얀색 네모 박스 안에 다음 주소 API를 넣을 예정이다.

 

 

 

 

 

구글에 '다음 주소 찾기 api'를 검색하면 맨위에 뜨는 페이지가 있는데 클릭한다.

 

 

 

 

그리고 아래로 내려가면 이런 코드가 보이는데, 맨 위의 코드를 복사하고

 

 

 

HTML 파일의 head 부분에 붙여넣기 한다. 반드시 해당 HTML의 js보다 윗줄에 적어야 한다는 것을 명심

 

 

 

위에서 보여준 자바스크립트 코드의 API 부분이다. new daum.Postcode 안에 다음과 같이 적는데, oncomplete은 팝업에서 내가 주소를 클릭했을 때, 무엇을 실행할지를 적으면 된다.

 

일단 파라미터로 적은 data를 콘솔로 찍어 보면

 

주소를 클릭했을 시, 콘솔로 이렇게 나타난다. 우리가 선택한 data는 오브젝트 형식이다.

 

 

 

그럼 oncomplete 에서 저 오브젝트 부분의 값들을 회원가입 우편번호 텍스트 input 의 값으로 넣으면 된다. data의 'zonecode'는 우편번호, 'address'는 주소

 

 

 

 

 

확인해본 결과 값들이 input 텍스트 안에 불려져 왔다.

 

 

 

 

 

카카오 지도를 함께 사용하고 있을 경우 geocoder를 이용, 주소를 불러오면 해당 좌표로 이동해서 지도를 보여준다.