자바스크립트 모듈 패턴 (IIFE, Closure)

📌 자바스크립트 모듈 패턴을 활용한 안전한 데이터 관리 전략

✅ 1. 개요: 전역 변수 선언의 구조적 취약점

자바스크립트에서 var 키워드를 사용해 파일 최상단에 변수를 선언하는 방식(Global Scope)은 데이터 노출과 오염에 매우 취약하다. 조회용 데이터라 할지라도 브라우저 콘솔을 통해 누구나 접근하고 수정할 수 있다면, 런타임 환경에서 데이터 무결성을 보장할 수 없다. 본 글에서는 즉시 실행 함수(IIFE)와 클로저(Closure)를 활용하여 데이터를 캡슐화하는 모듈 패턴에 대해 기술한다.

---

✅ 2. 개념 및 패턴 기본 구조

✅ 2-1. 개념

• 즉시 실행 함수(IIFE): 함수 정의와 동시에 실행되는 패턴으로, 내부 변수가 전역 스코프에 침범하는 것을 방지한다.
• 클로저(Closure): 함수가 선언될 당시의 렉시컬 환경을 기억하여, 외부 함수가 종료된 후에도 내부 변수에 접근할 수 있는 메커니즘이다.
• 모듈 패턴(Module Pattern): 클로저를 이용하여 외부에서 접근 불가능한 Private 변수를 생성하고, 필요한 기능만 Public 메서드로 노출하는 설계 방식이다.

✅ 2-2. 기본 구조

var ModuleName = (function() {
    // Private: 외부에서 직접 접근 불가
    var _privateData = []; 

    // Public: 외부로 노출되는 인터페이스
    return {
        setData: function(data) {
            _privateData = data;
        },
        getData: function() {
            return _privateData;
        }
    };
})();

---

✅ 3. 구조적 개선 비교 (Before vs After)

✅ 3-1. [Before] 전역 변수 방식 (Global Variable)

데이터가 전역 스코프에 노출되어 보안과 관리 측면에서 위험하다.

// 각 JS 파일 최상단 선언
var factoryListRowData = []; 

// 위험성 예시: 콘솔창에서 즉시 변조 가능
// > factoryListRowData = "malicious data"; (기존 데이터 파괴)

✅ 3-2. [After] 모듈 패턴 적용 (Encapsulated)

데이터를 함수 스코프 안에 가두어 외부의 직접적인 접근을 차단한다.

var FactoryModule = (function() {
    var _factoryListRowData = []; // 금고 내부

    return {
        setList: function(list) {
            _factoryListRowData = list;
        },
        getRow: function(id) {
            return _factoryListRowData.find(function(item) {
                return item.portlet_id === id;
            });
        }
    };
})();

// 호출 시: FactoryModule.getRow('ID01');
// 조작 시도: FactoryModule._factoryListRowData; // undefined (접근 불가)

---

✅ 4. 데이터 검문소 역할을 통한 안정성 확보

단순히 변수를 숨기는 것을 넘어, 모듈 패턴은 데이터의 입구(Setter)에 '검문소'를 세워 데이터 무결성을 확보할 수 있다.

✅4-1. 수정 의도의 명확한 제한 (Validation)

데이터 입력 시 유효성 검사 로직을 포함하여 잘못된 데이터가 유입되는 것을 방지한다.

setList: function(list) {
    if (!Array.isArray(list)) {
        console.error("배열 형식이 아닙니다.");
        return;
    }
    _factoryListRowData = list;
}

✅4-2. 읽기 전용 상태 구현 (Read-Only)

최초 1회만 데이터 저장을 허용하여 런타임 중 의도치 않은 수정을 원천 차단한다.

var isInitialized = false;

return {
    setList: function(list) {
        if (isInitialized) {
            console.warn("이미 초기화된 데이터는 수정할 수 없습니다.");
            return; 
        }
        _factoryListRowData = list;
        isInitialized = true;
    }
};

✅ 4-3. 디버깅의 효율성 증대 (Traceability)

데이터 변경이 일어나는 시점에 로깅이나 스택 추적을 수행하여 오류 발생 원인을 빠르게 파악할 수 있다.

setList: function(list) {
    console.trace("데이터 변경 추적:"); // 호출 스택 출력
    _factoryListRowData = list;
}

---

✅ 5. 결론: 모듈 패턴의 필요성

모듈 패턴은 관심사의 분리(SoC)를 실현하고, 데이터의 무결성을 보장하며, 예측 가능한 코드를 작성하게 한다. 이는 대규모 프로젝트에서 전역 오염을 방지하고 보안 사고의 실미를 차단하는 가장 기본적인 방어적 프로그래밍의 시작이다!!