본문 바로가기

Javascript

자바스크립트의 모듈 시스템: 종류와 특징 & Node 에서 사용 법

자바스크립트는 모듈 시스템을 통해 코드를 구성하고 관리할 수 있는 강력한 기능을 제공합니다.

모듈 시스템은 코드를 모듈 단위로 나누어 재사용성과 유지보수성을 향상시킵니다. 

ES6 Modules:

ES6 Modules는 ECMAScript 2015(ES6)에서 공식적으로 도입된 자바스크립트의 모듈 시스템입니다. ES6 Modules는 브라우저와 서버 환경에서 모두 사용할 수 있으며, 정적으로 모듈을 로딩합니다. import와 export 키워드를 사용하여 모듈을 가져오고 내보내는 것이 특징입니다. ES6 Modules는 정적 분석에 의해 모듈의 의존성을 파악하여 필요한 모듈만 로딩하므로 성능상의 이점을 제공합니다. 또한, 브라우저에서도 네이티브로 지원되기 때문에 별도의 번들러 없이도 모듈을 사용할 수 있습니다.

CommonJS:

CommonJS는 자바스크립트의 서버 사이드 환경에서 주로 사용되는 모듈 시스템입니다. 이 모듈 시스템은 동기적으로 모듈을 로딩하며, require() 함수를 사용하여 모듈을 불러옵니다. CommonJS 모듈은 파일 기반으로 동작하며, 모듈이 한 번 로딩되면 캐싱하여 동일한 모듈이 다시 불러와질 때 재사용합니다. 이러한 특징으로 인해 CommonJS는 서버 사이드에서 모듈 로딩에 적합합니다.

AMD (Asynchronous Module Definition):

AMD는 브라우저 환경에서 비동기적으로 모듈을 로딩하기 위해 개발된 모듈 시스템입니다. RequireJS와 함께 사용되며, 브라우저에서 여러 개의 모듈을 병렬로 로딩할 수 있습니다. AMD는 define() 함수를 사용하여 모듈을 정의하고, require() 함수를 사용하여 모듈을 로딩합니다. 비동기적인 특성으로 인해 AMD는 브라우저에서 동적으로 모듈을 로딩하는데 유용합니다.

UMD (Universal Module Definition):

UMD는 다양한 환경에서 모듈을 사용할 수 있도록 만들어진 모듈 시스템입니다. CommonJS, AMD, 그리고 전역 객체를 확인하여 가장 적합한 방식으로 모듈을 정의합니다. 이를 통해 브라우저 및 서버 환경 모두에서 호환성을 보장할 수 있습니다. UMD는 보편적인 모듈 시스템이며, 모듈이 어떤 환경에서 실행되는지에 관계없이 사용할 수 있습니다.


각 모듈 시스템은 자바스크립트의 다양한 사용 환경과 요구 사항에 맞게 선택하여 사용할 수 있습니다. 이러한 모듈 시스템은 코드의 구조화와 재사용성을 증가시켜 개발자들이 보다 효율적이고 유지보수가 용이한 코드를 작성할 수 있도록 도와줍니다. 자바스크립트의 모듈 시스템을 이해하고 적절히 활용함으로써 프로젝트의 성공적인 구현에 기여할 수 있을 것입니다.


Node.js에서 사용되는 모듈 시스템은 CommonJS

Node.js의 모듈 시스템은 파일 기반의 모듈 로딩 방식을 사용합니다.

각각의 파일은 개별적인 모듈로 간주되며, 모듈은 해당 파일의 코드와 변수, 함수 등을 캡슐화하여 다른 파일에서 재사용할 수 있도록 합니다.

 

require() 함수를 사용하여 다른 모듈을 로딩합니다.

require() 함수는 모듈을 참조하고 해당 모듈의 내용을 반환하는 역할을 수행합니다.

예를 들어, const express = require('express')와 같은 코드는 'express' 모듈을 로딩하고 그 내용을 express 변수에 할당하는 역할을 합니다.

 

또한, Node.js의 모듈 시스템은 모듈을 캐싱하여 동일한 모듈이 다시 로딩될 때마다 새로운 인스턴스를 생성하는 것이 아니라, 캐시된 모듈을 반환 이는 모듈 간의 의존성 관리와 성능 향상을 위해 사용됩니다.


Node.js의 모듈 시스템은 CommonJS 표준을 따르기 때문에 다른 CommonJS 호환 모듈(예: npm 패키지)을 쉽게 사용할 수 있습니다. 또한, Node.js는 내장 모듈과 사용자 정의 모듈을 모두 지원하여 개발자들이 필요한 기능을 모듈화하여 사용할 수 있게 합니다.

Node.js의 모듈 시스템은 자바스크립트 코드의 구성과 모듈 간의 상호작용을 효과적으로 관리하며, 코드의 재사용성과 유지보수성을 높일 수 있는 강력한 도구입니다.


Node.js에서 *.mjs 확장자를 사용하여 ECMAScript 모듈을 실행할 수 있도록 지원

일반적으로 Node.js에서 자바스크립트 파일을 실행할 때는 .js 확장자를 사용합니다.

이 경우에는 CommonJS 모듈 시스템을 기반으로 모듈이 로딩되고 실행됩니다.

하지만, .mjs 확장자를 사용하는 경우에는 파일이 ECMAScript 모듈로 간주되어 ES6 모듈 시스템을 따르게 됩니다.


ES6 모듈은 import 및 export 키워드를 사용하여 모듈을 가져오고 내보내는 것이 특징입니다.

.mjs 파일에서 import 키워드를 사용하여 다른 모듈을 가져올 수 있고, export 키워드를 사용하여 현재 모듈의 기능을 다른 모듈에서 사용할 수 있도록 내보낼 수 있습니다.

 

ES6 모듈은 정적 분석에 의해 모듈의 의존성을 파악하고 필요한 모듈만 로딩하기 때문에 성능상의 이점을 가지고 있습니다. 또한, ES6 모듈은 CommonJS와 달리 파일 단위로 모듈을 캐싱하지 않기 때문에 파일이 수정되면 항상 새로운 모듈 인스턴스를 생성합니다.

 

.mjs 확장자를 사용하여 ES6 모듈을 실행할 수 있는 기능은 Node.js 12버전 이상에서 도입되었습니다. 따라서, 해당 버전 이상의 Node.js를 사용해야 정상적으로 동작합니다.

 

Node.js의 .mjs 파일을 사용하는 기능을 활용하면 모던 자바스크립트 문법과 모듈 시스템을 사용하여 보다 현대적이고 모듈화된 코드를 개발할 수 있습니다.