[자바스크립트 라이브러리 만들기] 4. 실전 1 - 모듈과 틀 만들기

* 이번에는 지난번에 공부했던 내용을 토대로 실제로 적용해서 모듈에 만들어보도록 하자.

2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 1. 개요

2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 2. 시작 - 사전조사 및 설계

2012/10/11 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 3. 기본 지식 - 모듈과 네임스페이스

* 처음에 설계를 했던대로 네임스페이스는 utree, 그리고 내부에서 tree와 node 객체를 생성하는 기본적인 골격을 프로그래밍 해보자.

: 아래와 같이 한번 짜보았다.

: 지난번에 봤던 방법 중에서 함수의 인자로 전역 window변수를 받고 그 window 객체에 현재 네임 스페이스인 utree를 변수로 추가함으로써 전역 변수로 활용할 수 있게 하였다.

: 그럼 여기서 만든 객체의 종류를 살펴보면, 네임스페이스로 utree를 만들었고, Tree와 Node를 클래스로서 만들었다. 하지만 이 2가지 객체들의 함수를 다르게 선언해주고 있는 것을 볼 수 있다. utree는 연관배열을 사용하고 있고, Tree와 Node는 prototype을 사용하고 있다. 어떠할 때 이러한 다른 방식을 사용해야하는지 다음편에서 이론적으로 공부해보도록 할 것이다.

: 여기서 prototype에서 정의한 함수들을 보면 return this; 를 가지고 있는 함수들이 있다. 이것들은 함수 chain으로 이용하기 위한 방법으로, 만약에 한 node.addChild 함수가 this를 리턴하는 것을 고려해보면, node.addChild(newNode1).addChild(newNode2).addChild(newNode3) 이런식으로 여러 자식을 한번에 chain처럼 호출하여 추가를 할 수 있는 방법론이다. jquery에서도 상당히 많이 쓰이고 있는 방법이므로 눈으로 익어두면 좋을 것이다. Web Socket 프로그래밍에서도 이 방법이 요긴하게 사용되고 있다.

: Tree는 노드 맵을 가지고 있을 것이고, 노드는 다시 그 자식들을 가지고 있을 것이다. utree는 container의 아이디를 인자로 받아 Tree에서는 그 아이디를 받아 DOM을 구축할 것이다. 거기서 자식 노드를 동적으로 추가/제거를 할 수 있는 함수들만 일단 틀을 잡아놓았다. 이렇게 틀을 먼저 잡아놓고 흐름을 생각하면서 하나씩 짜는 것이 편리하다.

: 여기 구조 설계에는 나와있지 않지만, 만약 DOM을 구축한다면 각 노드는 DOM에 대한 레퍼런스를 가지고 있다면 좋을 것이고, 노드를 제거할때에는 부모에 대한 정보 또한 가지고 있다면 좋을 것이다. 이런식으로 설계를 해놓고 부족한 부분을 보고 조금씩 채워나가서 틀을 완성하면 된다.

:조금 고민한 다음 다음과 같이 내용을 조금 더 추가하였다.

: 물론 이렇게 작은 프로젝트에서는 코딩을 하면서 설계를 이어나가면 되겠지만, 더 커다란 프로젝트를 진행하고 있다면 설계 문서를 따로 먼저 작성을 하는 것이 물론 좋을 것이다.

: 그럼 다음에는 prototype과 연관 배열을 이용해서 함수를 정의한 것에 대한 이론적인 배경을 공부하고, 실제 기능들을 구현해볼 것이다. prototype과 연관배열만 하면 라이브러리를 만들기 위한 기본 지식은 다 공부한 셈이라고 생각한다. 물론 고급 기법은 끝이 없으므로 공부는 쉬지말고 계속 하자!

- 자바스크립트 라이브러리 만들기 실전 1 - 모듈과 틀 만들기 끝.