[Javascript] DOM이란 무엇일까? + 화살표 함수

자바스크립트로 웹 개발을 한번이라도 해본 사람이라면 절대 모르고 지나칠 수 없는것이 몇가지 있는데, 그중 하나가 바로 DOM(Document Object Model)이다. JS는 기본적으로 DOM을 사용하여 웹 브라우저의 요소들에 엑세스 하고, 이를 수정 할 수 있다.
 

기본 DOM 계층구조

DOM의 기본적인 계층 구조

 

• Window : 계층 구조의 최상위층. document를 포함한 환경을 제어 할 수 있다. 브라우저가 페이지를 로드하면 자동으로 윈도우 객체가 만들어지고, 자바스크립트 코드에서 윈도우 개체 속성과 함수에 엑세스 할 수 있음.
• History : 브라우저의 최근 방문 기록에 대한 세부 내용을 기록함. 히스토리 객체는 브라우저가 앞으로 또는 뒤로 가는 버튼 클릭을 시뮬레이션 할 수 있음.
• Location : 페이지의 URL에 대한 정보가 들어있음
• Navigator : 클라이언트 인터넷 브라우저 또는 사용자 에이전트의 개체 표현
• Screen : 디스플레이 화면의 크기와 같은 사용자 화면에 대한 정보를 도출하는데 사용됨. 모바일 장치에서 실행되는 브라우저의 크기를 결정하는데 중요함
• Document : 페이지 내의 모든 HTML 요소에 대한 엑세스를 제공함. 브라우저에 로드되는 각각의 HTML요소들은 document 객체가 됨.

 
우리가 자주 사용하는 alert()는 사실 winow.alert()에서 가져온것이지만 더 간단하게 표현하기 위해 접두사를 생략해서 사용한다.
 

그렇다면, DOM을 이용하여 html요소에 접근을 어떻게 할까?

가장 많이 사용되는 함수는 document.getElementById("___"); 이다.
 
아래는 자바스크립트 파일에서 HTML요소를 접근하는 예시이다.
 

<div id = "box">

var divTag = document.getElementById("box")

if(divTag) {
//상황에 맞는 로직 구현
}

 
getElementById를 사용해 괄호 안의 id에 할당된 HTML요소를 가져와 변수 divTag에 할당한 다음, 그 다음에는 그 HTML 요소에 우리가 원하는 로직을 추가 할 수 있다. => 정적인 웹에서 좀 더 반응형 웹으로 변하는 과정이다.
 
이제 그럼 inspect 기능을 활용해 자바 스크립트 코드를 써 보자. 웹 브라우저를 열고, 아무곳이나 커서를 올린다음 우클릭을 하면 inspect라는 탭이 있을것이다. 탭을 누르면 콘솔이 보일것이다. 이 콘솔 창에서 여러가지를 실험해볼것이다.
 
먼저, 모든 프로그래밍의 기본 출력 문장인 Hello world를 출력해보자. 자바에서는 System.out.println()을 통해 출력문을 한줄씩 출력했지만, 자바스크립트에서는 console.log을 통해 출력한다. 해보면,
 

이렇게 나온다. 아래의 undefined는 커맨드(console.log)는 아무 값도 리턴을 하지 않는다는 뜻이다.
 
이번에는 정말 간단한 함수를 하나 작성해보자

function printMyInput(user_input) {
    console.log("The parameter passed is " + user_input)
}

함수는 function 이라는 키워드를 통해 선언하고, 리턴 타입은 지정하지 않아도 되며, 괄호 안에는 파라미터를 받는다.
 
여기서 가장 중요한게 나온다. 화살표 함수!
 
자바스크립트 ES6부터 지원하는 화살표 함수다. 사실 난 화살표 함수를 안 좋아한다. 그냥 function키워드를 사용해 함수를 만드는게 더 가독성도 좋고, 직관적이다. 위의 printMyInput을 화살표 함수로 나타내 보겠다.

let printMyInputES6 = (user_input) => {
    console.log(user_input)
}

 
일단 함수를 let으로 선언해 변수화 하고, 더이상 function이라는 키워드 대신 =>를 쓴다. 나처럼 화살표 함수를 싫어해도 쓰는것이 좋을것이다,,, 왜냐면 이미 javascript 코드를 쓰는 사람들은 화살표 함수가 익숙해져있으므로 그냥 얼른 익숙해지는게 답이다 :(
 
마지막으로, 이벤트 핸들러를 짧게 짚고 넘어가보자. 우리가 웹사이트의 버튼들을 눌렀을때, 어떠한 동작을 하게 하고 싶다면, 자바스크립트의 eventHandler를 사용해야 한다. 예시를 보면 바로 이해가 될 것이다!
 

<button type="button" onclick="showAnswers()"> Show Solution
 <script>
  function showAnswers() {
   //code
   alert("A")
  }
 </script>
</button>

 
위의 코드는 'Show Solution'이라는 button을 만들고, onclick이라는 EventHandler를 통해 버튼이 클릭 되었을때 showAnswers()라는 함수를 실행하도록 한다. 간단하다! 이벤트 핸들러는 이런것이다. 정적인 웹에서 조금 더 동적인 웹으로 바뀌어 가는 중이다.