🧩 모듈이란?
-
하나의 클래스, 혹은 특정한 목적을 가진 복수의 함수로 구성된 것을 모듈이라고 한다.
-
이후 설명할
require와exports키워드를 사용하는 CommonJS는 Node.js 서버를 위해 만들어진 모듈 시스템이다. 여기서 모듈 시스템이란, 프로그램 코드를 기능별로 나눠서 독립된 파일에 저장하여 관리하는 방식이라고 할 수 있다. -
export와import와 같은 특수한 키워드를 통해 다른 모듈들을 불러와
불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능하다.
💌 require와 import
🎃 require와 import의 공통점
하나의 파일에서 다른 파일의 코드를 불러온다는 동일한 목적을 가지고 있다.
1. require / exports (CommonJS)
- NodeJS에서 사용되는 CommonJS 키워드
- 변수를 할당하듯 모듈을 불러온다.
// exports
const name = '고양이';
module.exports = name;// require
const name = require('./module.js');2. import / export (ES6)
- ES6(ES2015)에서 새롭게 도입된 키워드
// export
const name = '고양이';
export default name;// import
import name from './module.js'3. exports와 export
- exports는 CommonJS와 ES6라는 모듈 시스템에서 존재하는 객체이다.
- 모듈로부터 내보내지는 데이터들을 담고있는 하나의 객체인 것이다.
- ES6의
export default는 CommonJS의module.exports구문 동작을 대체하기 위한 문법이다.
📤 모듈 전체 내보내고 가져오기
1. require / exports (CommonJS)
// 모듈 전체를 export, 파일내 한번만 사용가능하다.
const obj = {
num: 100,
sum: function (a, b) {
console.log(a + b);
},
extract: function (a, b) {
console.log(a - b);
},
};
module.exports = obj;// require
const obj = require('./exportFile.js');
obj.num; // 100
obj.sum(10, 20); // 30
obj.extract(10, 20); // -102. import / export (ES6)
// 모듈 전체를 export, 파일내 한번만 사용가능하다.
const obj = {
num: 100,
sum: function (a, b) {
console.log(a + b);
},
extract: function (a, b) {
console.log(a - b);
},
};
export default obj;// 전체 자체를 export 할 경우 중괄호 없이 그냥 씀
import obj from './exportFile.js';
obj.num; // 100
obj.sum(10, 20); // 30
obj.extract(10, 20); // -10📤 모듈 개별 내보내고 가져오기
1. require / exports (CommonJS)
🎃 이것만 기억하자!
1. 여러개의 객체를 내보낼 때 →exports.변수
2. 딱 하나의 객체를 내보낼 때 →module.exports = 객체
// exports
exports.name = 'Ann'; // 변수
exports.sayHello = function() { // 함수
console.log('Hello World!');
}
exports.Person = class Person { // 클래스
constructor(name){
this.name = name;
}
}
// require
const { name, sayHello, Person } = require('./exportFile.js');
console.log(name); // Ann
sayHello(); // Hello World!
const person = new Person('inpa');2. import / export (ES6)
✅ export 개별
export const name = 'Ann'; // 변수의 export
export function sayHello() { // 함수의 export
console.log('Hello World!');
}
export class Person { // 클래스의 export
constructor(name){
this.name = name;
}
}✅ export 한꺼번에
const name = 'Ann';
function sayHello() {
console.log('Hello World!');
}
class Person {
constructor(name){
this.name = name;
}
}
export {name, sayHello, Person}; // 변수, 함수, 클래스를 하나의 객체로 구성하여 export✅ import 일반
import { name, sayHello, Person } from './exportFile.js';✅ import * as 별칭
- 개별로 export 된걸 * 로 한번에 묶고 as 로 별칭을 줘서, 마치 전체 export default 된걸 import 한 것 처럼 사용 가능하다.
import * as obj from './exportFile.js';
console.log(obj.name); // Ann
obj.sayHello(); // Hello World!
const person = new obj.Person('inpa');✨ CommonJS 모듈 시스템의 필요성
- 많은 프로젝트에서 ES6 모듈 시스템을 점점 널리 사용하는 추세이지만,
- 항상
import만을 사용하여 코딩할 수 있는 것은 아니다.<script>태그를 사용하는 브라우저 환경, NodeJS에서 CommonJS를 기본 모듈 시스템으로 채택하고 있기 때문에- Babel과 같은 ES6코드를 변환해주는 도구를 사용할 수 없는 상황에선
require를 사용해야 한다.
🎀 정리
- require와 import는 모듈 키워드입니다.
- 외부 파일이나 라이브러리를 불러올 때 사용한다는 같은 목적을 가지고 있지만, 다른 문법구조를 가지고 있습니다.
- require는 exports와 함께 사용되며, NodeJS에서 사용되는 CommonJS의 키워드이고,
- import는 export와 함께 사용되며, ES6에서 새롭게 도입된 키워드입니다.
- Babel과 같은 ES6 변환도구가 없이는 CommonJS의 require, exports를 사용해야 합니다.
📜 참고
이 글은 아래의 글을 바탕으로 공부하며 개인적으로 정리한 글입니다.
FE Developer