JavaScript - 끄적거리는 자바스크립트 모듈 시스템의 역사 (CommonJS, AMD, UMD, ES6, TypeScript)

 

자바스크립트 모듈시스템의 역사를 보다보면 바퀴의 변천사와 같아보였다.

(원시인들이 통나무를 굴려서 무거운 돌을 옮기다가 => 손수레가 나왔고 => 손수레를 밀다가 마차가 나오고 => 자전거 타다가 => 자동차까지)

 

특히 이 분야는 불편함을 한두개씩 보완하면서 진화하는 포켓몬과 같다고 할까나

그래서 이번 포스팅은 그냥 두서없이 주절거려보았다

혹시 읽으시다가 잘못된 점이 있으면 알려주시기를...⭐

 

---

끄적거리는 자바스크립트 모듈 시스템의 역사 (CommonJS, AMD, UMD, ES6)

 

js

원래 시작자체가 브라우저 내에서 쓰려고 만든 스크립트 언어이다보니 마구잡이로 실행이 된다.

저렇게 한꺼번에 로드되다보니 순서도 보장안되고 스코프도 꼬임...

<script src="./first.js" /> 
<script src="./second.js" /> // "먼저 다운받은 사람이 먼저 실행하긔 후후..."
<script src="./third.js" />

 

그러다 보니 모듈시스템의 필요성이 대두된다. 

모듈 단위로 묶어서 사용하다보면 스코프 내에서 실행되도록 바운더리를 제한할 수 있기 때문이다

근데 기왕 모듈시스템하기로 했으니 브라우저 세계만 적용되는 게 아닌 서버나 데탑 앱 세계에서도 사용되도록 범용적인 시스템을 만들자고해서 나온 것이 commonJS 이다.

 

commonJS 등장
=> 브라우저 외의 환경에서도 동작하도록 범용적인 js를 위한 모듈 시스템이다. 
=> 동기적으로 모듈을 호출하는 방식을 선택  => node.js 가 이방식을 채택  (노드js 는 자바스크립트 런타임)
=> but... 트리쉐이킹(최적화)가 안되고, 비동식보다 느림 등의 단점
=> 브라우저에서는 so .. so .. 쩝

 

그래서 두...둥
AMD 등장  => commonJS 와 호환성 문제가 생김
UMD 등장 => commonJS && AMD 모두 호환, 그렇다고 모듈시스템의 통합은 아님

혼란스러운 정국에 모듈 사회는 통합이 쉽지 않았다.

ES6 등장 
=> 그동안 고질병이었던, 동기+비동기 둘다 지원, 객체/함수 바인딩, 트리쉐이킹 가능
=> but... 구형에서는 동작안함....IE.... => 그래서 둘의 사이를 이어주는 트랜스 파일러인 바벨이 나옴

(허나 바벨 설정은 좀 까다로운 편이었는데...)

 

TypeScript 등장

=> 타입스크립트는 es6  + 타입 변환 기능으로 무장된 언어임 (풍성한 버전이랄까)

=> 자체 컴파일러인 (tsc)가 어차피 변환 다 해주니까... 바벨 이런놈 신경쓸 필요가 없게 되었음

=> 참고로 tsc 는 타입 검사(typechecking)도 해주고 코드변환(transpile)도 해준다

=> 그래서 가끔 package.json 에서 tsc를 끼워넣는 명령어를 볼 수 있다

한마디 하자면 "런타임 실행전에 오류 잡아주는 .. 기특한 녀석"