Vanilla JS가 HTML/CSS를 조작하는 방식

바닐라 자바스크립트란 라이브러리나 프레임워크의 도움 없이 순수한 자바스크립트 자체만으로 프로그램을 제어하는 방식을 말합니다. 오늘은 자바스크립트가 어떤 방식으로 HTML에 접근해 반응형 환경을 구축하는지 알아보도록 하겠습니다.

1. HTML로 진입

<script src="index.js"></script>

아마 위 코드는 HTML을 조금 배우신 분들도 익숙하겠죠. 정말 단순한 코드지만 동시에 굉장한 영향력을 행사하는 한 줄입니다. 위 코드로 인해 index.js라는 자바스크립트가 비로소 HTML에 접근하는 것이죠. 물론 하나의 자바스크립트만 허용하는 것은 아닙니다. 더하고 싶은 자바스크립트 파일이 있다면 여러번 써도 좋습니다.

<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>

자바스크립트가 크고 많아질 경우 이를 가져오는데 부하가 생길 수 있는데요. 이를 해결하기 위해 위치를 조정하거나, async, defer 등 다양한 해결방안이 등장했습니다. 오늘은 기본만 다루는 만큼 추가적으로 궁금하신 분들은 MDN에서 찾아보는 것을 추천드립니다.

2. DOM의 이해 (제어할 위치 지정)

자바스크립트의 진입을 이해했으면 이제 이들이 어떤 방식으로 index.html을 제어하는지 알아보죠. 그러기 위해서 우리는 DOM이라는 웹페이지의 구조를 이해해야 합니다. DOM은 웹 페이지의 HTML을 계층화시켜 트리구조로 만든 객체 모델입니다. JS는 이 DOM이라는 모델을 통해 웹페이지에 접근하고 페이지를 수정합니다. DOM은 HTML 자체가 아닙니다. 이를 구조화시킨 객체이죠. 즉 HTML과 JS는 DOM이라는 가교를 통해 서로 대화할 수 있게 되는 겁니다.

그럼 JS는 어떻게 HTML에 접근할 수 있을까요? 이를 도와주는 것이 document라는 전역 객체입니다. 때문에 대부분 DOM을 제어하는 바닐라 자바스크립트의 명령이 document로 시작되는 것이죠. 우리는 document 객체를 이용해 비로소 DOM 트리의 HTML 구조에 접근합니다. 그리고 여기서 HTML 구조와 class, id, style 등 다양한 요소까지 수정이 가능합니다.

document.body.innerHTML = "clean all";

let blueElement = document.querySelector(".class");
blueElement.style.backgroundColor = "red";

이제 document를 통해 DOM에 접근하는 위 코드가 이해 되시나요? 일차적으로 document 객체 후에 body 혹은 querySelector, getElementById 등으로 세부 지정을 통해서 제어할 위치를 찾아가는 것입니다. DOM과 document에 대한 이해 없이도 활용은 가능하지만, 이를 이해하면 비로서 JS가 웹 사이트를 구축하는 방식을 이해할 수 있습니다.

3. 이벤트 설정 (원하는 반응 적용)

이제 바닐라 JS 이해의 마지막인 이벤트입니다. HTML > DOM > JS로 연결되는 관문은 이제 이해했습니다. 지금부터는 JS에서 이 루트로 어떠한 반응을 요청하는지, 반응의 방식은 어떻게 설정하는지를 설명하겠습니다.

element.addEventListener("event", function () {
  //이벤트가 일어났을 때 실행할 내용
});

JS는 이벤트를 통해 원하는 효과, 변화를 HTML에 제공합니다. 이 때 사용되는 함수가 addEventListener입니다. 이벤트 역시 한 없이 복잡해질 수 있지만 기본만 살펴보겠습니다. 먼저 원하는 효과의 위치를 지정해줍니다.

const thisIsButton = document.getElementsByClassName('login-btn')[0];

thisIsButton.addEventListener('click', function() {

}

이렇게 element의 위치는 먼저 변수를 선언하고 그 뒤에 .addEventListner를 붙이는 방식으로 활용합니다. 위 이벤트는 클릭이 들어갔네요. ‘클릭’이 아무레도 가장 많이 활용되는 이벤트이지만, 이게 이벤트의 전부는 아닙니다. 키보드, 스크롤 등등 다양한 기계적인 반응을 이벤트로 구현이 가능합니다. 너무 많기 때문에 추가적인 정보를 원하시면 하단의 사이트를 방문해주세요.

• https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

  아무튼 이렇게 이벤트가 적용됩니다. 클릭 뒤에 함수는 인자로 받아들여진 함수로 콜백 함수라고 불립니다. 이름은 중요하진 않구요. 어쨌든 저놈이 JS로 원하는 효과를 만들어내면 이벤트가 발생할 때마다 그 효과가 DOM을 통해 우리의 웹사이트에서 구현되는 것입니다.

깊이 들어가면 더 재미있겠지만 오늘은 기본만 다뤄보기로 하고 DOM과 이벤트를 이용한 다양한 반응 구축은 React를 통해서도 종종 찾아뵙겠습니다. 감사합니다!!