minTech

DOM에 대해서 짧막하게 글을 적었던 적이 있었다. 이번 react 과정을 배우게 되면서 virtual DOM의 개념에 대해 알게 되었는데 공부를 해보며 DOM과의 차이는 무엇인지, virtual DOM의 작동원리는 무엇인지 제대로 정리해보며, 글을 작성해보았다. ☝️DOM 먼저 MDN에서는 DOM을 어떻게 정의했을까? DOM (Document Object Model) 은 HTML 또는 XML 기반 문서와 상호작용하고 표현하는 API입니다. browser에서 로드되며, node 트리로 표현하는 문서 모델입니다. 위의 말은 결국 HTML 문서를 노드 트리로 표현한 것이다. 처음에 트리로 표현한다는 말이 이해가 안갔다. 하지만 그림으로 이 말을 이해한다면 바로 이해가 간다. DOM은 위의 정의에서 알 수 있..

🖐️시작 전에 자바스크립트는 단일 스레드 기반의 언어이다. 그렇기 때문에 요청이 동기적으로 처리되어 한 번에 한 가지 일만 처리가 가능하기 때문에 한 번에 많은 작업들을 수행할 수 가 없다. 하지만 자바스크립트를 통해 만든 결과물을 보면 여러 동작을 한 번에 하는 것처럼 보인다. 어떻게 가능한걸까? 그렇다면 자바스크립트는 단일 스레드가 아닌걸까? NO!! 이런 동작이 가능하게 하는 것이 "event loop" 덕분이다. 자바스크립트 엔진이 이벤트 루프를 다루는 것이 아니다. 자바스크립트는 Call Stack을 통해 들어온 일을 순차적으로 처리할 뿐이다. 이러한 비동기 요청은 브라우저나 nodeJS같은 브라우저 환경이 담당한다. 🌐 브라우저 환경 👉 구성 ☝️ Javascript engine Heap : ..