⚛️
React & Next.js 치트시트

React 19/18 핵심 훅, 컴포넌트 패턴, Next.js 15/14 App Router 파일 규약, 서버 컴포넌트(RSC), 서버 액션, 데이터 페칭/캐싱, Route Handlers 및 미들웨어 완벽 가이드
#react#nextjs#next.js#frontend#hooks#app-router#server-components#typescript#rsc#server-actions#ssr최종 업데이트: 2026-10-03
React & Next.js 치트시트 핵심 명령어 및 실전 가이드

React 19/18 핵심 훅, 컴포넌트 패턴, Next.js 15/14 App Router 파일 규약, 서버 컴포넌트(RSC), 서버 액션, 데이터 페칭/캐싱, Route Handlers 및 미들웨어 완벽 가이드
## 1. 프로젝트 생성 & 설치 (Vite / Next.js)
React 단독 SPA 프로젝트는 Vite를, 풀스택 SSR/SSG 웹 애플리케이션은 Next.js App Router를 사용합니다.
```bash
# ⚡ [1] Vite 기반 React 19 + TypeScript 프로젝트 생성 (클라이언트 SPA)
npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev

# 🚀 [2] Next.js 15 / 14 최신 프로젝트 생성 (공식 App Router 기본 적용)
npx create-next-app@latest my-next-app
# 권장 대화형 설정:
# ✔ Would you like to use TypeScript? … Yes
# ✔ Would you like to use ESLint? … Yes
# ✔ Would you like to use Tailwind CSS? … Yes
# ✔ Would you like your code inside a `src/` directory? … Yes
# ✔ Would you like to use App Router? (recommended) … Yes
# ✔ Would you like to use Turbopack for `next dev`? … Yes
# ✔ Would you like to customize the import alias (@/*)? … No

# 🛠️ [3] 자주 쓰는 핵심 패키지 원라이너 설치
# 아이콘, 유틸리티, 상태관리, 검증 라이브러리
npm install lucide-react clsx tailwind-merge zustand zod
```

### App Router 기본 디렉토리 구조 (`src/app`)
```text
src/
├── app/
│   ├── layout.tsx         # 루트 레이아웃 (HTML <html>, <body> 포함, 필수)
│   ├── page.tsx           # 메인 홈 페이지 (/)
│   ├── loading.tsx        # 로딩 UI (React Suspense 기반 자동 래핑)
│   ├── error.tsx          # 에러 바운더리 ('use client' 필수)
│   ├── not-found.tsx      # 404 페이지
│   ├── api/
│   │   └── hello/route.ts # Route Handler (REST API 엔드포인트)
│   └── blog/
│       ├── page.tsx       # /blog 페이지
│       └── [slug]/
│           └── page.tsx   # /blog/:slug 동적 라우트
```

