JS - Module Pattern

디자인 패턴

 

디자인 패턴은 기본적으로 소프트웨어를 개발하는 과정에서 문제를 해결하기 위한 일반적인 접근 방식이나 코드 설계의 규칙을 의미한다

이러한 패턴을 통해 코드의 재사용성을 높이고, 효율적으로 문제를 해결하는데에 활용된다

 

이러한 디자인 패턴에는 목적에 맞게 다양한 패턴들이 존재하며 패턴의 개념에 기반해 현대의 웹 개발에서도 다양한 패턴으로 발전하고 있다

 

예를들어, React의 어플리케이션에서 중요한 역할을 하는 Hooks의 경우 Reducer패턴을 활용해  복잡한 상태변화를 단일 액션으로 처리하는 패턴으로도 볼 수 있다

 

useEffect의 경우 컴포넌트가 렌더링될 때 특정 작업을 실행하게 해주는 옵저버 패턴에 해당한다

 

모듈 패턴

 

모듈 패턴은 캡슐화와 네임스페이스를 제공해 코드의 구조화, 유지보수 충돌방지를 도와주는 디자인 패턴이다

 

모듈 패턴을 통해 구현되는 모듈은 특정 기능을 가진 코드의 집합으로, 외부에 노출될 변수, 함수는 제한적이다

 

이를 통해 코드의 네임 스페이스 충돌을 방지하고, 전역 변수의 사용을 줄이는 효과가 있다

 

const counterModule = (function() {
    let count = 0;  // private variable

    // public method
    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        },
        getCount: function() {
            return count;
        }
    };
})();

console.log(counterModule.increment());  // 1
console.log(counterModule.increment());  // 2
console.log(counterModule.getCount());  // 2
console.log(counterModule.count);  // undefined (private)

 

위에서 counterModule은 즉시 실행 함수표현식으로 생성된 것을 볼 수 있는데 이를 통해 내부에 스코프가 생성되어 내부 변수들을 외부에서 접근 할 수 없도록 한다

 

counterModule의 값은 함수가 실행된 후 반환된 객체이며, count 변수는 외부에서 접근할 수 없기에 4번째 출력문에서 undefined가 출력되는 것을 볼 수 있다. 따라서 외부에 공개되는 public 메서드로 상태를 변경하거나 조회가 가능해진다

 

이러한 모듈 패턴은 다음과 같은 장점을 가지고 있다

 

1. 캡슐화 : 모듈 내부의 구현 세부 사항을 숨기고, 필요한 인터페이스만 외부에 노출해, 코드의 변경이 다른 부분에 미치는 영향을 최소화 

2. 네임스페이스 관리: 모든 변수와 함수가 전역 스코프를 오염시키지 않도록 하여, 전역 변수의 충돌을 방지가능

3. 재사용성: 모듈화된 코드는 여러 프로젝트나 파일에서 재사용이 가능하며, 유지보수와 확장이 용이

4. 테스트 용이성: 모듈 단위로 테스트를 할 수 있어, 개별 기능을 독립적으로 검증 가능

 

 

Module 시스템 (부록)

 

위에서 정의된 모듈 간의 의존성 관리 및 코드 분할을 위해선 주로 ES6부터 도입된 import/export구무이 사용된다

 

기존엔 require을 사용했으나 동적으로 Module을 로드하기에 코드 실행중 모듈을 불러올 수 있고, 따라서 서버 사이드 환경에서 주로 사용된다

 

import/export와는 다르게 파일확장자 및 파일 경로를 명시해야 하고 기본적으로 호이스팅이 되기에 코드 어디에 선언해도 무관하다

 

그에 반해 import/export의 경우 정적으로 분석되기에 코드 실행전 의존성 파악이 가능하고 이를 통해 트리 쉐이킹 같은 최적화 기법도 이루어진다

 

특징	import/export	require
지원 환경	브라우저, Node.js (ES6 모듈 지원 시)	Node.js
모듈 시스템	ES6 Modules (정적 모듈 시스템)	CommonJS (동적 모듈 시스템)
동기/비동기 로딩	동기적으로 로드됨 (코드 실행 전 의존성 파악)	동적으로 로드됨 (실행 중에 모듈 로드)
파일 확장자	.js, .mjs 등 (확장자 생략 가능)	확장자 생략 불가 (일반적으로 .js 또는 .json)
호이스팅	없음 (import는 반드시 파일 상단에 있어야 함)	있음 (require는 코드 어디에서든 호출 가능)
사용 위치	클라이언트 사이드 및 서버 사이드(Node.js)	주로 서버 사이드(Node.js)
최적화	트리 쉐이킹 가능 (정적 분석)	최적화 및 트리 쉐이킹 불가