자바스크립트 튜토리얼 5 | <script> 태그와 DOM 개요 | Document Object Model

웹의 번영과 함께 자바스크립트의 인기는 나날이 더해가고 있다.

자바스크립트가 나왔던 초창기에는 자바의 유사 언어로 오해를 사기도 했다. 선 마이크로 시스템즈에서 만든 객체지향언어가 자바이고 자바스크립트는 지금은 역사의 뒤안길로 사라진 넷스케이프 네비게이터에 탑재된 스크립트 언어로 출발했다.

자바스크립트의 장점은 자바스크립트 단독으로써 가치도 있지만 무엇보다 프론트엔드에서 웹브라우저와 백엔드에서 서버와 함께 협력하는 능력에 있다. HTML/CSS, 자바, .NET 프레임워크, 서버, DB 등 이렇게 많은 환경에서 자유롭게 옮겨다닐 수 있는 언어는 자바스크립트 밖에 없다.

때문에 tiobe Index에는 자바스크립트가 6위지만 실상 숙련된 엔지니어들은 대부분 세컨드 랭귀지로써 사용하고 있는 것으로 봐야한다. 저 인덱스 처럼 자바를 메인 언어로 세컨드를 자바스크립트로 사용하는 조합이 좋다.

파이썬 같은 경우는 최근에 급속히 순위가 올라왔는데 비전공인들의 파이썬 자체를 쓰는 인구가 늘어서 그렇다고 봐야한다. 반면 자바스크립트만 쓰는 경우는 없다. 프론트엔드도 최소 HTML/CSS 를 마스터 해야한다.

이것은 한국만 그런게 아니라 전세계적인 추세다. 서구권에는 물리학자가 파이썬 알고리즘 교재를 쓸 정도로 보급이 되있다.

(한국도 현재 다양한 전공에서 컴퓨터를 사용하고 있음. 과학이란 이름이 들어간 학과는 전부 통계를 하는데 파이썬이 편하다.)

그런 자바스크립트에 대하여 진지한 내용을 담아보려고 이 카테고리를 시작한다.

필자가 처음 컴퓨터 언어에 관심을 가진 것은 꽤 오래전이라 자바 스크립트가 있다는 정도만 알았지. 그것으로 지금처럼 대단한 뭔가를 만드는 생태계가 없었다. 사용자와 인터렉티브한 무언가가 있을 줄 알았는데 그것은 상당한 기간동안 웹브라우저의 뒤처리 작업이 많았고... 보여주는 것은 어도비 플래쉬 애니메이션이 더 잘했다. 한때 유행하던 플래쉬 애니메이션인 오인용은 지금 유튜브로 애니메이션을 만드는 것 같은데 지금은 그냥 보통의 컨텐츠지만 당시에는 꽤 핫했다. 무언가 움직이는 것을 웹에서 보는 일은 지금의 기술에 비해 쉬운 일은 아니었다. 그래서 자바스크립트를 일반이 깊게 알기는 힘들었다.

시간이 지나서 웹과 앱에 사용되는 중요한 언어로 성장한 자바스크립트의 진정한 가치가 드러나게 되었다. 이 포스팅에서 예전에는 잘 몰랐던 자바의 면모에 대하여 한번 알아보기로 한다.

* 자바스크립트의 사용법

사용법은 의외로 처음 웹페이지를 열어보는 사람들에겐 당황스러울수 있다.

요새는 html 파일이 복잡해졌으니까

자바스크립트는 head 나 body에 넣으면 된다. 보통 끝부분에 넣는다.

어디 넣어도 작동을 잘 하지만 실행 순서는 위에서 아래로 내려온다는 정도는 알아두자.

간혹 <script type="text/javascript"> 이런 형태가 보이는데 이는 과거의 브라우저를 지원하기 위한 속성으로 이제는 사용하지 않는다. 현재의 스마트 폰에서 사용하지 않는 브라우저들이다. 따라서 그냥 <script> 로 충분하다.

DOM(돔)의 개요

자바스크립트를 잘 다루기 위해서 DOM에 대하여 잘 알면 좋다고 이야기한다.

막연히 좋다고 해도 잘 모르니까 용어를 풀어서 보자.

DOM (DOCUMENT OBJECT MODEL) 직역하면 문서 객체 모형이다.

음... 와닿지가 않는다. 하지만 객체지향프로그래밍에 대하여 경험한 사람은 쉽게 이해할 수 있다.

