[JavaScript] CommonJS 와 ECMAScript Modules

Narcoker·2023년 7월 5일

목록 보기

52/55

CommonJS

const axios = require('axios');  // 모듈 가져오기
module.exports = someFunction;  // 모듈 내보내기
Node.js 환경에서 사용되는 모듈 시스템이다.
require() 함수와 import 구문를 사용하여 다른 모듈을 가져오고,
module.exports 객체를 사용하여 모듈을 내보냅니다.

이는 동기 방식으로 작동하므로,
서버 사이드에서 적합하지만 브라우저 환경에서는 별도의 번들링 도구가 필요하다.

require() vs import

CommonJS에서는 기본적으로 require() 함수를 사용하여 다른 모듈을 불러온다.

import 구문은 ECMAScript (ES) Modules에서 사용되는 구문으로,
기본적으로는 CommonJS에서 지원하지 않는다.

하지만 Node.js가 ES Modules를 지원하기 시작한 이후로는
Node.js 환경에서도 import 구문을 사용하여 모듈을 불러올 수 있게 됐다.

Node.js 환경에서 import 구문을 사용하려면 몇 가지 설정이 필요하다
Node.js 버전 12 이상에서는 .mjs 확장자를 사용하거나
package.json에 "type": "module"을 추가함으로써 ES Modules를 사용할 수 있다.

동기와 비동기

require() 는 동기적으로 동작한다.
즉, 즉시 모듈을 불러오고 실행한다.

import 구문은 비동기적으로 작동하며,
코드를 분석하는 시점에서 모듈의 경로를 결정하고
실제 코드를 실행하는 시점에서 모듈을 불러온다.

따라서 import 구문은 코드상의 어디에서나 사용할 수 있지만(일반적으로 최상단에 작성)
require() 함수는 호출하는 시점에 모듈이 필요한 경우에 사용해야한다.

동적과 정적

require()는 함수를 동적으로 모듈을 불러온다
따라서 런타임에 모듈의 경로를 변경하거나 조건에 따라 다른 모듈을 불러올 수 있다.

import 구문은 정적인 구조를 가진다.
컴파일 시점에 모든 import 구문을 분석하고 결정할수 있다.

이를 통해 트리 쉐이킹(Tree Shaking)등의 최적화 기법을 사용할 수 있다.

트리 쉐이킹(Tree Shaking)

모듈 번들링 단계에서 사용되지 않는 코드를 제거하는 최적화 기법이다.
이는 주로 ECMAScript (ES) Modules의 import와 export 구문을 활용하여 이루어진다.

트리 쉐이킹이라는 이름은 나무를 흔들어 불필요한 잎사귀를 떨어뜨리는 것 이라는 비유에서 유래됐다.
이 경우 "나무"는 전체 코드의 의존성 트리를, "잎사귀"는 사용되지 않는 코드를 의미한다.

이 기법을 사용함으로써 최종적으로 번들링되는 코드의 크기를 줄일 수 있다.

예를 들어, 모듈 A가 10개의 함수를 export하고 있지만,
다른 모듈에서는 그 중 2개의 함수만 import하여 사용하고 있다면,
트리 쉐이킹을 통해 나머지 8개의 함수는 최종 번들에서 제거될 수 있다.

트리 쉐이킹은 웹팩(Webpack), 롤업(Rollup) 등의 모듈 번들러에서 주로 사용되며,
자바스크립트를 비롯한 여러 프론트엔드 프레임워크와 라이브러리에서 활용된다.

단, 트리 쉐이킹이 잘 작동하기 위해서는
모듈이 사이드 이펙트(side effect)를 가지지 않는 것이 중요하다.

만약 모듈의 import나 export가 프로그램의 동작에 영향을 미친다면,
트리 쉐이킹을 통해 해당 코드가 제거되었을 때 예상치 못한 결과가 발생할 수 있다.

따라서 코드를 작성할 때 가능한 한 사이드 이펙트를 최소화하는 것이 좋다.