• Post author:FixLog 노트
• Post published:11/19/2025
• Post category:JavaScript 개발 팁
• Post comments:0 Comments

// 디바운싱 예제
function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

const searchInput = debounce((e) => {
  fetchSearchResults(e.target.value);
}, 300);

// react-window 예제
import { FixedSizeList } from 'react-window';

const Row = ({ index, style }) => (
  
Item {index}
);

const VirtualList = () => (
  
    {Row}
  
);

// 메모이제이션 구현
const memoize = (fn) => {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
};

const expensiveCalculation = memoize((n) => {
  return n * n * Math.random();
});

// worker.js
self.addEventListener('message', (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
});

// main.js
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => {
  console.log('결과:', e.data);
};

// React 코드 스플리팅
import React, { lazy, Suspense } from 'react';

const AdminPanel = lazy(() => import('./AdminPanel'));

function App() {
  return (
    로딩 중...

6. DOM 조작 최소화 및 배치 처리

DOM 조작은 리플로우와 리페인트를 유발하여 비용이 큽니다. 여러 요소를 추가할 때는 DocumentFragment를 사용하거나 innerHTML을 한 번에 설정하는 것이 효율적입니다. 또한 클래스 변경, 스타일 수정을 한꺼번에 처리하고, requestAnimationFrame()을 활용해 브라우저 렌더링 사이클에 맞춰 업데이트하면 성능이 크게 향상됩니다.

// DocumentFragment 사용
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
document.querySelector('ul').appendChild(fragment);

// requestAnimationFrame 활용
requestAnimationFrame(() => {
  element.style.transform = 'translateX(100px)';
});

7. 이벤트 위임 패턴 활용

수백 개의 리스트 아이템에 각각 이벤트 리스너를 붙이면 메모리 사용량이 증가하고 성능이 저하됩니다. 이벤트 위임은 부모 요소 하나에만 리스너를 등록하고 event.target으로 실제 클릭된 요소를 파악하는 기법입니다. 이벤트 버블링을 활용하여 동적으로 추가되는 요소에도 자동으로 적용되며, 메모리 효율성이 뛰어납니다.

// 이벤트 위임 예제
document.querySelector('#list').addEventListener('click', (e) => {
  if (e.target.matches('.list-item')) {
    console.log('클릭된 아이템:', e.target.textContent);
  }
});

8. 적절한 자료구조 선택

데이터 검색, 삽입, 삭제 작업의 성능은 자료구조에 따라 크게 달라집니다. 빠른 조회가 필요하면 배열보다 Map이나 Set을 사용하고, 키 존재 여부 확인은 Object보다 Set이 효율적입니다. 대량의 데이터를 다룰 때는 시간 복잡도를 고려한 자료구조 선택이 필수입니다. WeakMap, WeakSet은 메모리 누수 방지에도 유용합니다.

// Map을 활용한 빠른 조회
const userMap = new Map();
userMap.set('user1', { name: 'John', age: 30 });

// O(1) 시간 복잡도로 조회
const user = userMap.get('user1');

// Set으로 중복 제거
const uniqueIds = new Set([1, 2, 2, 3, 4, 4]);
console.log([...uniqueIds]); // [1, 2, 3, 4]

9. 이미지 및 리소스 최적화

이미지는 웹 페이지 용량의 대부분을 차지합니다. WebP 포맷 사용, 적절한 크기로 리사이징, lazy loading 적용, srcset으로 반응형 이미지 제공 등의 기법을 사용합니다. Intersection Observer API를 활용하면 뷰포트에 들어올 때만 이미지를 로드하여 초기 로딩 시간을 단축할 수 있습니다. 폰트도 font-display: swap으로 텍스트 렌더링을 최적화합니다.

// Intersection Observer로 이미지 지연 로딩
const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      imageObserver.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  imageObserver.observe(img);
});

10. 불필요한 재렌더링 방지

React 같은 프레임워크에서는 상태 변경 시 컴포넌트가 재렌더링됩니다. React.memo, PureComponent, shouldComponentUpdate를 활용해 props가 변경되지 않으면 렌더링을 스킵합니다. 또한 객체와 배열을 props로 전달할 때는 참조가 변경되지 않도록 주의하고, useCallback으로 함수 참조를 유지합니다. Vue에서는 computed 속성과 v-once 디렉티브를 활용합니다.

// React.memo로 재렌더링 방지
const ExpensiveComponent = React.memo(({ data }) => {
  return 
{/* 복잡한 렌더링 로직 */}
;
}, (prevProps, nextProps) => {
  return prevProps.data.id === nextProps.data.id;
});

// useCallback으로 함수 메모이제이션
const handleClick = useCallback(() => {
  console.log('클릭');
}, []);

실제 적용 사례

한 전자상거래 플랫폼에서 JavaScript 성능 최적화 10가지 팁을 적용한 결과, 상품 목록 페이지의 로딩 시간이 4.2초에서 1.8초로 57% 단축되었습니다. 특히 가상 스크롤링 도입으로 5000개 상품을 렌더링할 때 메모리 사용량이 80% 감소했고, 코드 스플리팅으로 초기 번들 크기를 350KB에서 120KB로 줄였습니다. 이미지 지연 로딩과 Web Worker를 활용한 필터링 기능은 모바일 환경에서도 부드러운 사용자 경험을 제공했습니다. 디바운싱을 적용한 검색 기능은 API 호출을 70% 줄여 서버 비용도 절감했습니다. 성능 개선 후 전환율이 23% 증가하고 이탈률이 15% 감소하는 비즈니스 성과도 확인되었습니다.

주의사항 및 베스트 프랙티스

성능 최적화는 측정 없이 시작하면 안 됩니다. Chrome DevTools의 Performance 탭, Lighthouse, Web Vitals를 활용해 병목 지점을 먼저 파악하세요. 조기 최적화는 코드 복잡도만 높일 수 있으니 실제 성능 문제가 있는 부분에 집중합니다. 또한 최적화 후에는 반드시 측정하여 효과를 검증하고, 브라우저 호환성도 고려해야 합니다. 가독성과 유지보수성을 희생하지 않는 선에서 최적화하는 것이 장기적으로 유리합니다.

마무리 및 추가 팁

JavaScript 성능 최적화 10가지 팁을 실무에 적용하면 사용자 경험과 비즈니스 성과를 동시에 개선할 수 있습니다. Tree Shaking으로 미사용 코드를 제거하고, HTTP/2를 활용하며, 서비스 워커로 오프라인 지원을 추가하는 것도 고려해보세요. 지속적인 모니터링과 개선이 핵심입니다!