Ch.Covelope

트리 쉐이킹이란? 개발 모드와 프로덕션 모드 차이 “트리 쉐이킹(Tree Shaking)”은 더 이상 선택이 아닌 필수입니다. 사용하지 않는 코드를 제거해 번들 크기를 줄이고, 웹사이트 로딩 속도를 높이는 핵심 최적화 기법이죠. Vite는 최신 프론트엔드 개발 환경에서 가장 각광받는 빌드 도구로, 트리 쉐이킹을 어떻게 다루는지 제대로 이해하면 프로젝트 성능을 한 단계 업그레이드할 수 있습니다.트리 쉐이킹이란?트리 쉐이킹은 “나무를 흔들어 죽은 잎을 털어낸다”는 의미에서 유래한 용어입니다.자바스크립트 애플리케이션에서 실제로 사용되지 않는(Dead Code) 코드를 빌드 과정에서 제거해, 최종 번들 파일을 더 작고 빠르게 만들어줍니다.Vite 개발 모드 – 네이티브 ES 모듈, 번들링 없이 빠르게!1. 번들..

React의 실제 내부 구현으로 이해하는 useRefReact의 실제 내부 코드를 통해 useRef가 어떻게 동작하는지 설명해드리겠습니다. 많은 예시 대신 실제 구현부를 바탕으로 핵심 원리를 설명하겠습니다.React 소스 코드에서의 useRef 구현React 실제 구현 코드를 보면, useRef는 다음과 같이 구현되어 있습니다(약간 단순화했습니다):// React 패키지 내 ReactHooks.js 파일export function useRef(initialValue) { const dispatcher = resolveDispatcher(); return dispatcher.useRef(initialValue);}// ReactFiberHooks.js 파일 내 구현function mountRef(ini..

React의 useRef: 언제, 왜 사용하는가?React를 사용하다 보면 다양한 훅(Hook)들을 만나게 됩니다. 그중에서도 useRef는 종종 오해되거나 제대로 활용되지 못하는 훅 중 하나입니다. 이번 포스트에서는 useRef가 무엇인지, 언제 사용해야 하는지, 그리고 왜 사용하는지에 대해 자세히 알아보겠습니다.useRef란 무엇인가?useRef는 React 16.8에서 도입된 훅으로, 렌더링에 필요하지 않은 값을 참조할 수 있게 해주는 기능입니다. useRef가 반환하는 객체는 컴포넌트의 전체 생애주기 동안 유지되며, 이 객체의 .current 속성을 통해 저장된 값에 접근하거나 수정할 수 있습니다.import { useRef } from 'react';function MyComponent() { ..

소개CSS에서 길이 단위는 웹 디자인의 핵심 요소로, 요소의 크기, 간격, 여백 등을 정의하는 데 사용됩니다. 특히 px, em, rem은 가장 많이 사용되는 단위들로, 각각 고유한 특성과 용도를 가지고 있습니다. 이 글에서는 이 세 가지 단위의 개념, 차이점, 그리고 실제 활용 방법에 대해 알아보겠습니다.px (픽셀) - 절대 길이 단위정의px(픽셀)은 화면의 최소 표시 단위로, 절대 길이 단위입니다. 디스플레이 상의 하나의 점(dot)을 의미합니다.특징고정된 크기로 디바이스나 사용자 설정에 관계없이 일정한 크기를 유지정확한 디자인 구현이 가능사용자의 브라우저 설정(글꼴 크기 등)에 영향을 받지 않음반응형 디자인에는 제한적사용 예시/* px 단위 사용 예시 */.header { font-size: 2..