보통 웹사이트에서 주소 입력할 때 나오는 주소검색 창 기능을 구현해보자.
우리가 자주 보던 그 주소검색창은 api를 이용해야한다. 아래의 사이트를 접속 해보면
https://postcode.map.daum.net/guide
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
놀랍게도 상업적 이용도 무료다. 키 발급 또한 필요가 없다..!
아래에 나와있는 카카오에서 만들어놓은 script를 가져와서 복붙 해준다.
그런데 앞에 보면 src의 주소가 //로 시작하는데 사용하는 사이트에 맞춰서 알아서 작업을 해줘서 상관 없단다.
그리고 그냥 이 상태로 쓰면 시작하자마자 저 스크립트가 나올 것이니
이렇게 주소 인풋에 아이디를 준 뒤 그 인풋을 클릭할 때 실행되게 해준다.
그러면 저 인풋 클릭시 우리가 자주 보던 익숙한 팝업창이 나올텐데 저기서 무엇인가를 선택했을 때 나오는 값들 중 우리가 원하는 값을 골라서 인풋 값에 넣어주면 되겠다.
친절하게도 사용법이 잘 나와있다. 원하는 값을 골라준 뒤
이런식으로 값을 넣어주면 되겠다.
이렇게 잘 값이 찍혀나온다.
'비전공자의 코딩 일지 > 학원 수업 정리' 카테고리의 다른 글
코딩 학원 61일차(AJAX proxy) (0) | 2022.08.31 |
---|---|
코딩 학원 60일차(Cross Domain AJAX, navigator, 카카오 지도 api) (0) | 2022.08.30 |
코딩 학원 60일차(AJAX를 활용한 입력 유효성 검사) (0) | 2022.08.30 |
코딩 학원 59일차(AJAX) (0) | 2022.08.29 |
코딩 학원 59일차(jQuery 기타 event) (0) | 2022.08.29 |