자바스크립트의 모듈화

ES6 모듈

자바스크립트의 모듈에 대해서 간단하게 알아보자.🤔

모듈방식의 이점

• 각 JS별로 사용되는 모듈을 명시적으로 import 해오기 때문에 사용되거나 사용되지 않는 스크립트를 추적할 수 있다.
• script 태그로 로딩하는 경우 불러오는 순서가 중요하지만, import로 불러오는 경우 순서는 무관하다.
• 또한, script src로 불러오는 것과 다르게 전역오염이 일어나지 않는다.

import를 사용하려면

• 웹 서버가 필요하다.
• 라이브서버 같은 server 모듈로 로컬 웹서버를 띄워서 진행 가능하다.
• 만약 import 동작이 잘 안된다면 from 모듈명 뒤 .js를 추가해보자.

import

export 키워드로 내보내진 변수, 함수 등등을 불러올 수 있는 키워드

import를 사용하면 스크립트의 의존성을 훨씬 간편하게 관리할 수 있다.

// module-name내에 export default로 내보내진 것을 가져온다.
import defaultFunc from 'module-name';

// module-name내에서 export된 모든 것을 모두 가져온다. as 이후 이름은 중복되지만 않으면 자유롭게 정할 수 있다.
import * as allItems from 'module-name';

// module-name내에서 export된 것중 필요한 것만 가져온다.
import {item1, item2} from 'module-name';

// module-name내에서 export된 것중 필요한 것만 가져온다. as는 중괄호 안에서 작성 가능하다.
import {item1 as A, item2 as B} from 'module-name';

// export default된 것과 개별 export된 것을 한번에 가져올 수도 있다.
import defaultFunc, { loadItem as A } from 'module-name'

// 별도의 모듈 바인딩 없이 불러오기만 한다. 불러오는 것만으로 효과가 있는 스크립트의 경우 사용된다.
import 'module-name'