앞 편에서 만든 단일 파일 구조를 새 폴더로 복사하고, 어떤 부분이 "카테고리 목록"이고 어떤 부분이 "코스 목록 + 페이지네이션"인지 식별해 볼게요. 이 단계에서는 아직 코드를 분리하지 않고, 구조를 파악하는 데 집중합니다. ### 1-1. `app/step2/ssr/` 폴더 생성 터미널에서 다음 명령을 실행합니다: ```bash mkdir -p app/step2/ssr ``` > Windows PowerShell에서는 `mkdir app\step2\ssr` 또는 `New-Item -ItemType Directory -Path "app\step2\ssr"`를 사용할 수 있습니다. ### 1-2. `page.tsx` 파일 생성 앞 편 `app/step1/ssr/page.tsx`의 코드를 그대로 복사하여 새 위치에 파일을 만듭니다. 이 파일은 아직 분리 전 상태입니다. **파일:** `app/step2/ssr/page.tsx` ```tsx import Link from "next/link"; export default async function SSRPage({ searchParams, }: { searchParams: Promise<{ category?: string; page?: string }>; }) { const params = await searchParams; const category = params.category || "all"; const page = parseInt(params.page || "1", 10); const categories = ["all", "frontend", "backend", "design"]; const items = [ { id: 1, title: "React 기초", category: "frontend" }, { id: 2, title: "Next.js 실습", category: "frontend" }, { id: 3, title: "Node.js 서버", category: "backend" }, { id: 4, title: "UI 디자인 원칙", category: "design" }, { id: 5, title: "TypeScript 입문", category: "frontend" }, ]; const filteredItems = items.filter((item) => (category === "all" ? true : item.category === category)); const itemsPerPage = 3; const totalPages = Math.ceil(filteredItems.length / itemsPerPage); const currentPageItems = filteredItems.slice((page - 1) * itemsPerPage, page * itemsPerPage); return (

{category === "all" ? "전체" : category} 항목

{item.title} {item.category}
항목이 없습니다.

{page > 1 ? ( 이전 ) : ( )} {page} / {totalPages || 1} {page < totalPages ? ( 다음 ) : ( )}

); } ``` ### 1-3. 구조 식별 위 코드를 보고 두 영역을 구분해 보세요. 1. **좌측 사이드바 영역**: `categories` 배열을 map하여 `Link` 리스트를 렌더링하는 부분. 2. **우측 메인 영역**: `items` 배열을 필터링하고 슬라이싱하여 `currentPageItems`를 렌더링하는 부분. ### ✅ 확인 * `app/step2/ssr/page.tsx` 파일이 생성되었습니다. * 브라우저에서 `http://localhost:3000/step2/ssr`으로 접속하면 앞 편과 동일한 UI가 표시됩니다. * 코드에서 `categories.map` 블록과 `currentPageItems.map` 블록의 위치를 눈으로 확인할 수 있습니다. ### 🎓 newlec 쌤의 코멘트 > 이제 우리는 이 긴 파일을 두 개의 컴포넌트로 쪼개야 합니다. 하지만 단순히 코드를 잘라내는 것이 아닙니다. "무엇을 props(속성들)로 넘길지"와 "무엇을 자식 내부에 둘지"를 결정하는 설계 과정입니다. 이 단계에서는 아직 분리하지 않고, 어떤 데이터가 부모(`page.tsx`)에 있고, 어떤 데이터가 자식에게 필요한지 파악하는 시간을 갖습니다. ### 📝 이 단계의 핵심 * `app/step2/ssr/` 폴더에 분리 전 상태의 `page.tsx`를 준비했습니다. * UI를 "카테고리 목록"과 "코스 목록 + 페이지네이션" 두 영역으로 인식했습니다. ---