자바스크립트 모듈(module) 이해하기

Understanding JavaScript Modules: Bundling & Transpiling: https://www.sitepoint.com/javascript-modules-bundling-transpiling/?utm_content=buffer77374&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer

내가 이해하기 위해 하는.. 너무 모자란 번역.

원문을 읽으시길!!

시대에 따른 모듈

예전에는 브라우저 자체적으로는 모듈을 지원하지 않았었다.

Node나 CommonJS는 2009년에 생겼는데 npm의 많은 패키지가 CommonJS 모듈을 사용했다.

browserify는 2011년에 발표됐는데 CommonJS 모듈을 client-side인 자바스크립트가 npm 패키지를 require하도록 허용하는 브라우저로 보내졌다. 이 툴은 필요한 모든 의존성을 하나의 자바스크립트 파일로 묶었다.

예전 방식

jQeury같은 라이브러리는 $를 global scope나 window에 추가했다.

window.$ = function() { ... } ;

스크립트를 라이브러리에 포함시키고 global 객체를 사용했다.

<script src="jquery.js"></script>
<script>
$(function() { ... });
</script>

global scope를 더럽히는 것을 피하기 위해 'App' 같은 global 밑에 네임스페이스를 갖는다. 이렇게 하지 않으면 name 충돌이 생긴다.

var App = {};
App.Models = {};
App.Models.Note = function() {};

앞으로의 방식

라이브러리는 공통 모듈 포맷으로 객체에 export한다. (ES6 modules)

export default function $() { ... }

모듈을 local scope에 import하고 사용한다.

import $ from 'jquery';
$(function() { ... });

global이 필요하지 않다.
source순서에 독립적이다
npm 접근
당신의 어플리케이션 코드상의 namespace가 필요없다.
다이나믹하게 어느 때나 필요할 때 모듈을 로드한다.

현재의 방식

완전완전 복잡하다. 일단 사용되고 있는 엄청 많은 모듈 포맷이 있다.

CommonJS
AMD
UMD
ES6 Modules

다양한 형태와 사이즈로 asset을 만들어주는 툴

Broswerify
jspm
Webpack
Rollup
Brunch / Brocolli
Sprockets
Build your own with Gulp / Grunt

그리고 당신이 사용하기를 원하는 transpiler도 있다.

Babel for ES6
CoffeScript
Typescript

게다가 다이나믹하게 모듈을 로딩해주는 다양한 라이브러리도 있다.

Require.js
System.js

위는 현재 사용되고 있는 인기있는 툴의 간단한 목록이다.

2016년에는 통합해보자.

프론트엔드 개발자는 오랫동안 빌드 툴을 사용했지만, 빌드 단계가 표준이 된지는 최근 몇 년 안 됐다. Sass나 CoffeScript같은 툴 은 pre-proccessing 이 대세가 되도록 해주지만 ES6와 같은 모멘텀에는 모두가 선상에 올랐다..(?)

Gulp와 Grunt는 최근 몇년 매우 유행인데 이 툴들은 assets을 시리즈로 연결하게 해준다. 이 툴들은 굉장한 영향을 끼쳤고 지금도 인기있는데 그럼에도 많은 사람들이 이 툴을 npm에서 바로 사용하기 위해 선택한다.

개인적으로 asset의 파이프라인은 더이상 신경쓰지 않는데, 내가 기대하는 것은 필요할 때 사용하기 위한 최신의 툴을 위해 config tool을 최소화 하는 것이다. 설치, 환경설정 세팅, 유지보수를 걱정할 필요 없는 Sass나 Autoprefixer, Babel, Coffescript와 같은 일반적인 모듈 시스템과 로더를 말하는 것이다. 사실은 모든 개발자가 asset 파이프라인을 만들기 위한 탐구를 하는데 너무 시간을 많이 낭비해왔다.

시작을 명확히.. (Clear Starting Points.. 명백한 시작점)

우리가 동의할 수 있는게 몇 가지 있다.

ES2015 모듈은 자바스크립트를 위한 진정한 미래의 모듈 포맷이다.
Babel은 오늘날 선택한 ES2015 컴파일러이다.
native 로더는 여전히 브라우저에서 잘 안 먹힌다. Telerik의 Future of JavaScript 보고서에서 완벽한 ES2015 지원은 2년 이상 걸릴 것이라고 했다.
만약 지금 모듈을 사용하고 싶다면, 아마 어디에서든 CommonJS를 포함하게 될 것이다.

Browserify, Webpack, jspm에서 최소의 환경설정이 무엇인지 한번 보자. 이것들은 오늘날 알아야하는 가장 중요한 Javascript Bundler이다.

