How Start JavaScript

지금까지 자바스크립트는 많은 오해를 받아왔고,
완성되지 않은 이상한 언어라는 수식어에서 벗어나지 못하였었다.
대부분의 개발자들은 복사 – 붙여넣기식으로 자바스크립트 코드를 활용하거나,
Form의 유효성 검사 등에만 자바스크립트를 사용할 뿐 그 이상으로는 활용하지 않았다.
하지만 모바일에서 플래시를 지원하지 않아,
기존에 플래시로 제작하던 다양한 인터렉션을 CSS3와 자바스크립트를 활용하여 구현하기 시작하였다.
또한 웹 어플리케이션의 중요성을 강조하며,
AJAX를 활용한 비동기 데이터 통신 등 자바스크립트를 활용한 다양한 인터렉션이 나타나면서,
자바스크립트의 중요성은 이루 말할 수 없는 경지에 이르렀다.
이 글은 HTML과 CSS만 할 줄 알았던 한 웹 퍼블리셔가,
자바스크립트의 중요성을 인식하고 공부하기 시작하면서 겪은 일들을 정리한 것이다.
지극히 개인적인 내용이 많을 수 있으며,
다른 사람에게 도움이 될지, 되지 않을 지에 대해서는 명확하지 않지만,
적어도 누군가에게는 내 글이 도움이 되기를 바란다.

DOM을 잘 알아야 한다

자바스크립트를 잘 하기 위해선 DOM을 이해해야 한다.
자바스크립트는 여러 상황에서 자주 사용하고 있지만, 주로 HTML의 특정 요소를 가져온 후,
그 요소의 여러 내용을 제어하는 용도로 많이 사용한다.
그러나 HTML과 자바스크립트는 서로 다른 언어이기 때문에,
자바스크립트에서 HTML을 다루기 위해서 별도의 API를 브라우저에서 제공할 필요가 있었다.
따라서 W3C는 HTML의 모든 요소에 대한 객체 모델(Object Model)을 지정하고,
이 이름을 문서객체모델(Document Object Model, DOM)이라 명한다.
HTML의 객체화에 관련한 내용이기 때문에 DOM은 HTML Working Group에서 관리하고 있다.
현재 DOM LEVEL 4가 진행 중에 있으며, DOM Level 3까지는 권고안(Recommendation)으로 지정한 상태이다.
자바스크립트와 HTML은 DOM을 활용하여 상호간 연결을 할 뿐만 아니라,
브라우저에서 HTML을 해석할 때 DOM 문서에서 정의한 내용을 바탕으로 렌더링하기 때문에,
HTML 각 요소의 기본 구조나 동작에 관해서도 DOM에서 정의하고 있다.
HTML이 계층 구조를 가지듯이 DOM의 일부분에도 계층 구조가 있으니 그 부분도 참고하면 좋다.

특정 요소를 가져오는 여러가지 방법

이제 요소를 DOM으로 가져오는 연습을 해보자.
HTML문서에 DIV 요소가 있다.

여러가지 방법이 있지만 첫번째로 가장 무난한 방법이 ID속성에 기반하여 요소를 가져오는 것이다.
ID에 기반하여 사용할 수 있는 메소드는 document.getElementById("id")가 있다.

var elDiv = document.getElementById("first-div");

이제 elDiv라는 변수에는 first-div라는 ID 속성 값을 지닌 요소가 들어가있을 것이다.
이 때 이 요소를 요소라 부르지 않고, DOM의 최소 단위인 노드라고 명칭한다. (노드는 객체화한 요소를 나타내는 용어이다)
DOM이 Document Object Model이듯, DOM에서 가장 중요한 루트 객체는 document객체 이며,
document객체는 현재 창에 나와있는 단일 요소를 가져올 때 주로 사용한다.
위에서 가져온 div노드는 나중에 활용할 때에는 Element객체와 유사하게 활용하며,
Element객체는 모든 HTML 노드들이 상속받는 객체이다.
(document객체는 HTML 노드가 아님에 주의하자)
두번째 방법은 document.querySelector 메소드를 사용하는 것이다.
document.getElementById는 ID 속성에만 사용할 수 있는 제약이 있었지만,
querySelector는 Selector API에서 제공하는 대부분의 Selector를 사용할 수 있다는 것이 큰 장점이다.
첫번째 방법에 비해 비교적 최신에 나온 방법이기 때문에,
구버전 IE나 안드로이드 초기 브라우저에서는 Selector Level 3의 일부 Selector가 작동하지 않는 단점이 있다.

