프로젝트를 진행하고 개발을 하다보면 코드의 양이 점점 더 많아지게 됩니다. 하나의 파일에 모든 코드를 작성하여 넣게되면 많은 기능들이 함께 섞이게 되어 복잡해지고, 코드를 수정하고 유지보수를 하기에도 매우 어려워지게 되죠.
그렇기에 언젠가는 하나의 파일을 여러 개로 분리 해야겠다는 필요성을 느끼게 될 것입니다.
이때 분리된 파일 하나를 모듈(module)이라고 부릅니다.
그렇다면 모듈(module)에 대해 자세히 알아보고, 자바스크립트에서는 모듈을 어떻게 사용 하는지 한번 알아보도록 하겠습니다.
모듈(module)이란❓
“재사용 가능한 코드 조각”
모듈은 하나의 파일을 비슷한 기능끼리
- 코드를 분리해 작고 관리하기 쉬운 파일로 구분
- 모듈은 자체적인 스코프를 가져 코드와 네임스페이스 충돌을 막음
- 모듈 사용법은 크게 ESM, CJS 방식으로 나뉨
모듈의 특징
유지보수용이
- 각각의 모듈로 나누어져 있기 때문에, 의존성을 줄일 수 있어 가독성이 증가하고, 코드 수정에 용이합니다.
네임스페이스화
- 모듈만의 자체적인 스코프를 가지게 되면서, 네임스페이스를 갖게 되고 같은 이름의 변수가 충돌되는 것을 방지할 수 있습_**니다.
재사용성
- 같은 코드를 반복하지 않고, 필요할때 마다 불러와 재사용할 수 있습니다.
그리고 이렇게 나눈 모듈들을 내보내고, 불러오는 방법을 모듈 시스템이라고 합니다. 모듈 시스템에는 다음과 같은 방법들이 있습니다.
모듈 시스템의 종류
모듈 시스템에는 크게
AMD- 가장 오래된 모듈 시스템 중 하나로, require.js 라는 라이브러리를 통해 처음 개발되었습니다.CommonJS- NodeJS 환경을 위해 만들어진 모듈 시스템입니다.UMD- AMD와 CommonJS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어졌습니다.ES Module- ES6(2015)에 도입된 자바스크립트 모듈 시스템 입니다.
이 4가지 중 현재에는 CommonJS 와 ES Module 가 주로 많이 사용되고 있습니다.
CommonJS(CJS)
“Node.js에서 사용되는 모듈 시스템”
표존 모듈 시스템은 아니다. 하지만, 편의를 위해 만들어져 Node.js 초기 버전부터 사용되었고, 현재까지도 널리 사용되고 있다.
모듈을 내보낼 때는 require() , 외부에서 불러올 때는 module.exports 키워드를 사용한다.
내보내기
"exports 이름의 변수의 속성으로 내보낼 함수를 설정할 수 있습니다."
//common/person.js
exports.FistName = "길동";
exports.LastName = "홍";
exprots.fullName = function(){
return FistName + LastName
}따로 보내기 번거로울 때는 앞서 module.exports 를 사용하여 객체로 묶어서 내보낼 수 있습니다.
// common/person.js
let FistName = "길동";
let LastName = "홍";
let fullName = function(){
return FistName + LastName
}
module.exports = {Fistname, Lastname, fullName};불러오기
require키워드를 통해 불러오고, 변수에 할당 할 수 있습니다.
//index.js
const = {Fistname, Lastname, fullName} = require('./common/person.js')
console.log(Fistname, Lastname);ESM ( ECMAScript Modules)
ES6(ES2015)에 도입된 “자바스크립트 모듈 시스템” 입니다.
모듈에서 함수, 변수, 클래스 등을 내보낼 때는 export 키워드를 사용하고, 외부에서 불러올 때는 import 키워드를 사용합니다.
아래 예시처럼 export 키워드를 변수 선언문 맨 앞에 사용하여 내보내기를 합니다.
// common/person.js
export let FistName = "길동";
export let LastName = "홍";
export let fullName = function(){
return FistName + LastName
}import 키워드를 사용하여 내보내기 한 모듈을 불러올 수 있습니다.
//index.js
import {Fistname, Lastname, fullName} from './common/person.js'default 키워드를 사용하여 모듈당 하나의 값만 내보내도록 할 수 있습니다. 이 키워드는 모듈 전체가 하나의 클래스나 객체일 때 유용하게 사용할 수 있습니다. 또한,import 시 개발자의 마음대로 명칭을 변경할 수 있다는 특징이 있습니다.
// defaultExport.js
export default class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name}!`);
}
birthday() {
this.age += 1;
console.log(`Happy birthday ${this.name}, you are now ${this.age} years old.`);
}
}
// index.js
import NameChange from './defaultExport.js';
const user1 = new NameChange('Kim', 30);
user1.greet();
user1.birthday();+++ Tree-shaking
- 사용 되지 않는 코드를 제거하는 행위
- ESM 을 사용할 경우 효과적으로 작동.
- 브라우저 성능에 매우 중요한 단계
어떤 모듈 시스템을 사용해야 할까?
그래서 어떤것을 사용하는 것이 더 좋은 것인가요?? 라고 질문이 있을 수 있습니다. 무조건 적으로 어떤 것이 좋다고 이야기 할 수 없습니다.
CommonJS(CJS)의 경우에는 자바스크립트에서 자체적으로 제공해주는 것은 아니지만, Node.js 초기부터 사용되었기에 여전히 Node.js를 사용하는 백엔드 개발환경에서는 CJS를 많이 사용하고 있습니다.
ESM 경우에는 자바스크립트에서 공식적을 제공하는 표준이기에 이후에 발전한 프론트엔드 개발환경에서는 주로 ESM 방식을 채택하여 사용하고 있습니다.
그렇기 때문에 모듈 시스템은 사용자가 “프로젝트의 요구사항” 이나 “개발 환경”을 고려하여 직접 결정해야 합니다.
CommonJS (CJS)
- Node.js를 이용한 백엔드 개발과, SSR개발시 사용한다.
- 오래된 node.js 프로젝트를 사용하거나 라이브러리를 사용하는 경우에 사용한다.
ES Module
- 최신 웹 개발 환경에서 많이 사용한다.(React, Vue.js 등)
- 최적화가 필요한 환경에서 많이 사용한다.
- 프론트엔드와 백엔드를 모두 Javascript로 사용할 경우, 동일하게 맞추고 싶을 때 사용한다.
