Portfolio

ES6 Module 사용하기

모듈 : 관련된 데이터와 함수를 하나로 묶은 단위 (걍 파일 하나ㅇㅇ)

vanillaJS에서 번들러 없이도 모듈을 사용할 수 있다!
스크립트 의존성을 훨씬 간편하게 관리 가능
index.html(entry 파일)에서 모듈을 import 하고 싶은 script를 선언할 때 type=”module” 속성을 넣어줘야 한다.

이렇게 하면, 해당 script파일만 index.html에 선언해도 나머지 script를 이용할 수 있다.
또한, script를 src로 불러오는 방식은 순서가 중요했는데, import 방식은 중요하지 않고, 전역 오염도 일어나지 않는다.

단, import를 사용하려면 웹 서버가 필요하다. (이유 펼치기)

브라우저에서 import 구문을 만나면, 해당 JavaScript 파일을 Fetching(XMLHttpRequest) 및 Parsing하여 Script와 같은 리소스를 요청한다.

이때, Same-Origin Policy를 따라야 한다.

하지만, 리소스가 항상 동일한 Origin(Protocol/Host/Port)를 가질 수는 없다, 이를 대비하기 위해 CORS(Cross-Origin Resource Sharing) 정책을 이용해야 하지만, JavaScript Modules를 Fetching하는 곳은 브라우저(Client)이기 때문에, CORS 정책을 수정하기에는 어려움이 있다.

따라서 Local Server를 실행해줘서 Same-Origin Policy를 따르도록 한다.

export : 컴포넌트, 많이 쓰이는 상수/함수를 내보냄

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

[종류]

module-name 내에 export default로 내보내진 것을 가져온다.


import defaultExport from "module-name"

export된 것 중에 특정한 것을 가져옴


import { item } from "module-name"
import { item as aliasName } from "module-name"

export된 모든 것을 가져옴. aliasname은 중복되지만 않으면 자유롭게~


import * as aliasName from "module-name"

export default & 개별 export 한번에


import defaultExport, {item} from "moudle-name"

⇒ 컴포넌트와 선언된 상수/함수를 같이 가져올 때 많이 사용

불러오는 것만으로 효과가 있는 스크립트일 때, 별도의 모듈 바인딩 x


import "module-name"

<TODO에 export 추가하기>

index.html에 index.js 스크립트만 불러오고, 나머지는 각 모듈에서 import로 불러와서 사용하기

Header, TodoForm, TodoForm, TodoList ⇒ function 하나이므로 export default로 처리

이전 storage ⇒ getItem, setItem을 리턴하는 함수를 IIFE로 만들어서 전역 오염을 최소화

수정 storage ⇒ 두 함수를 export로 해서, 겉에 감쌌던 리턴함수가 필요가 없다.

번들링 : 모듈들의 의존관계를 파악하여 일반 스크립트 파일로 만드는 것

브라우저 환경에서 모듈을 '단독’으로 사용하는 경우는 흔치 않습니다. 대개 웹팩(Webpack)과 같은 특별한 툴을 사용해 모듈을 한 데 묶어(번들링) 프로덕션 서버에 올리는 방식을 사용합니다.

번들러를 사용하면 모듈 분해를 통제할 수 있습니다. 여기에 더하여 경로가 없는 모듈이나 CSS, HTML 포맷의 모듈을 사용할 수 있게 해준다는 장점이 있습니다.

빌드 툴의 역할은 아래와 같습니다.

HTML의 <script type="module">에 넣을 ‘주요(main)’ 모듈(‘진입점’ 역할을 하는 모듈)을 선택합니다.

‘주요’ 모듈에 의존하고 있는 모듈 분석을 시작으로 모듈 간의 의존 관계를 파악합니다.

모듈 전체를 한데 모아 하나의 큰 파일을 만듭니다(설정에 따라 여러 개의 파일을 만드는 것도 가능합니다). 이 과정에서 import문이 번들러 내 함수로 대체되므로 기존 기능은 그대로 유지됩니다.

이런 과정 중에 변형이나 최적화도 함께 수행됩니다.

도달 가능하지 않은 코드는 삭제됩니다.

내보내진 모듈 중 쓰임처가 없는 모듈을 삭제합니다(가지치기(tree-shaking)).

console, debugger 같은 개발 관련 코드를 삭제합니다.

최신 자바스크립트 문법이 사용된 경우 바벨(Babel)을 사용해 동일한 기능을 하는 낮은 버전의 스크립트로 변환합니다.

공백 제거, 변수 이름 줄이기 등으로 산출물의 크기를 줄입니다.

번들링 툴을 사용하면 스크립트들은 하나 혹은 여러 개의 파일로 번들링 됩니다. 이때 번들링 전 스크립트에 있던 import, export문은 특별한 번들러 함수로 대체됩니다. 번들링 과정이 끝나면 기존 스크립트에서 import, export가 사라지기 때문에 type="module"이 필요 없어집니다. 따라서 아래와 같이 번들링 과정을 거친 스크립트는 일반 스크립트처럼 취급할 수 있습니다.


<!-- 웹팩과 같은 툴로 번들링 과정을 거친 스크립트인 bundle.js -->
<script src="bundle.js"></script>