노출모듈 패턴

1. 노출모듈 패턴이란?

• 즉시 실행 함수를 통해 private, public 같은 접근제어자를 만드는 패턴
• 주로 자바스크립트에서 사용되며, 객체 지향 프로그래밍과 모듈화 적용 시 유용
• 여러 개의 모듈이 있을 때, 각 모듈마다 자체적인 비공개(private) 멤버와 공개(public) 멤버를 가질 수 있도록 설계
• 모듈 간의 상호작용을 관리하고, 모듈 간의 결합도를 낮추어 유연하고 재사용 가능한 코드를 작성할 수 있다.
• 자바스크립트는 private나 public 같은 접근 제어자가 존재하지 않고 전역 범위에서 스크립트 실행

  • 그렇기 때문에 노출 모듈 패턴을 통해 private나 public 같은 접근 제어자 구현

    const pukuba = (() => {
        const a = 1
        const b = () => 2
        const public = {
            c : 2, 
            d : () => 3
        }
        return public 
    })() 
    console.log(pukuba)
    console.log(pukuba.a)
    // { c: 2, d: [Function: d] }
    // undefined

• a와 b는 다른 모듈에서 사용할 수 없는 변수나 함수이며, private의 범위를 가짐
• c는 다른 모듈에서 사용할 수 있는 변수나 함수이며 public의 범위를 가짐

2. 접근제어자

• public : 클래스에 정의된 함수에서 접근가능하며 자식 클래스와 외부 클래스에서 접근 가능한 범위
• protected : 클래스에 정의된 함수에서 접근 가능, 자식 클래스에서 접근 가능하지만 외부 클래스에서 접근 불가능한 범위
• private : 클래스에 정의된 함수에서 접근 가능하지만 자식 클래스와 외부 클래스에서 접근 불가능한 범위
• 즉시 실행 함수 : 함수를 정의하자마자 바로 호출하는 함수, 초기화 코드, 라이브러리 내 전역 변수의 충돌 방지

3. 노출모듈 패턴의 변형

• 모듈 내부에서 비공개(private) 멤버를 정의하고, 외부로 노출할(public) 멤버를 선택적으로 공개하는 방식으로 구현

4. 노출 모듈 패턴을 사용하는 이유

1. 정보 은닉

• 노출 모듈 패턴을 사용하면 모듈 내부의 비공개 멤버를 외부에 노출시키지 않는다.
• 이를 통해 모듈의 구현 세부 사항을 감추고, 오로지 공개된 인터페이스만 외부에 노출하여 사용자가 모듈을 좀 더 쉽고 안전하게 사용할 수 있다.

1. 네임스페이스 충돌 방지

• 전역 스코프에 많은 변수나 함수를 선언하면, 다른 라이브러리나 스크립트와 충돌할 수 있다. 노출 모듈 패턴을 사용하면 모듈 내부의 변수와 함수들이 모듈의 프라이빗 스코프 내에 있으므로, 다른 모듈과의 충돌을 방지할 수 있다.

1. 코드를 모듈화하여 재사용성과 유지보수성 향상시키며, 전역 스코프의 오염 방지 도움

5. 노출 패턴 사용 시 주의해야 할 점

1. 노출할 멤버를 선별적으로 선택, 모듈 내부의 모든 멤버를 외부에 노출하는 것은 정보 은닉의 의미를 상실시키게 된다.
2. 비공개 멤버에 접근이 필요한 경우, 공개된 인터페이스를 통해 간접적으로 접근하는 방식을 사용해야 합니다. 이를 통해 비공개 멤버가 의도치 않게 변경되거나 오용되는 것을 방지할 수 있다.
3. 노출 모듈 패턴은 모듈 내부의 멤버를 정적으로(private/static) 관리. 이 때문에 인스턴스 생성과 상속과 같은 객체지향 개념을 완전히 지원하지는 않는다.

6. 클로저(closure)

• 노출 모듈 패턴은 클로저를 이용해서 구현
• 함수가 함수를 리턴하고, 리턴된 함수가 자신이 생성된 환경(lexical environment)을 기억하는 특성을 의미
• 이 특성을 이용하여 모듈 내부에서 정의된 비공개 멤버들이 외부에서 접근 불가능하게 되며, 이를 통해 비공개 멤버들 보호 가능

7. 노출 모듈 패턴의 구현 예시

var MyModule = (function() {
  var privateVariable = "This is a private variable";

  function privateFunction() {
    console.log("This is a private function");
  }

  function publicFunction() {
    console.log("This is a public function");
  }

  // 외부로 노출할 멤버를 객체로 반환합니다.
  return {
    publicFunction: publicFunction
  };
})();

// MyModule은 publicFunction만 외부에 노출됩니다.
MyModule.publicFunction(); // 출력: "This is a public function"
MyModule.privateVariable; // undefined (privateVariable은 외부에서 접근 불가능)
MyModule.privateFunction(); // 오류 (privateFunction은 외부에서 접근 불가능)

8. 결론

• 노출 모듈 패턴은 프로젝트의 크기와 복잡성에 따라 사용을 결정해야 한다.
• 작은 규모의 프로젝트에서는 노출 모듈 패턴만으로도 유용하게 사용될 수 있으나, 대규모 프로젝트에서는 모듈 관리를 위해 모듈 로더나 번들러와 같은 도구를 함께 활용하는 것이 좋다.

✋ 여기서 잠깐? 모듈 로더나 번들러란?

• 자바스크립트에서 모듈을 관리하고 사용하기 위해 사용되는 도구들
• 모듈 로더(Module Loader)
  • 모듈 로더는 웹 애플리케이션에서 필요한 모듈들을 동적으로 불러오고, 실행할 수 있도록 도와주는 도구
• 번들러(Bundle)
  • 번들러는 여러 개의 모듈 파일들을 하나의 번들 파일로 결합하여 최적화하는 도구모듈
  • 모듈 로더를 사용하면 여러 개의 모듈 파일을 웹 페이지에서 동적으로 로드하는 것이 가능하지만, 많은 개별 파일들이 브라우저에서 로드되어야 하므로 이로 인해 여러 네트워크 요청이 발생하여 웹 페이지의 로딩 속도가 느려질 수 있다.
  • 번들러는 이러한 문제를 해결하기 위해 여러 개의 모듈 파일들을 하나의 번들 파일로 결합하여 묶어주는 역할
  • 번들러를 사용하면 하나의 번들 파일만 브라우저에서 로드하면 되므로 네트워크 요청 수가 감소하여 웹 페이지의 로딩 속도가 향상
  • 또한, 번들 파일은 모듈들 간의 의존성 순서를 고려하여 최적화되므로 모듈 로드 시 발생할 수 있는 문제를 사전에 방지