Front-end 개발

📄 본문프론트엔드 개발에서 퍼포먼스 최적화는 사용자 경험(UX)과 SEO에 매우 중요한 요소입니다.페이지 로딩 속도가 느리면 이탈률이 증가하고, 검색 엔진 노출에도 악영향을 줄 수 있죠.이번 글에서는 이미지 최적화, 폰트 로딩 개선, 코드 스플리팅 등 핵심 기법과 함께,Google Lighthouse 점수를 향상시킬 수 있는 팁들을 소개합니다.🖼️ 1. 이미지 최적화이미지는 페이지 전체 용량의 대부분을 차지하는 경우가 많습니다.아래 방법들을 통해 빠르게 개선할 수 있습니다.✅ WebP 사용기존 JPG/PNG 대비 파일 크기 30~40% 감소대부분의 브라우저가 지원 ✅ 이미지 크기 조절실제 보여지는 영역보다 큰 이미지는 불필요한 낭비srcset과 sizes 속성을 이용해 디바이스별 최적 해상도 제..

1. 리액트 서스펜스란?리액트 서스펜스는 컴포넌트가 렌더링되기 전에 필요한 데이터나 리소스가 준비될 때까지 로딩 상태를 선언적으로 관리할 수 있게 해주는 기능입니다.2. 서스펜스를 사용하는 이유비동기 작업의 로딩 상태를 더 우아하게 처리할 수 있습니다.코드 스플리팅과 데이터 페칭을 더 간단하게 구현할 수 있습니다.사용자 경험을 향상시킬 수 있는 로딩 UI를 쉽게 구현할 수 있습니다.3. 서스펜스 사용법기본적인 사용 예시:import { Suspense } from 'react';function App() { return ( Loading...}> );}4. 주요 사용 사례데이터 페칭function ProfilePage() { return ( }> );..