[JS Log] 자바스크립트 모듈 시스템을 알아보자

1. 왜 공부하는가?

> 사실 나같이 최근에 코딩을 배운 사람들은 자연스럽게 import, export를 하면서 다른 파일을 불러온다. 모듈 시스템이 뭔지 알기 전까지는 사실 이 단순한 import, export 문법이 얼마나 획기적인 변화인지 알지 못했다. 지금에서야 변수를 var로 선언하는 일은 없다. 하지만, ES6 도입 전 var 밖에 없던 시절 전역 변수 오염을 해결하기 위해 모듈의 필요성을 느꼈고 점차적으로 모듈 시스템이 발전해왔다. 나는 오늘 vite과 cra에 차이를 이해하기 위해서 부차적으로 알아야하기에 공부를 해보았다. 간단하게 2가지 포인트를 알면될 것 같다.

 

2. 모듈 사용의 이유와 종류

2 - 1. module의 사용의 이유

> 모듈의 근본은 각 파일마다 스코프를 만들어주는 것이다. 각 파일을 모듈화하면서 모듈끼리는 변수 이름이 같더라도 다른 변수로 취급한다. 코드가 많아지면 많아질수록 점점 변수명 짓기가 까다로워진다. 

 

> 그 외 유지보수나 재사용에 대한 이야기가 있는데 굳이 모듈의 장점이라기보다는 파일을 따로 관리함에 있어서 장점이라고 생각한다. 

2 - 2. module의 종류

- CommonJS : Node.js 환경에서 자바스크립트 모듈을 사용하기 위해 만들어진 모듈 시스템이다. (하지만, 노드 13.2부터는 ES 모듈 시스템이 도입되었다. 최신 문법을 옛날 코드로 변환해주는 Babel 사용할 필요없이 package.json에 type을 모듈로 설정하면된다. ) 흔히 require, module.exports 문법이 CommonJS다.

 

-  AMD(Asynchronous module definition) : 커먼 제이에스는 node 환경에서 작동하는 시스템인데 웹 환경에서 모듈 시스템을 사용하기 위해 만든 스펙이다. 이름처럼 비동기적으로 작동한다. 구체적으로 나온 것은 require.js 라이브러리다.

 

- ES Module : ES6에 도입된 자바스크립트 모듈 시스템으로 type='module'로 모듈화할 수 있다.

 

3. 모듈화에 따른 변화

> 모듈화가 진행되면서 이것을 다시 묶어주는 움직임도 있었고 구체적으로 webpack이 나오고 번들링도 모자라서 나눠서 번들링하는 lazy-loading을 하는 등의 노력들이 계속되고 있다.