흔한 실수

~20 min · pitfalls, anti-patterns

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

실수 1: `'use client'` 를 tree 위에

Layout 또는 page 를 client mark 하면 그 아래 모든 것 이 Client Component 됨. Subtree 통째로 server default 잃어. 항상 가장 작은 leaf 승격.

실수 2: Client file 에서 server-only module import

DB, secret, Node-only API 만지는 module 은 import 'server-only' mark 해야. Client Component 가 import 하면 build fail — 시끄럽고 빠르고 고치기 쉬움.

실수 3: 모든 거 위해 API route

App Router 는 data fetch 위해 /api/… route 안 필요 — Server Component 가 직접 함. Mutation 위해서도 안 필요 — Server Action 이 함. Route Handler 는 webhook, third-party integration, 진짜 public API 위해. 내부 CRUD 는 Action.

실수 4: Class instance 를 prop 으로

ORM model, custom Date subclass, fancy Result type — serialization boundary 못 넘어. Plain field 는 넘어가고 method 는 사라짐. 넘기 전에 plain data 로 변환.

Code

❌ Page 통째로 client 강등·tsx

'use client'; // 나쁨 — 모든 children 이 client 됨
import { useState } from 'react';

export default function Page() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <HeavyTable />     {/* Table 통째로 JS ship */}
      <MarkdownRenderer />{/* 그리고 parser 도 */}
      <button onClick={() => setOpen(!open)}>Toggle</button>
    </>
  );
}

✅ Toggle 만 client·tsx

// app/page.tsx — Server
export default async function Page() {
  const data = await loadAll();
  return (
    <>
      <HeavyTable data={data} />     {/* Server */}
      <MarkdownRenderer />            {/* Server */}
      <ToggleButton />                 {/* Client leaf */}
    </>
  );
}

// components/ToggleButton.tsx
'use client';
import { useState } from 'react';
export function ToggleButton() {
  const [open, setOpen] = useState(false);
  return <button onClick={() => setOpen(!open)}>{open ? 'Open' : 'Closed'}</button>;
}

✅ Server-only module fence·ts

// lib/db.ts
import 'server-only';
import { PrismaClient } from '@prisma/client';
export const db = new PrismaClient();
// 'use client' file 에서 import 하면 build fail.

External links

Server/Client patterns

Exercise

Repo 에서 'use client' 로 시작하는 file 들 audit. 각각 자문: file 통째로 client 필요? 아니면 leaf 한 개만? 적어도 둘 refactor 해서 directive 내려 박아.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousComposition Pattern Next →퀴즈 · 4 questions

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.