# Modules

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

{% code title="dom.js" %}

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

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

{% endcode %}

{% code title="main.js" %}

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


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

{% endcode %}

{% code title="동적 호출(Dynamic Import) 코드 예시" %}

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

{% endcode %}