자바스크립트 모듈 이해하기 - 네임스페이스

오늘은 자바스크립트의 모듈에 대해서 이야기 해보자

---

모듈은 파일이나 코드의 묶음 단위로 애플리케이션 하나의 구성요소로 볼 수 있다. 이렇게 모듈로 정의 하면 모듈단위로 코드를 재사용 할 수 있고, 하나의 애플리케이션이라는 큰 기능을 작은 기능단위로 잘게 분리하여 관리할 수 있다.

예를 들어, 베이스볼 게임이라는 애플리케이션을 문제 생성 모듈, 플레이어 관리 모듈, 등과 같이 여러 모듈로 구성할 수 있다

 

* 위와 같이 여러 장점들이 있지만 너무 많이 모듈화를 한다면 유지 보수나 다른 개발자들이 수정작업을 할때 불필요한 작업들이 발생한다 관리모듈이든, 문제 생성 모듈이든, 그 모듈은 분명한 작업들을 관리하는 작업이야 한다

단순히 어떠한 기본값들을 모듈화해서 관리할 필요는 없을 것이다

 

ECMAScript 5.x 버전까지는 모듈에 대한 정의를 자바스크립트 표준으로 제공하지 않았다  그래서 네임스페이스 패턴을 통해 모듈을 정의 했다. 다음의 예제를 통하여 네임스페이스 패턴을 알아보자.

 

var namespaceA = (function(){
	var privateVariable = '비공개 변수';
    return {
    	publicApi: function(){
        	console.log(privateVariable + '를 접근할 수 있습니다.');
        }
    }
})();

namespaceA.publicApi();

 

네임스페이스란 C# 언어에서 제공하는 기능으로 코드를 그롭화하고 이름 충돌을 방지하게 도와준다

하지만 자바스크립트에서는 네임스페이스를 직접적으로 지원하지 않는다. 그래서 함수를 정의함과 동시에 실행하는 즉각 호출 패천을 통하여 네임스페이스를 유사하게 구현할 수 있다. 이렇게 하는 이유는 기본적으로 변수와 함수를 기본적으로 선언하게 되면 전역으로 정의되어 다른 라이브러리나 타인의 코드에서 정의된 이름들과 충돌이 날수 있기 때문이다.

 

 

위 예제는 즉각 호출 패턴을 통해 함수를 정의함과 동시에 실행하여 util이라는 네임스페이스를 생성하고 있다.

var 키워드로 생성된 변수의 스코프는 함수이기 때문에 네임스페이스안에 정의 된 변수들을 그 외부에서 접근을 못한다

 

즉시 호출 패턴인 (function(){//코드})();를 통하여 namespaceA의 변수에 함수에서 반환된 객체를 할당 한다.

 

함수 안에 선언된 변수는 함수 내부에서만 접근이 가능하기 때문에 비공개 영역이 된다.

 

반환되는 객체는 namespaceA에 할당되고,

외부에서 접근이 가능하기 때문에 해당 객체의 속성과 메소드들은 공개 API가된다.

 

namespaceA의 publicApi 메소드를 호출한다

 

 

위 코드를 크롬 콘솔에서 확인하면 다음과 같다

 

 

결과

---

비공개 변수를 접근할 수 있습니다

---

namespaceA 자체는 전역으로 등록되기 때문에 여전히 이름 충돌이 발생할 수 있다. 그리고 즉시 호출패턴을 통해 정의된 다른 모듈을 사용하는 것 또한 전역을 통해 가져오게된다 이러한 문제점을 햄결하기 위해 ES6 이전에는 RequireJS를 통하여 모듈을 정의 하였다.

 

ES6에서 모듈시스템에 대한 표준이 정의 되었기 때문에 RequireJS과 같은 별도의 라이브러리 필요없이 이러한 문제점을 해결할 수 있다 

 

 

---

 

 아직 es6를 사용하지 않는 프로젝트들이 많이 있다 이러한 방식으로 사용하여 모듈화를 하는 일이 많이는 없지만 일단 이러한 것도 있구나 하며 이번 페이지는 넘어가도록 하자