일단 이 책도 책표지가 올빼미 입니다. 여기서 궁금한게 있는데 오라일리는 왜 자바스크립트 관련서적에 이렇게 까지 올빼미와 부엉이를 선호하는 걸까요.

우선 다음의 책들이 전부 올빼미나 부엉이 입니다.

• 정규표현식 완전 해부와 실습
• 자바스크립트 성능 최적화
• 자바스크립트 웹 애플리케이션
• 자바스크립트를 깨우치다
• DOM을 깨우치다

즉 프론트앤드 개발자는 잠자지 말고 일하란 메세지일지도!

솔직히 말해서 자바스크립트를 깨우치다 라는 책을 통해 자바스크립트를 깨우치기는 무리가 아닐까라는 생각을 했습니다.

그래서 과연 DOM을 깨우치다 라는 책을 통해서 DOM을 깨우칠 수 있을 것인가 가득히 의구심이 들었습니다만,….

BJ퍼블릭에서 몇번이나 타임라인에 뿌리고 있는 예판 타이밍부터의 책소개는 실로 매력적인 것이었습니다.

<이 책에서 다루는 내용>
– JavaScript 노드 개체들과 DOM 간의 관계를 이해한다.
– document, element, text, DocumentFragment 개체의 속성 및 메서드를 배운다.
– 노드 선택, 지오메트리, 인라인 스타일을 깊이 살펴본다.
– HTML 문서에 CSS 스타일 시트를 추가하고 CSSStyleRule 개체를 사용한다.
– 서로 다른 코드 패턴을 사용하여 DOM 이벤트를 설정한다.
– jQuery와 유사한 최신 브라우저용 DOM 라이브러리인 dom.js에 대한 저자의 비전을 배운다.
<목차>
1장. 노드 개요
2장. Document 노드
3장. Element 노드
4장. Element 노드 선택
5장. Element 노드 지오메트리와 스크롤링 지오메트리
6장. Element 노드 인라인 스타일
7장. Text 노드
8장. DocumentFragment 노드
9장. CSS 스타일시트와 CSS 규칙
10장. DOM에서의 JavaScript
11장. DOM 이벤트
12장. dom.js 만들기

뭔가 이것만 보면 브라우저를 정복할 기세지 않습니까? 그래서 저도 홀딱 넘어가서 바로 주문했습니다.

실은 제게는 이미 많은 DOM책이 있습니다.

그리고 이 책들에서도 동일한 주제를 다루고 있습니다. 근데 과연 더 좋을 것인가…라기보다 시간이 흐른 뒤 나온 책이니까 다양한 스펙과 기능이 추가된 책이 아닐까라고 예상했습니다.

그래서 책을 열심히 정독해봤습니다.

책의 범위

일단 서문에서 확실하게 책의 범위를 가드하더군요.

우선 이 책의 적용 범위는 IE9+, Firefox, Chrome, Safari, Opera 최신 버전만 염두하고 작성되고, 오래된 브라우저를 지원하지 않으면서 동시에 최신 브라우저의 스펙도 지원하지 않는다고 했습니다. 엥?

그럼 뭘 지원하는건지 좀더 구체적으로 살펴봐야할 필요가 있죠.

DOM Level3, DOM4, DOM HTML, HTML5 의 사양에서 적당히 가져와서 주관적으로 균형을 맞춘 스펙으로 책을 집필했다고 하네요.

커뮤니티에 기반해서 추려서 독단적인 표현에 대한 시도를 자제? 음 일단 의미 불명입니다.

XML, XHTML 사양도 배제되었습니다.

그럼 뭔가요.

그러니까 이 책은 DOM을 가르치는 책이긴 하지만 어떤 스펙을 기준으로 하는 내용을 가르치는 책이 아닌 거죠.

정확하게 집필의도는 브라우저는 DOM시스템을 어떻게 운영하는가에 대한 감을 잡고 이해를 시켜주기 위해 현존하는 스펙들을 긁어모아 여러 측면을 보여주는데 있습니다.

여기엔 장단점이 존재하는데, 우선 단점을 말하자면 이 책의 내용은 결코 실무에 한 줄이라도 함부로 사용하면 안된다는 것입니다.

호환성이나 테스트 혹은 구현여부에 대한 부분도 전혀 언급이 없습니다. 따라서 코드가 어떤 환경까지 괜찮은지 판단할 방법이 없습니다.

또한 이 책에서 익힌 내용이 본인이 타겟으로 하는 브라우저에서 작동하지 않거나 심지어 그 기능에 대한 대안이 없을 수도 있습니다.

그렇지만 장점도 있습니다.

브라우저의 복잡성을 과감하게 배제하고, 특정 스펙에 대한 전체적인 커버를 하지 않기 때문에 DOM의 특징과 사용행태를 이야기 흐름에 맞게 필요한 부분만 정리하여 설명하기 때문에 입문자가 시스템 전체를 이해하고 사용할 수 있는 힘이 생깁니다.

이 점이 매우 훌륭한거죠. 일단 입문하고 나면 개별 호환성이나 여러 스펙은 스스로 찾아가면서 그 차이점을 몸소 익히고 매꿔가면 될 일입니다.

사실 개인적으로는 이러한 DOM스펙을 중심으로 설명하는 책들 전체를 좋아하지는 않습니다만 DOM을 어떻게 다루는 지에 대한 입문서로는 나쁘지 않은 선택입니다.

책의 내용

이제 구석 구석 보죠.

우선 1,2,3,4장까지는 DOM이 뭔지 어떤식으로 메모리에 객체구조가 만들어지고 주요 속성과 메서드가 뭐가있는지 배웁니다.

