DOM과 Jquery


jQuery

여전히 jQuery는 프론트엔드 개발에 있어서 가장 많이 사용되는 라이브러리임이 분명해 보입니다.

조금은 늦은 감이 있지만 jQuery가 프론트엔드 개발자에게 어떤 가치가 있으며 왜 처음 jQuery가 나왔을때 사람들이 열광했으며 여전히 가장 인기있는 자바스크립트 기술로 유지되고 있는지 고민해본 내용을 정리했습니다.

그러기 위해서는 jQuery가 무엇인지 다시 확인해볼 필요가 있었습니다.

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jQuery의 가장 중요한 역활은 HTML Document를 수월하게 다룰수 있게 해준다는 것입니다. 

jQuery의 핵심은 DOM을 다루는 것이고 이게 왜 웹개발에 있어서 중요한 부분이냐면 결국 결국 우리가 아는 모든 웹서비스(페이스북, 네이버..)는 이 HTML문서 잘~~ 보여줘서 사람들을 자신의 서비스에 더 머물게 하는 것이 서비스의 핵심이기 때문입니다. 그러기 위해서는 사용자의 경험이 중요해지고 더 풍부하고 유려한 서비스에 대한 욕구가 셍기게됩니다.

하지만 그 일을 순수 자바스크립트로는 매우 까다롭고 지랄맞음?이 있었습니다. 특히 IE는 많은 프론트 개발자들의 저녁이 있는 삶을 망가트리기에 충분한 역활을 해줬습니다. 이때 크롬의 등장은 물론 이 jQuery의 등장은 개발자들에게 축복과도 같은 일이었습니다.

그렇다면 HTML문서를 다룬다는것은 무엇을 의미하는것일까요?

프론트엔드 개발자는 HTML을 다루는것이 아닌 DOM을 다루는 개발자라고 하면 좋을것같습니다.

그렇기 때문에 DOM을 알고 있다는 말은 프론트 개발자로서 내가 지금 어떤 일을 하고 있는지에 대한 근원적인 질문에 대답을 할 수 있게 해줍니다.


DOM

HTML문서를 개발자가 다루기 위해서 알아야하는것이 바로 DOM(Document Object Model) 입니다. 대부분 이런 용어들의 함축어가 아닌 전체 용어를 보면 그 용어가 표현하고자 하는 바를 대충 알수가 있습니다.

  • Document : 문서
  • Object: 객체
  • Model: 데이터

용어의 의도를 해석해보면 (HTML)문서 정보를 자바스크립트 객체의 형태로 만들어 특정한 데이터 형태(트리구조)로 이해를 하면 앞으로 우리가 알아갈 내용이 정말로 쉽게 이해가 될것같습니다.


DOM 과 Javascript

그럼 HTML과 DOM의 관계에 대해서 알아보겠습니다.

HTML코드 입니다.

<html>
    <head></head>
    <body>
        <div id="content"></div>
    </body>
</html>

HTML은 정적인 언어로 동적으로 무언가를 처리하는 것이 불가능합니다. 애초에 그렇게 만들어진 언어가 아니기 때문이죠. 그런데 우리는 이 문서를 동적으로 다루고 싶어하는 욕구를 가집니다.

예를들면 div 테그에 내용을 추가하고 싶습니다. 이런경우 HTML문서 차체를 수정하는 방법 말고는 없습니다.

<html>
    <head></head>
    <body>
        <div id="content">New Contents</div>
    </body>
</html>

정확하게는 모르겠지만 바로 단순한(정적인) 문서로의 표현에 만족하지 않고 그 문서를 또 다른 방식으로 조작하고자 하는 욕구가 분명이 있었을 것이고 이는 DOM의 탄생을 이끌어내지 않았나 싶습니다. 모든 기술은 필요에 의해서 탄생하는 것이니까요..

어째든 DOM이라는 것이 생기게 되면서 (문서로서의 표현과 DOM의 탄생의 우선순위는 잘모르겠습니다.) 그 돔을 통해 개발자는 HTML를 직접접으로 건드리지 않고 DOM이라는 매개체를 통해서 다룰수 있게 되었습니다.

예를들면 위의 작업을 순수한 자바스크립트로 구현을 하면 다음과 같습니다.

var content = document.querySelector('#content');
var newText = document.createTextNode('New Contents')

content.appendChild(newText);

매우 확실한 한가지 목표만 가지고 있는 코드입니다. 이제 우리는 원문을 건드리지 않고 원하는 모든 동작들을 할 수가 있게 되었습니다.

여기서 jQuery는 이런 디테일한 부분을 가리고 매우 추상화된 형태로 개발자에게 API를 제공해줍니다. 위의 코드는 다음의 코드로 표현이 가능합니다.

$('#content').text('Wowo');

이 얼마나 아름다운 접근법이 아닐수가 없습니까!!


DOM의 생성

DOM은 정말 간단하게 설명하면 HTML문법으로 작성된 문자열을 브라우저가 해석해서 자바스크립트 객체로 만든것입니다.

즉, 각 HTML 태그는 그에 해당하는 자바스크립트 생성자 함수를 가집니다.

  • div - HTMLDivElement
  • table - HTMLTableElement
  • p - HTMLParagraphElement
<html>
    <head></head>
    <body>
        <div id="content">New Contents</div>
    </body>
</html>

이런 코드가 있다면 브라우저는 위에서 부터 해석을 합니다. 방법은 열린태그와 닫힌태그로 의미를 구분하면 될것 같습니다.

<html>
 ...

HTML테그를 만났으니 이에 해당하는 생성자 함수를 호출합니다. 그럼 새로운 인스턴스를 생성합니다.

{
    html: {
    }
}

이런 식으로 객체 생성과 속성을 추가하다보면 하나의 거대한 문서정보를 담은 객체가 만들어 지게 됩니다. 이를 우리는 DOM이라고 부릅니다.

객체에 존재하는 각 엘리먼트는 공통적으로 상속을 받은 속성도 있을수 있고 또는 고유한 속성을 가지기도 합니다.

결국 우리가 하는 일은 이 거대한 문서정보를 담은 객체의 속성을 사용하거나 또는 필요에 따라 속성을 추가해서 사용하는 것입니다.


결론

그러나 비이성적, 비이상적이게도 브라우저별로 문서를 해석하는 방식이나 특성, 특히 IE같은 경우에는 버전별로의 지랄(?)같음을 가지고 있었기에 개발자는 그 간극을 메우는 작업이 실제 기능을 구현하는 작업 만큼이나 때로는 더 많은 에너지를 투자해야했습니다.

존레식 선생님께서 jquery라는 엄청난 놈을 세상에 내보이자(Git의 출현) 수많은 개발자들이 열광하며 프로젝트에 참여했던 이유도 아마 그 의미없는 짓을 그만 할수 있게 되었다는 기대감이었을것같습니다.

가끔가다가 일을하다보면 근원적인것들이 궁금해 지는 경우가 있습니다. 그런 것들에 대한 답을 찾다보면 내가 무슨일을 하는 중이고 내가 사용하는 이것이 왜 만들어졌고 어떤 배경이 있었는지를 알게됩니다. 그러다보면 아마...조금더 좋은 코드를 작성할 수 있지 않을까 하는 생각에 정리해봤습니다.

'Javascript World' 카테고리의 다른 글

[자바스크립트] DOM과 jQuery  (0) 2017.08.08