http://jeonghwan-kim.github.io/2018/01/25/before-jquery.html
웹개발할 때 난 jquery 부터 사용하기 시작한것 같다. 라이브러리가 주는 편리함 넘어 어떻게 DOM API를 사용하는지는 몰랐다. 앵귤러, 리엑트 같은 프레임웍을 사용할 때도 마찬가지다. 기능을 구현하는데 별다는 어려움은 없었다.
그러다 보니 다양한 개발 환경에 민첩하게 움직이기 쉽지 않다. 운영중인 서비스에 쉽게 UI 프레임웍을 도입할수 없는 경우. 여러 버전의 제이쿼리를 혼용해서 사용하는 경우.
라이브러리야 어찌되었듯 DOM API만은 브라우저에서 지원하기 때문에 처한 상황에 관계없이 안심하고 사용할 수 있다. 이럴 때 순수 자바스크립트 개발 역량은 무엇보다 중요하다고 생각한다.
우리가 자바 웹 개발을 공부한다고 가정해 보자. 아마 이 순서로 공부거다.
자바문법 공부 -> 2. JSP 서블릿 공부 -> 3. Spring 공부
같은 방법으로 프론트엔드 개발을 공부한다고 하면 이렇게 되겠지.
자바스크립트 문법 공부 -> 2. 브라우져 API 공부 (DOM API) -> 3. 제이쿼리 등의 라이브러리/프레임워크 공부
3번을 먼저 공부해왔던 나는 라이브러리의 고도로 추상화된 API만 사용하다보니 1, 2는 몰라도 결과물을 만들어 낼수 있었다. 하지만 어느 정도 시간이 지나 한계를 깨닫고 DOM 스크립트에 관심을 갖게 되었다.
이번 글은 순수 자바스크립트를 사용했던 경험을 정리한 내용이다.
돔을 다루는 방법부터 살펴 보겠다. 아래 HTML 코드부터 시작하자.
<div id="app"></div>
제이쿼리로 위의 돔을 선택하려면 CSS 스타일의 선택자를 사용할 수 있다.
$("#app")
그럼 자바스크립트는?
document.getElementById("app")
document.querySelector("#app")