## 2. React 핵심 훅 (Core Hooks)
함수형 컴포넌트에서 상태와 부수 효과를 다루는 가장 필수적인 훅들입니다.
```tsx
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';

export default function CoreHooksDemo({ filterKeyword }: { filterKeyword: string }) {
  // 🎯 [1] useState: 상태 선언 및 불변성 업데이트
  const [count, setCount] = useState<number>(0);
  const [user, setUser] = useState({ name: 'Lucky', theme: 'dark' });

  // 함수형 업데이트 (이전 상태 보장) & 객체 스프레드 불변성 유지
  const increment = () => setCount((prev) => prev + 1);
  const updateTheme = (newTheme: string) => setUser((prev) => ({ ...prev, theme: newTheme }));

  // 🔌 [2] useEffect: 생명주기 및 사이드 이펙트 관리
  useEffect(() => {
    // 마운트 시 또는 count 변경 시 실행
    const timer = setInterval(() => console.log('Heartbeat'), 10000);

    // 클린업 함수 (언마운트 시 또는 다음 effect 실행 직전 리소스 해제)
    return () => clearInterval(timer);
  }, [count]); // 의존성 배열: []이면 마운트 시 1회만 실행

  // 📌 [3] useRef: DOM 엘리먼트 직접 참조 또는 렌더링을 유발하지 않는 값 저장
  const inputRef = useRef<HTMLInputElement>(null);
  const renderCountRef = useRef<number>(0);
  renderCountRef.current += 1;

  const handleFocus = () => inputRef.current?.focus();

  // 🧠 [4] useMemo: 고비용 연산 결과값 캐싱 (메모이제이션)
  const expensiveList = useMemo(() => {
    return Array.from({ length: 1000 }, (_, i) => `Item #${i}`).filter((item) =>
      item.includes(filterKeyword)
    );
  }, [filterKeyword]);

  // 🔁 [5] useCallback: 자식 컴포넌트에 전달되는 콜백 함수 재생성 방지
  const handleDelete = useCallback((id: number) => {
    console.log('Delete item:', id);
  }, []); // 의존성이 없으면 최초 1회만 함수 생성

  return (
    <div>
      <input ref={inputRef} placeholder="입력..." />
      <button onClick={handleFocus}>포커스 이동</button>
      <button onClick={increment}>클릭: {count}</button>
    </div>
  );
}
```

## 3. React 18 & 19 고급 훅 (Transitions, Id, Action)
동시성(Concurrency)과 모던 폼 처리를 위한 고급 훅입니다.
```tsx
'use client';
import { useTransition, useId, useOptimistic, useActionState } from 'react';

// ⚡ [1] useTransition: UI 렌더링 블로킹 방지 (우선순위가 낮은 업데이트)
export function SearchBox({ onSearch }: { onSearch: (q: string) => void }) {
  const [isPending, startTransition] = useTransition();

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 타이핑 인풋은 즉시 반응하고, 무거운 검색 렌더링은 트랜지션으로 지연 처리
    startTransition(() => {
      onSearch(e.target.value);
    });
  };

  return (
    <div>
      <input onChange={handleChange} placeholder="검색어 입력..." />
      {isPending && <span className="spinner">검색 결과 로딩 중...</span>}
    </div>
  );
}

// 🆔 [2] useId: SSR과 클라이언트 간 하이드레이션 불일치 없는 고유 ID 생성
export function AccessibleInput({ label }: { label: string }) {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input id={id} type="text" />
    </div>
  );
}

// 🚀 [3] useOptimistic (React 19): 서버 응답 전 UI를 먼저 갱신하는 낙관적 업데이트
export function MessageList({ messages, sendMessageAction }: any) {
  const [optimisticMessages, setOptimistic] = useOptimistic(
    messages,
    (state: string[], newMsg: string) => [...state, `${newMsg} (전송 중...)`]
  );

  const formAction = async (formData: FormData) => {
    const text = formData.get('message') as string;
    setOptimistic(text); // UI 즉시 반영
    await sendMessageAction(text); // 실제 서버 전송
  };

  return (
    <form action={formAction}>
      <ul>{optimisticMessages.map((m: string, i: number) => <li key={i}>{m}</li>)}</ul>
      <input name="message" required />
      <button type="submit">전송</button>
    </form>
  );
}
```

## 4. 컴포넌트 패턴 & 커스텀 훅 (Custom Hooks)
재사용 가능한 UI 컴포넌트 설계와 비즈니스 로직 분리 패턴입니다.
```tsx
import React, { useState, useEffect } from 'react';

// 📦 [1] 타입 안전한 Props 인터페이스 정의 (React.FC 지양, Props 직접 타이핑)
interface CardProps {
  title: string;
  badge?: string;
  children: React.ReactNode; // 슬롯 형태의 자식 노드
  variant?: 'primary' | 'secondary';
  onAction?: () => void;
}

