Common JS, AMD

Common JS

의존성 관리 문제에는 단지 어떤 의존성 관리 시스템을 이용할 수 있느냐의 문제 뿐만 아니라 성능 문제도 끼어있다.

브라우저는 모든 자바스크립트 파일을 HTTP 요청을 보내야 하는 것이다.

각 연결을 이용하려면 HTTP 헤더, 쿠키, 다른 TCP 핸드셰이크 시작 등의 오버헤드가 따른다.

애플리케이션이 SSL을 이용한다면 상황은 더 심각해진다

Common JS 모듈을 선언하는 방법은 상당히 직관적이다.

기본적으로 명칭 공간을 이용하며 각 모듈은 인터프리터가 정의한 exports 오브젝트에 변수를 추가하여 외부에 공개할 수 있다

모듈에 명칭 공간을 적용했으므로 Node.js 같은 모든 CommonJs 호환 자바스크립트 인터프리터에서 이 코드를 사용할 수 있는 것이다.

AMD

AMD는 동적로딩, 의존성 관리, 모듈화가 톱니바퀴처럼 아름답게 맞물린 API 디자인을 제시한다.

동적로딩 ( Dynamic loading, Lazy loading )

페이지 렌더링을 방해하지 않으면서 필요한 파일만 로딩할 수 있는 방법이다.

script 태그를 동적으로 생성하여 삽입하는 방법이 제일 안전하고 합리적이다.

var scriptEl = document.createElement('script');  
scriptEl.type = 'text/javascript';  
scriptEl.src = 'example.js';  
document.getElementsByTagName('head')[0].appendChild(scriptEl); 

모듈 로더

클라이언트에서 Common JS 모듈을 사용하려면 모듈 로더 라이브러리로 모듈을 로드해야 했다.

코드를 별도의 모듈 컴포넌트로 분리하여 애플리케이션 설계를 개선하였고,

동시에 의존성 관리, 범위 고립, 명칭 공간 등을 한번에 해결하였다.

Require JS

AMD 표맷을 준수하는 모듈 로더이다.

require( ) 함수에는 콜백 함수의 인자로 의존성을 전달한다.

이러한 이슈들을 해결하는 것이 바로 Webpack이다.

>> Webpack 포스팅 바로가기 >> 

http://d2.naver.com/helloworld/591319

http://blog.javarouka.me/2013/04/requirejs-javascript.html