프로젝트에 공통부분을 구현한 모듈들을 RequireJS로 가져와서 사용했다. 어떻게 사용하는지는 알게 됐지만 정확한 개념과 다른 방식들에 대해서도 공부해보고 싶어 정리해보기로 했다.
현재 프로젝트에서는 JavaScript를 동적으로 불러올 수 있는 CommonJS와 AMD, ES6 내장 모듈 중에서 AMD 방식을 사용하고 있다. 우선 CommonJS와 AMD 두 방식에 대해서 정리해보자.
CommonJS
Ajax의 활성화로 JavaScript 연산이 증가했고, V8 엔진이 등장하며 서버사이드 JavaScript가 부상했다. 이러한 서버사이드 JavaScript의 성공을 위해서는 표준을 정하고 표준을 지켜나가기 위한 활동이 필요하다 하여 탄생하게 된 것이 CommonJS 그룹이다. (정말 멋있다..!)
CommonJS에서는 JavaScript가 브라우저뿐만 아니라 서버사이드까지 범용적으로 쓰이기 위해서는 다음과 같은 쟁점들이 있다고 했다.
- 서로 호환되는 표준 라이브러리가 없다.
- 데이터베이스에 연결할 수 있는 표준 인터페이스가 없다.
- 다른 모듈을 삽입하는 표준적인 방법이 없다.
- 코드를 패키징해서 배포하고 설치하는 방법이 필요하다.
- 의존성 문제까지 해결하는 공통 패키지 모듈 저장소가 필요하다.
결국 이 쟁점들은 모듈화를 통해 해결할 수 있다. CommonJS는 현재 실질적인 표준으로 CommonJS 모듈 명세에 따라 모듈을 만들거나 모듈 로드 시스템을 만들고 있는 경우가 많다. 대표적으로 CommonJS의 명세를 따르는 프로젝트로는 Node.js가 있으며 이외에도 다양한 로더와 프레임워크들이 명세를 따르고 있다.
# 브라우저용
curl.js(http://github.com/unscriptable/curl)
SproutCore(http://sproutcore.com)
PINF(http://github.com/pinf/loader-js)
# 서버사이드용
Node.js(http://nodejs.org)
Narwhal(https://github.com/tlrobinson/narwhal)
Persevere(http://www.persvr.org)
Wakanda(http://www.wakandasoft.com)AMD
CommonJS뿐만 아니라 JavaScript 표준 API 라이브러리를 제작하고자 하는 다른 그룹으로 AMD(Asynchronous Module Definition)가 있다. AMD 그룹은 비동기 상황에서 JavaScript 모듈을 쓰는 부분에서 CommonJS와 합의점을 찾지 못하고 분리된 그룹이다. AMD의 목표는 필요한 모듈을 네트워크를 이용해 내려받아야 하는 브라우저 환경에서도 모듈을 사용할 수 있도록 표준을 만드는 것이다.
#브라우저용
RequireJS(http://requirejs.org)
curl.js(http://github.com/unscriptable/curl)
bdLoad(http://bdframework.org/bdLoad/)
Yabble(http://github.com/jbrantly/yabble)
PINF(http://github.com/pinf/loader-js)
#서버사이드용
RequireJS(http://requirejs.org)
PINF(http://github.com/pinf/loader-js)모듈화
결국 두 그룹의 핵심은 모두 모듈화이다. 모듈화는 아래와 같이 3가지 부분으로 이루어진다.
- 스코프(Scope): 모든 모듈은 자신만의 독립적인 실행 영역이 있어야 한다.
- 정의(Definition): 모듈 정의는 exports 객체를 이용한다.
- 사용(Usage): 모듈 사용은 require 함수를 이용한다.
두 방식 모두 모듈화 작업을 표준화 하지만 모듈 로드에서 차이점이 있다. 로컬 디스크에서 필요한 파일을 모두 불러쓰는 서버사이드에서는 CommonJS 명세가 간단하다. 하지만 필요한 파일을 네트워크를 통해 내려받아야하는 브라우저와 같은 환경에서는 AMD가 더 유연한 방법을 제공한다.
RequireJS
드디어 오늘의 주인공인 RequireJS다. 현재 프로젝트에서는 브라우저에서 네트워크를 통해 파일을 동적으로 가져오기 위해 RequireJS를 사용하고 있다. RequireJS는 AMD API 명세를 구현한 구현체 중 하나이며 추가적인 기능들도 가지고 있다. RequireJS의 자세한 사용법은 여기를 참고하면 된다.
// RequireJS 정리 내용 추가 ****
마치며
ES6로 넘어오면서 JavaScript 자체에서 ES6 Module로 모듈화를 지원하기 시작했기 때문에 현재는 ES6 Module과 webpack, rollup 같은 번들러를 통해서 많이 사용되는 편이라고 한다. 세가지 방법 모두에 대해 잘 알두고 상황에 따라 맞춰 사용하면 좋을 것 같다.
참고
https://d2.naver.com/helloworld/12864
https://d2.naver.com/helloworld/591319