export function Card({ title, badge, children, variant = 'primary', onAction }: CardProps) {
  return (
    <div className={`card card-${variant}`}>
      <header className="flex justify-between items-center">
        <h3>{title}</h3>
        {badge && <span className="badge">{badge}</span>}
      </header>
      <div className="card-body">{children}</div>
      {onAction && <button onClick={onAction}>확인</button>}
    </div>
  );
}

// 🛠️ [2] 실전 커스텀 훅: useDebounce (검색창 API 요청 최적화)
export function useDebounce<T>(value: T, delay: number = 300): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
}

// 💾 [3] 실전 커스텀 훅: useLocalStorage
export function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(() => {
    if (typeof window === 'undefined') return initialValue;
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      if (typeof window !== 'undefined') {
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
      }
    } catch (err) {
      console.error(err);
    }
  };

  return [storedValue, setValue] as const;
}
```

## 5. Next.js App Router 라우팅 & 파일 규약
폴더 구조가 곧 웹 URL 경로가 되며, 특수 파일들을 통해 레이아웃과 상태를 캡슐화합니다.
```tsx
// 📄 app/blog/[slug]/page.tsx (동적 라우트 페이지)
// Next.js 15부터 params는 Promise입니다 (비동기 await 처리 필수)
interface PageProps {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

export default async function BlogPostPage({ params, searchParams }: PageProps) {
  const { slug } = await params;
  const query = await searchParams;

  return (
    <article>
      <h1>포스트: {slug}</h1>
      <p>검색 필터: {query.tab || '기본값'}</p>
    </article>
  );
}

// ⚠️ app/error.tsx (에러 처리 바운더리 - 반드시 Client Component여야 함)
'use client';
export function ErrorBoundary({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div className="error-box">
      <h2>오류가 발생했습니다!</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>다시 시도</button>
    </div>
  );
}

// ⏳ app/loading.tsx (페이지 전환 시 자동 렌더링되는 스켈레톤 UI)
export function LoadingSkeleton() {
  return <div className="animate-pulse bg-gray-200 h-64 rounded-xl" />;
}

// 🚫 app/not-found.tsx (notFound() 함수 호출 시 노출)
import Link from 'next/link';
export default function NotFound() {
  return (
    <div>
      <h2>페이지를 찾을 수 없습니다 (404)</h2>
      <Link href="/">홈으로 이동</Link>
    </div>
  );
}
```

## 6. 서버 컴포넌트(RSC) vs 클라이언트 컴포넌트
Next.js App Router의 모든 컴포넌트는 기본적으로 **React Server Component(RSC)**입니다.
```tsx
// 🌐 [1] 서버 컴포넌트 (Server Component, 기본값)
// - 클라이언트 JS 번들에 포함되지 않음 (0 KB)
// - 데이터베이스(Prisma, Supabase, SQL) 및 서버 비밀키(API_KEY)에 직접 접근 가능
// - useState, useEffect, onClick 등 브라우저 이벤트 사용 불가
import { db } from '@/lib/db';

export default async function UserProfile({ userId }: { userId: string }) {
  // DB 직접 조회 (API 엔드포인트 거칠 필요 없음)
  const user = await db.user.findUnique({ where: { id: userId } });

  return (
    <div>
      <h2>{user?.name}</h2>
      {/* 클라이언트 컴포넌트를 자식으로 임포트하여 사용 */}
      <FollowButton targetId={userId} />
    </div>
  );
}

// 💻 [2] 클라이언트 컴포넌트 (Client Component)
// - 파일 최상단에 'use client' 명시
// - onClick, onChange 등 이벤트 리스너와 useState, useEffect 사용 시 필수
'use client';

import { useState } from 'react';

export function FollowButton({ targetId }: { targetId: string }) {
  const [isFollowing, setIsFollowing] = useState(false);

  return (
    <button onClick={() => setIsFollowing(!isFollowing)}>
      {isFollowing ? '팔로잉' : '팔로우'}
    </button>
  );
}

// 💡 [핵심 패턴] Server Component를 Client Component의 children으로 전달하기
// 'use client' 컴포넌트 안에서 서버 컴포넌트를 import하면 클라이언트로 변환되므로,
// 아래처럼 children 프롭으로 전달해야 서버 렌더링 이점을 유지할 수 있습니다.
// <ClientModal><ServerHeavyContent /></ClientModal>
```

## 7. 데이터 페칭, 캐싱 & Revalidation
서버 컴포넌트에서는 `fetch` 함수가 브라우저가 아닌 서버 환경에서 확장된 캐시 옵션과 함께 동작합니다.
```tsx
// 📥 [1] 정적 캐싱 (기본 SSG 효과, 빌드 시점 또는 첫 요청 시 캐시 유지)
async function getStaticData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'force-cache', // 기본값
  });
  return res.json();
}

