자바스크립트 심화(9) 네임스페이스 생성하기

본질적인 질문을 해보자. 네임스페이스가 왜 필요할까? '네임스페이스'라는 말을 '이름'으로 바꿔보자. 우리는 이름이 왜 필요할까? 단순히 생각하기에 이름이 없다면 일단 굉장히 불편하다. 가령, 사람을 지칭할 때도 다음과 같이 불러야하지 않을까? 

"남색 와이셔츠에 흰색 넥타이, 갈색 뿔테 안경을 쓰신 분"

이름은 세상을 효율적으로 만들었다. 그리고 이름은 하위 범주에 있는 기능들을 하나로 인식할 수 있도록 해준다. 가령, 공식 명칭이 'NC74E32.831EA'라는 부품이 있다. 얼핏 이름만 봐서는 어디에 사용하는 부품인지, 어떤 쓰임새가 있는지 알 수 없다. 하지만 누군가가 'hg그렌저 부품'이라고 말해주면, 정비사는 해당 자동차 호환 부품상자에 빠르게 분류할 수 있다. 'hg그렌저'라는 상위범주의 이름만으로 'NC74E32.831EA'은 '자동차 부품'이며, '현대 자동차'의 '그렌저'라는 모델에 사용되는 것이라는 유추를 할 수 있다.

프로그래밍으로 다시 돌아오면, 이름을 만드는 것만으로도 하위 모듈들을 빠르게 분류할 수 있고(속도 빨라짐) 효율적으로 확장할 수 있다. 

특히, 대규모 프로그램을 제작할 때는 규칙에 맞는 이름을 모듈에 붙여줌으로써 필요한 기능만 제작할 수도 있다. 간단한 프로그래밍을 할 때는 굳이 네임스페이스에 맞춰 모듈식으로 코드를 정리할 필요가 없겠지만, 분업과 협업이 필요한 상황이라면 네임스페이스는 필수다. 

1 『네임스페이스 생성하기』

네임스페이스를 생성한다는 말은 객체를 하나 생성하는 것과 같다. 단, 네임스페이스에 사용될 객체는 전역객체로 절대로 덮어쓰기가 되면 안 된다. 만일 같은 이름으로 덮어쓰기가 되면, 아래처럼 네임스페이스 아래에 있는 코드가 모두 사라진다.

---

var VOVOSQUIZ = {}

    VOVOSQUIZ.app = '독서퀴즈앱';

    console.log(VOVOSQUIZ.app); //독서퀴즈앱

    VOVOSQUIZ = {}

    console.log(VOVOSQUIZ.app); //>> undefined

---

협업으로 코드를 작성하는데, 누군가가 위의 경우처럼 자신의 변수를 덮어쓰기 해버렸다면 전체 코드가 스파게티처럼 꼬여버린다. 그래서 네임스페이스에 사용하는 객체는 애당초 덮어쓰기가 불가능한 방식으로 생성해야 한다. 

자바스크립트에서는 "A || B" 논리연산자를 사용할 수 있는데, "A || B"논리연산자는 A값이 false일 경우에만 B부분을 진행한다. 만일 A부분이 true라면 B는 실행되지 않는다. 따라서 A부분에 새로 생성할 변수를 지정하고, B에 객체를 넣으면 A에서 생성할 변수가 참일 경우(이미 있는 경우)에 객체(B부분)가 생성되지 않는다. 

---

var VOVOSQUIZ = VOVOSQUIZ || {}

    VOVOSQUIZ.app = '독서퀴즈앱';

    console.log(VOVOSQUIZ.app);  //>>독서퀴즈앱

    VOVOSQUIZ = VOVOSQUIZ || {}

    console.log(VOVOSQUIZ.app);  //>>독서퀴즈앱

---

네임 스페이스를 생성하는 방식은 반드시 "A || B" 논리 연산자를 사용하도록 한다.

2 네임스페이스 자동으로 생성하기

네임스페이스를 만들 때마다 매번 논리연산자를 넣으면 일단 귀찮고, 코드의 반복이 발생한다. 따라서 대부분 아래처럼 네임스페이스를 자동으로 생성해주는createNameSpace()함수를 만들어서 개발을 시작한다.

---

var VOVOSQUIZ = VOVOSQUIZ || {}

     

        VOVOSQUIZ.createNameSpace = function(nsValue){  

    

                  var parts = nsValue.split('.');  // ①

                  var parent = VOVOSQUIZ;     // ②

                   if(parts[0] === 'VOVOSQUIZ'){

                           parts = parts.slice(1);      //③

                    }

                   for(var i=0; i<parts.length; i++){

                           if(typeof parent[parts[i]] === "undefined"){  //④

                                       parent[parts[i]] = {}

                            }

                        parent = parent[parts[i]];          //⑤

                   }

                 return parent;

       }

---

①에서 split(.) 배열 내장메서드를 활용하면, nsValue에 넣은 이름을 '점'단위로 잘라서 배열로 저장한다. 다음과 같은 이름을 createNameSpace()함수에 넣었다고 가정해보자.

 

 ``VOVOSQUIZ.app.Model``

위와 같은 이름이 createNameSpace()함수에 삽입되면, 점 단위로 잘려서 'VOVOSQUIZ' , 'app' , 'Model'순서로 배열이 생성되고, parts변수에 저장된다. ②은 최상위 객체인 VOVOSQUIZ를 parent라는 임시 변수에 저장한다. 

parent변수는 마지막에서 반환될 값이 입력된다. ③에서 if문은 VOVOSQUIZ라는 공통된 부분은 필요없기 때문에 삭제하는 기능을 갖는다. ④은 위에서 설명한 네임스페이스를 지정법이다. 네임스페이스 지정법은 'A || B' 논리식과 ( typeof 객체 === 'undefined') 2가지 방식이 있다. 

⑤은 for구문 내에 있으며, parts에 있는 배열들이 객체형태로 parent에 저장된다. 마지막에 parent를 반환함으로써 사용자가 입력한 이름이 점을 기준으로 모두 객체를 갖고 있는 상태가 된다. 

네임스페이스를 만들고 난 뒤 아래처럼 테스트를 진행해보자.

---

      VOVOSQUIZ.app = VOVOSQUIZ.createNameSpace("VOVOSQUIZ.app");

      VOVOSQUIZ.model =     

      VOVOSQUIZ.createNameSpace("VOVOSQUIZ.model");

      VOVOSQUIZ.view = VOVOSQUIZ.createNameSpace("VOVOSQUIZ.view");

      VOVOSQUIZ.controll = VOVOSQUIZ.createNameSpace("VOVOSQUIZ.control");

      VOVOSQUIZ.app.Constants = function(){};

      VOVOSQUIZ.app.Main = function(){};

      VOVOSQUIZ.model.Model = function(){};

      VOVOSQUIZ.view.View = function(){};

      VOVOSQUIZ.control.Control = function(){};

      VOVOSQUIZ.app.Constants.TITLE = "보보스퀴즈";

      VOVOSQUIZ.app.Constants.brand = "웹도리";

      console.log(VOVOSQUIZ.app.Constants.TITLE); //>> 보보스퀴즈

---