프론트엔드 개발은 빠르게 진화한다. 과거에는 단순한 HTML, CSS, JavaScript 파일만으로 충분했지만, 이제는 수백 개의 모듈과 프레임워크, 그리고 최신 문법을 사용하는 복잡한 애플리케이션으로 발전했다. 이 변화 속에서 빌드 툴은 “코드를 실행 가능한 형태로 변환하고, 더 빠르게 피드백을 주는 것”을 목표로 발전해왔다. 1. Webpack의 등장 — 모든 리소스를 번들링하다.Webpack(2012)은 자바스크립트 생태계의 게임체인저였다. 당시 브라우저는 import / export(ESM)를 지원하지 않았기 때문에, 수십 개의 JS 모듈을 하나의 파일로 묶는 번들링 과정이 필수였다. Webpack은모듈 간 의존성 분석CSS, 이미지, 폰트까지 JS 안으로 통합Loader / Plugin으로 빌..

웹 성능을 제대로 이해하고 개선하려면 핵심 지표(Core Web Vitals)를 먼저 알아야 한다. Google에서 정의한 Core Web Vitals는 사용자가 실제로 느끼는 웹 경험을 정량적으로 측정할 수 있도록 설계되었다. 여기서는 FCP, LCP, CLS, TTI의 의미와 측정 방법, 그리고 실무에서 개선할 수 있는 전략을 자세히 살펴본다. 1. FCP (First Contentful Paint)FCP는 사용자 화면에 처음으로 텍스트, 이미지, SVG 등 콘텐츠 요소가 렌더링되는 시점을 의미한다. 즉, 브라우저가 빈 화면에서 벗어나 “사이트가 살아 있다”는 신호를 주는 순간이다.권장 기준: 1.8초 이하중요성: 사용자는 화면에 무언가 뜨기를 기대하며, 이를 통해 첫인상이 결정된다.예시: 사용자가 ..

학습할 최적화 기법이미지 지연 로딩이미지 지연 로딩 라이브러리 적용레이아웃 이동 피하기화면상의 요소 변화로 레아이웃이 밀리는 현상리덕스 렌더링 최적화병목 코드 최적화메모이제이션 적용이미지 지연 로딩react-lazyload라는 라이브러리를 이용하여 빠르게 이미지 지연 로딩을 적용해 볼 것입니다.일반 컴포넌트도 이 안에 넣어 지연 로드할 수 있다는 것입니다. 이미지가 화면에 들어오는 시점보다 조금 더 미리 이미지를 불러와 화면에 들어온 시점에는 이미지가 준비되어 있도록 해야 합니다. 다행히 react-lazyload 라이브러리에서는 그렇게 할 수 있는 옵션을 제공해 주는데, 바로 offset이라는 옵션입니다.이 옵션에는 얼마나 미리 이미지를 로드할지 픽셀 값으로 넣어 줍니다. 레이아웃 이동 피하기레이..

Repository학습할 최적화 기법이미지 지연 로딩이미지 사이즈 최적화서버에 저장되어 있는 정적 이미지 최적화폰트 최적화커스텀 폰트 적용 최적화캐시 최적화불필요한 CSS 제거사용하지 않는 CSS 코드 제거이미지 지연 로딩네트워크를 확인할 때는 명확한 흐름을 파악할 수 있도록 네트워크에 throttling을 적용합니다. banner-video는 페이지에서 가장 처음으로 사용자에게 보이는 콘텐츠인데 가장 나중에 로드되면, 사용자가 첫 화면에서 아무것도 보지 못한 채로 오랫동안 머물게 되므로 사용자 경험에 좋지 않을 겁니다.동영상의 다운로드를 방해하는, 당장 사용되지 않는 이미지를 나중에 다운로드되도록 하여 동영상이 먼저 다운로드되게 하는 것입니다. 즉, 이미지를 지연 로드하는 것이죠. 뷰포트에 이미지가 ..

학습할 최적화 기법CSS 애니메이션 최적화컴포넌트 지연 로딩 단일 컴포넌트 분할컴포넌트 사전 로딩이미지 사전 로딩애니메이션 최적화문제의 애니메이션 찾기 설문 항목을 클릭하면 해당 응답에 대해 필터링되고 막대 그래프의 배경 색과 막대의 가로 길이가 변합니다.그런데 이 애니메이션을 계속 보다 보면 약간 이상하게 느껴집니다. 막대가 늘어날 때 부드럽게 늘어나지 않고 어딘가 살짝 끊기는 듯한 느낌이 있습니다. 이런 끊김 현상을 쟁크(jank) 라고 합니다. 느끼지 못한다면, 개발자 도구를 열고 Performance 패널의 CPU 설정을 6x slowdown으로 설정하면 애니메이션이 끊기는 현상을 더 잘 확인할 수 있습니다.애니메이션의 원리일반적으로 사용하는 디스플레이의 주사율은 60Hz입니다. 즉, 1초에 ..

Repository최적화 기법로딩 성능 최적화이미지 사이즈 최적화코드 분할텍스트 압축렌더링 성능 최적화병목 코드 최적화 Lighthouse 툴을 이용한 페이지 검사 Lighthouse 검색 결과 First Contentful Paint(FCP)FCP는 페이지가 로드될 때 브라우저가 DOM 콘텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간에 관한 지표입니다.10%의 가중치를 갖습니다. Speed Index(SI)SI는 페이지 로드 중에 콘텐츠가 시각적으로 표시되는 속도를 나타내는 지표입니다.A 페이지는 일부 콘텐츠가 B 페이지보다 먼저 떴음을 알 수 있습니다. 이런 경우 A 페이지가 B 페이지보다 전체적으로 더 빨리 로드된 것으로 계산되며, 더 높은 점수를 받습니다. SI는 총점을 계산할 때, 10%의 ..