## 이미지를 압축하고 최적화하기

웹페이지가 느린 가장 큰 이유는 크기가 큰 이미지입니다. 웹P, AVIF와 같은 최신 포맷을 활용하고, 업로드 전에 TinyPNG나 Squoosh로 이미지 압축하세요. 아래처럼 이미지를 lazy load하면 더욱 효율적입니다.

```html
<img src=hero.webp loading=lazy width=800 height=600 alt=Hero Image />
```

## 불필요한 CSS 없애기

CSS 프레임워크 사용 시 안 쓰는 코드가 쌓이면 렌더링이 느려져요. PurgeCSS나 Ta...

2025년을 위한 프런트엔드 성능 최적화 핵심 노하우

brilliant

## useState -- 꼭 필요한 기본 훅

함수형 컴포넌트에서 상태를 쉽게 관리하려면 useState가 최고입니다. 복잡하게 고민할 필요 없이, 한 컴포넌트의 값을 바꾸는 데 직관적이고 안전하죠. 단, 너무 많은 상태를 한 컴포넌트에 몰아넣기보다는 필요한 만큼 쪼개서 사용하는 게 좋습니다.

```javascript
const [count, setCount] = useState(0);
```

## useEffect -- 사이드 이펙트 관리자

API 호출, DOM 조작, 이벤트 구독 등 컴포넌트의 부수작용은 useEffect...

공개 노트

2025년을 위한 프런트엔드 성능 최적화 핵심 노하우

매일 쓰는 핵심 React Hooks 7가지