컴포넌트 분리 기준

핵심 개념

언제 컴포넌트를 분리해야 하는지 기준을 정합니다. 너무 일찍 분리해도, 너무 늦게 분리해도 문제입니다.

본문

분리 기준✅ 분리해야 할 때:→ 같은 UI 2곳 이상 사용→ 파일 150줄 이상→ 독립적으로 테스트 가능→ 다른 페이지에서도 사용⏸ 분리 안 해도 될 때:→ 한 곳에서만 사용→ 재사용 안 할 것 같을 때크기 기준:50줄↓: 이상적150줄↑: 분리 고려300줄↑: 반드시 분리

🛠️ 이 챕터의 실습 방법

실습 1: Tailwind CSS 체험

https://play.tailwindcss.com 에서 바로 Tailwind CSS를 체험할 수 있습니다. 반응형 디자인(sm/md/lg)을 적용해보세요.

실습 2: Lighthouse 성능 측정

Chrome 브라우저에서 아무 웹사이트 열기
F12 → Lighthouse 탭 → 'Analyze page load'
Performance / Accessibility / SEO 점수 확인 → 자신의 프로젝트에도 적용해보세요.

실습 3: 접근성(a11y) 체크

https://wave.webaim.org 에 URL을 입력하면 접근성 문제를 자동으로 분석해줍니다.

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

무료 모델

Gemini 2.5 Flash(무료) + Claude Sonnet 4.6(무료) + Grok 4.1(무료)

'컴포넌트 분리 기준' 기획을 0원으로 시작하고 싶어.
ChatGPT(아이디어) → Gemini(경쟁 분석) → Claude(기획서 구조화) 순서로
Notion+Figma+GitHub Projects만 사용하는 워크플로우를 설계해줘.

소자본 모델

Claude API + Cursor $20/mo + Make.com — 월 10~30만원

'컴포넌트 분리 기준' 기획에 AI를 활용해서 시간을 단축하고 싶어.
Perplexity API(시장조사) + Claude API(문서 작성) + Cursor(프로토타입) 조합으로
1주일 안에 기획→MVP까지 끝내는 월 20만원 플랜을 짜줘.

프로덕션 모델

Claude Opus + CrewAI + LangGraph — 월 100만원+

'컴포넌트 분리 기준'를 팀 프로젝트로 확장하려 해.
AI PM(Claude Opus) + AI 리서처(Perplexity) + AI 개발(Cursor+Copilot)
에이전트 팀과 AGENTS.md 협업 프로토콜을 월 100만원 예산으로 설계해줘.

스택 프롬프트

0원→$20/mo→$100/mo 단계별 스택 비교

'컴포넌트 분리 기준' 기획에 최적화된 AI 도구 조합을 단계별로 알려줘.
무료(Notion+Figma+ChatGPT) → 소자본(Cursor+Perplexity API) → 프로덕션(CrewAI+LangGraph)
각 단계별 도구·결과물·전환 시점을 비교해줘.

⭐ 이것만 기억하세요

컴포넌트 분리 기준은 이 3가지만 확실히 잡으세요

1.하나의 컴포넌트에 모든 로직을 넣으면 500줄이 넘어가면서 수정·테스트·재사용이 불가능해집니다

2.단일 책임 원칙으로 UI·로직·데이터를 분리하고, 재사용 가능한 단위로 컴포넌트를 쪼갭니다

3.다음 챕터에서 팀 협업의 기반인 Git 브랜치 전략을 배웁니다

💬 이 챕터 질문 보기

PROJECT-PLAN · CH.18 — 질문하거나 답변을 확인하세요

→

진행도 18 / 34

← 커리큘럼으로 ← 목록으로 (프로젝트 기획)