jonbeo 님의 블로그

웹사이트 속도는 UX, SEO, 매출, 이탈률까지 모든 것에 영향을 미칩니다.특히 3초 이상 로딩되면 40%의 사용자가 떠난다는 통계가 있을 정도죠 ⚡ 이번 포스팅에서는 실제 서비스에서 바로 적용 가능한프론트엔드 성능 최적화 핵심 3단계를 다룹니다 👇⚙️ 1. 코드 스플리팅 (Code Splitting)앱을 여러 조각으로 나눠, 필요한 코드만 로드하는 기술🔸 React 예시 (Dynamic Import) import React, { Suspense, lazy } from "react";const Chart = lazy(() => import("./Chart"));export default function Dashboard() { return ( 대시보드 로딩 중...}> ..

웹사이트의 성능은 곧 **사용자 경험(UX)**과 SEO 순위로 직결됩니다.Lighthouse는 크롬 개발자 도구에 내장되어 있으며, 성능을 수치화하고 구체적인 개선 방법까지 제안해 줍니다.🧩 1. Lighthouse 실행 방법크롬 브라우저 열기 → F12 (개발자 도구)상단 탭에서 Lighthouse 선택Performance / Accessibility / Best Practices / SEO / PWA 항목 선택Analyze page load 클릭 → 리포트 생성📌 또는 PageSpeed Insights에서 온라인으로도 테스트 가능📊 2. Lighthouse 주요 지표지표설명권장 기준FCP (First Contentful Paint)최초 콘텐츠 표시 시간1.8초 이내LCP (Largest Con..

웹에서 이벤트를 처리할 때, 보통 요소마다 이벤트를 직접 등록합니다.하지만 요소가 많아질수록 메모리 낭비 + 성능 저하 문제가 생깁니다.이를 해결하는 방법이 바로 **이벤트 위임(Event Delegation)**입니다.🧠 1. 이벤트 위임이란?하위 요소에 이벤트를 직접 걸지 않고, 상위 요소에서 이벤트를 처리하는 기법 브라우저의 이벤트 버블링(Event Bubbling) 원리를 이용합니다.즉, 이벤트가 발생하면 부모 요소까지 이벤트가 전파되므로,부모에서 한 번만 이벤트를 등록해도 자식들의 이벤트를 감지할 수 있습니다.📌 2. 기본 예제 – 잘못된 방식 document.querySelectorAll(".item").forEach(item => { item.addEventListener("click"..