HTML Academy · 강의

가져오기 맵 importmap

importmap으로 이름 없는 모듈 지정자를 URL에 매핑하기

가져오기 맵 importmap은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이름만 있는 지정자 문제

노드에서는 확인기가 node_modules/lodash를 찾기 때문에 import "lodash"가 작동합니다. 브라우저에는 node_modules가 없으므로 실제 URL이 필요합니다. 도움 없이는 import "lodash"가 "모듈 지정자를 확인하지 못했습니다"라는 오류를 발생시킵니다.

가져오기 맵의 역할

가져오기 맵은 이름만 있는 지정자와 URL 접두사를 실제 URL에 매핑하는 JSON 사전을 선언합니다. 브라우저는 모듈을 확인할 때 맵을 참조하여 import "lodash"를 구성한 URL에서 가져오도록 변환합니다.

<script type="importmap">
{
  "imports": {
    "lodash": "https://esm.sh/lodash@4.17.21",
    "preact": "https://esm.sh/preact"
  }
}
</script>

선언 순서가 중요합니다

가져오기 맵은 이름만 있는 지정자를 사용하는 <script type="module">보다 먼저 나타나야 합니다. 모듈이 가져오기를 확인하기 시작하면 맵이 고정되기 때문입니다. <script type="importmap">을 <head>의 위쪽에 배치하십시오.

접두사 매핑

슬래시로 끝나는 항목은 URL 접두사와 일치합니다: "@/": "/src/"는 모든 import "@/utils/sum.js"를 /src/utils/sum.js로 매핑합니다. 이는 번들러가 일반적으로 지원하는 "별칭" 구문을 흉내 내는 방법입니다.

맵을 통한 버전 관리

가져오기 맵은 버전 선택을 한곳에 모읍니다. "react"를 esm.sh/react@18에서 esm.sh/react@19로 한곳에서 변경하면 가져오기를 수행하는 모든 모듈이 새 URL을 사용합니다. 가져오기 맵이 없으면 각 가져오기 위치에 자체 버전이 하드 코딩됩니다.

범위

scopes 키를 사용하면 사이트의 서로 다른 부분에 서로 다른 매핑을 적용할 수 있습니다. /admin/ 안에서는 /public/보다 더 최신 버전의 종속성을 사용하고 싶을 수 있는데, 범위를 사용하면 경로별로 대상을 지정할 수 있습니다.

{
  "imports": { "lodash": "https://esm.sh/lodash@4" },
  "scopes": {
    "/admin/": { "lodash": "https://esm.sh/lodash@5" }
  }
}

문서마다 하나의 맵

각 문서에는 <script type="importmap">을 최대 하나만 사용할 수 있습니다. 같은 페이지에 두 개를 넣으면 유효하지 않으므로, 항목을 결합하려면 내용을 하나의 블록으로 병합하십시오.

외부 가져오기 맵

<script type="importmap" src="map.json">을 사용하여 맵을 외부 URL에 호스팅할 수 있습니다. 브라우저 지원은 인라인 맵보다 늦게 추가되었지만 이제는 널리 지원됩니다. 문서와 별도로 큰 맵을 캐싱하고 싶을 때 유용합니다.

가져오기 맵 생성

JSPM Generator와 esbuild의 --servedir 모드 같은 도구는 package.json에서 가져오기 맵을 자동으로 생성합니다. 생성된 맵에는 모든 전이적 종속성이 포함되며 각각을 CDN URL에 매핑하므로 node_modules가 필요 없는 작업 흐름을 구축할 수 있습니다.

브라우저 지원

가져오기 맵은 크롬, 엣지, 사파리, 파이어폭스에 포함되어 있습니다. 오래된 브라우저는 <script type="importmap"> 태그를 무시하므로 이름만 있는 지정자가 실패합니다. 폭넓은 레거시 지원이 필요하다면 빌드 시 지정자를 해결하는 번들러로 빌드하고 일반 URL을 제공하십시오.

폴리필 옵션

ES 모듈 심 폴리필(es-module-shims.js)은 오래된 브라우저에 가져오기 맵 지원과 몇 가지 최신 기능을 추가합니다. 가져오기 맵 스크립트보다 먼저 포함하십시오. 대부분의 최신 프로젝트는 폴리필을 생략하고 네이티브 지원에 의존합니다.

이해도 확인

이름만 있는 지정자를 사용하는 모듈 스크립트보다 <script type="importmap">을 먼저 배치해야 하는 이유는 무엇입니까?

요약

가져오기 맵은 이름만 있는 지정자와 URL 접두사를 실제 URL에 매핑하여 브라우저에서 노드 스타일의 "import lodash"를 사용할 수 있게 합니다. 문서마다 한 번 선언하되 모든 모듈 스크립트보다 먼저 배치하고, 필요하면 src를 통해 외부에 둘 수 있으며, 경로별 재정의에는 범위를 사용합니다. CDN(esm.sh, jsdelivr)과 결합하면 node_modules가 필요 없는 작업 흐름을 만들 수 있습니다.

자주 묻는 질문

“가져오기 맵 importmap” 강의는 무료인가요?

네 — “가져오기 맵 importmap” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“가져오기 맵 importmap”에서 뭘 배우나요?

importmap으로 이름 없는 모듈 지정자를 URL에 매핑하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“가져오기 맵 importmap” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기