위와 같이 스크립트를 로드하게 되면, Daum의 우편번호 서비스 API를 로드하는 스크립트 태그는 CDN (Content Delivery Network)에서 JavaScript 파일을 가져와서 작동하게 된다.
즉, src에서 지정한 URL은 Daum의 CDN에서 호스팅되는 파일을 가리킨다.
브라우저는 이 스크립트 태그를 만나면 지정된 URL로 요청을 보내고, 성공하게되면 다음의 우편번호 서비스 API 코드가 포함된 JavaScript파일을 다운로드하고, 브라우저 환경에서 실행된다.
이를 통해 웹페이지는 주소 검색 등의 API에서 제공하는 기능을 활요할 수 있다.
2. React&TypeScript 에서 사용하기(타입 지정)
문서에서 제공하는 간편 사용법을 보면 아래와 같이 되어있다.
<script>
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
// 예제를 참고하여 다양한 활용법을 확인해 보세요.
}
}).open();
</script>
그런데 TypeScript에서는 new daum.Postcode() 객체의 타입을 알 수 없기 때문에, 별도의 파일을 만들어서 Type을 알 수 있도록 한다.
아래와 같이 daum.postcode.d.ts 파일을 만들고, daum이라는 네임스페이스를 등록한다.