1. 모듈
일반적으로, 많은 코드가 필요한 프로그램의 경우, 하나의 파일로 관리하지 않고, 각 기능 별로 여러 개의 파일로 분리해서 관리를 하게 된다.
이렇게 공통된 기능이나 특별한 목적에 따라 각각의 파일로 분리하는 과정을 모듈화(Modularization)라고 하며,
각 파일 하나하나를 모듈(Module)이라고 한다.
이와 같이, 하나의 프로그램을 여러 개의 파일로 모듈화하는 방식은 다음과 같은 장점이 있다.
-
코드를 효율적으로 관리할 수 있다.
-
비슷한 기능이 필요할 때, 다른 프로그램에서 재사용 할 수 있다.
사실 자바스크립트 ES5까지는 모듈화를 할 수 있는 문법이 따로 존재하지 않았다.
2. 모듈 파일의 조건
모듈이 되는 파일은 해당 파일만의 독립적인 스코프(scope)를 가져야 하며, 이를 모듈 스코프(Module Scope)라고 한다.
자바스크립트 파일의 모듈 스코프를 만들어 주기 위해서는, HTML 파일에서 자바스크립트 파일을 불러올 때, script 태그의 type 속성을 module로 지정해주면 된다.
<body>
<script type="module" src="file1.js"></script>
<script type="module" src="file2.js"></script>
</body>여기서 문제가 하나 발생하는데, 사실 브라우저에서 개발자의 컴퓨터 안에 있는 HTML 파일을 불러오게 될 경우에는, 자바스크립트의 모듈 문법을 사용할 수 없다.
때문에, 이를 확인해보기 위해서는, VS Code의 extension인 Live Server를 이용해야 한다는 점을 주의하자.
3. 모듈 문법
모듈 스코프를 가지는 파일의 경우, 기본적으로 다른 파일에서는 사용이 불가능하다.
하지만, 코드를 작성하다보면, 다른 파일에서도 변수나 함수를 사용할 수 있게 만들어줘야 하는 경우가 발생하는데,
이 경우, 아래와 같이, 선언문 앞에 export라는 키워드를 붙여주면 해결이 가능하다.
export const title = 'CodeitPrinter';
export function print (value) {
console.log(value);
}다만, 위와 같이 export 키워드를 붙여줬다고 해서, 모든 파일에서 제한 없이 사용할 수 있는 것은 아니며,
아래와 같이, 해당 변수나 함수를 사용하고자 하는 파일에서, 한 번 더 모듈 문법으로 불러오는 과정을 거쳐야 사용이 가능해진다.
import {title, print} from './printer.js';💡 이렇게 모듈 문법을 사용하게 되면, 이를 통해 스코프 공유가 가능해지기 때문에, 사실상 HTML 파일의
script태그는 작성하지 않아도 된다.
4. import 변수/함수 이름 변경
코드를 작성하다보면, 내가 사용하고자 하는 변수 또는 함수의 이름이 import 된 변수 또는 함수의 이름과 중복되는 상황이 발생하기도 한다.
이런 경우에는, 아래와 같이, import 된 변수 또는 함수의 이름을 변경하여 해결이 가능하다.
import {title as printerTitle, print} from './printer.js';
const title = 'Codeit';이러면, printer.js에서 불러온 title이라는 변수 이름이 이 파일 내에서는 printerTitle로 변경되는 것이다.
5. 한 번에 import 하기
불러와야 할 변수나 함수가 많을 경우에는, 앞에서 언급한 방법을 적용할 경우, 굉장히 많은 코드를 작성해야 하는 경우가 발생할 수 있다.
이런 경우에는, 모듈 파일에서 export 하는 모든 대상을 한 번에 import 하는 방법을 사용할 수 있다.
아래 두 코드는 동일한 코드이다.
import {
title as membersTitle,
data as membersData
} from './members.js';import * as printerJS from './printer.JS';이러면, printer.js 파일에서 export 하는 모든 대상이 printerJS라는 이름으로 전달되며,
다음과 같이, 객체 형식으로 사용이 가능하다.
console.log(printerJS.title);
printerJS.print(membersTitle);
printerJS.print(membersData);다만, 모듈 파일에서 export 하는 모든 대상을 하나의 객체로 모으는 것이기 때문에, 해당 파일에서 필요하지 않은 대상들도 모두 불러오게 된다는 단점이 존재하기 때문에, 이 방법이 무조건적으로 효율적이라고 할 수는 없다는 점도 알아두자.
앞선 코드에서 사용되었던
*은 와일드카드 문자 (Wildcard Character)라고 표현한다. 용어도 기억해두자.
6. 한 번에 export 하기
앞서 한 번에 import를 했던 것처럼, export도 한 번에 묶어서 하는 방법이 존재한다.
아래 두 코드는 동일한 코드이다.
export const title = 'CodeitPrinter';
export function print(value) {
console.log(value);
}const title = 'CodeitPrinter';
function print(value) {
console.log(value);
}
export {title, print};이 방법을 사용하면, import와 유사하게, as 키워드를 사용하여 미리 이름을 바꿀 수도 있다.
export {title as printerTitle, print};7. default export
export 뒤에 default 키워드를 붙여주면, 그 뒤에는 반드시 하나의 대상만 내보낼 수 있게 된다.
때문에, 아래와 같이 코드를 작성할 수 있다.
export const title = 'CodeitMembers';
export const data = [
...
]
export default title변수 이름 뿐 아니라, 아래와 같이 그냥 값 하나를 전달하는 것도 가능하다.
export default 'codeit';주의해야 할 점은, default 키워드는 모듈 내에서 딱 한 번만 사용이 가능하다는 것이다.
만약, 여러 번 사용할 경우 에러가 발생하게 되니 주의하자.
import를 할 때에도, default 키워드를 통해 구분이 되지만, 키워드 자체만 사용하는 것은 불가능하며, 반드시 as 키워드를 통해 이름을 붙여주어야 한다.
import {
default as codeit
} from './members.js';
default키워드를 통해, 하나의 대상만을export하는 방식을Default Export라고 부르며,
변수나 함수의 이름을 통해, 여러 대상을export하는 방식을Named Export라고 부른다.
Default Export의 경우, import를 할 때, default 값에 붙여준 이름을 중괄호 밖으로 빼낼 수 있다.
아래 두 코드는 동일한 코드이다.
import {
default as codeit
...
} from './members.js';import codeit, {
...
} from './members.js';와일드카드 문자로 import를 했을 경우, Default Export의 값은 default라는 파라미터로 접근이 가능하다.
import * as membersJS from './members.js';
console.log(membersJS.default);💡 일반적으로, 모듈 파일에서
export할 대상이 여러 개인 경우에는Named Export를 활용하며,export할 대상이 하나인 경우에는Default Export를 활용한다.
