[자바스크립트 31] 모듈

거의 다 온 것 같다.. 오늘은 모듈에 관해 물어보았다.

 

// 그러면 다음으로 자바스크립트의 모듈에 관련해서 질문하겠습니다. 모듈 작성 및 내보내기 가져오기, 그리고 commonJS와 ES6 모듈 시스템에 대해 자세히 설명해 주세요.

 

자바스크립트 모듈은 관련 있는 함수, 객체, 또는 값들을 그룹핑하여 캡슐화하고, 외부로부터의 접근을 제한하는 방법을 제공합니다.
이는 코드의 재사용성을 향상시키며, 유지 관리를 쉽게 하고, 이름 충돌을 방지하는 데 도움이 됩니다.

 

1. CommonJS (CJS):

Node.js에서 사용하는 모듈 시스템이며, 동기식(Synchronous)으로 작동합니다. require() 함수를 사용해 모듈을 가져오고, module.exports를 사용해 모듈을 내보냅니다.

// math.js
const add = (x, y) => x + y;
module.exports = add;

// app.js
const add = require('./math');
console.log(add(2, 3));  // 5

 

2. ES6 Modules (ESM):

ES6에서 도입된 모듈 시스템이며, 비동기식(Asynchronous)으로 작동합니다.
import 문을 사용해 모듈을 가져오고, export 문을 사용해 모듈을 내보냅니다.

// math.js
export const add = (x, y) => x + y;

// app.js
import { add } from './math.js';
console.log(add(2, 3));  // 5

CJS와 ESM의 주요 차이점:

1. 문법: 위 예제에서 볼 수 있듯이, 두 시스템은 서로 다른 문법을 사용합니다.
   
   
2. 동기 vs 비동기: CJS는 동기식으로 작동하며, 모듈이 필요한 즉시 로드합니다. 반면, ESM은 비동기식으로 작동하며, 모듈이 실제로 필요할 때까지 로드를 지연시킬 수 있습니다. 이는 ESM이 HTTP/2 및 브라우저 캐싱과 같은 성능 최적화 기법을 이용할 수 있다는 것을 의미합니다.
   
   
3. 값의 복사 vs 참조: CJS는 모듈의 값들을 복사하여 내보내고 가져옵니다. 따라서, 한 파일에서 내보낸 객체의 속성을 변경하더라도 다른 파일에서는 영향을 받지 않습니다. 반면, ESM은 모듈의 값들을 참조하여 내보내고 가져옵니다. 따라서, 한 파일에서 내보낸 객체의 속성을 변경하면 다른 파일에서도 해당 변경사항이 반영됩니다.
   
   
4. 스코프: CJS 모듈에서, 모든 코드는 자체적인 스코프를 갖습니다. 다시 말해, 모듈 내의 변수는 모듈 밖에서 접근할 수 없습니다. 반면에, ESM에서는 export 문을 사용하여 명시적으로 변수를 내보내야 다른 모듈에서 접근할 수 있습니다.
   
   
5. 브라우저 호환성: 대부분의 모던 브라우저는 ESM을 직접 지원합니다. 그러나 CJS는 Node.js 환경에서만 동작하므로, 브라우저에서 사용하려면 번들러(예: Webpack, Browserify 등)가 필요합니다.

두 모듈 시스템에는 각각 장단점이 있으므로, 프로젝트의 요구사항에 따라 적절한 모듈 시스템을 선택하는 것이 중요합니다.

 

/ /위에서 알려주신 사항중 브라우저 호환성에서 cjs는 node.js 환경에서만 동작한다는 것은 어떤 말씀이신가요?

 

그러한 질문을 주셔서 감사합니다. 웹 개발에 대해 이야기할 때 "환경"은 두 가지 주요 컨텍스트로 나눌 수 있습니다.:

 

클라이언트 측(브라우저): 이는 실제 웹페이지를 렌더링하고, 사용자와 상호작용하는 JavaScript 코드가 실행되는 곳입니다. 브라우저는 Node.js나 CommonJS와 같은 서버 측 기술을 지원하지 않습니다. 따라서 브라우저에서 직접 실행되는 JavaScript 코드는 ESM을 사용해야 합니다. 다행히도, 모던 브라우저는 대부분 ESM을 지원합니다.

 

서버 측(Node.js): 이는 백엔드 로직이 실행되는 곳으로, 데이터베이스에서 데이터를 가져오거나, 인증을 처리하거나, 클라이언트에게 동적으로 생성된 웹페이지를 제공하는 등의 작업을 수행합니다. Node.js는 JavaScript를 서버 측에서 실행할 수 있게 하는 런타임입니다. Node.js는 원래 CommonJS 모듈 시스템을 사용했으며, 최근에는 ESM도 지원하게 되었습니다.

 

클라이언트 측 JavaScript와 서버 측 JavaScript는 기본적으로 다른 실행 환경을 갖습니다. Node.js 환경(서버 측)에서 npm install 명령어를 사용하여 패키지를 설치하거나, CommonJS 모듈을 require() 함수로 가져오는 것은 가능하지만, 이것들은 브라우저 환경에서는 직접적으로 작동하지 않습니다.

 

따라서 "CommonJS는 Node.js 환경에서만 동작한다"는 의미는, CommonJS 모듈은 브라우저 환경에서 직접 실행될 수 없다는 것입니다. 브라우저에서 CommonJS 모듈을 사용하려면, 번들러 도구(예: Webpack, Browserify 등)를 사용해 ESM 또는 브라우저가 이해할 수 있는 다른 형식으로 변환해야 합니다. 이러한 변환 과정을 "빌드" 또는 "트랜스파일"이라고 부릅니다.

 

개발 환경에서 Node.js와 npm을 사용한다는 것은, 우리가 개발 도구나 라이브러리를 설치하거나, 코드를 빌드하거나, 개발 서버를 실행하는 등의 작업을 수행할 수 있다는 것을 의미합니다. 이것들은 최종적으로 브라우저에서 실행되는 클라이언트 측 코드를 작성하고 준비하는 데 도움이 됩니다.