var elDiv = document.querySelector("#first-div");

내부적으로 동작하는 방식은 조금 다르나,
유저가 실제로 사용할 때에 체감할만한 많은 차이는 없기 때문에,
차이점이 궁금하다면 W3C DOM Level 4 문서를 확인해보자.

자바스크립트는 객체만을 지향하는 언어가 아니다.

JAVA나 C++ 등 정통 객체 지향 프로그래밍을 하던 사람들이 자바스크립트를 다룰 때 항상 하는 말이,
‘이 언어는 객체지향 같으면서도 골떄리게 잘 동작한다. 프로그램이 거짓말을 한다’라고 말하는데,
프로그램은 거짓말을 하지 않는다.
그럼에도 불구하고 자바스크립트가 거짓말을 한다는 말은 왜 나왔을까?
나는 이 원인을 자바스크립트를 기존 언어들과 같은 ‘객체 지향 언어’로 바라봤기 때문이라고 생각한다.
자바스크립트는 객체지향과 함수형 프로그래밍이 적절히 섞여있는 언어이다.
상속을 구현하였고 객체를 가지고 있으나, 객체는 일급객체이며 객체를 생성할 때는 클래스가 아닌 생성자 함수(Constructor)를 통해 생성한다.
말이 좋아 생성자 함수지 그냥 함수에 new 키워드를 붙여주면 그게 곧 생성자 함수로 변화한다.
ChoEun이라는 객체를 만들어보자.

function Person(sName) {
	this.name = sName;
}
var ChoEun = new Person("조은");

단순히 함수를 생성하고, 함수 앞에 new키워드를 붙여둔 것 뿐이지만,
자바스크립트는 이 때 프로토타입을 형성하여 상속을 구현하고, 새로 생성한 객체를 this에 대입한 뒤,
이 객체를 리턴하는 방식으로 객체를 생성한다.
자바스크립트는 일급 객체 언어이기 때문에,
함수의 파라미터로 함수가 들어가거나, 객체의 멤버에 다시 객체가 들어가는 등 평등한 구조를 지닌다.

function Person(sName) {
	this.name = sName;
}
var ChoEun = new Person(function() {
	return "조은";
}())

여러가지 활용이 가능하나 이는 공부하는 사람의 몫이라고 생각한다.

라이브러리는 보조수단이다. 원론은 자바스크립트이다.

라이브러리는 우리 삶에 많은 편안함을 준다.
개발할 때 모든 브라우저에 일일히 대응하지 않아도 되거니와 여러 컴포넌트를 제공하여 생산성을 향상시킨다.
대표적인 자바스크립트 라이브러리로는,
네이버의 Jindo, jQuery의 jQuery, 야후의 YUI 등 다양한 라이브러리들이 있다.
각자의 장단은 있으나,
한가지 공통점은 라이브러리는 결국 개발을 돕는 일종의 도구일 뿐이지,
자바스크립트에 대한 원론적인 이해가 부족하다면 돼지 목에 진주목걸이 격이라는 것이다.

마무리

졸려서 허둥지둥 글을 작성한 기분이다.
사실 HTML과 CSS에 대해 잘 이해하는 것도 자바스크립트 개발에서 매우 중요한 역할을 한다.
그러나 그 부분은 졸려서 작성하지 않는다.
기왕이면 페르마의 정리처럼,
“이걸 풀만한 완벽한 수식이 떠올랐으나 노트의 칸이 부족해 작성하지 않는다”라는 말을 하고 싶으나,
그럴만한 능력이 안된다.
여러분들도 필히 자바스크립트와 DOM을 잘 공부하여,
멋진 개발자가 되기를 바란다.