책 "DOM을 깨우치다" 정리노트 :: Node 개요





DOM 정의:


- Dom(Document Object Model)은 웹 서버를 통해 내려받은 "HTML" 코드를 브라우저가 해석 후 JavaScript 객체를 통해 계층화한 구조체(의미상(트리 구조))를 의미한다.



구조체란?: http://ko.wikipedia.org/wiki/Struct





DOM 목적:


- JavaScript를 통해 문서(HTML, XHTML, XML 등)의 각 요소들을 핸들링하기 위한, 프로그래밍 인터페이스를 제공한다.






DOM 트리:


- HTML 문서의 각 요소들은 가장 오른쪽 패널에서와 같이 브라우저에 의해 해석된 후, Javascript 객체(Object, Node 등)를 통해 계층화된 트리 구조로 변환된다.









또한, 브라우저를 통해 생성(해석 후)된 DOM에 대한 JavaScript 객체 상속 관계는 아래와 같다.





츨처: http://www.stanford.edu/class/cs98si/slides/the-document-object-model.html






DOM 상속 관계:



- 아래 그림의 상속 관계는 html 엘리먼트의 상속 관계를 나열한 것이며, 객체 상속의 시작은 최상위 조상인 Object.prototype 객체로 부터 참조가 시작된다.



1. EventTarget.prototype 객체는 Object 객체를 상속받아 확장한다.





2. Node 객체는 EventTarget 객체를 상속받아 확장한다.


3. DocumentType 객체는 Node 객체를 상속받아 확장한다.


정리하면, 아래와 같은 상속 관계가 만들어지며, DOM 상의 모든 ElementNode들은 아래 나열한 객체들을 상속받아 확장하게되는 것이다.


Object < EventTarget < Node < DocumentType < <!DOCTYPE html>(ElementNode)





또 다른 예로, html 요소를 클릭 시 아래 그림과 같은 상속 관계를 확인할 수 있다.




Object < EventTarget < Node < Element < HtmlElement < HtmlhtmlElement < html(ElementNode)






