⚠️ 해당 포스트는 FE 관점에서 작성했습니다.
Web Development 란?
사용자(client)가 원하는 대로 페이지를 변형(FE)하고 그에 대한 데이터를 주고받아 조작(BE)하는 것이다. 이게 전부다!
화면을 마음대로 조작하기 위해서는 다음과 같은 언어들이 열일을 한다.
핵심은 자바스크립트가 DOM을 (직접)조작한다는 것인데 여기서 문제가 발생한다.
- DOM의 일부가 변경되면 전체가 다시 그려진다.(repaint)
- DOM을 관리하기도 복잡하다.
💡 DOM(Document Object Model) 간단 설명
그림의 오른쪽처럼 html을 트리구조로 만든 것이 DOM이다.
DOM example이나 ☑️ 같은 요소 하나하나를 노드라고 한다.
즉, DOM은 html의 노드들의 집합이다.
이제 위의 사진에서 html = DOM 이라는 그림이 납득이 갈 것이다.
바닐라 자바스크립트는document.어쩌구 혹은 querySlector(어쩌구) 같은 코드(api)로 DOM의 노드들에 접근하여 DOM을 조작할 수 있다.
유식한 말로, DOM이 제공하는 api로 DOM 구조에 접근한다.
왼쪽 코드는 likeBtn에 click이벤트가 발생할시 changeBtn함수가 실행되어 하트 버튼과 체크 버튼을 바꾸는 코드임
이처럼 버튼을 바꾸는 간단한 기능을 수행하는데도 여러줄의 코드가 필요하다.
이를 해결하기 위해 JS 라이브러리가 등장한다.
JS Library
Ajax는 대표적인 자바스크립트 라이브러리다. 라이브러리는 간단히 말해 DOM 관리를 용이하게 해주는 도구다.
Ajax에 Lodash를 결합하여 DOM 조작의 복잡성을 개선했지만, DOM을 변경할 때마다 리렌더링된다는 기본적인 문제는 여전히 남아 있다.
리렌더링이 문제인 이유는?
DOM을 브라우저에 로드하는 과정은 다음과 같다.
Render Tree → Layout(Reflow) → Paint(Repaint)
예를 들어, 버튼 태그를 span 태그로 바꾸는 작은 변경사항에도 이 세 단계를 모두 거쳐야 한다. 따라서, 이러한 프로세스가 변경될 때마다 반복되면 메모리와 시간이 낭비되는 것을 쉽게 짐작할 수 있다.
JS Framework
DOM 요소의 변경에 따른 리렌더링 문제는 프레임워크를 통해 개선되었다.
프레임워크는 각 환경에 맞게 다양하게 발전했다.
- FE: React, Angular, Vue
- BE: Nest, Express
- Graphic: three.js
React는 VDOMVirtual DOM을 똑똑하게 활용하는 프레임워크 중 하나다.
state의 변경이 있을 때마다 화면을 새로 그리는데, 이때 생성된 가상 DOM을 사용하여 렌더링 이전의 DOM과 비교하여 변경된 요소만 찾아낸다diffing. 이후 조정Reconciliation 과정을 거치며, 변경된 부분을 일괄적으로 업데이트Batch Update한다.
정리
HTML, CSS, JS를 사용하여 웹 프론트엔드 개발을 할 때, 바닐라 자바스크립트가 DOM을 직접 조작함으로써 발생하는 문제들을 라이브러리와 프레임워크를 통해 극복하며, 현재의 웹 개발 환경이 조성되었다.😅
참고
✔️ React VDOM
✔️ DOM이란?