// 🔄 [2] 동적 페칭 (SSR 효과, 요청마다 새로 가져오기)
async function getDynamicData() {
  const res = await fetch('https://api.example.com/stock-price', {
    cache: 'no-store', // 캐시하지 않음
  });
  return res.json();
}

// ⏱️ [3] 시간 기반 재검증 (ISR - Incremental Static Regeneration)
async function getRevalidatedData() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 }, // 60초마다 백그라운드 재검증
  });
  return res.json();
}

// 🏷️ [4] 태그 기반 온디맨드 재검증 (On-Demand Revalidation)
async function getTaggedData() {
  const res = await fetch('https://api.example.com/products', {
    next: { tags: ['products'] }, // 태그 지정
  });
  return res.json();
}

// ⚡ [5] 온디맨드 재검증 트리거 (Server Action 또는 Route Handler에서 호출)
import { revalidateTag, revalidatePath } from 'next/cache';

export async function clearCacheAction() {
  'use server';
  revalidateTag('products');       // 'products' 태그가 달린 모든 캐시 즉시 무효화
  revalidatePath('/blog/[slug]'); // 특정 경로 즉시 재검증
}

// 📑 [6] 정적 동적 경로 사전 생성 (generateStaticParams)
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then((res) => res.json());
  return posts.map((post: any) => ({ slug: post.id.toString() }));
}
```

## 8. 서버 액션 (Server Actions: 'use server')
별도의 REST API 라우트 없이, 클라이언트 폼이나 버튼에서 서버 함수를 직접 호출하여 DB 수정 및 변형(Mutation)을 수행합니다.
```tsx
// 📁 app/actions/user.ts (별도 파일로 분리 시 파일 상단에 'use server')
'use server';

import { revalidatePath } from 'next/cache';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email('올바른 이메일 형식이 아닙니다.'),
  username: z.string().min(2, '이름은 최소 2글자 이상이어야 합니다.'),
});

export async function createUserAction(prevState: any, formData: FormData) {
  const rawData = {
    email: formData.get('email'),
    username: formData.get('username'),
  };

  // 1. 유효성 검증
  const validated = schema.safeParse(rawData);
  if (!validated.success) {
    return { success: false, errors: validated.error.flatten().fieldErrors };
  }

  // 2. DB 작업 (예: Prisma / Supabase 호출)
  // await db.user.create({ data: validated.data });

  // 3. 캐시 갱신
  revalidatePath('/users');
  return { success: true, message: '성공적으로 등록되었습니다.' };
}

// 📄 app/users/new/page.tsx (클라이언트 폼 컴포넌트)
'use client';
import { useActionState } from 'react';
import { useFormStatus } from 'react-dom';
import { createUserAction } from '@/app/actions/user';

function SubmitButton() {
  const { pending } = useFormStatus(); // 부모 <form>의 제출 진행 상태 감지
  return (
    <button type="submit" disabled={pending} className="btn-primary">
      {pending ? '저장 중...' : '사용자 등록'}
    </button>
  );
}