- 결국 아래 코드와 같이 html ElementNode상속(Object, EventTarget, Node, Element, HtmlElement, HTMLhtmlElement받은 모든 객체의 속성 및 메서드들을 사용할 수 있게되는 것이다.



특히, 상속받는 객체 중 하나인 Node 객체는 DOM을 조작, 조사, 탐색하는 기준이 되는 많은 속성 및 메서드들을 정의하고 있다.




결과:







Ext JS 4: The Class Definition Pipeline





Ext JS 4: The Class 


Definition Pipeline









#Class 생성 전처리기



- 전처리기: 클래스 생성 준비가 완료되기까지 아래 파이프라인 절차가 실행된다.




1. define Method




define 메서드의 대표적인 기능으로 클래스 생성 및 구성 또는 정의된 네임스페이스 해석 과정등이 있다.


ExtJS4 Class System의 모든 클래스는 Ext.Class의 인스턴스이며, 시스템 공통 클래스인 Ext.Base 클래스를 상속받는다. 또한, 그(Ext.Base) 클래스는 자신의 기본 메서드인 callOverriddencallParent 등과 같은 맴버들을 하위 클래스에게 제공한다.



만약, 확장(extend) 클래스를 명시하지 않고, 신규 클래스를 정의할 경우, 클래스 정의 단계에선 Ext.Base를 상속하는 과정이 자동으로 이뤄진다.(기본적인 신규 클래스 생성 시에는 Ext.Base 공통 클래스를 자동으로 상속받게 된다)


반대로 확장(extend) 클래스를 지정한 경우에는 정의된 확장 클래스를 통해 상속 받게된다.






- 확장 클래스를 지정하지 않은 경우





- 아래 결과와 같이 ClassA 인스턴스가 생성되었고, 확장 클래스가 정의되지 않아 공통 클래스인 Ext.Base 클래스가 자동으로 할당(상속) 된것을 볼 수 있다.







- 확장 클래스(ClassA)를 지정한 경우





- 아래 결과와 같이 ClassB 인스턴스가 생성되었고, 확장 클래스(ClassA)가 정의되었으며, Ext.Base 공통 클래스는 확장 클래스(ClassA)를 통해 상속받아 확장된것을 확인할 수있다.



즉, ClassB의 __superclass__ 는 ClassA 가 된다. 또 그것의  __superclass__ 는 Ext.Base가 되는 형태이다.







2. Loader


- 각 클래스간의 종속성을 모두 파악해 필요로 하는 클래스가 모두 로드되기 전까지 지속적으로 프로세스를 수행한다.



1. ClassA.js 및 ClassB.js 파일을 생성한다.

2. app.tests.ClassB 클래스의 확장 클래스(app.tests.ClassA)를 정의하면, 시스템 전처리기 단계인 Loader 로 인해 해당 클래스를 로드하게 된다.






- 아래 결과와 같이 app.tests.ClassB 인스턴스가 생성되었고, 확장 클래스(app.tests.ClassA)가 정의되었으며, Ext.Base 공통 클래스는 확장 클래스(app.tests.ClassA)를 통해 상속받아 확장된것을 확인할 수있다.







- Loader로 인한 Deadlock 발생 원인



1. ClassA.js 및 ClassB.js 파일을 생성 후 각 클래스를 아래와 같이 정의한다.

2. app.tests.ClassA 클래스는 정의된 확장 클래스(app.tests.ClassB)를 로드 한다.

3. app.tests.ClassB 클래스는 정의된 확장 클래스(app.tests.ClassA)를 로드 한다.

4. 서로간의 클래스 종속성으로 인해 결국 클래스 로드 무한 루프가 발생하게되며, 이는 곧 Deadlock 발생에 원인이 된다.


 


- 아래는 Deadlock 발생 메시지에 대한 이미지이다.









3. Extend: 



- 정의된 확장 클래스가 모두 로드되면, 해당 클래스를 확장시킨다.





1. app.tests.ClassB 클래스는 확장 클래스(app.tests.ClassA)로 확장한다.


2. 확장 클래스 맴버는 아래와 같이 app.tests.ClassB 인스턴스의 superclass 프로퍼티 및 prototype 맴버로 접근 가능하다.


3. 이 두 접근 객체의 차이는 superclass 프로퍼티의 경우 원본 객체의 Pointer에 직접 접근하는 반면, prototype 맴버는 확장된 자신의 프로퍼티로 직접 접근하게 된다.


즉, superclass 프로퍼티에 할당된 객체 수정 시 원본 객체의 Pointer에 접근해 수정을 할 수있는 반면, prototype 맴버에 할당된 객체는 원본 객체가 아닌 자기 자신의 맴버만 수정하게 되는것이다.






- 네이티브 자바스크립트 구현







4. Mixins 



- 확장 클래스의 결합이 수행된다.(다중 상속 가능)





1. app.tests.ClassB 클래스는 확장 클래스(app.tests.ClassA)로 확장한다.


2. 확장 클래스 맴버는 아래와 같이 app.tests.ClassB 인스턴스의 mixins.classA 프로퍼티 및 prototype 맴버로 접근 가능하다.


3. 이 두 접근 객체의 차이는 mixins.classA 프로퍼티의 경우 원본 객체의 Pointer에 직접 접근하는 반면, prototype 맴버는 확장된 자신의 프로퍼티로 직접 접근하게 된다.


4. 원본 객체 접근 및 수정에 관한 내용은 위 Extend 프로퍼티 내용과 동일하다.







5. Config 


- config 객체 맴버로 할당된 모든 메서드는 getter/setter 메서드들을 기본으로 가지게 된다.





- config 객체 맴버(id, name)는 아래와 같이 getter/setter 메서드들을 가지게 된다.








6. Statics



Statics 객체 맴버는 함수(클래스: ClassA) 객체 맴버로 할당되게 된다. 


즉, 해당 함수 객체의 value 데이터로 할당되는것이며, 이는 타 언어의 Static 맴버와 동일하게 사용 가능하다.





- 네이티브 자바스크립트 Statics 구현




- 아래 결과와 같이 ClassA 함수 객체의 맴버로 Statics 객체 맴버로 정의된 getStaticId 메서드가 할당된것을 볼 수 있다.












#Class 생성 후처리



- 후처리기: 클래스 생성 준비가 완료된후 클래스 동작에는 영향을 끼치지 않는 파이프라인 절차가 실행된다.




1. Aliases 


- 해당 클래스 네임스페이스의 별칭을 정의한다.

- ClassA 클래스 인스턴스 생성 시 기존 "ClassA" 문자열 및 아래 alias로 지정된 "_classA" 로도 생성 가능하다.






- 객체 인스턴시 생성시 결과는 아래와 같다.








2. Singleton 



Singleton 프로퍼티 값을 true로 할당 시 해당 클래스의 인스턴스가 메모리상에 미리 올라가 따로 인스턴스 생성 없이 해당 객체를 바로 사용할 수 있게 된다. 



즉, 타 언어의 Singleton 패턴을 자바스크립트로 구현한 방식이며, 만약 Ext.create 메서드를 통해 따로 인스턴스를 생성하려 하면 에러를 반환하게 된다.


 



- 네이티브 자바스크립트 Singleton 구현










3. Legacy 



기존 문법과의 호환성을 위해 Ext 클래스가 대체 이름을 가질 수있게 만든다. 


즉, ExtJS 이전 버전과의 문법 호환성을 위해 참조하는 클래스명을 대치시키는 것이 중 한 부분이라할 수 있겠다.









4. Callback



- 클래스가 완전히 정의된 후 단 한번 실행하게 되는 callback 함수이다.





- 사용 범위는 극히 적을것이나, 필요시 사용 가능하다.






powerline 설치 방법(mac 기준)



1. powerline-shell(style prompt) 설치 방법



git 를 이용해 해당 소스를 다운 받은 후 아래 URL Stap에 따라 진행하면 된다.


https://github.com/milkbikis/powerline-shell







2. vim-powerline(vim editor 기준) 설치 방법



vim-vundle 을 활용해 간단히 설치할 수 있으며, 더 자세한 설명은 아래 URL을 참조하기 바란다.



http://sunyzero.tistory.com/171

http://blog.outsider.ne.kr/880





prev 1 2 3 4 ··· 56 next