모듈 형태의 JS

모듈은 어떠한 기능을 수행하는 코드를 묶은 것입니다. 모듈은 독립적인 구조를 가지고 있어, 추가 및 삭제가 가능합니다.

---

[ 모듈 장점 ]

모듈이 JS 에 주는 장점에는 1. 깔끔한 전역 범위, 2. 코드를 파일로 패키징하기, 3. 재사용 이 있습니다. 

 

1. 깔끔한 전역범위  

 프로젝트가 일정 규모이상 커지게 되면,  이미 정의되어 있는 속성을 재정의하는 위험이 존재하게 됩니다.

// 개발자 1의 코드 - a.js
var num = 1;

// 개발자 2의 코드 - b.js
var num = 2;

이와 같이 '개발자2' 가 변수 값을 재정의하게 되면  '개발자1'의 코드는 제대로 동작하지 않게 되고 오류가 발생하게 됩니다. 모듈은 독립적으로 변수를 사용하면서 재정의를 방지합니다.

 

2. 코드를 파일로 패키징하기

애플리케이션은 서버측 언어에서 여러 개의 파일로 구성되는데, 이 때 하나의 파일에 하나의 클래스만 포함시키고, 단 하나의 기능만 담당하도록 하는 것이 제일 좋은 case입니다. 모듈은 이 때 각각의 파일을 사용하고, 자신만의 범위를 가질 수 있도록합니다. 또한, 모듈 로더는 비동기적 의존성을 처리합니다 .

 

3. 재사용

프로젝트 중 해당 코드를 재사용해야하는 경우 모듈화를 했다면 사용하기가 편합니다. 

 

---

[ 모듈 구현 ]

모듈을 구현하는 기본적 원리는 각 로직을 함수로 감싸주는 것입니다. 이는 ( function ( ) { ... } ) ( ) ; 의 형태로 작성하며, 해당 형태를 IIFE라고 합니다. 이렇게 함수로 전체를 감싸기 때문에 그 안에서 선언된 변수나 함수들은 그 안에서만 존재하게 되어 앞에서 발생한 문제가 해결되게 됩니다.  

// 해당 범위 내 정의된 변수는 외부 접근 금지
( function( ){
 "use strict";
}( ) );

// 객체 참조점을 인수로 전달
( function( $, Backbone){
 "use strict";
}( jQuery, Backbone) );

// 전역 객체가 인수로 전달 
( function( window, Backbone){
 "use strict";
}(window) );

가장 널리 퍼진 모듈의 형태는 크게 두 가지로 비동기식 AMD 와 동기식 CommonJS 방식입니다. 이후에는 이 두 가지 방식을 모두 제공하는 UMD 형식을 많이 사용하였습니다.

 

이 후, ES6 에 들어서면서 JS 자체에서 모듈을 지원하게 되었습니다.

 

// a.js

export default function someFunction( ){\
	...
}

// b.js
import someFunction from './a';

someFunction (  );

//a.js 
export let bar = "bar"
export function setBar ( val ) {
	bar = val ; 
}

// b.js
import { bar, setBar } from "./a";
console.log( bar ) ; // bar
set ("bar2")
console.log ( bar ) ; // bar2 
bar = "wuz" ; // error : 변수의 값을 읽어오지만 변경 시 에러가 발생한다. 

'a.js' 에서 export 키워드를 사용해 외부에 공개할 함수 (someFunction( ))를 선언해 놓으면 'b.js' 에서 해당 함수를 import해서 사용하는 구조입니다 export되지 않은 함수나 변수들은  b.js에서 접근할 수 없기때문에 각 모듈들끼리 쉽게 분리가 됩니다. 또한, 어떤 함수가 어떤 파일에서 가져온 건지 한눈에 알 수 있기 때문에 코드를 분석하는 것에도 매우 용이합니다.   

 

참고

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=115112796

자바스크립트 언락

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=149515082

자바스크립트 프론트엔드 프로젝트 가이드

[ 더 알아보기 위한 참고할 사이트 ]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules

JavaScript modules