모듈의 의미
- 모듈 : 애플리 케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각, 기능을 기준으로 파일 단위로 분리함
- 특징
- 자신만의 파일 스코프(모듈 스코프) 를 가질수 있어야함
- 따라서 다른 모듈에서 접근할 수 없고, 개별적 존재로서 애플리케이션과 분리되어 존재함.
- 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개 가능
- 분리되어 개별적으로 존재하다가 필요에 따라서 다른 모듈에 의해 재사용 됨.
- 재사용성이 좋아서 개발 효율성과 유지보수성을 향상
자바스크립트와 모듈
- 분리된 자바스크립트 파일을
script태그로 로드해도 결국 하나의 자바스크립트 파일 내에 있는 것 처럼 동작한다. - 즉 자바스크립트 파일은 하나의 전역을 공유한다. 따라서 분리된 자바스크립트 파일들의 전역 변수가 중복되는 등의 문제가 발생 할 수 있다. → 모듈의 성립조건에 적절하지 않음
CommonJs & AMD
- 자바스크립트의 모듈 시스템을 해결하기 위해 제안됨.
- Node.js는 ECMAScript 표준 사양은 아니지만 모듈 시스템을 지원한다. js 환경에서는 파일별로 독립적인 파일 스코프(모듈 스코프)를 갖는다.
ES6 모듈 (ESM)
▫️ ESM : 클라이언트 사이드 자바스크립트에서도 동작하는 모듈 기능
▫️ strict mode 가 기본 적용됨.
▫️ mjs 확장자 사용을 권장
▫️ script 태그에 type=”module” 어트리뷰트를 추가 → 로드된 자바스크립트 파일은 모듈로서 동작
- 모듈 스코프
- 독자적인 모듈 스코프를 가짐
- 모듈내에서 선언한 변수는 전역변수가 아니며 window 객체의 프로퍼티도 아니다.
- 일반 자바 스크립트 파일
- 독자적인 모듈스코프를 갖지않아 의도치 않게 변수의 값이 덮어써지기도 함.
export 키워드
- 모듈 내부에서 선언한 식별자를 외부에 공개하여 다른 모듈 들이 재사용 할 수 있게 하려면 선언문 앞에 export 키워드를 사용해야한다.
export const test
=>
import {test} ...
export default function test //한개만 가능
=>
import test ...
export const test1
export const test2
export const test3
=>
import {test1, test2, test3} ...import 키워드
import * as test from "./test.mjs"
import {test} from "./test.mjs"
import test from "./test.mjs"
