AI 지원을 통한 성능 최적화

성능 문제는 찾기 어렵고 진단하는 데 시간이 많이 걸릴 수 있습니다. AI 어시스턴트는 코드 패턴을 분석하고, 병목 현상을 식별하며, 최적화를 제안하는 데 탁월합니다. 이 가이드는 성능 작업에 AI를 활용하는 방법을 보여줍니다.

AI 기반 성능 분석

성능 검토 요청

사용자: 이 함수의 성능 문제를 분석해주세요:

function processOrders(orders) {
  const results = [];
  for (const order of orders) {
    const user = users.find(u => u.id === order.userId);
    const products = order.items.map(item =>
      products.find(p => p.id === item.productId)
    );
    results.push({ order, user, products });
  }
  return results;
}

Claude: 여러 성능 문제를 발견했습니다:

1. **O(n²) 복잡도** - 루프 내부의 `users.find()`
2. **O(n³) 복잡도** - map 내부의 중첩된 `products.find()`
3. **조기 종료 없음** - 제한이 필요한 경우에도 모든 주문 처리

O(n) 복잡도의 최적화된 버전은 다음과 같습니다...

/perf 스킬 사용

hljs bash
# 파일 분석
/perf src/services/orderService.js

# 특정 집중 영역으로 분석
/perf --focus memory src/utils/dataProcessor.js

# 성능 보고서 생성
/perf --report src/

일반적인 성능 패턴

패턴 1: 루프 최적화

이전 (O(n²)):

hljs javascript
function findMatches(items, targets) {
  return items.filter(item =>
    targets.includes(item.id)  // 각 항목에 대해 O(n)
  );
}

이후 (O(n)):

hljs javascript
function findMatches(items, targets) {
  const targetSet = new Set(targets);  // 한 번만 O(n)
  return items.filter(item =>
    targetSet.has(item.id)  // 각 항목에 대해 O(1)
  );
}

패턴 2: 메모이제이션

이전:

hljs javascript
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
// fibonacci(40)은 약 1초 소요

이후:

hljs javascript
function fibonacci(n, memo = {}) {
  if (n in memo) return memo[n];
  if (n <= 1) return n;
  memo[n] = fibonacci(n - 1, memo) + fibonacci(n - 2, memo);
  return memo[n];
}
// fibonacci(40)은 약 0.001ms 소요

패턴 3: 지연 로딩

이전:

hljs javascript
// 모든 것을 미리 로드
import { Chart, Table, Form, Modal, DatePicker } from 'heavy-ui-lib';

이후:

hljs javascript
// 필요할 때만 로드
const Chart = lazy(() => import('heavy-ui-lib/Chart'));
const Table = lazy(() => import('heavy-ui-lib/Table'));

패턴 4: 데이터베이스 쿼리 최적화

이전 (N+1 문제):

hljs javascript
const orders = await Order.findAll();
for (const order of orders) {
  order.user = await User.findById(order.userId);  // N개의 쿼리
}

이후 (즉시 로딩):

hljs javascript
const orders = await Order.findAll({
  include: [{ model: User, as: 'user' }]  // JOIN을 사용한 1개의 쿼리
});

React 성능 최적화

재렌더링 문제 식별

Claude에게 컴포넌트 렌더링을 분석하도록 요청하세요:

사용자: 이 컴포넌트가 과도하게 재렌더링되는 이유는 무엇일까요?

function ProductList({ products, onSelect }) {
  return (
    <ul>
      {products.map(product => (
        <ProductItem
          key={product.id}
          product={product}
          onClick={() => onSelect(product.id)}
        />
      ))}
    </ul>
  );
}

최적화 기법

1. 콜백 메모이제이션:

hljs jsx
function ProductList({ products, onSelect }) {
  const handleClick = useCallback((id) => {
    onSelect(id);
  }, [onSelect]);

  return (
    <ul>
      {products.map(product => (
        <ProductItem
          key={product.id}
          product={product}
          onClick={handleClick}
        />
      ))}
    </ul>
  );
}

2. 컴포넌트 메모이제이션:

hljs jsx
const ProductItem = memo(function ProductItem({ product, onClick }) {
  return (
    <li onClick={() => onClick(product.id)}>
      {product.name}
    </li>
  );
});

3. 긴 목록 가상화:

hljs jsx
import { FixedSizeList } from 'react-window';

function ProductList({ products }) {
  return (
    <FixedSizeList
      height={400}
      itemCount={products.length}
      itemSize={50}
    >
      {({ index, style }) => (
        <div style={style}>
          {products[index].name}
        </div>
      )}
    </FixedSizeList>
  );
}

백엔드 성능

API 응답 최적화

사용자: 2초 이상 걸리는 이 API 엔드포인트를 어떻게 최적화할 수 있나요?

async function getOrderDetails(orderId) {
  const order = await Order.findById(orderId);
  const user = await User.findById(order.userId);
  const items = await OrderItem.findAll({ orderId });
  const products = await Promise.all(
    items.map(item => Product.findById(item.productId))
  );
  return { order, user, items, products };
}

최적화된 버전:

