브라우저

브라우저 렌더링 과정과 DOM, CSSOM, layout, paint

브라우저가 웹사이트를 렌더링하는 과정을 정리한다. 브라우저가 웹 사이트를 렌더링하는 과정에서는 DOM과 CSSOM이 생성되는데 각각 다음과 같은 의미를 지닌다. DOM(Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 인터페이스이다. 🍻 DOM은 자바스크립트로 접근하여 수정될 수 있다. CSSOM(CSS Object Model)은 CSS 객체 모델로 자바스크립트가 CSS를 동적으로 조작할 수 있게 해준다. 🍎 HTML 대신 CSS가 대상인 DOM이라고 할 수있다. 이제 실제 브라우저가 렌더링되는 과정을 살펴보면 다음과 같다. 1. DOM / CSSOM 트리 DOM 트리가 만들어지기 위해서 일단 브라우저가 HTML의 바이트 코드를 가져와 지정된 인코딩 방법에 따라 문자로 ..

브라우저 Scroll Event 사용하기

요즈음 웹 사이트들은 스크롤을 통한 이벤트 발생을 많이 일으키는 것 같다. 그리고 그 기본은 스크롤의 변화를 탐지하여 현재 사용자가 보고있는 페이지를 확인하는 것이다. 모바일 웹에서 흔히 사용되는 무한 스크롤 역시, 컴포넌트의 위치와 현재 사용자가 보고 있는 스크롤 위치를 파악하여 마지막에 도달하였을 때 자동으로 서버로 요청을 보내어 새로운 데이터를 가져오는 것 이다. 현재까지 사용자가 스크롤해온 값은 window.pageYOffset이나 window.scrollY로 확인할 수 있다. window.pageYOffset은 deprecated 되었다고 알려졌지만, IE 환경을 고려한다면 이를 사용해야 한다. window.scrollY는 window.pageYOffset와 같은 값을 가지므로, window.p..

Kaikas의 내장 caver 객체 사용하기

React 환경에서 caver-js를 설치하고 컴파일하면, 에러가 발생한다. 🧅 BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. caver-js에서 사용되는 패키지들이 webpack v5에 포함되지 않았기에 발생하는 문제이다. 이를 해결하기 위해 webpack.config.js에 설정을 해주거나, react-scripts의 버전(to v4)을 낮출 수도 있다. 🍄 webpack.config.js는 리액트에서 node_modules/react-scripts/config 폴더 내부에 존재한다. 하지만 이러한 방법들은 결국 임시방편에 지나지 않는다고 생각하였고, 다른 방법을 찾는 도중에 카이카스..