들어가기
웹 프로젝트를 하다보면 공통적으로 사용할 유틸리티 등을 common.js 와 같이 분리하여 개발할 필요가 생긴다.
이때 고려할점은 자바스크립트의 전역 스코프의 변수명 관리가 힘들다는 것이다.
예를 들어 common1.js와 common2.js 두개를 동시에 참조하여 사용파는 페이지가 있다고 가정했을때,
common1.js 내부
1 |
|
common2.js 내부
1 |
|
위처럼 전역변수의 명이 겹쳐지는 상황이 발생할 수도 있다.
만약 수십개의 js 파일에 각각 수십개의 변수명이 선언된다면…
아무리 개발룰을 통일해서 잘 개발한다 하더라도 전역스코프에 변수명이 겹쳐지는 위험성을 피할수는 없다.
Module 패턴을 이용하면 위와 같은 전역스코프의 오염을 어느정도 줄일수 있다.
Module 패턴
javascript에서 java와 같은 고급언어의 클래스의 캡슐레이션을 구현하기 위해 사용되는 패턴이다.
말 그대로 자바스크립트 코드를 모듈화 하여 사용한다.
기본구조
1 | var someObj = (function(){ |
모듈패턴은 자바스크립트의 클로저와 즉시실행함수를 이용하여 구현된다.
즉시실행함수를 통해 위 코드는 로드가 되는 순간 바로 동작하여 1개의 객채를 리턴하여 someObj에 할당하게 된다.
즉 someObj는 java의 static 클래스와 비슷해진다.
구체적으로 예들 들면 아래와 같다.
1 | var obj1 = (function(){ |
모듈 패턴을 사용하여 자바스크립트의 소스코드를 모듈화 하고, 전역스코프를 어느정도 깨끗하게 유지할수 있다.
하지만 궁극적으로 모듈명, 즉 위의 obj1의 이름의 충돌 자체는 막을수 없다.
이를 위해서 어느정도 개발규약이 필요하다.
모듈명의 충돌을 막기위해, 모듈명은 js파일명과 동일하게 하여 최대한 유니크성을 지켜야 한다.
마무리
자바스크립트를 조금 보니 별별 패턴이 다있다.
아마도 위 모듈명이 충돌되는 것도 방지하는 무언가 이미 있지 않을까 생각된다.
아 공부를 하면 할수록 아는것 보다 모르는게 많아지는 느낌이다.