나의 코딩일지

웹 브라우저의 구조 User Interface 주소 표시줄, 이전/다음/새로고침 버튼 등 웹 페이지를 제외하고 사용자와 상호작용 하는 사용자 인터페이스 Browser Engine 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진 Rendering Engine HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진 Network 각종 네트워크 요청을 수행하는 네트워킹 파트 UI Backend 체크박스나 버튼과 같은 기본적인 위젯을 그려주는 UI 백엔드 파트 Javascript Interpreter 자바스크립트 코드를 실행하는 인터프리터(V8) Data Persistence localStorage나 Cookie와 같이 보조 기억장치에 데이터를 저장하는 파트 렌더링 HTML, CSS, JS..

리액트는 가상 DOM을 바탕으로 useEffect, useCallback, useMemo 등의 hook을 통해서 빠른 렌더링을 지원하며 인기를 끌었다. 그러나 최근에는 다양한 프레임워크 및 라이브러리가 나오고 있기 때문에, 리액트에서 벗어나서 효율적인 렌더링을 하는 방법에 대해서 고민해볼 필요가 있다. 프론트엔드 개발자가 고민해봐야하는 측면에는 어떤 것이 있는가? 1. 코드 최적화 가상 우선적으로 불필요하거나 중복된 코드를 제거하고 경량화된 HTML, CSS, JavaScript를 작성하여 코드를 최적화한다. 또한 JS와 CSS 파일의 경우 압축하고 미니파이하는 방법도 있다. 2. 브라우저 캐싱 이미지, 스타일시트, 스크립트 등의 정적 파일을 브라우저 캐싱을 통해 저장하고, 브라우저가 중복된 요청을 하지..