[JavaScript] 주소 API 사용하기 / 카카오 주소 API / 다음 주소 API / postcode API

회원가입 홈페이지에서 주소 API 넣어서 사용하기

아래는 html 구조이다.

다음 카카오에서는 무료로 주소 API를 제공한다.

Daum 우편번호 서비스

우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.

postcode.map.daum.net

해당 사이트에서 가져다 쓰면 된다.

팝업을 이용하여 도로명 주소와 지번 주소 모두 보여주기

사용자가 선택한 값 이용하기

iframe을 이용하여 레이어 띄우기

iframe을 이용하여 페이지에 끼워 넣기

주소를 선택하면 지도도 함께 보여주기 등 5개 종류의 다양한 선택지가 있었는데

나는 그 중 1번 선택지를 선택했다.

여기서 예제 코드보기 부분은 링크처리가 되어있어 클릭하면 해당 소스코드를 볼 수 있다.

여기서 가져다가 쓰면 된다! 생각보다 너무 쉬움!

아래는 가져다 쓴 예제이다. 필요한 부분만 이름을 바꿔주었다.

여기서 잠깐..

이 과제를 하면서 어려웠던 점은, 아무리 쉽다고 그냥 가져다 쓴다고 해서 API가 작동하는 것이 아니라는점.

힌트를 주자면..

[Server] Tomcat vs WAS | Web Server와 WAS | 정적컨텐츠 동적컨텐츠

Tomcat과 WAS의 차이점을 알아보자. WAS(Web Application Server) - 개념 DB 조회나 다양한 로직 처리를 요구하는 동적인 컨텐츠를 제공하기 위해서 만들어진 Application Server HTTP를 통해 컴퓨터나 장치에 애..

pudding-coding-jellybean.tistory.com

이 부분을 조금 참고해보자.

굉장한 힌트가 들어있다!

728x90

[Node] Node.js 서버에 css 및 img 파일 경로 지정하기 / node css 적용 안됨 / node css & img server settings (0)	2023.01.12
[Node] Node.js 에서 Express로 서버 사용하기 (0)	2023.01.12
[Javascript] 정리2 (1)	2022.12.27
[Javascript] 정리1 (2)	2022.12.27
[JavaScript] 홈페이지 회원가입폼, 유효성검사 / 정규표현식 regular expression / 정규표현식 학습사이트 / URL parsing (0)	2022.02.18