반응형

웹성능최적화 2

React 컴포넌트 최적화 ✅ React.memo, useMemo, useCallback

리액트는 상태가 변경되면 관련된 컴포넌트를 다시 렌더링하는 방식으로 동작합니다.하지만 이 과정에서 필요 없는 컴포넌트까지 렌더링되면 성능 저하로 이어지죠.이를 방지하기 위해 메모이제이션(Memoization) 기법을 활용합니다.🧠 1. React.memo컴포넌트 자체를 메모이제이션하여 불필요한 리렌더링 방지 import React from "react";const Child = React.memo(({ value }) => { console.log("렌더링됨:", value); return {value};});export default Child;props가 바뀌지 않으면 다시 렌더링하지 않음PureComponent와 비슷한 개념📌 주의: props가 객체/배열일 경우 참조가 바뀌면 여전히 리렌더..

React, Vue 2025.10.22

웹사이트 속도 향상! 실무에서 바로 쓰는 웹 성능 최적화 10가지 핵심 방법

웹사이트 속도가 느리면 사용자는 이탈하고, 검색엔진 노출 순위도 하락합니다.특히 모바일 환경에서는 1초의 속도 차이도 매우 치명적이죠.이번 포스팅에서는 프론트엔드 실무 기준으로 가장 많이 적용하는 성능 최적화 방법 10가지를 정리했습니다.🧠 1. 이미지 최적화방법설명✅ WebP, AVIF 사용JPEG, PNG보다 30~80% 더 가볍고 품질 유지✅ 이미지 리사이징실제 사용하는 사이즈만 업로드 (원본 X)✅ Lazy Loading아래에 있는 이미지들은 스크롤 시 로딩 (예: loading="lazy")✅ SVG 적극 활용아이콘, 로고는 SVG로! 🔧 2. CSS 최적화방법설명✅ CSS 파일 합치기불필요한 다중 요청 방지✅ Unused CSS 제거사용하지 않는 클래스를 제거 (PurgeCSS, Tailw..

유용한정보 2025.10.13
반응형