CommonJS 와 AMD

JavaScript 의 모듈화

CommonJS

• JavaScript 를 브라우저에서뿐 아니라, Server Side, Desktop Application 에서도 사용하려고 조직한 자발적 워킹 그룹입니다.

• 2005년 Ajax 가 부상하면서 더 빠른 JavaScript 엔진이 필요하게 되었고, 2008년 Google 의 V8 JavaScript 엔진이 공개되면서 브라우저 밖에서도 충분히 쓸만한 성능이 보장되었습니다.

• 2009년 Kevin Dangoor 가 Server Side JavaScript 아이디어를 제시했고, 공동 표준을 정하고 지켜나가는 활동이 필요하다 보았고, 3개월 후 CommonJS API 0.1 을 출시했습니다.

Server Side JavaScript

• 서로 호환되는 표준 라이브러리가 없다.

• 데이터베이스에 연결할 수 있는 표준 인터페이스가 없다.

• 다른 모듈을 삽입하는 표준적인 방법이 없다.

• 코드를 패키징해서 배포하고 설치하는 방법이 필요하다.

• 의존성 문제까지 해결하는 공통 패키지 모듈 저장소가 필요하다.

위에 제기된 문제점들을 해결할 방법은 '모듈화' 입니다.

모듈화

• 브라우저용 언어를 넘어 범용적으로 JavaScript 를 사용하기 위 선결조건 '모듈화'

모듈화 구성 요소

• 스코프(Scope): 모든 모듈은 자신만의 독립적인 실행 영역이 있어야 한다.

• 정의(Definition): 모듈 정의는 exports 객체를 이용한다.

• 사용(Usage): 모듈 사용은 require 함수를 이용한다.

모듈은 자신만의 독립적인 실행 영역이 필요하고, 파일마다 독립적인 파일 스코프가 있기 때문에, 보통 파일 하나에 모듈 하나를 작성합니다.

모듈화의 문제점

• 필요한 모듈을 모두 내려받을 때까지 아무것도 할 수 없게 됩니다.

• 이 단점을 극복하려는 여러 방법이 CommonJS에서 논의되었지만, 결국 동적으로 < script > 태그를 삽입하는 방법으로 가닥을 잡는다.

• < script > 태그를 동적으로 삽입하는 방법은 JavaScript 로더들이 사용하는 가장 일반적인 방법이기도 하다.

서버 모듈을 비동기적으로 클라이언트에게 전송하기

• 표준 < script > 태그를 이용해 앞에서 예로 든 fileA와 fileB를 차례대로 로드하면, fileB의 변수가 fileA의 변수를 모두 덮어쓰게 되는 전역변수 문제도 발생한다.

• 이런 문제를 해결하려고 CommonJS는 서버 모듈을 비동기적으로 클라이언트에 전송할 수 있는 모듈 전송 포맷(module transport format)을 추가로 정의했다.

• 이 명세에 따라 서버사이드에서 사용하는 모듈을 다음 예의 브라우저에서 사용하는 모듈과 같이 전송 포맷으로 감싸면 서버 모듈을 비동기적으로 로드할 수 있게 된다.

AMD

• JavaScript 표준 API 라이브러리 제작 그룹에는 CommonJS만 있는 것이 아니고, AMD(Asynchronous Module Definition)라는 그룹도 있다.

• AMD 그룹은 비동기 상황에서도 JavaScript 모듈을 쓰기 위해 CommonJS에서 함께 논의하다 합의점을 이루지 못하고 독립한 그룹이다.