5장은 그렇게 형성된 DOM객체들이 화면에 그려지고 나서 그려진 위치나 크기를 어떻게 역으로 조회할 수 있는가에 대한 방법을 알려줍니다. 이 방법들은 비록 IE에서는 안통하는 것들이지만 존레식이 쓴 프로자바스크립트라는 책 이외에 이렇게 명쾌하게 이 부분만 설명하는 책이 없었습니다(하지만 여전히 실무에서 쓰려면 프로자바스크립트에 있는 내용이 더 좋습니다 ^^)

6장은 스타일과 계산된 스타일에 대한 얘기고 실제로 깊이 안들어갑니다. 이게 좀 아쉽기도하고 의아하기도 하지만 뭐 저자 맘이니까..

7장은 text노드를 매우 깊이 팝니다. 이거 완전 맘에 들정도로 속속 분석했습니다. 왠일이지 브라우저의 간극을 무시하고 설명한다면서 파폭은 편애하는 경향이 전반적으로 있습니다.

8장은 프레그먼트를 심도있게 다룹니다. 프레그먼트를 깊이 다루는 수준으로 보자면 완벽가이드에도 뒤지지 않는 정도입니다.

9장도 깊이 스타일시트 시스템을 설명하고 있습니다. 호환성은 여전히 완전히 쌩까고 있기 때문에 더 좋다라고는 말할 수 없지만 전반적인 이해를 돕습니다. 근데 약간 반쪽짜리인게 스타일시트 시스템의 룰에는 스타일룰외에도 @로 시작하는 다양한 룰이 존재합니다만 그 전부에 대한 객체구조를 하나도 설명안하고 쌩까버리는게 좀… 입문자라고 무시하는건가!! 최근 유행하는 웹폰트 등을 DOM구조적으로 생성하려면 필수적인데 말이죠. 이 부분은 차라리 CSS3 the missing manual을 보세요.

10장 자바스크립트 태그에 대한 건 머 기냥 저냥 있으나 없으나 한 내용입니다. 뭐하러 넣은건지 잘모르겠지만 내용도 그냥 그렇고..차라리 다른 부분을 심도있게 다룰것이지..

11장도 중요하다면 중요한 DOM의 이벤트 시스템에 대한 설명인데, 기냥 저냥..사실 DOM 이벤트 시스템을 정말 상세하게 설명하는 책은 자바스크립트 for 웹 2.0 이라는 책이 있습니다. 이 책은 이벤트 하나는 쩔게 깊이 설명하고 있죠. 중요한 장인데 좀 아쉽..단지 이벤트 시뮬레이션은 다른책에서 별로 다루지 않아 처음 보시는 분들도 많을거라 생각합니다. 그 부분은 다루고 있어서 좋았습니다.

12장의 커스텀 셀렉터 만들기는 너무 조악하지만 한 번도 생각해본적인 없는 사람용이라는 전재 하에는 이해할만도 합니다.

개인적인 감상

전체적인 감상은 우선..안좋은거부터.

1. 당연히 저자가 설명하고 싶은 부분만 설명합니다만, 전체적인 밸런스는 저에게는 미묘
2. 애매하게시리 “이 기능은 현재 시점에서 모든 최신 브라우저에서 동작한다” 라는 말도 안되는 이해도 안되는 뻐꾸기를 막 날림
3. 중구난방의 스펙을 끌어다 써서 설명하고 있는 기능이 대체 어떤 스펙 소속인지 일일히 확인해야하는..

좋은 것은

1. 깨알같은 최신스펙의 재밌는 요소를 소개하고 있고
2. 큰 흐름을 위해 과감히 재미요소를 병합하여 전진하고 있으며
3. DOM만으로는 지루해질 수 있는 부분을 js, css를 적절히 섞어서 이상한 예제를 도입하지 않고도 잘 내용을 이끌어갑니다.

그래서?

우선 DOM스크립트의 저자인 제레미 키스가 무지하게 이 책을 추천하고 있습니다(본인이 2판 낼 것이지!) 제 생각에는 여전히 현 시점에서조차 제레미의 책이 더 좋습니다(실무적으로)

김영보님의 AjaxDOM스크립팅은 철저하게 DOM스펙문서를 설명하고 있습니다. 입문자가 이 스펙을 따라가면서 읽기는 부담되지만 참고서로 쓰기엔 이리 좋은 것도 없습니다. 이 책과 비교하면 너무 중구난방이긴하죠.

그래서 사라는겨?

DOM에 대해서 궁금하면, 소설책 보듯이 이야기책 보듯이 느끼시기 위한 용으로라면 강추!

아니라 실무에 도입을 위한 목적이라면 비추!

제가 스터디나 세미나에서 DOM을 설명할 때 쓰는 비유는 DOM Element는 다양한 종류의 노드를 담는 그릇같은거라고 설명하죠.

엘레멘트라는그릇에 다른 엘레멘트도 담고, 속성노드도 담고, 텍스트노드도 담고 한마디로 다양한 노드를 담을 수 있는 그런 존재라는 겁니다.

메모리 상을 딱히 객체구조를 설명하자면 콤포지트패턴의 구현체라 할 수 있고 노드라는건 콤포지트 인터페이스로 파악할 수 있는거죠(파일시스템의 폴더와 파일처럼)

(뭘 어떻게 전달하는게 정답인지에 대해서는 의견이 분분합니다만, 저는 대놓고 객체구조로 설명할거면 진짜 객체 답게 설명하던가..라는 생각이라..=.=;)