모듈
개발하는 어플리케이션이 커지면 파일을 분리해야하는데, 분리된 파일을 각각 '모듈(module)'이라고 부릅니다. 모듈을 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.
초반 자바스크립트는 단순하기에 특별한 모듈관련 문법이 없었습니다 자바스크립트가 커지고 복잡해지자 특별한 라이브러리를 만들어 모듈을 불러오거나 코드를 모듈단위로 구성하는등 다양한 방법이 생겼습니다.
2015년에 모듈시스템이 표준으로 등재되었고 대부분의 브라우저도 지원하며 Node.js가 모듈 시스템을 지원합니다.
모듈은 단지 파일 하나로, 스크립트 하나는 모듈 하나입니다.
모듈에는 특수한 지시자 import와 export를 적용하면 다른 모듈을 불러와 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다.
export
선언부 앞에 export 붙이기
변수나 함수, 클래스를 선언할 때 맨 앞에 export를 내보내기가 가능합니다.
// 배열 내보내기
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
// 상수 내보내기
export const MODULES_BECAME_STANDARD_YEAR = 2015;
// 클래스 내보내기
export class User {
constructor(name) {
this.name = name;
}
}선언부와 떨어진곳에 export 붙이기
선언부와 export가 떨어진곳에 있어도 내보내기가 가능합니다.
// 📁 say.js
function sayHi(user) {
alert(`Hello, ${user}!`);
}
function sayBye(user) {
alert(`Bye, ${user}!`);
}
export {sayHi, sayBye}; // 두 함수를 내보improt
무언갈 가져오고 싶다면 아래와 같이 이에 대한 목록을 만들어 import {...}안에 적어주면 됩니다.
// 📁 main.js
import {sayHi, sayBye} from './say.js';
sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!가져올 것이 많으면 import * as 처럼 객체 형태로 원하는 것들을 가지고 올 수 있습니다.
// 📁 main.js
import * as say from './say.js';
say.sayHi('John');
say.sayBye('John');이렇게 '한꺼번에 모든 걸 가져오는 방식’을 사용하면 코드가 짧아집니다. 그런데도 어떤 걸 가져올 땐 그 대상을 구체적으로 명시하는 게 좋습니다.
export default
모듈은 크게 두 종류로 나뉩니다.
- 복수의 함수가 있는 라이브러리 형태의 모듈
- 개체 하나만 선언되어있는 모듈
대개는 두 번째 방식으로 모듈을 만드는 걸 선호하기 때문에 함수, 클래스, 변수 등의 개체는 전용 모듈 안에 구현됩니다.
그런데 이렇게 모듈을 만들다 보면 자연스레 파일 개수가 많아질 수밖에 없습니다. 그렇더라도 모듈 이름을 잘 지어주고, 폴더에 파일을 잘 나눠 프로젝트를 구성하면 코드 탐색이 어렵지 않으므로 이는 전혀 문제가 되지 않습니다.
모듈은 export default라는 특별한 문법을 지원합니다. export default를 사용하면 '해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나타낼 수 있습니다.
내보내고자 하는 개체 앞에 export default를 붙여봅시다.
*참고 : 모던 JavaScript 튜토리얼
