코드 리뷰 및 최적화

실전 프로젝트를 마무리할 때 코드 리뷰와 최적화는 반드시 거쳐야 하는 단계입니다.

기능이 동작하는 수준을 넘어 코드를 더 효율적이고 유지보수하기 쉽게 만들고, 성능까지 끌어올리는 데 직접 기여하기 때문입니다.

이 절에서는 코드 리뷰의 핵심 관점과 일반적인 최적화 기법, 성능 개선 도구 활용법을 다룹니다.

아래 다이어그램은 코드 리뷰와 최적화를 기능 완료 뒤의 반복 품질 루프로 정리합니다.

코드 리뷰의 중요성 및 방법

코드 리뷰는 변경된 코드의 정확성, 유지보수성, 성능 영향, 테스트 범위를 검토하는 과정입니다. 리뷰에서는 단순한 스타일보다 요구사항 충족 여부와 회귀 위험을 먼저 확인합니다.

코드 리뷰의 이점

버그 조기 발견: 개발 초기 단계에서 논리적 오류나 잠재적 버그를 발견하여 수정 비용을 절감합니다.
코드 품질 향상: 가독성, 유지보수성, 재사용성 측면에서 더 나은 코드를 작성하도록 유도합니다.
지식 공유 및 팀 역량 강화: 팀원 간에 기술과 모범 사례를 공유하고, 서로의 강점과 약점을 파악하여 학습 기회를 제공합니다.
일관성 유지: 코딩 스타일, 아키텍처 패턴 등 프로젝트 전반의 일관성을 유지하는 데 도움이 됩니다.
보안 취약점 발견: 잠재적인 보안 취약점을 식별하고 개선합니다.

효과적인 코드 리뷰 방법

명확한 목표 설정: 무엇을 중점적으로 볼 것인지(예: 기능 정확성, 성능, 보안, 가독성) 미리 정합니다.
작은 단위로 리뷰: 한 번에 너무 많은 코드를 리뷰하지 않도록 합니다. PR(Pull Request) 크기를 작게 유지하는 것이 좋습니다.
긍정적인 분위기 조성: 비판보다는 건설적인 피드백에 집중하고, 존중하는 태도로 의견을 교환합니다.
체크리스트 활용: 일반적인 코딩 표준, 보안 고려사항, 성능 가이드라인 등을 포함하는 체크리스트를 활용하여 누락 없이 검토합니다.
자동화 도구 활용: ESLint, Prettier와 같은 린터(Linter)와 포맷터(Formatter)를 사용하여 기본적인 코드 스타일과 잠재적 오류를 자동으로 검사합니다. 이는 수동 리뷰의 부담을 줄여줍니다.
테스트 코드 확인: 관련 테스트 코드가 충분한지, 그리고 테스트가 통과하는지 확인합니다.

리뷰 항목은 기능, 경계, 성능, 유지보수성을 나누어 보면 피드백이 감정이 아니라 근거 중심으로 정리됩니다.

Next.js 성능 최적화 기법

코드 리뷰 및 최적화에서는 정확성, 유지보수성, 성능 지표, 회귀 확인 기준을 정리합니다.

Next.js는 기본적으로 빠른 성능을 제공하지만, 복잡한 애플리케이션에서는 추가적인 최적화가 필요합니다.

이미지 최적화 (`next/image`)

next/image 컴포넌트는 이미지 크기 최적화, 자동 포맷 변환(WebP 등), 레이지 로딩, 뷰포트 기반 로딩 등을 자동으로 처리하여 성능을 크게 향상시킵니다.

적용 방법: 일반 <img> 태그 대신 next/image를 사용하고, width, height, alt 속성을 필수로 지정합니다.

예시

import Image from 'next/image';

function BookImage({ src, alt }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={500} // 원본 이미지의 너비
      height={600} // 원본 이미지의 높이
      layout="responsive" // 뷰포트에 따라 이미지 크기 조절
      placeholder="blur" // 로딩 중 블러 효과
      blurDataURL="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" // 블러 이미지를 위한 작은 데이터 URL
      priority // LCP(Largest Contentful Paint)에 중요한 이미지에 사용
    />
  );
}

폰트 최적화 (`next/font`)

next/font는 웹 폰트를 자동으로 최적화하여 CLS(Cumulative Layout Shift)를 방지하고 성능을 개선합니다. 폰트 파일을 직접 다운로드하여 로컬에 저장하므로 네트워크 요청을 줄입니다.

적용 방법: next/font/google 또는 next/font/local에서 폰트를 임포트하여 사용합니다.

예시

app/layout.tsx

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'], display: 'swap' });

