frontend

前端开发技能。RSC安全、前后端分离、SEO。用于前端工作时。

SKILL.md

--- frontmatter

name: frontend
description: 프론트엔드 개발 스킬. RSC 보안, 서버/클라이언트 분리, SEO. 프론트엔드 작업 시 사용.

Frontend Skill

RSC 보안 (필수)

금지 패턴

•
Server Action에서 전체 객체 반환 금지
- •BAD: return user
- •GOOD: return { id: user.id, displayName: user.displayName }
•
Closure에서 민감 데이터 캡처 금지
- •환경변수, DB 결과 등이 직렬화되어 클라이언트로 전송될 수 있음
•
인라인 Server Action 지양
- •src/actions/ 폴더에 별도 파일로 분리

Server Action 규칙

code

src/actions/
├── project.ts    # "use server" 상단 선언
├── chapter.ts
└── auth.ts

•입력 검증 필수
•try-catch로 에러 처리
•구체적 에러는 로깅만, 클라이언트에는 일반 메시지

서버/클라이언트 분리

서버 컴포넌트	클라이언트 컴포넌트
데이터 페칭	useState, useEffect
환경변수/DB 접근	이벤트 핸들러
SEO 콘텐츠	브라우저 API
무거운 의존성	인터랙티브 UI

SEO

메타데이터

•정적: layout.tsx에 export const metadata
•동적: page.tsx에 export async function generateMetadata

시맨틱 마크업

•<main>, <article>, <nav>, <aside> 활용
•heading 계층 준수 (h1 → h2 → h3)

에러 핸들링

파일	용도
error.tsx	라우트 에러 바운더리
not-found.tsx	404 페이지
loading.tsx	Suspense fallback

체크리스트

• 서버/클라이언트 구분 결정
• Server Action 별도 파일 분리
• 입력 검증, 에러 처리
• 메타데이터 설정 (SEO 필요 시)
• 접근성 확인

Next.js 공식 문서: https://nextjs.org/docs