Performance 테스트 전략 완벽 가이드

웹 애플리케이션의 성능을 측정하고 개선하기 위한 체계적인 테스트 전략을 다룹니다. 실제 프로덕션 환경에서 사용할 수 있는 성능 테스트 기법과 모니터링 방법을 배웁니다.

---

---

들어가며

이 글에서는 Performance 테스트 전략 완벽 가이드에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. Lighthouse_CI_자동화
2. Web_Vitals_모니터링
3. Performance_Observer_활용
4. Load_Testing_Artillery
5. React_Profiler_분석
6. Memory_Leak_Detection
7. Bundle_Size_Monitoring
8. API_Response_Time_Testing
9. Database_Query_Performance
10. Network_Waterfall_분석
11. Throttling_시뮬레이션
12. Performance_Budget_CI

---

1. Lighthouse CI 자동화

개요

CI/CD 파이프라인에 Lighthouse 성능 테스트를 통합하여 자동으로 성능 지표를 측정합니다.

코드 예제

// lighthouserc.js
module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000'],
      numberOfRuns: 3
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'first-contentful-paint': ['error', { maxNumericValue: 2000 }]
      }
    }
  }
};

설명

Lighthouse CI를 통해 성능 점수가 90점 이상, FCP가 2초 이내인지 자동으로 검증합니다.

---

2. Web Vitals 모니터링

개요

Core Web Vitals(LCP, FID, CLS)를 실시간으로 측정하고 분석 서버로 전송합니다.

코드 예제

import { onCLS, onFID, onLCP } from 'web-vitals';

function sendToAnalytics({ name, value, id }) {
  fetch('/analytics', {
    method: 'POST',
    body: JSON.stringify({ metric: name, value, id })
  });
}

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);

설명

실제 사용자의 성능 지표를 수집하여 서버로 전송하고, 성능 이슈를 조기에 발견할 수 있습니다.

---

3. Performance Observer 활용

개요

Performance Observer API를 사용하여 리소스 로딩, 렌더링 타이밍을 상세하게 추적합니다.

코드 예제

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(`${entry.name}: ${entry.duration}ms`);
    if (entry.duration > 100) {
      console.warn('Long task detected:', entry);
    }
  });
});

observer.observe({ entryTypes: ['measure', 'navigation', 'resource'] });

설명

100ms 이상 걸리는 작업을 자동으로 감지하고 경고하여 성능 병목을 실시간으로 파악합니다.

---

4. Load Testing Artillery

개요

Artillery를 사용하여 서버의 부하 테스트를 수행하고 응답 시간과 처리량을 측정합니다.

코드 예제

# artillery.yml
config:
  target: 'https://api.example.com'
  phases:
    - duration: 60
      arrivalRate: 10
      rampTo: 50
scenarios:
  - flow:
    - get:
        url: '/api/data'
        expect:
          - statusCode: 200
          - contentType: json

설명

1분 동안 초당 10명에서 50명까지 점진적으로 부하를 증가시키며 API 응답 시간을 측정합니다.

---

5. React Profiler 분석

개요

React Profiler API를 사용하여 컴포넌트 렌더링 성능을 측정하고 최적화가 필요한 부분을 찾습니다.

코드 예제

import { Profiler } from 'react';

function onRenderCallback(id, phase, actualDuration) {
  if (actualDuration > 16) {
    console.warn(`${id} slow render: ${actualDuration}ms`);
  }
}

function App() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <ExpensiveComponent />
    </Profiler>
  );
}

설명

16ms(60fps) 이상 걸리는 렌더링을 감지하여 사용자 경험에 영향을 주는 컴포넌트를 식별합니다.

---

6. Memory Leak Detection

개요

메모리 누수를 감지하기 위해 힙 스냅샷을 주기적으로 비교하고 분석합니다.

코드 예제

// Jest 테스트
test('메모리 누수 검증', async () => {
  const before = performance.memory.usedJSHeapSize;

  for (let i = 0; i < 1000; i++) {
    render(<MyComponent />);
    cleanup();
  }

  const after = performance.memory.usedJSHeapSize;
  const increase = (after - before) / 1024 / 1024;
  expect(increase).toBeLessThan(10); // 10MB 이내
});

설명

컴포넌트를 반복적으로 생성/제거하며 메모리 증가량이 임계값 이내인지 검증합니다.

---

7. Bundle Size Monitoring

개요

