react-best-practices
Vercel 모범 사례로 React 및 Next.js 성능 최적화
또한 다음에서 사용할 수 있습니다: 0xBigBoss,0xBigBoss,vercel-labs
좋지 않은 React 성능으로 인해 로딩 시간이 길어지고 사용자 경��이 저하됩니다. 이 스킬은 워터�� 제거, 번들 크기 감소, 렌더링 최적화를 위한 Vercel 엔지니어링 팀의 45가지 우선순위 규칙을 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"react-best-practices" 사용 중입니다. 워터폴에 대해 이 데이터 페칭 패턴을 검토해주세요
예상 결과:
- ISSUE: 순차적 await 호출이 워터폴 생성 (3번 왕복)
- const user = await fetchUser()
- const posts = await fetchPosts()
- const comments = await fetchComments()
- FIX: 병렬 실행을 위해 Promise.all() 사용 (1번 왕복)
- const [user, posts, comments] = await Promise.all([
- fetchUser(),
- fetchPosts(),
- fetchComments()
- ])
"react-best-practices" 사용 중입니다. 무거운 코드 에디터 컴포넌트를 지연 로드하는 방법
예상 결과:
- 무거운 컴포넌트의 지연 로딩에는 next/dynamic 사용:
- import dynamic from 'next/dynamic'
- const MonacoEditor = dynamic(
- () => import('./monaco-editor').then(m => m.MonacoEditor),
- { ssr: false, loading: () => <LoadingSkeleton /> }
- )
- 이 방식은 컴포넌트가 렌더링될 때까지 약 300KB 번들을 ��연시켜 TTI를 개선합니다.
보안 감사
안전Static analyzer detected 912 patterns but all are FALSE POSITIVES. The skill contains markdown documentation with code examples for educational purposes, not executable code. Patterns like 'backtick execution' are shell commands in README examples (pnpm build), 'dynamic imports' are React next/dynamic usage examples, 'storage access' shows localStorage caching patterns, and 'network' patterns are fetch API documentation examples. No actual security vulnerabilities exist.
품질 점수
만들 수 있는 것
React 애플리케이션을 구축하는 프론트엔드 개발자
새 컴포넌트나 페이지를 작성할 ��음부터 최적의 성능을 보장하기 위해 이 스킬을 사용하세요. 번들 최적화, 적절한 데이터 페칭 패턴, 재렌더링 방지 기술을 안내합니다.
풀 리퀘스트를 검토하는 테크 리드
코드 리뷰 중 이 규칙들을 참조하여 병합 전 순차적 비동기 호출, 불필��한 배럴 임포트, 누락된 Suspense 경계 같은 성능 안티 패턴을 포착하세요.
레거시 코드를 리팩토링하는 AI 어시스턴트
이 우선순위 규칙들을 적용하여 기존 React 코드베이스를 체계적으로 개선하세요. 중간 영향의 렌더링 최적화를 다루기 전에 중요한 워터폴 제거부터 시작하세요.
이 프롬프트를 사용해 보세요
Vercel 모범 사례를 사용하여 이 React 컴포넌트를 검토하세요. 워터폴, 불필요한 재렌더링, 번들 최적화 기회를 식별하세요. 코드 예제와 함께 구체적인 해결책을 제안하세요.
비동기 워터폴을 제거하도록 이 코드를 리팩토링하세요. 독립적인 작업에는 Promise.all()을 사용하고 결과가 실제로 필���한 분기로 await를 이동하세요.
이 컴���넌트에 코드 분할 전략을 적용하세요. next/dynamic 임포트, 조건��� 로딩, 사용자 상호작용 시 프리로딩 기회를 식별하세요.
불필요한 재렌더링에 대해 이 컴포넌트를 분석하세요. 적절한 메모이제이션, 의존성 배열, 파생 상태 구독, 기능적 setState 패턴을 적용하세요.
모범 사례
- 중간 영향 최적화보다 중요한 워터폴 제거부터 시작하세요
- 요청별 중복 제거에는 React.cache()를, 요청 간 캐싱에는 LRU 캐시를 사용하세요
- 기능적 setState를 사용하여 안정적인 콜백을 추출하고 필요한 경우 핸들러를 refs에 저장하세요
피하기
- 독립적 작업에 대한 순차적 await 호출
- 특정 함수 대신 전체 유틸리티 라이브러리 임포트
- 원시 값 대신 함수를 effect 의존성으로 직접 전달