export default function RootLayout({ children }) {
  return (
    <html lang="ko" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

스크립트 최적화 (`next/script`)

서드파티 스크립트(Google Analytics, 광고 스크립트 등)는 페이지 로딩 성능에 큰 영향을 미칠 수 있습니다. next/script 컴포넌트를 사용하면 스크립트 로딩 전략을 제어할 수 있습니다.

전략
- beforeInteractive: 페이지가 상호작용하기 전에 로드 (높은 우선순위)
- afterInteractive (기본값): 페이지가 상호작용 가능한 상태가 된 후 로드
- lazyOnload: 뷰포트에 들어왔을 때 로드 (낮은 우선순위)
- worker: 웹 워커에서 로드 (실험적)

예시

import Script from 'next/script';

function MyAnalytics() {
  return (
    <>
      <Script
        src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
        strategy="afterInteractive" // 페이지 상호작용 후 로드
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'GA_MEASUREMENT_ID');
        `}
      </Script>
    </>
  );
}

데이터 페칭 최적화 (캐싱 및 재검증)

Next.js의 캐싱 메커니즘을 이해하고 효율적으로 활용합니다.

Data Cache (Server Components): 서버 컴포넌트에서 fetch를 사용하면 자동으로 응답을 캐싱합니다. 동일한 요청에 대해 다시 데이터를 가져오지 않고 캐시된 데이터를 사용합니다.
Segment Cache (Full Route Cache): next dev 및 next start에서 페이지 세그먼트(라우트 세그먼트)를 캐싱합니다.
Incremental Static Regeneration (ISR): 정적 생성된 페이지를 주기적으로 또는 요청 시 재검증하여 업데이트할 수 있습니다. 이는 빌드 시간을 단축하면서도 최신 콘텐츠를 제공하는 데 유용합니다.
- App Router에서 ISR: fetch API의 revalidate 옵션을 사용하거나, revalidatePath, revalidateTag Server Action을 사용하여 특정 경로 또는 태그에 대한 캐시를 무효화할 수 있습니다.
- 예시 (app/books/[id]/page.tsx에서 재검증 추가)
  app/books/[id]/page.tsx
```
export const revalidate = 60; // 이 페이지의 데이터는 최대 60초마다 재검증
```
Static Assets Cache: public 디렉토리의 정적 파일들은 빌드 시에 캐시 지시문(cache-control headers)이 설정되어 CDN에서 효율적으로 캐싱됩니다.

페이지 단위 분할과 지연 로딩 설계

Next.js는 페이지 단위 코드 스플리팅을 자동으로 처리합니다. 즉, 사용자가 특정 페이지를 요청할 때 해당 페이지에 필요한 JavaScript 코드만 로드됩니다. 추가적으로, 특정 컴포넌트나 라이브러리를 필요할 때만 로드하도록 동적 임포트를 사용할 수 있습니다.

next/dynamic: 클라이언트 컴포넌트나 무거운 라이브러리를 레이지 로드하는 데 사용합니다.

예시

// 무거운 차트 라이브러리를 동적으로 로드
import dynamic from 'next/dynamic';
import Loading from './Loading';

const DynamicChart = dynamic(() => import('../components/Chart'), {
  loading: () => <Loading />, // 로딩 중 표시할 컴포넌트
  ssr: false, // 이 컴포넌트는 클라이언트에서만 렌더링 (SSR 제외)
});

function MyDashboard() {
  return (
    <div>
      <DynamicChart />
    </div>
  );
}

다음 다이어그램은 각 최적화 기법을 어떤 측정 신호가 보일 때 먼저 적용할지 정리합니다.

성능 측정 및 디버깅 도구

아래 다이어그램은 최적화 질문에 따라 Lighthouse, Chrome DevTools, Vercel Speed Insights, Bundle Analyzer를 어떻게 나눠 쓰는지 보여줍니다.

최적화의 효과를 확인하고 병목 현상을 식별하기 위해 다양한 도구를 활용합니다.

Lighthouse 기준선 진단

용도: 웹 페이지의 성능, 접근성, SEO, PWA 점수를 종합적으로 측정하고 개선 방안을 제시합니다.
사용법: Chrome 개발자 도구에서 Lighthouse 탭을 클릭하고 Analyze page load를 실행합니다.
활용: Lighthouse 보고서에서 제시하는 권장 사항을 따라 코드와 설정을 개선합니다. 특히 Core Web Vitals(LCP, FID, CLS) 지표에 주목합니다.

Chrome DevTools (성능 탭, 네트워크 탭)

Performance 탭: 런타임 성능을 기록하고 분석하여 JavaScript 실행, 렌더링, 레이아웃 계산 등에서 발생하는 병목 현상을 시각적으로 파악합니다.
Network 탭: 페이지 로딩 시 발생하는 모든 네트워크 요청(JS, CSS, 이미지, API 호출)을 분석하고, 각 리소스의 크기, 로딩 시간, 캐싱 여부 등을 확인합니다. 이를 통해 불필요한 요청이나 큰 리소스를 식별할 수 있습니다.

Vercel Analytics / Speed Insights

Vercel은 배포된 Next.js 애플리케이션에 대한 내장 분석 및 성능 지표를 제공합니다.

Vercel Analytics: 방문자 수, 페이지 뷰, 트래픽 소스 등 일반적인 웹사이트 분석 데이터를 제공합니다.
Speed Insights: 실제 사용자 데이터(RUM - Real User Monitoring)를 기반으로 Core Web Vitals를 포함한 페이지 성능 지표를 모니터링합니다. Vercel에 배포된 Next.js 앱에서 추가 설정 없이 바로 사용할 수 있습니다.

번들 분석기 (Bundle Analyzer)

@next/bundle-analyzer와 같은 도구를 사용하여 Next.js 애플리케이션의 JavaScript 번들 크기를 시각적으로 분석할 수 있습니다. 어떤 모듈이 가장 많은 공간을 차지하는지 파악하여 불필요한 코드나 큰 라이브러리를 식별하고 제거할 수 있습니다.

설치: npm install --save-dev @next/bundle-analyzer

next.config.js 설정

next.config.js

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // Next.js config options
});

실행: ANALYZE=true npm run build 명령어를 실행하면 빌드 후 번들 분석 보고서가 웹 브라우저에 열립니다.

코드 리뷰와 최적화는 변경 범위, 성능 측정, 유지보수성을 기준으로 반복 점검해야 합니다. 프로젝트가 커질수록 성능 지표와 코드 품질 기준을 함께 관리합니다.

아래 다이어그램은 next/image, next/font, next/script, 데이터 캐싱을 요구사항, 구현 단위, 검토 신호가 이어지는 코드 리뷰 항목으로 묶어 보여줍니다.

On this page