export default function NewUserForm() {
  const [state, formAction] = useActionState(createUserAction, null);

  return (
    <form action={formAction} className="space-y-4">
      <div>
        <input name="username" placeholder="이름" required />
        {state?.errors?.username && <p className="text-red-500">{state.errors.username[0]}</p>}
      </div>
      <div>
        <input name="email" type="email" placeholder="이메일" required />
        {state?.errors?.email && <p className="text-red-500">{state.errors.email[0]}</p>}
      </div>
      <SubmitButton />
      {state?.success && <p className="text-green-500">{state.message}</p>}
    </form>
  );
}
```

## 9. Next.js 내장 최적화 컴포넌트 & 메타데이터
웹 성능(Core Web Vitals)과 검색 엔진 최적화(SEO)를 위한 내장 기능입니다.
```tsx
// 🖼️ [1] next/image: 자동 WebP 변환, Lazy Loading, 레이아웃 시프트 방지
import Image from 'next/image';
import Link from 'next/link';

export function Banner() {
  return (
    <div>
      {/* LCP 주요 이미지일 경우 priority={true} 적용 */}
      <Image
        src="/hero-banner.png"
        alt="메인 배너"
        width={1200}
        height={600}
        priority
        className="rounded-lg object-cover"
      />
      {/* 🔗 [2] next/link: 뷰포트에 들어오면 백그라운드 프리페치(prefetch) 자동 수행 */}
      <Link href="/dashboard" prefetch={true} className="text-blue-500 hover:underline">
        대시보드로 이동
      </Link>
    </div>
  );
}

// 🔍 [3] 정적 메타데이터 (SEO)
export const metadata = {
  title: 'Next.js 마스터 가이드 | LuckyTechWorld',
  description: 'App Router부터 서버 액션까지 다루는 종합 레퍼런스',
  openGraph: {
    title: 'Next.js 마스터 가이드',
    images: ['/og-image.png'],
  },
};

// 🎯 [4] 동적 메타데이터 (포스트 제목/상세 조회 기반 동적 생성)
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const post = await fetch(`https://api.example.com/posts/${id}`).then((r) => r.json());
  return {
    title: `${post.title} - 기술 블로그`,
    description: post.summary,
  };
}

// 🔤 [5] next/font: 구글 폰트 빌드 타임 자체 호스팅 (외부 요청 제로)
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'], display: 'swap' });
export function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}
```

## 10. Route Handlers (app/api/.../route.ts)
클라이언트나 외부 시스템에서 호출할 수 있는 웹 표준 기반의 REST API 엔드포인트입니다.
```typescript
// 📁 app/api/items/route.ts
import { NextRequest, NextResponse } from 'next/server';

// 🟢 GET: 목록 조회 및 쿼리 파라미터 파싱
export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const page = searchParams.get('page') || '1';
  const keyword = searchParams.get('q') || '';

  const items = [{ id: 1, name: 'Item A' }, { id: 2, name: 'Item B' }];

  return NextResponse.json({
    success: true,
    page: Number(page),
    keyword,
    data: items,
  }, { status: 200 });
}

// 🔵 POST: JSON Body 데이터 수신 및 응답
export async function POST(request: NextRequest) {
  try {
    const body = await request.json();

    if (!body.title) {
      return NextResponse.json({ error: '제목은 필수 항목입니다.' }, { status: 400 });
    }

    // 신규 데이터 DB 삽입 예시...
    const newItem = { id: Date.now(), title: body.title };

    return NextResponse.json(newItem, { status: 201 });
  } catch (err) {
    return NextResponse.json({ error: '잘못된 JSON 바디 요청입니다.' }, { status: 500 });
  }
}

