JS의 모듈 생태계

Yeonkor·2020년 10월 18일
0

자바스크립트의 코드 확장성을 위해서 모듈화는 필수적이다. Node.js와 같은 런타임 매니징 개념 또한 모듈화 작업때문에 가능하다.

일반적으로 CommonJS, AMD , UMD와 같은 개념들이 있는데, 개인적인 인사이트로는 Common JS가 선두주자인 것 처럼 느껴진다.

타인의 코드를 내 것으로 가져와서 사용할 때는, 불가피하게 변수간의 중복이 있거나, 충돌이 있을 수 있다. AMD, UMD, CommonJS 와 같은 기술은 결국 이러한 문제점을 해결하기 위한 고안의 시도이기도 하다.

지금 이 글에서는 이러한 기술들의 실 사용보다는 개념을 작성하고 싶다.

CommonJS

CommonJS는 노드에서 채택한 방식이다. require 함수로 매개변수를 호출해서, module.export 객체로 그 값을 받아와, 모듈 접근을 한다. CommonJS는 서버사이드에서 수요가 많다. 애초에 서버사이드 작업을 위해 작업되었기 때문이다.

AMD

AMD는 Asynchronous Module Definition의 약자이다, 직역하면 비동기적 모듈 선언 이라는 뜻이다. 그렇기에 AMD에서의 모듈 명세는 이름처럼 비동기 모듈을 표준안으로 삼고 있다.

Define()

AMD 방식의 특징은 define()함수가 있다는 점이다. 브라우저 환경에서 JS는 파일 스코프가 정의되어있지 않으며, 스코프를 제한한다. 이로 인해 지역 변수와 전역 변수의 분리가 가능하다.

사용에서는 코드의 define에 인자 값을 넣은 후, 두 번째 인자에서 콜백 함수 값으로 매개변수를 받는다. 이러한 방식은 비사용과 사용의 차이를 구분지어 관리하기에 접근 관리성에서 유용하다. AMD는 브라우저에서의 사용에서 CommonJS와 사용방식에서의 방향성이 서로 달라 분리되어 나왔다. 브라우저에서의 사용은 AMD의 사용 방식이 많은 것 같다.

profile
CTO를 꿈꾸는 CDO

0개의 댓글