Javascript Module System - 1편

최근 프로젝트를 진행하면서, '번들러'라는 개념이 나와 이 김에 관련된 Module에 대해 공부하려고 해당 블로그 글을 작성하였다. 기존에 이런 모듈에 대한 개념을 제대로 모르고 프론트엔드 개발을 진행한 내 자신이 조금은 부끄럽지만, 지금이라도 완벽하게 이해하고 넘어가보려 한다.

자바스크립트의 모듈 시스템

초기의 자바스크립트 프로그램은 규모 자체가 크지 않아, 대부분의 스크립트들이 독립적으로 수행되었다. 하지만, 현재 사용되는 것들을 보면 규모가 말도 안 되게 커졌다. 시간이 지남에 따라 어플리케이션 규모가 커지고 스크립트 파일이 나눠지면서 원하는 것만 갖고 올 수 있는 모듈 분할이 필요하게 되었다. 이렇게 모듈 시스템이 나타나게 되었다.

모듈 시스템이란 플러그인 파일이나 잘게 쪼개져있는 JS 코드 조각들을 재사용하기 위해서 각각의 파일을 등록하고, 등록된 파일을 JS에 불러와 사용할 수 있게 해주는 프로그램을 의미한다. 여기서 "Module"이란 어플리케이션을 구성하는 부품이다. 즉, 재활용 가능한 코드 단위라고 설명할 수 있다.

Module = 재활용이 가능한 코드 단위

• 어디에서 사용되어도 동작의 일관성이 보장된다.
• 하나의 어플리케이션이 N개의 Module 집합으로 구성된다.

1️⃣ CJS, CommonJS

CommonJS는 정적 바인딩, 동기(Synchronous) import를 큰 특징으로 가지는 모듈 시스템이다. 여기서 정적 바인딩이란 require를 통해 가져온 값의 복사본을 제공하는 것이다. 즉, module.exports를 수행한 곳에서 값의 변경이 있어도 최초 require 이후에는 변경된 값을 사용할 수 있다.

 

CJS의 "동기적 로드"라는 특징 덕분에 이는 서버 사이드에서 사용하기 굉장히 용이하다. 그래서, Node.js가 CommonJS를 사용하고 있다. 원래의 이름이 ServerJS였다고 한다. 동기적 로드는 간단하게 말해서 모듈이 필요한 시점에 즉시 로드되고 해당 모듈의 코드가 실행될 때까지 다음 진행이 차단된다. 브라우저 환경에서 차단은 성능 혹은 동작에 문제가 발생할 가능성이 있다.

// util.js
module.exports.sum = (x, y) => x + y;
// main.js
const {sum} = require('./util.js');
console.log(sum(2, 4)); // 6

2️⃣ AMD, Asynchronous Module Definition

CommonJS는 모든 파일이 로컬 디스크에 있어 필요할 때 바로 불러올 수 있는 상황을 전제로 하는데, 이는 즉 동기적인 동작이 가능한 서버사이드 JS 환경을 전제로 한다는 것이다. 하지만, 브라우저에서는 이 방식이 필요한 모듈이 모두 다운로드 되기 전까지는 아무것도 할 수 없는 치명적인 단점이 존재한다.

AMD는 비동기 상황에서 JS 모듈을 사용하는 것에 대해 고민했고, 기존에 CommonJS에서 함께 논의하다 합의점을 찾지 못해 독립하였다. 즉, CommonJS는 JS를 브라우저 밖으로 꺼내기 위해 탄생한 크룹인 반면에, AMD는 브라우저에 중점을 둔 그룹이라고 생각하면 된다.

AMD 방식의 주된 특징은 비동기(Asynchronous)이다. 브라우저는 네트워크를 통해 모듈을 내려받기 때문에 비동기적으로 동작해야 하므로, AMD의 비동기적인 특징으로 클라이언트 사이드 개발에 적합하다고 볼 수 있다.

3️⃣ UMD

AMD와 CommonJS 두 그룹으로 나누어지다 보니까 서로 호환되지 않는 문제가 발생하게 되는데 이를 해결하기 위해 UMD가 등장했다. UMD는 모듈 시스템엥 따라 다른 구현을 정의하고 있는 형태에 가깝다.