패스트캠퍼스 환급챌린지 42일차 미션 (3월 13일) : 인터랙티브 웹 강의 후기
서론
현대 웹 애플리케이션 개발에서 프론트엔드 기술의 이해는 필수적이며, 특히 리액트(React)와 가상 돔(Virtual DOM)에 대한 지식은 중요하다. 리액트는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다. 오늘은 리액트의 핵심인 '리액트 컴포넌트'와 웹 애플리케이션의 성능 최적화에 기여하는 '브라우저의 렌더링 원리 및 가상 돔'에 대해 심도 있게 다루고자 한다.
본론
환급 챌린지 조건에 의해 최소 두 개의 강의를 들어야 한다. 다음 두 강의를 나누어 간략히 내용과 후기를 적으려 한다.
- 첫 번째 강의: 리액트 컴포넌트
- 두 번째 강의: 브라우저가 그려지는 원리 및 가상돔
첫 번째 강의: 리액트 컴포넌트
리액트 컴포넌트 강의에서는 리액트 애플리케이션을 구성하는 기본 단위인 컴포넌트에 대해 배웠다. 컴포넌트는 리액트로 만들어진 앱의 가장 작은 단위로, 상위, 하위, 병렬적으로 배치되어 애플리케이션을 구성한다. 리액트에서는 크게 클래스형 컴포넌트와 함수형 컴포넌트로 나뉘며, 최근에는 훅(Hooks)의 등장으로 함수형 컴포넌트의 사용이 증가하고 있다. 그러나 여전히 레거시 프로젝트에서 클래스형 컴포넌트를 많이 사용하므로, 두 가지 유형의 컴포넌트를 모두 이해하는 것이 중요하다.
두 번째 강의: 브라우저가 그려지는 원리 및 가상돔
이 강의에서는 브라우저가 웹 페이지를 어떻게 렌더링하는지, 그리고 가상 돔이 실제 DOM과 어떻게 상호 작용하는지에 대해 배웠다. 웹 페이지의 렌더링은 DOM 트리 생성, CSSOM 트리 생성, 렌더 트리 생성, 레이아웃 및 페인트 단계를 거쳐 이루어진다. 이 과정 중에 어떤 인터랙션이 발생하여 DOM에 변화가 생기면, 렌더 트리의 재생성, reflow, repaint 과정을 다시 거치게 되어 성능 저하가 발생할 수 있다.
가상 돔은 이러한 문제를 해결하기 위해 실제 DOM의 가벼운 복사본으로 작동한다. 가상 돔은 실제 DOM과의 차이점을 비교하고(Diffing), 변경 사항을 효율적으로 업데이트(patch)함으로써, 최소한의 연산으로 UI를 최신 상태로 유지한다. 이는 웹 애플리케이션의 성능을 크게 향상시킨다.
결론
'리액트 컴포넌트'와 '브라우저가 그려지는 원리 및 가상돔'에 대한 이해는 현대 웹 개발에서 매우 중요하다. 이 두 강의를 통해 배운 지식은 리액트를 사용한 효율적이고 성능이 우수한 웹 애플리케이션 개발의 기반을 마련해준다. 앞으로 이 지식을 바탕으로 더 나은 사용자 경험을 제공하는 애플리케이션을 만들기 위해 노력할 것이다.
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.