과거에는 웹에서의 동작하는 로직이 작았다.
그래서 js파일의 크기도 작았고 그로 인해 js를 관리해야할 필요성을 못느꼈다.
간단한 코드를 짜는 정도로 사용했던 js가 갑자기 엄청나게 커지게된 것은 비교적 최근의 일이다.
js파일이 커지면서 갑자기 대두된 것은 js를 모듈화 할 수 있느냐이다.
뭔가 엄청 황당한 주제일 수 있겠지만 js는 원래 모듈화라는 개념 자체가 없다.
언어적으로 모듈화가 추가된 것은 ECMAScript6이상부터인데...
놀랍게도 이 ECMAScript6은 2015년에 만들어진 것이다.
그러면 ECMAScript1이 1997년에 만들어 졌으니 근 20년동안 모듈화에 대한 논의가 없었던 것일까?
당연히 그런건 아니였고 사람들은 필요하면 만들어서 쓰는 법이므로 모듈화에 대한 프로젝트는 이미 많다.
그러나 문제점은 오픈소스였고 그로 인해서 여러 방식으로 모듈화를 사용하기 시작했다.
CommonJS vs AMD
그 싸움은 위와같이 두 진영으로 갈렸는데 누가 더 좋은지에 대한 논의는 하지 않겠다.
둘의 싸움도 우리는 궁금하지 않고 이 둘의 방식에대해서 조금 설명하도록하자.
모듈로더(Module Loader) : 실행 시간에 스크립트를 로드해서 html에 부착한다.
이 방식은 실행시간에 모듈을 불러오는 것이다. 즉 클라이언트 사이드에서 불러오는 것이다.
그리고 script태그에 부착하는 것과 같은 효과를 낸다.
여러분이 모듈을 10개를 불러온다면 스크립트태그 10개가 추가된단고 보면된다.
이 방식도 뭐 나쁘지는 않고 지금도 쓰이는 방식이다.
하지만 좀 아쉬운것은 자기가 만든 스크립트를 이렇게 나눠서 로딩하는 방식은 당연히 로딩하는데 매우 시간이 걸리게된다.
예를들어 js파일을 여러분이 나눠서 20개쯤으로 코딩해서 모듈로더로 불러오게된다면 20번불러오게 되는것이다.
http는 비용이 큰 프로토콜이므로 매우 심한 부하를 주게된다.
그래서 나온 발상은 어짜피 내가 짠 코드라면 빌드시간에 합치면 되지 않을까?였다.
결국 나온것은 모듈 번들러라는 것이다.
모듈번들러(Module Bundler) : 컴파일 시간을 만들어서 일단 빌드하여 한개의 js파일로 내보낸다.
기본적으로 js는 빌드라는 것이 없다.
그렇기에 차라리 빌드타임(컴파일 타임)을 만들어내서 한개의 js파일로 보내자는 시도를 하는 것이다.
이렇게 모듈번들러가 탄생하게 되었는데 이 모듈번들러가 사실 상 모듈로더를 대체하게 되었다.
왜냐하면 어짜피 내가 만든 코드라면 모듈로더보단 모듈번들러가 낫기 때문이다.
남이 만든 모듈을 쓸때 모듈로더를 쓰는경우가 있으니 아직 대체라고 말하긴 힘들 수도 있겠다.
이 모듈로더의 역활은 정말 심플하고 기본에 충실하다.
정말 묶어주는 역활밖에 하지 않는다.
그래서 ts나 babel등을 달아서 사용해야한다.
물론 요즘에는 webpack이라는 놈이 등장해서 지분을 매우매우매우 많이 깎아먹었다.
이놈에 대한 포스팅은 여기를 참조해라.
어쨋든 우리는 browserify를 사용하도록 해보자.
CommonJS
이 browserify는 CommonJS방식 모듈을 사용한다.
무슨 말이냐면 nodejs방식과 똑같다고 생각하면된다. 즉 부연설명 필요없음.
간단하지만 이를 하나로 합쳐보자.
Browserify설치
npm install -g browserify
설치하는 법은 매우 간단하다.
전역으로 설치해준다.
혹시라도, 그럴확률은 0에 수렴하겠지만 npm을 설치할줄 모른다면 이 포스팅을 참조하라.
윈도우 용이긴한데 하고싶은말은 nodejs를 설치하면 웬만해선 npm도 자동설치된다.
이제 타겟이 될 놈에게 browserify를 사용해준다.
browserify <소스 이름> -o <결과물 이름>
사용방법은 저게 전부다.
소스가 두개지만 결과물에될 녀석만 해주면되는데 그 이유는 알애서 require을 모두 타고가서 한개로 번역해주기 때문이다.
소스를 뜯어보면 번역된걸 알 수 있다.
뭔가 굉장히 난독화된 코드로 바뀌었다.
사실 이정도는 난독화까진 아니고 그냥 짜증나는 코드로 바뀌었다는게 맞는 말일 것이다.
어쨋든 main.js는 require로 의존된 sub.js까지 다 묶어서 bundle.js로 만들었다.
이코드가 실행되는지 테스트 코드를 만들어보자.
제대로 실행되는걸 알 수 있다.
결과는 webpack이라는 글자가 나오는데 예제 돌려쓰다보니 그런거니 별 신경쓸 필요는 없다.
정말좋기에 여러 모듈과 묶어서 쓰이지만 요즘은 webpack에 밀려서 잘 안쓰이는 경향이 있다.
webpack이 모듈번들러이면서 여러 기능을 제공하기에 browserify보다 좋다는 인식이 있다.
여러분도 잘 알아보고 사용하길 바란다.