Modules

최신 도구를 사용해 애플리케이션을 빌드할 경우, 대부분 모듈(import, export)을 사용합니다. 규모가 작은 애플리케이션일지라도 코드를 재사용 하기 위해 모듈을 활용하므로 모듈의 작동 방식에 대해 학습하고 익혀둬야 합니다.

dom.js

export function els(selector, context = document) {
  return context.querySelectorAll(selector)
}

export function el(selector, context = document) {
  return els(selector, context)[0]
}

main.js

import { el, els } from './dom.js'


const list = el('.list')      // <ul class="list"> 요소 노드
const items = els('li', list) // [<li>, <li>, <li>] 노드 리스트

동적 호출(Dynamic Import) 코드 예시

import('./module.js')
  .then((allModuleExports) => {
    // allModuleExports 객체는 
    // import * as allModuleExports from './module.js' 결과와 동일
    // 단, 이 코드는 비동기 로드에서 사용되며 성능 향상 이점을 가짐
  })
  .catch(({message}) => {
    // 로딩이나 모듈 실행에 있어서 에러가 발생한 경우 오류 처리
    console.error(message)
  })