alpeca's world alpeca's world

1. Virtual DOM이란?Virtual DOM(가상 DOM)은 실제 DOM을 직접 조작하는 대신, 메모리에 가상의 DOM을 생성하여 최소한의 변경만 실제 DOM에 적용하는 기술입니다.✅ 쉽게 말해?"DOM 변경을 최소화하여 웹 성능을 최적화하는 방법!""리액트(React)가 빠르게 동작하는 핵심 기술!"2. Virtual DOM의 동작 원리 🔥Virtual DOM은 3단계 과정을 거쳐 최적화된 업데이트를 수행합니다.📌 1) Virtual DOM 생성JSX를 사용하여 UI를 구성하면, 가상 DOM 트리가 생성됨📌 2) 변경 감지 (Diffing Algorithm)새로운 Virtual DOM과 이전 Virtual DOM을 비교하여 변경된 부분을 찾음📌 3) 최소 업데이트 (Reconciliati..

1. px, em, rem이란?웹 개발에서 글꼴 크기, 패딩, 마진 등의 길이 단위를 지정할 때 다양한 단위를 사용할 수 있습니다. 그중에서도 px, em, rem은 가장 많이 사용되는 단위입니다.단위설명px고정된 픽셀 단위 (절대 단위)em부모 요소의 폰트 크기를 기준으로 하는 상대 단위rem최상위 html 요소의 폰트 크기를 기준으로 하는 상대 단위각 단위마다 장단점이 다르므로, 상황에 맞게 적절히 사용하는 것이 중요합니다.2. px(픽셀)이란?px(pixel)은 고정된 크기 단위로, 화면의 물리적 픽셀과 1:1로 매핑됩니다. 크기가 변하지 않기 때문에 디자인할 때 정확한 크기 조정이 가능합니다.✅ px의 특징절대적인 크기이므로 환경(해상도, 디바이스 설정)과 관계없이 고정된 크기 유지브라우저 설정에..

1. 제로 런타임 CSS(Zero Runtime CSS)란?제로 런타임 CSS(Zero Runtime CSS)란 런타임(브라우저 실행 시점)에서 스타일을 처리하는 것이 아니라, 빌드 단계에서 CSS를 미리 생성하여 적용하는 스타일링 방식을 의미합니다. 즉, 실행 시점에서 별도의 스타일 계산 없이 정적인 CSS 파일을 생성하여 성능을 최적화하는 기법입니다.✅ 기존의 CSS-in-JS 솔루션(예: styled-components, Emotion)은 런타임에서 스타일을 생성하고 적용하는 반면, 제로 런타임 CSS는 빌드 타임에서 스타일을 생성하므로 렌더링 성능이 더 뛰어나고 불필요한 오버헤드를 줄일 수 있습니다.2. 기존 CSS-in-JS 방식과의 차이점비교 항목항목전통적인 CSS-in-JS제로 런타임 CSS..