JS DOM

Thu, 20 Oct 2022 11:16:17 GMT

DOM(Document Object Model) 이란

객체로 문서 구조를 표현하는 방법으로 HTML로 작성된다. 웹 브라우저는 DOM을 활용해서 요소(element)에 CSS와 JS를 적용한다.

'객체로 표현하는 방법'에 대해 내가 이해한 것을 그림으로 그려봤다. 일단, 하나의 동그라미를 node 또는 element라고 부른다(나누는 기준 모름). 문서 구조를 객체로 표현하기 위해 그림 속 파란 글처럼 노드 별로 객체를 작성한다고 이해했다(정확하지 않음).

JavaScript vs Vanilla JavaScript

Thu, 20 Oct 2022 06:42:45 GMT

JavaScript: 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다.

Vanilla JavaScript: 외부 라이브러리나 프레임워크를 쓰지 않는 순수 JavaScript를 이르는 말이다.

특징:

사용자 정의된 라이브러리나 프레임워크 자체를 쓰지 않기 때문에 당연히 다른 라이브러리나 프레임워크를 사용했을 때보다 빠르고 호환성이 좋다.
라이브러리를 쓰면 간단하게 쓸 수 있는 코드가 순수 자바스크립트를 쓰면 길어진다.
디버그 기능에서는 Vanilla JavaScript가 진가를 발휘한다. 바닐라 JS로 만든 구문은 디버그를 할 때에 해당 구문만을 조사하지만 라이브러리를 통해 만든 구문은 디버그를 할 때 해당 구문뿐 아니라 라이브러리 파일 안을 몇 바퀴 돌고 오는 일도 있기 때문이다. 또한 디버그가 아니더라도 라이브러리 파일 안을 몇 바퀴 돌고 오는 것은 실제 컴퓨터 연산 상에서 라이브러리를 사용할 때 존재하기 때문에 바닐라 JS를 사용하면 연산 시간을 크게 줄여준다.

참고사이트: