우아콘2024 듣고 감명받은 "우아한플레이그라운드" 제작기 따라 해보기 (2편)

우아콘2024 듣고 감명받은 "우아한플레이그라운드" 제작기 따라 해보기 (2편)

 

첫 번째 작업 이후 두 번째 업데이트입니다~!!

그동안 자잘한 작업들을 해보긴 했지만, 중간에 `방끗` 런칭과 면접 준비 등 여러 일이 겹쳐 이제야 2편을 작성합니다.

 

지난 1편에서는 에디터와 프리뷰를 사용해 코드를 띄우는 작업까지 진행했습니다. 

 

이번에 이어서 진행할 단계는 npm 라이브러리 로드입니다. 

 

많은 라이브러리를 사용하고, 특히 디자인 시스템을 보여주는 에디터라면 라이브러리 로드는 필수적인 세팅입니다.

브라우저에서의 module resolution을 해결하기 위해, 저도 세션과 동일하게 ESM 기반의 CDN인 esm.sh을 활용해 npm 라이브러리를 로드했습니다.

 

 

먼저, 간단하게 esm 코드를 사용해 임포트를 시도해보았습니다.

당연히 성공!

 

 

 

하지만 이렇게 일일이 esh url로 임포트문을 작성하는 건 익숙하지 않고 번거로운 방식입니다. 

 

우리가 주로 사용하는 방식처럼 좀 더 편리하게 처리하기 위해 importMap을 적용했습니다.

  <script type="importmap">
      {
        "imports": {
          "canvas-confetti": "https://esm.sh/canvas-confetti"
        }
      }
  </script>

 

 

이처럼 Confetti 라이브러리를 importMap에 추가해주니, 우리가 평소 쓰는 임포트문처럼 작성해도 잘 작동했습니다.

 

 

 

그러나, 매번 이렇게 수동으로 임포트를 추가할 수는 없습니다.. 

그래서 동적으로 임포트를 처리하기 위한 유틸리티가 필요하다고 생각했습니다. 

 

이 부분은 세션에서 다루지 않은 내용이라, 제가 직접 방법을 생각해서 진행했습니다.

코드 내에서 import 구문을 찾아 라이브러리를 동적으로 로드하는 방식입니다. 이를 위해 정규식을 사용해 import문을 추출했습니다.

const importRegex = /import\\s+([a-zA-Z0-9_{}\\s,]*)\\s+from\\s+['"]([^'"]+)['"]/g;

 

 

 

그리고, 추출한 import문을 importMap 형태로 변환해 줍니다.

// 예: 'import { createRoot } from 'react-dom/client';' 일 때
let match;

while ((match = importRegex.exec(code)) !== null) {
  const [, , modulePath] = match;
  // modulePath는 'react-dom/client'가 됨

  if (modulePath && !importMap.imports[modulePath]) {
    const esmUrl = modulePath.startsWith('http')
      ? modulePath
      : `https://esm.sh/${modulePath}`;
    // esm.sh 경로로 변환
    importMap.imports[modulePath] = esmUrl;
  }
}

 

 

 

이렇게 생성된 importMap의 기본 구조는 다음과 같습니다.

const importMap: { imports: Record<string, string> } = { imports: {} };

 

 

 

또한, 몇몇 기본적인 라이브러리는 미리 추가해 줄 수 있습니다. 

importMap.imports['react'] = '<https://esm.sh/react>';
importMap.imports['react/'] = '<https://esm.sh/react/>';
importMap.imports['react-dom'] = '<https://esm.sh/react-dom>';
importMap.imports['react-dom/'] = '<https://esm.sh/react-dom/>';

 

(( 추가적으로 경로에  / 를 붙이면 해당 라이브러리의 모든 서브모듈도 함께 불러올 수 있습니다. ))

 

 

 

이렇게 설정하니, 매번 수동으로 esm 링크를 작성하지 않더라도 라이브러리를 자동으로 임포트 할 수 있어 편리했습니다.

 

같은 사진 같지만 전혀 아닙니다...

 

 

이제 라이브러리를 사용할 수 있습니다~! 

그럼 다음 단계까지 또 가볼까요?