Improve dynamic loading of script

src/DaumPostcode.tsx

@@ -1,5 +1,5 @@
 import React, { Component, createRef, CSSProperties } from 'react';
-import loadPostcode, { PostcodeOptions } from './loadPostcode';
+import loadPostcode, { PostcodeConstructor, PostcodeOptions } from './loadPostcode';
 
 export interface DaumPostcodeProps extends Omit<PostcodeOptions, 'oncomplete' | 'onresize' | 'onclose' | 'onsearch'> {
   onComplete?: PostcodeOptions['oncomplete'];
@@ -48,7 +48,7 @@ class DaumPostcode extends Component<DaumPostcodeProps, State> {
     loadPostcode(scriptUrl).then(initiate).catch(onError);
   }
 
-  initiate = (Postcode: typeof window.daum.Postcode) => {
+  initiate = (Postcode: PostcodeConstructor) => {
     if (!this.wrap.current) return;
     const {
       scriptUrl,
@@ -82,7 +82,8 @@ class DaumPostcode extends Component<DaumPostcodeProps, State> {
     postcode.embed(this.wrap.current, { q: defaultQuery, autoClose: autoClose });
   };
 
-  onError = () => {
+  onError = (e: unknown) => {
+    console.error(e);
     this.setState({ hasError: true });
   };
 

src/loadPostcode.ts

@@ -1,14 +1,12 @@
 declare global {
   interface Window {
-    daum: {
-      postcode: {
+    daum?: {
+      postcode?: {
         load: (fn: () => void) => void;
         version: string;
         _validParam_: boolean;
       };
-      Postcode: {
-        new (postcodeOptions: PostcodeOptions): Postcode;
-      };
+      Postcode?: PostcodeConstructor;
     };
   }
 }
@@ -114,31 +112,37 @@ export interface EmbedOptions {
   autoClose?: boolean;
 }
 
+export interface PostcodeConstructor {
+  new (postcodeOptions: PostcodeOptions): Postcode;
+}
+
 export interface Postcode {
   open(openOptions?: OpenOptions): void;
   embed(element: HTMLElement, embedOptions?: EmbedOptions): void;
 }
 
 const loadPostcode = (function () {
   const scriptId = 'daum_postcode_script';
-  return function (url: string): Promise<typeof window.daum.Postcode> {
-    const isScriptExist = !!document.getElementById(scriptId);
-    if (isScriptExist) return Promise.resolve(window.daum.Postcode);
+  let promise: Promise<PostcodeConstructor> | null = null;
 
-    return new Promise((resolve, reject) => {
+  return function (url: string): Promise<PostcodeConstructor> {
+    if( promise ) return promise;
+
+    promise = new Promise((resolve, reject) => {
       const script = document.createElement('script');
       script.src = url;
       script.onload = () => {
-        try {
-          resolve(window.daum.Postcode);
-        } catch (e) {
-          reject(e);
+        if( window?.daum?.Postcode ) {
+          return resolve(window.daum.Postcode);
         }
+        reject(new Error('Script is loaded successfully, but cannot find Postcode module. Check your scriptURL property.'))
       };
       script.onerror = (error) => reject(error);
       script.id = scriptId;
       document.body.appendChild(script);
-    });
+    })
+
+    return promise;
   };
 })();