⚡ 타입스크립트 프로젝트 최적화

1. tsconfig.json 최적화

   
   {
     "compilerOptions": {
       "target": "es2020",
       "module": "esnext",
       "moduleResolution": "bundler",
       "jsx": "preserve",
       "incremental": true,
       "isolatedModules": true,
       "skipLibCheck": true
     }
   }
             

   최신 Next.js에 최적화된 tsconfig 설정으로 컴파일 속도를 높일 수 있어요! 🚀

2. 타입 임포트 최적화

   
   // 이렇게 하지 마세요 ❌
   import { SomeType, someFunction } from './module';
   
   // 이렇게 하세요 ✅
   import type { SomeType } from './module';
   import { someFunction } from './module';
             

   import type을 사용하면 타입만 임포트하여 번들 크기를 줄일 수 있어요! 👍

3. Partial Bundling 활용

   Next.js 14부터 도입된 Partial Bundling을 활용하면 타입스크립트 프로젝트의 빌드 성능을 크게 향상시킬 수 있어요! 🔥

⚡ 자바스크립트 프로젝트 최적화

1. JSDoc으로 타입 힌트 제공

   
   /**
    * @param {number} a - 첫 번째 숫자
    * @param {number} b - 두 번째 숫자
    * @returns {number} 두 숫자의 합
    */
   function add(a, b) {
     return a + b;
   }
             

   JSDoc을 사용하면 타입스크립트 없이도 타입 힌트와 IDE 지원을 받을 수 있어요! 🧩

2. ESLint 강화

   타입스크립트 없이도 ESLint의 강력한 규칙으로 많은 오류를 사전에 방지할 수 있어요! 🛡️

⚡ 공통 최적화 기법 (TS/JS 모두 적용 가능)

1. 서버 컴포넌트 활용

   Next.js 13+ 버전의 App Router에서는 서버 컴포넌트를 적극 활용하세요! 클라이언트로 전송되는 JS 양을 줄여 성능을 향상시킬 수 있어요. 🖥️

   
   // app/page.tsx 또는 app/page.js (서버 컴포넌트)
   export default async function Page() {
     const data = await fetchData(); // 서버에서만 실행됨
     return <main>{/* 데이터 렌더링 */}</main>;
   }
             

2. 이미지 최적화

   Next.js의 Image 컴포넌트를 활용하여 이미지 최적화를 자동화하세요! 🖼️

   
   import Image from 'next/image';
   
   // 최적화된 이미지 사용
   <image src="/profile.jpg" width="{500}" height="{300}" alt="Profile"></image>
             

3. Edge Runtime 활용

   글로벌 분산 엣지 네트워크에서 SSR을 실행하여 지연 시간을 크게 줄일 수 있어요! ⚡

   
   export const runtime = 'edge';
   
   export default function Page() {
     return <div>Edge에서 렌더링된 페이지</div>;
   }
             

4. Streaming SSR 활용

   React 18과 Next.js 13+에서 지원하는 Streaming SSR을 활용하면 TTFB를 개선할 수 있어요! 🌊

   
   import { Suspense } from 'react';
   import Loading from './loading';
   import SlowComponent from './slow-component';
   
   export default function Page() {
     return (
       <div>
         <h1>빠르게 로드되는 콘텐츠</h1>
         <suspense fallback="{<Loading"></suspense>}>
           <slowcomponent></slowcomponent>
         
       </div>
     );
   }