새로운 프로젝트

mkdir modules-app
cd modules-app
npm init -y
npm install --save-dev broserfiy webpack jspm
mkdir src
touch src/{entry,lib}.js index.html

index.html을 수정한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Modules!</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

위의 코드를 돌리려면 자동으로 reload해주는데 환경설정이 하나도 필요 없는 HTTP서버인 live-server같은 서버가 필요하다. npm install -g live-server 로 global하게 설치하고 live-server 명령어로 서버를 구동시키자.

Browserify

Browerify는 dependency를 모두 묶어서 브라우저에서 require('modules')가 가능하게 해준다.

src/lib.js를 열고 첫번째 모듈을 추가하자.

var double = function(number) {
    return number * 2;
}

module.exports = {
    double: double
}

src/entry.js를 열고 모듈을 require하고 사용해보자.

var lib = require('./lib.js);
console.log(lib.double(2));

package.json 파일에서 scripts를 수정하자

"scripts": {
    "browserify" = "browserify ./src/entry.js -o ./bundle.js"
},

이 스크립트를 npm run browserify로 수행하자.

Browserify는 프로젝트 root에 bundle.js를 생성하는데 콘솔에는 아마 4개의 output을 볼 것이다. Broswerfiy가 무엇을 하고, 어떻게 생성하는지 알고 싶으면 egghead.io의 Introduction to Broserify를 봐라.

축하축하!! 브라우저에 모듈을 생성했다.

Browerify의 주요 장점은 내가 작성한 modules뿐만 아니라 npm modules도 접근할 수 있다는 것이다. lodash를 설치하자

npm install lodash --save-dev

src/lib.js을 수정하자

var sum = require('lodash/sum');

var double = function(number) {
    return number * 2;
}
var addFive = function(number) {
    return sum([number, 5]);
}

module.exports = {
    double: double,
    addFive: addFive
}

src/entry.js를 수정하고 addFive를 호출하자

var lib = require('./lib.js');
console.log(lib.double(2));
console.log(lib.addFive(2);

npm run browserify를 다시한번 실행시키고 브라우저 개발자도구 콘솔에서 4와 6을 봤으면 lodash를 성공적으로 가져오고 sum함수를 사용했다는 소리다!

여기까지 잘 따라왔으면 오늘날 브라우저에서 어떻게 모듈을 사용하는지 다 알게 된 것이다. 시작으로 아웃라인을 잡는데 많은 도움이 됐다.

global이 필요 없다.
소스 순서에 무관하다
npm에 접근한다
각각 namespace가 필요 없다.

후에는 모듈의 다이나믹 로딩에 대해 알아볼것이다.

Webpack

Webpack은 모듈 bundler다. Webpack은 종속적으로 모듈을 취하고 그러한 module을 나타내는 static assets을 생성한다(?)

package.json에 webpack을 호출하기 위해 새로운 스크립트를 추가하자.

"webpack" = "webpack ./src/entry.js bundle.js"

npm run webpack으로 실행하자.

Webpack은 bundle.js을 다시 작성하는데 브라우저에서의 결과는 똑같다.

npm run browerify와 npm run webpack을 모두 실행해보고 컴파일된 bundle.js의 다른점을 찾아보자. 내부적으로 어떻게 되는건지 이해하는 것은 중요하지 않고, 중요한 것은 똑같은 코드로, 똑같은 작업을 하는데 구현이 다르다는 것이다. 각 모듈은 bundle.js에 있고 ID를 보여해서 필요할 때마다 로드할 수 있다.

Webpack은 이것보다 더 하는게 많다! Webpack은 스위스 군용 칼같은 module bundler이다. Webpack은 page refresh없는 LiveReload처럼 개별 모듈을 자동으로 reload해주는 hot module repacement와 같은 개발에서 좋은 툴이다.

저작자표시

'개발 > Javascript' 카테고리의 다른 글

[모듈화] JavaScript 표준을 위한 움직임: CommonJS와 AMD 정리 (0)	2016.07.11
[webpack] 읽을만한 자료들 (0)	2016.07.11
Understanding ECMAScript 6 (0)	2016.02.22
웹 성능 최적화 (0)	2015.08.11
ecmascript6 추가 사항 (0)	2015.06.10

Allie Loves Noah

자바스크립트 모듈(module) 이해하기

'개발 > Javascript' 카테고리의 다른 글

티스토리툴바

자바스크립트 모듈(module) 이해하기

'개발 > Javascript' 카테고리의 다른 글

'개발/Javascript' Related Articles

티스토리툴바