// 📁 app/api/items/[id]/route.ts (동적 매개변수 처리)
export async function DELETE(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  return NextResponse.json({ message: `ID ${id} 삭제 완료` });
}
```

## 11. 미들웨어(Middleware) & 인증/보안 처리
요청이 완료되기 전에 실행되어 인증 체크, 리디렉션, 헤더 재작성을 수행합니다.
```typescript
// 📄 middleware.ts (src/ 바로 아래 또는 프로젝트 루트에 위치)
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('session_token')?.value;
  const pathname = request.nextUrl.pathname;

  // 🔒 [1] 보호된 관리자/대시보드 경로 인증 검사
  if (pathname.startsWith('/dashboard') || pathname.startsWith('/admin')) {
    if (!token) {
      // 미인증 시 로그인 페이지로 리디렉션 (원래 가려던 URL을 쿼리에 보존)
      const loginUrl = new URL('/login', request.url);
      loginUrl.searchParams.set('callbackUrl', pathname);
      return NextResponse.redirect(loginUrl);
    }
  }

  // 🛡️ [2] 보안 헤더 및 커스텀 요청 헤더 주입 (Rewrite)
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-lucky-timestamp', Date.now().toString());

  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });

  // 응답 보안 헤더 추가
  response.headers.set('X-Frame-Options', 'DENY');
  response.headers.set('X-Content-Type-Options', 'nosniff');

  return response;
}

// ⚙️ [3] 미들웨어가 실행될 경로 필터링 (정적 파일 및 파비콘 제외 필수)
export const config = {
  matcher: [
    /*
     * 다음으로 시작하는 경로를 제외한 모든 요청 경로에 미들웨어 적용:
     * - api (API 라우트 제외 시)
     * - _next/static (정적 파일)
     * - _next/image (이미지 최적화 파일)
     * - favicon.ico (파비콘 파일)
     */
    '/((?!_next/static|_next/image|favicon.ico).*)',
  ],
};
```

## 12. 상태 관리 (Zustand) & 환경변수 설정
가장 가볍고 널리 쓰이는 Zustand 전역 상태 관리와 환경변수 규칙입니다.
```typescript
// 🐻 [1] Zustand 전역 스토어 정의 (src/stores/useAuthStore.ts)
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface User {
  id: string;
  name: string;
  email: string;
}

interface AuthState {
  user: User | null;
  isAuthenticated: boolean;
  login: (userData: User) => void;
  logout: () => void;
}

export const useAuthStore = create<AuthState>()(
  persist(
    (set) => ({
      user: null,
      isAuthenticated: false,
      login: (userData) => set({ user: userData, isAuthenticated: true }),
      logout: () => set({ user: null, isAuthenticated: false }),
    }),
    { name: 'auth-storage' } // 로컬 스토리지에 자동 저장
  )
);

// 📄 [2] 컴포넌트에서 Zustand 스토어 사용 예시
'use client';
export function UserStatus() {
  const { user, isAuthenticated, logout } = useAuthStore();
  if (!isAuthenticated) return <p>로그인이 필요합니다.</p>;
  return (
    <div>
      <p>환영합니다, {user?.name}님!</p>
      <button onClick={logout}>로그아웃</button>
    </div>
  );
}
```

### 🌍 환경변수(.env) 보안 규칙
```bash
# 🔒 [서버 전용 환경변수]
# 브라우저 JS 번들에 절대 포함되지 않으며, 서버 컴포넌트/서버 액션/Route Handler에서만 접근 가능
DATABASE_URL="postgresql://user:password@localhost:5432/mydb"
JWT_SECRET_KEY="super-secret-key-only-server-knows"
OPENAI_API_KEY="sk-..."

# 🌐 [클라이언트 공개 환경변수]
# 'NEXT_PUBLIC_' 접두사를 붙여야 브라우저 클라이언트 컴포넌트('use client')에서 읽을 수 있음
NEXT_PUBLIC_API_URL="https://api.example.com"
NEXT_PUBLIC_GA_TRACKING_ID="G-XXXXXXXXXX"
```
💬
React & Next.js 치트시트

의견 및 질문

댓글 수정

댓글 삭제
