왜 당신의 코드는 감자처럼 느껴질까? 개발자가 자주 범하는 성능 트랩
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 초보 개발자 및 중급 개발자: 성능 최적화에 대한 기초 지식이 필요한 분
- 프론트엔드 개발자: React와 렌더링 파이프라인 이해가 필요한 분
- 백엔드 개발자: 데이터 요청 최적화에 관심 있는 분
- 난이도: 중간 (기술적 개념 설명 포함)
핵심 요약
- 중첩 루프 및 O(n²) 시간 복잡도는 성능 저하의 주요 원인.
Set
사용으로 시간 복잡도 개선 (예:O(1)
). - 불필요한 데이터 요청 (예: 모든 필드 다운로드)은 네트워크 부하 증가. GraphQL 또는 쿼리 파라미터로 필터링.
- 리플로우 및 리페인트는 GPU 과부하 유발.
transform
및opacity
로 GPU 가속. - React의 불필요한 리렌더링은
React.memo
,useCallback
,useMemo
로 해결. - 메모리 누수는 이벤트 리스너 또는
setInterval
정리로 방지.
섹션별 세부 요약
1. 루프 구조의 문제
- 중첩 루프(O(n²)
)는 데이터 크기가 클수록 성능 저하.
- break
, continue
, Map/Set
사용으로 루프 최적화.
- arr.length
캐싱으로 반복 횟수 줄이기.
- Set
사용 예:
```javascript
const seen = new Set();
for (const item of items) {
if (seen.has(item)) { ... }
}
```
2. 시간 복잡도 이해
- O(1): 즉시 처리 (예: Set.has()
).
- O(n): 단일 반복 (예: Array.includes()
).
- O(n²): 모든 항목 비교 (예: 중첩 루프).
- O(log n): 이진 검색 등 효율적 알고리즘.
3. 불필요한 데이터 요청
- 전체 데이터 다운로드 대신 필드 필터링 (예: ?fields=name,id
).
- 백엔드: GraphQL로 필드 선택.
- 프론트엔드: debounce
, lazy-load
적용.
- 예시 코드:
```javascript
fetch('/api/users?fields=name,id&limit=10')
```
4. 리플로우 및 리페인트 최적화
- transform
및 opacity
사용으로 GPU 가속.
- requestAnimationFrame
으로 DOM 읽기/쓰기 배치.
- 스크롤/리사이즈 이벤트에 throttle
적용.
- 비추천:
```javascript
const height = element.offsetHeight;
element.style.height = (height + 20) + 'px';
```
- 추천:
```javascript
const height = element.offsetHeight;
requestAnimationFrame(() => {
element.style.height = (height + 20) + 'px';
});
```
5. React의 리렌더링 문제
- useState
로 상태 업데이트 시 자식 컴포넌트 리렌더링.
- useCallback
및 useMemo
로 함수/값 캐싱.
- React.memo
로 컴포넌트 최적화.
- 예시 코드:
```javascript
const MemoizedComponent = React.memo(function MyComponent({ value }) { ... });
const stableFn = useCallback(() => doSomethingHeavy(), []);
```
6. 메모리 누수 방지
- 이벤트 리스너, setInterval
정리.
- 스코프 내부의 불필요한 참조 제거.
- 예시 코드:
```javascript
// ❌ 누수 발생
setInterval(() => { console.log(bigArray.length); }, 1000);
```
- 해결책: clearInterval
사용 또는 참조 해제.
결론
- 성능 문제 해결은 데이터 구조 최적화, 시간 복잡도 이해, 리렌더링 방지, 메모리 관리가 핵심.
- 실무 팁:
- React DevTools Profiler
로 리렌더링 원인 분석.
- transform
/opacity
로 GPU 가속 활용.
- useCallback
/useMemo
로 함수/값 캐싱.
- 네트워크 요청 최소화 및 필터링 적용.
- 메모리 누수 방지 위해 이벤트 리스너 정리.