코드 리뷰 및 최적화

 Next.js App Router 프로젝트의 코드 품질 향상과 성능 최적화는 애플리케이션의 장기적인 유지보수성과 사용자 경험을 크게 개선할 수 있습니다.

 이 절에서는 효과적인 코드 리뷰 프로세스와 다양한 최적화 기법을 살펴보겠습니다.

코드 스타일 가이드 설정

 일관된 코드 스타일은 가독성과 유지보수성을 높입니다.

1. ESLint 설정 :

// .eslintrc.json
{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended"
  ],
  "rules": {
    "react/no-unescaped-entities": "off"
  }
}

2. Prettier 설정 :

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

린팅 및 포맷팅 도구 활용

 자동화된 도구를 사용하여 코드 품질을 일관되게 유지합니다.

// package.json
{
  "scripts": {
    "lint": "next lint",
    "format": "prettier --write ."
  }
}

성능 프로파일링

 Next.js의 내장 성능 분석 도구를 활용합니다.

1. 빌드 분석 :

ANALYZE=true npm run build

2. React DevTools Profiler 사용

번들 크기 최적화

1. 동적 임포트 사용 :

import dynamic from 'next/dynamic';
 
const DynamicComponent = dynamic(() => import('../components/HeavyComponent'));

2. Tree Shaking 활용 :

import { useEffect, useState } from 'react';
// 대신
import useEffect from 'react/useEffect';
import useState from 'react/useState';

메모리 누수 방지

1. useEffect 클린업 함수 활용 :

useEffect(() => {
  const timer = setInterval(() => {
    // 작업 수행
  }, 1000);
 
  return () => clearInterval(timer);
}, []);

2. 이벤트 리스너 제거 :

useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

협업을 위한 코드 리뷰 베스트 프랙티스

1. 명확한 리뷰 가이드라인 설정
2. 작은 단위의 PR(Pull Request) 권장
3. 자동화된 CI/CD 파이프라인 구축
4. 건설적이고 구체적인 피드백 제공

 예시 PR 템플릿

## 변경 사항 설명
- 
- 
 
## 테스트 방법
1. 
2. 
 
## 체크리스트
- [ ] 테스트 코드 작성 완료
- [ ] 문서 업데이트 완료
- [ ] 성능 영향 확인 완료

12장 성능 최적화와의 연관성

 17장의 코드 리뷰 및 최적화는 12장에서 다룬 성능 최적화 기법을 실제 프로젝트에 적용하는 과정을 다룹니다. 예를 들어, 12장에서 배운 이미지 최적화, 코드 분할, 그리고 메모이제이션 기법들을 코드 리뷰 과정에서 적극적으로 검토하고 적용할 수 있습니다.

실습 : 17.2에서 구현한 기능의 코드 리뷰 및 최적화

 17.2에서 구현한 e-commerce 플랫폼의 상품 목록 및 상세 페이지 기능을 리뷰하고 최적화해보겠습니다.

1. 성능 측정 :

• Lighthouse를 사용하여 초기 성능 점수 측정
• React DevTools Profiler를 사용하여 렌더링 성능 분석

2. 코드 품질 개선 :

// 변경 전
export default function ProductList({ products }) {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          <Link href={`/products/${product.id}`}>
            <h2>{product.name}</h2>
            <p>{product.price}</p>
          </Link>
        </li>
      ))}
    </ul>
  );
}
 
// 변경 후
export default function ProductList({ products }) {
  return (
    <ul>
      {products.map((product) => (
        <ProductItem key={product.id} product={product} />
      ))}
    </ul>
  );
}
 
function ProductItem({ product }) {
  return (
    <li>
      <Link href={`/products/${product.id}`}>
        <h2>{product.name}</h2>
        <p>{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(product.price)}</p>
      </Link>
    </li>
  );
}

3. 성능 최적화 :

•  이미지 최적화 :

  import Image from 'next/image';
   
  function ProductItem({ product }) {
    return (
      <li>
        <Link href={`/products/${product.id}`}>
          <Image src={product.image} alt={product.name} width={200} height={200} />
          <h2>{product.name}</h2>
          <p>{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(product.price)}</p>
        </Link>
      </li>
    );
  }

  Copy

•  상품 데이터 캐싱 :

  // app/products/page.js
  import { getProducts } from '../../lib/api';
   
  export const revalidate = 3600; // 1시간마다 재검증
   
  export default async function ProductsPage() {
    const products = await getProducts();
   
    return (
      <div>
        <h1>Our Products</h1>
        <ProductList products={products} />
      </div>
    );
  }

  Copy

4. 최적화 전후 결과 비교 :

• Lighthouse 점수 비교
• React DevTools Profiler 결과 비교
• 번들 크기 변화 확인

5. 추가 개선 사항 :

• 무한 스크롤 또는 페이지네이션 구현으로 초기 로드 시간 개선
• 상품 검색 기능 추가 시 debounce 적용
• 상품 필터링 로직을 서버 컴포넌트로 이동하여 클라이언트 부하 감소

 이 실습을 통해 Next.js App Router 프로젝트의 코드 품질 향상과 성능 최적화 과정을 경험할 수 있습니다. 코드 리뷰를 통해 가독성과 유지보수성을 개선하고, 다양한 최적화 기법을 적용하여 애플리케이션의 전반적인 성능을 향상시킬 수 있습니다.

 Next.js App Router 프로젝트의 코드 리뷰와 최적화는 지속적인 과정입니다. 정기적인 코드 리뷰 세션, 자동화된 성능 모니터링, 그리고 최신 Next.js 기능과 최적화 기법에 대한 지속적인 학습이 필요합니다. 이를 통해 높은 품질의 코드베이스를 유지하고, 사용자에게 최상의 경험을 제공할 수 있습니다.