[JavaScript] JavaScript의 모듈들

1.    모듈(Module)이란?

-      개발하는 애플리케이션의 규모가 커지면 파일을 여러 개로 분리하는 것이 좋음

-      이 때 분리된 하나의 파일을 모듈이라고 부름

-      모듈을 대개 클래스 하나 혹은 특정한 목적을 가진 여러 개의 함수를 포함하는 라이브러리로 구성되어 있음

 

 

[ 장점 ]

 

• 유지보수 용이

기능들이 모듈화가 잘 되어 있는 경우, 의존성을 줄일 수 있기 때문에 기능의 개선이나 수정이 용이

 

• 네임스페이스화

코드의 양이 많아질수록 전역 스코프에는 존재하는 변수명이 겹치는 경우가 존재 -> 이때 모듈로 분리하면 모듈만의 네임스페이스를 따로 가지기 때문에 해당 문제를 해결할 수 있음

 

• 재사용성

같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 재활용 가능

 

 

 

2.   모듈 시스템

-      모듈을 필요시에 불러오는 방법

 

• AMD

가장 오래된 모듈 시스템 중 하나 / require.js라는 라이브러리를 통해 처음 개발

 

• CommonJS

NodeJS 환경을 위해 만들어진 모듈 시스템

 

• UMD

AMD와 CommonJS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어짐

 

• ES Module

ES6 (ES2015)에 도입된 자바스크립트 모듈 시스템

 

 

 

3.   ES Module 방식

-      ES6(ES2015)에 도입된 자바스크립트 모듈 시스템

-      <script> 태그에 type="module" 속성을 추가해주면, 이 파일은 모듈로서 동작

-      모듈을 외부에서 사용할 수 있도록 내보낼 때는 named export, default export와 같은 키워드를 사용

 

 

 

4.    CommonJS 방식

-      NodeJS 환경에서 자바스크립트 모듈을 사용하기 위해 만들어진 모듈 시스템

-      모듈을 외부에서 사용할 수 있도록 내보낼 때는 exports, module.exports와 같은 키워드를 사용

 

 

 

---

 

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%82%A0%EA%B0%9C%EB%8B%AC%EA%B8%B0

[무료] 프론트엔드 날개달기: Vuejs, React 배우기 전에 꼭 알아야하는 지식 - 인프런 | 강의