What is JavaScript?
자바스크립트는 1995년에 브랜든 아이크에 의해서 탄생되었으며 웹을 조금더 다양한 상호작용과 또 쉽고 빠르게 웹 사이트에 적용이 되기 위해서 만들어 졌으며, 유일하게 페이지를 구성하는 언어인 HTML, CSS, JavScript중 유일한 프로그래밍 언어이다.
처음부터 페이지의 요소들과 상호작용을 하기 위해서 태어났으며, 그것을 도와주는 다양한 장치들이 있다. 그 중에서 JavaScript가 빛을 발하는 구간이 있는데 그것이 바로 DOM API를 사용하여 직접 요소의 상태를 추적 및 다양한 이벤트들을 감지하며 다양한 데이터들을 요소내에 넣는 것과 또 요소의 상태에 따라서 다양한 데이터들을 보관 및 응용을 할 수 있게 도와준다. 그렇다면 DOM API가 무엇이며 또 어떻게 사용하는지 간단하게 알아보자.
DOM
Document Object Model의 약어로 단순하게 말하면 이 페이지 자체를 의미하는 Document를 문서 그 자체를 조작할 수 있게 도와주는 것이다.
그렇다면 어떻게 사용하는지 알아보자.
<body>
<div class="div">Hello World</div>
</body>const div = document.querySelector(".div")
console.log(div)
위와 같이 특정한 document의 특정한 메소드인 querySelector를 사용하여 class="div" 를 정상적으로 출력을 해준다. 위의 방식으로 내가 원하는 특정한 html구조 안에 있는 요소를 임의로 추출을 가능케 한다. 그렇다면 이 추출한 것을 이용한다면 정말 무긍무진한 것들을 만들어 낼 수 있다. 즉 지금껏 HTML + CSS 만으로 부족했던 유저와의 상호작용이 이 JavaScript의 DOM 을 이용한다면 지금까지 일방적으로 유저에게만 보여주는 것에 대해서 급급했다면 본격적으로 유저들과 상호작용을 하여 정적으로 이 웹 사이트 그 자체를 살아숨쉬게 만들어 준다.
그렇다면 이 dom을 가지고 무엇을 할 수 있을까 그것을 알아보자.
근데 이제 뭐함?
그렇다면 이 변수로 지정된 데이터인 div를 가지고 무엇을 할 수 있는지 알아보자.
const div = document.querySelector(".div")
div.classList.add("hello world")
console.log(div.classList) 
위와 같이 정상적으로 classList를 통해서 추가해주거나 제거하는 것과 붙였다가 뗄수도 있다. 그렇다면 이것을 응용해서 버튼을 눌렀을 때 h1태그의 클래스에 active라는 클래스를 추가해보자.
그러기 위해서는 addEventListener라는 메소드가 필요하다. addEventListener 메소드는 해당 요소에 다양한 이벤트들을 추적하여 뒤에 작성되는 함수를 실행시켜주는 역할을 한다.
const btn = document.querySelector(".btn")
const h1 = document.querySelector(".h1")
function clickhandler() {
h1.classList.add("active")
console.log(h1.classList)
}
btn.addEventListener("click", clickhandler)어때요 정말 쉽죠?? 앞으로 모든 바닐라 JS에서의 기능 개발은 대충 이런식이다. dom api를 활용해서 해당하는 요소 가져오고 나서 별도의 로직을 구현한 후 해당하는 로직을 이벤트 리스너를 통해서 추가하는 방법이다.
마무리하며
웹 개발을 한다고 하면 당연하게도 JavaScript를 사용을 해야한다. JavaScript는 쉽고 단순 무식하지만 어떻게 해서든지 코드를 실행 시켜준 다는 점에서는 조금 애로사항이있다.
그렇지만 다양한 API들을 통해서 브라우저를 제어하고 또 더 나아가서는 Node Js를 사용하여 서버까지 굴릴수도 있다. 아무튼 JavaScript는 지금 시대에 있어서 가장 모순점들이 많지만 가장 강력한 언어라고 필자는 생각한다.
그리고 JavaScript의 화룡정점인 DOM도 마찬가지로 정말 처음 배웠을때는 너무도 파격적이였다. 그리고 나서 나는 자바스크립의 강력함을 좋아하게 되었다.