hljs javascript
async function getOrderDetails(orderId) {
  // 가능한 경우 병렬 쿼리
  const [order, items] = await Promise.all([
    Order.findById(orderId, {
      include: [{ model: User, as: 'user' }]
    }),
    OrderItem.findAll({
      where: { orderId },
      include: [{ model: Product, as: 'product' }]
    })
  ]);

  return {
    order,
    user: order.user,
    items: items.map(item => ({
      ...item,
      product: item.product
    }))
  };
}
// 5개 쿼리에서 2개로 감소

캐싱 전략

hljs javascript
// Claude에게 캐싱 구현 요청
const cache = new Map();
const CACHE_TTL = 60000; // 1분

async function getCachedUser(userId) {
  const cacheKey = `user:${userId}`;
  const cached = cache.get(cacheKey);

  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
    return cached.data;
  }

  const user = await User.findById(userId);
  cache.set(cacheKey, { data: user, timestamp: Date.now() });
  return user;
}

AI를 통한 성능 프로파일링

프로파일러 출력 해석

사용자: Chrome DevTools 성능 프로필 요약입니다.
무엇에 집중해야 하나요?

- 스크립팅: 2,450ms
- 렌더링: 890ms
- 페인팅: 120ms
- 시스템: 340ms
- 유휴: 1,200ms

자체 시간별 상위 함수:
1. processData: 890ms
2. renderChart: 450ms
3. JSON.parse: 380ms
4. calculateTotals: 290ms

Claude: 이 프로필을 기반으로 다음에 집중하는 것을 권장합니다:

1. **processData (890ms)** - 가장 큰 병목 현상입니다.
   대규모 데이터셋에 대해 웹 워커 또는 청킹을 고려하세요.

2. **JSON.parse (380ms)** - 큰 JSON 페이로드입니다.
   스트리밍 JSON 파싱 또는 페이지네이션을 고려하세요.

3. **renderChart (450ms)** - 차트 렌더링이 비쌉니다.
   캔버스 기반 차트 또는 데이터 포인트 감소를 고려하세요.

메모리 누수 감지

사용자: 앱의 메모리 사용량이 시간이 지남에 따라 증가합니다. 누수를 어떻게 찾을 수 있나요?

Claude: 체계적인 접근 방식은 다음과 같습니다:

1. **힙 스냅샷 촬영** 간격을 두고
2. **스냅샷 비교** 증가하는 객체 찾기
3. **일반적인 원인 확인:**
   - 제거되지 않은 이벤트 리스너
   - 참조를 보유하는 클로저
   - 지워지지 않은 타이머
   - 제거되지 않은 DOM 노드

잠재적 누수에 대해 코드를 분석하겠습니다...

성능 테스트

AI를 통한 부하 테스트

사용자: k6를 사용하여 API에 대한 부하 테스트를 생성해주세요

Claude: 포괄적인 부하 테스트는 다음과 같습니다:

hljs javascript
// load-test.js
import http from 'k6/http';
import { check, sleep } from 'k6';

export const options = {
  stages: [
    { duration: '30s', target: 20 },   // 램프 업
    { duration: '1m', target: 20 },    // 20에서 유지
    { duration: '30s', target: 50 },   // 50으로 램프
    { duration: '1m', target: 50 },    // 50에서 유지
    { duration: '30s', target: 0 },    // 램프 다운
  ],
  thresholds: {
    http_req_duration: ['p(95)<500'],  // 95%가 500ms 미만
    http_req_failed: ['rate<0.01'],    // <1% 오류
  },
};

export default function () {
  const res = http.get('https://api.example.com/orders');

  check(res, {
    '상태가 200임': (r) => r.status === 200,
    '응답 시간 < 500ms': (r) => r.timings.duration < 500,
  });

  sleep(1);
}

벤치마크 생성

hljs bash
# 함수에 대한 벤치마크 생성
/perf --benchmark src/utils/dataTransform.js

성능 체크리스트

프론트엔드

• 번들 크기 분석 및 최적화
• 이미지 최적화 및 지연 로딩
• 코드 스플리팅 구현
• 중요 CSS 인라인
• 캐싱을 위한 서비스 워커
• 긴 목록에 가상 스크롤링

백엔드

• 데이터베이스 쿼리 최적화 (N+1 없음)
• 적절한 인덱스 생성
• 응답 캐싱 구현
• 연결 풀링 구성
• 비동기 작업 병렬화
• 페이로드 크기 최소화

인프라

• 정적 자산에 CDN 구성
• Gzip/Brotli 압축 활성화
• HTTP/2 또는 HTTP/3 활성화
• 데이터베이스 연결 제한 설정
• 자동 스케일링 구성

결론

AI 어시스턴트는 성능 최적화에서 강력한 동맹입니다. 다음을 수행할 수 있습니다:

• 일반적인 안티패턴을 빠르게 식별
• 검증된 최적화 기법 제안
• 성능 테스트 생성
• 프로파일링 데이터 해석

핵심은 성능 목표와 제약 조건에 대한 충분한 컨텍스트를 제공하는 것입니다.

다음: 팀 전체에서 성능 모범 사례를 공유하기 위한 팀 협업을 탐색하세요.