번들 크기를 추적하고 임계값을 초과하면 빌드를 실패시켜 번들 비대화를 방지합니다.

코드 예제

// webpack.config.js
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  performance: {
    maxEntrypointSize: 250000,
    maxAssetSize: 250000,
    hints: 'error'
  },
  plugins: [
    new BundleAnalyzerPlugin({ analyzerMode: 'static' })
  ]
};

설명

엔트리포인트와 개별 에셋 크기를 250KB로 제한하고, 초과 시 빌드 실패로 번들 크기를 관리합니다.

---

8. API Response Time Testing

개요

Supertest를 사용하여 API 응답 시간을 자동으로 테스트하고 성능 SLA를 검증합니다.

코드 예제

const request = require('supertest');
const app = require('../app');

test('API 응답 시간 검증', async () => {
  const start = Date.now();
  const res = await request(app).get('/api/users');
  const duration = Date.now() - start;

  expect(res.status).toBe(200);
  expect(duration).toBeLessThan(500); // 500ms 이내
});

설명

API 엔드포인트의 응답 시간이 500ms 이내인지 자동으로 검증하여 성능 회귀를 방지합니다.

---

9. Database Query Performance

개요

데이터베이스 쿼리 성능을 측정하고 느린 쿼리를 자동으로 감지하는 미들웨어를 구현합니다.

코드 예제

// Sequelize hook
sequelize.addHook('beforeQuery', (options) => {
  options.startTime = Date.now();
});

sequelize.addHook('afterQuery', (options) => {
  const duration = Date.now() - options.startTime;
  if (duration > 100) {
    logger.warn(`Slow query: ${duration}ms`, options.sql);
  }
});

설명

모든 쿼리 실행 시간을 측정하고 100ms 이상 걸리는 쿼리를 로깅하여 최적화가 필요한 쿼리를 찾습니다.

---

10. Network Waterfall 분석

개요

Resource Timing API로 네트워크 요청의 상세한 타이밍 정보를 수집하고 병목을 분석합니다.

코드 예제

function analyzeNetworkTimings() {
  const resources = performance.getEntriesByType('resource');

  resources.forEach((resource) => {
    const timing = {
      dns: resource.domainLookupEnd - resource.domainLookupStart,
      tcp: resource.connectEnd - resource.connectStart,
      ttfb: resource.responseStart - resource.requestStart,
      download: resource.responseEnd - resource.responseStart
    };
    console.table(timing);
  });
}

설명

DNS 조회, TCP 연결, TTFB, 다운로드 시간을 각각 측정하여 네트워크 병목 구간을 정확히 파악합니다.

---

11. Throttling 시뮬레이션

개요

Puppeteer로 느린 네트워크와 CPU 환경을 시뮬레이션하여 저사양 환경 성능을 테스트합니다.

코드 예제

const puppeteer = require('puppeteer');

async function testWithThrottling() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.emulateNetworkConditions({
    downloadThroughput: 1.5 * 1024 * 1024 / 8, // 1.5Mbps
    uploadThroughput: 750 * 1024 / 8,
    latency: 40
  });

  await page.goto('https://example.com');
}

설명

3G 네트워크 환경을 시뮬레이션하여 저속 네트워크에서의 사용자 경험을 검증합니다.

---

12. Performance Budget CI

개요

CI 파이프라인에서 성능 예산을 설정하고 초과 시 자동으로 빌드를 실패시킵니다.

코드 예제

// jest-performance.config.js
module.exports = {
  performanceBudget: {
    'Time to Interactive': 3000,
    'First Contentful Paint': 1500,
    'Speed Index': 3000,
    'Total Bundle Size': 250000
  },
  failOnBudgetExceed: true
};

설명

TTI 3초, FCP 1.5초, 번들 크기 250KB 등의 성능 예산을 설정하고 초과 시 배포를 차단합니다. ``` 이 카드 뉴스는 고급 개발자를 위한 실전 성능 테스트 전략을 다루고 있습니다. 각 카드는 실제 프로덕션 환경에서 바로 적용 가능한 코드와 설정을 포함하고 있으며, CI/CD 파이프라인 통합, 실시간 모니터링, 자동화된 성능 검증 등 체계적인 성능 관리 방법을 제시합니다.

---

마치며

이번 글에서는 Performance 테스트 전략 완벽 가이드에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#JavaScript #Performance #Testing #Monitoring #Optimization