[Language] Node.js? Webpack? Javascript? CommonJS?

<Node와 CommonJS>

Node.js에서 아래와 같은 문법을 본적이 있을것이다

var react = require('React');

필자는 그냥 Node.js만의 문법이라고 생각했었다

하지만 이것은 CommonJS의 문법이다. CommonJS라는 모듈화 Specification을 Node.js가 채택했기 때문에

Node.js에서 require(...) 문법을 사용할 수 있는 것이다

(RequireJS가 아니다)

모듈을 만들 때는

exports.aaa = bbb

또는

module.exports = aaa

이러한 specification(명세)을 따르게 되는데, CommonJS를 알고있어야 사용할 수 있을 것이다

Node는 Javascript일 뿐이라고 생각했는데, 그 사이에 CommonJS가 있었다

물론 ES2015==ES6==ECMAScript6 Standard도 있고.

<Webpack과 CommonJS>

Webpack은 CommonJS와 AMD:Async Module Definition 포맷을 모두 지원한다

Webpack은 Module화 시스템이다

Webpack을 사용하면 Javascript를 여러개의 모듈로 분리하여 작성하고, 모듈 사이의 dependency에 따라 build할수 있다

Javascript로 프로젝트를 한다면 Webpack은 거의 필수라는 생각이 든다

여기까지는 Webpack 소개였고

Webpack을 공부하는데, CommonJS을 모르니까 Webpack이 뭔지 이해가 안되더라.

Webpack이 AMD를 지원하긴 하지만, Node도 CommonJS를 쓰니까 Webpack도 CommonJS로 대체로 쓰나보다

Webpack을 공부하기 전에 CommonJS부터 먼저 공부하자!

<Javascript와 CommonJS>

Javascript의 Module Specification인 CommonJS

Server-side인 Node에서 CommonJS는 사용하기 편리하지만

Clisnt-side에서는 <script> 태그로 include하다보면 변수 이름이 겹치는 문제가 발생할 수 있다

그래서 Client-side에서는 AMD가 더 편리하다...고 하지만!

Webpack과 함께라면 여전히 우리는 CommonJS와 함께 할수 있다

<vue와 webpack>

vue를 client-side에서 개발하는데 너무 비효율적인 느낌이 들었다

이때 webpack와 commonJS를 알게되었고, webpack은 잘 모르겠고 commonJS는 client-side에서 사용하는데에 약간 문제가 있었다(=일반적이지 않다)

그래서 계속 webpack을 공부해서 이해해보니, Javascript 개발환경도 매우 편리해졌구나 라는 생각이 들었다

<conclusion>

Node가 대세처럼 뜨면서 Javascript로 개발하는 범위가 넓어졌다

Node 속에는 CommonJS가 있고, Webpack도 CommonJS를 기반으로 사용하고(필자 주변의 대체로)

Javascript를 공부해보겠다면 Node와 함께 Webpack, CommonJS도 공부하면 도움이 될것이다

지금까지 공부내용 정리겸 포스팅하였다