이래서 객체 지향 프로그래밍을 배우기 전에 알아야 할 내용이라는 책들이 나오는 것 같다. 최근의 언어를 사용하려면 객체가 뭔지 모르고는 출발이 안된다. 객체지향 프로그래밍을 배우려면 자바가 가장 좋은 시작점이 될 것 같다. 둘은 전혀 다른 언어 구조를 갖지만 닮은 점도 있다.

쉽게 말해 문서를 객체화 한 모형이라는 말이다.

객체지향 프로그래밍에서는 사람과 사물 할 거 없이 모두 객체의 관점으로 클래스를 만들어서 사용한다.

동물의 인터페이스를 구현한 사람 클래스의 인스턴스를 생성하여 메모리에 생성할 수 있다. 사실 사람을 객체로 만드는 것보다 문서를 객체로 만드는게 더 쉽다. 그런데 용어를 DOM (돔) 돔 이라고 하니 이해하기 어려울 수 밖에 없다. 아쉽게도 영어를 따로 공부하는 수밖에 없다.

* 브라우저에서 Dom 의 작동 방식

위에 있는 HTML 을 보면 영어문자로 작성되있는 소스코드다. 우리가 매일 사용하는 웹브라우저는 저 영어문자들을 어떻게 해석해서 브라우저의 화면에 멋있게 출력해줄 수 있을까? 이 과정은 번역을 한다고 한다. (Interpretation) 그런데 번역한다는 말보다는 parse (파스한다) 라는 말을 많이 쓴다. HTML을 파싱한다. Parsing a HTML file.

HTML 파일을 보면 여러가지 태그들이 달려 있는데 몇번 보면 사람도 알 수 있는 간단한 것들이다. TAG는 프로그래밍 언어가 아니다. 거기에는 핵심을 제어하는 알고리즘이 없기 때문에 Mark up Language 라고 한다. (문서의 구조를 표시한다) HTML파일 정도는 CPU가 해석할 수 있을 것이다. HTML 파일이 도착하면 그냥 문법 해석기에 따라 화면에 뿌려주고 해석기를 종료시켜줘도 되는데, 자바스크립트와 웹브라우저의 개발자들은 거기서 한단계 더 생각을 해두었다.

문서를 객체로 만들어 버리자. HTML 파일은 계층 구조로 되어 있는데 상위 계층(부모)이 하위 계층(자식)을 가지는 문서 구조로 만들면 그냥 번역해서 화면에 뿌려주는 것 보다 더 많은 일을 할 수 있다는 것을 알게되었다.

HTML 파일이 서버로부터 클라이언트의 브라우저에 도착하면 브라우저는 이를 HTML파일, CSS, 자바스크립트로 분류한다. 이 과정에서 브라우저는 이 문서들을 가지고 DOM 이라는 문서 객체를 만들어 낸다. 페이지의 출력이 끝난 후에도 자바스크립트는 브라우저에 생성된 DOM 객체를 조작할 수 있도록 연결되어 있다. 예를 들어서 사용자는 자바스크립트가 제공한 인터페이스로 브라우저에 그림을 그릴 수 있다. 브라우저에는 사용자가 그림을 그리게 하는 기능이 없지 Dom객체를 조작하는 자바스크립트를 통해서 가능하다.

자바 스크립트는 클라이언트의 PC의 메모리에 올라온 DOM 객체를 조작할 수 있다. 인터넷 회원가입이나 로그인 폼의 검사식이나 팝업창(한때 팝업 광고때문에 창문 닫느라 힘들었다;;), 인터넷 지도 등 자바스크립트가 들어가 있다.

돔 객체에 대해서는 MDN 문서에 많은 내용이 나와있다.

Document Object Model (DOM) - Web APIs | MDN (mozilla.org)

Document Object Model (DOM)

The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory.

developer.mozilla.org

* 윈도우 객체

애플리케이션 개발을 위해 가장 많이 쓸 것은 역시 Window 객체다. Window 객체는 Dom의 Top 계층에 있다. Dom에 연결된 모든 요소들의 조상이다. Window 에서 부터 Tree를 타고 내려가듯이 요소들에 접근할 수 있다.

CSS의 선택자와 같이 사용하면 복잡한 문서 구조에도 쉽게 접근할 수 있을 정도로 강력하다. Document 객체는 Window의 자식(child) 객체이다. 자바스크립트의 DOM에 대해 알아가는 것은 이 클래스들에 대하여 알아가는 과정이다.