새로운 글쓰기, ‘자바스크립트 후려치기’ 시리즈!!
(사실과 다를 수 있겠지만..) 최대한 이해하기 쉽고 간단하게, 의식의 흐름대로 생각나는 부분 부분들을 글로 적어보려 합니다. #1, #2… 로 글을 작성하겠지만, 그 순서는 어떤 난이도나 깊이와 상관 없이 그냥 의식의 흐름의 순서입니다.

잘못된 부분은 댓글로 알려주세요 :)

1. 컴퓨터 모니터에 보여지기까지

컴퓨터는 2진법으로 0이랑 1으로만 모든 정보를 파악한다고 하죠, 그런데 우리가 이 2진법만을 사용하여 컴퓨터에게 어떠한 일을 시키는 것은 너무 어렵기 때문에 그걸 조금 쉽게 하기 위해 프로그래밍 언어가 만들어 졌습니다. 그리고 프로그래밍 언어는 그 쓰임이나 위치?에 따라서 다양합니다. 예를 들면, ‘철구소 웹사이트’를 만드는, 서비스 위치에서의 언어가 있고, 그 언어를 해석하는 브라우저에서 사용하는 언어가 있을 테고 그걸 해석하는 OS(윈도우, 맥, 리눅스…) 언어도 있을 수 있고 또 OS가 하드웨어를 제어하는 또 어떤 언어가 있겠죠??

2. 웹 사이트가 보여지기까지

웹 사이트는 html이라는 마크업 언어로 만들어지고 css로 크기나 색을 정의하고 javascript로 동적인 효과를 주게 되죠, 여기에서 html 문서는 어떻게 보면 단순한 문자열이지만 이게 웹 브라우저에서 실행이되면 DOM(Document Object Model)이라는 트리 구조를 만들어요. html 아래에 body 그 아래에 section 그 아래에 div, p, span.. 등..(물론 그 안에는 더 복잡한 무엇인가가 있어요.. 암튼,) 이 구조들 덕분에 javascript를 통해서 쉽게 원하는 태그에 접근하거나 내용을 수정할 수 있어요.

여기까지 정리

여기까지 요약하면,, 우리가 html, css, javascript로 작성한 것들은 브라우저가 그 내용을 해석해서 정보를 보여줍니다.

3. DOM

javascript가 많은 이유들로 그 활용이 많아지고 정적으로만 운영되던 웹사이트를 javascript로 동적으로 html 태그들을 추가하고 수정하고 지우는 일들이 많아지게 되었습니다. 그런데 요게 전체의 html 문서에서 하나의 p 태그만 수정을 하여도 브라우저는 전체 DOM을 새로 그리게 되요. 물론 브라우저도 그만큼 성능이 좋아져서 간단한 변화는 체감할 수 없을 정도이지만, 또 그와 동시에 웹 서비스도 더 복잡한 구조를 가지게 되어 그 속도적인 문제가 발생하게 되었습니다.

4. 가상 돔

그리하여 조금은 효과적으로 DOM의 변화에 반응하기 위해 생각해낸 방법이 가상돔입니다. 간단하게 생각해서, 한번에 여러 태그의 값들이 변경되는 상황이라면 이때 변경된 값들을 한번에 가상의 html 코드로 만들어서 수정하고 실제로 사용되는 DOM에 한번에 반영을 시켜서 브라우저가 그 html을 해석하고 DOM을 새로 그리는 횟수를 줄이는 방법입니다. 가상돔을 사용하는 유명한 프레임워크(라이브러리)로는 React나 Vue 등이 있습니다.

5. 실제로 확인해보기

대략 비교해보시면 이렇게 속도 차이가 난답니다.