허도경, limewhale

디바운싱(Debouncing)과 쓰로틀링(Throttling) 은 사실, 자바스크립트의 개념이라기보다는 프로그래밍 기법 중 하나입니다. 둘 다 디바이스(일반적으로 CPU)의 최적화를 위해 사용되곤 합니다. 이 두 가지 방법 모두 DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트(event)를 제어(제한)하는 프로그래밍 기법입니다. 그렇다면 디바운싱과 쓰로틀링이 각각 무엇을 의미하는지 알아보시죠! 디바운싱(Debouncing) : 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용됩니다. 쓰로틀링(Throttling) : 연이어 발생한 이벤트에 대해, 일정한 delay를 포..

설명에 들어가기 전에 필수 개념 2가지를 먼저 눈에 익혀주세요. Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 Paint: 실제 스크린에 Layout을 표시하고 업데이트하는 과정 💡 useEffect useEffect는 컴포넌트들이 render와 paint 된 후 실행됩니다. 비동기적(asynchronous) 으로 실행됩니다. paint 된 후 실행되기 때문에, useEffect 내부에 dom에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게됩니다. useEffect의 라이프사이클 (출처) 💡 useLayoutEffect useLayoutEffect는 컴포넌트들이 render 된 후 실행되며, 그 이후에 paint 가 됩니다. 이 작업은 ..

💡 rendering이란? 사용자의 화면에 미리 정의해 둔 화면을 보여 주는 것을 렌더링이라고 합니다. 💡 re-rendering이란? 사용자의 화면에 변화가 생겨(데이터 변경, 화면의 사이즈 축소 또는 확대 등)서 이를 다시 새롭게 정의하여 보여주는 것을 의미합니다. ✔ 컴포넌트가 re-rendering 되는 조건 자신의 상태가 변경될 때 (state 변경) 부모 컴포넌트가 re-rendering(리렌더링) 될 때 자신이 전달받은 props가 변경될 때 forceUpdate 함수가 실행될 때

브라우저는 어떻게 동작하는가? 이전에도 해당 주제로 글을 쓴적이 있어서 오늘은 간단하게 알아보고 스크립트의 로드 시점에 대해 알아보려 합니다 사용자가 연결된 주소의 서버에 데이터 요청을 하게 되면 서버로부터 데이터를 다운로드 받은 것을 가지고 웹브라우저가 그것을 해석해서 사용자가 보는 UI 를 완성해 주게 됩니다. 📖 웹 브라우저 동작과정 간단히 알아보기 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다. 💡 브라우저의 기본 구조 브라우저의 주요 구성 요소는 다음과 같습니다. [사용자 인터페이스] - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 [브라우저 엔진] - 사용자 인터페이스와 렌더링 엔진 사이의..