시니어 프론트엔드 (Senior Frontend)
현대적인 도구와 모범 사례를 갖춘 시니어 프론트엔드 개발자를 위한 완전한 툴킷입니다.
빠른 시작 (Quick Start)
주요 기능
이 스킬은 자동화된 스크립트를 통해 세 가지 핵심 기능을 제공합니다:
# 스크립트 1: 컴포넌트 생성기
python scripts/component_generator.py [옵션]
# 스크립트 2: 번들 분석기
python scripts/bundle_analyzer.py [옵션]
# 스크립트 3: 프론트엔드 스캐폴더
python scripts/frontend_scaffolder.py [옵션]
핵심 기능 (Core Capabilities)
1. 컴포넌트 생성기 (Component Generator)
컴포넌트 생성 작업을 위한 자동화 도구입니다.
기능:
- 자동화된 스캐폴딩
- 내장된 모범 사례
- 설정 가능한 템플릿
- 품질 검사
사용법:
python scripts/component_generator.py <프로젝트-경로> [옵션]
2. 번들 분석기 (Bundle Analyzer)
종합적인 분석 및 최적화 도구입니다.
기능:
- 심층 분석
- 성능 메트릭
- 권장 사항 제공
- 자동화된 수정
사용법:
python scripts/bundle_analyzer.py <대상-경로> [--verbose]
3. 프론트엔드 스캐폴더 (Frontend Scaffolder)
전문화된 작업을 위한 고급 도구입니다.
기능:
- 전문가 수준의 자동화
- 사용자 정의 설정
- 통합 준비 완료
- 프로덕션 수준 출력
사용법:
python scripts/frontend_scaffolder.py [인수] [옵션]
참조 문서 (Reference Documentation)
React 패턴 (React Patterns)
references/react_patterns.md에서 종합적인 가이드를 확인하세요:
- 상세한 패턴 및 관행
- 코드 예제
- 모범 사례
- 피해야 할 안티패턴
- 실제 시나리오
Next.js 최적화 가이드 (Next.js Optimization Guide)
references/nextjs_optimization_guide.md에서 완전한 워크플로우 문서를 확인하세요:
- 단계별 프로세스
- 최적화 전략
- 도구 통합
- 성능 튜닝
- 문제 해결 가이드
프론트엔드 모범 사례 (Frontend Best Practices)
references/frontend_best_practices.md에서 기술 참조 가이드를 확인하세요:
- 기술 스택 상세
- 설정 예제
- 통합 패턴
- 보안 고려 사항
- 확장성 지침
기술 스택 (Tech Stack)
언어: TypeScript, JavaScript, Python, Go, Swift, Kotlin 프론트엔드: React, Next.js, React Native, Flutter 백엔드: Node.js, Express, GraphQL, REST API 데이터베이스: PostgreSQL, Prisma, NeonDB, Supabase DevOps: Docker, Kubernetes, Terraform, GitHub Actions, CircleCI 클라우드: AWS, GCP, Azure
개발 워크플로우 (Development Workflow)
1. 설정 및 구성
# 의존성 설치
npm install
# 또는
pip install -r requirements.txt
# 환경 구성
cp .env.example .env
2. 품질 검사 실행
# 분석기 스크립트 사용
python scripts/bundle_analyzer.py .
# 권장 사항 검토
# 수정 사항 적용
3. 모범 사례 구현
다음 문서에 설명된 패턴과 관행을 따르세요:
references/react_patterns.mdreferences/nextjs_optimization_guide.mdreferences/frontend_best_practices.md
모범 사례 요약 (Best Practices Summary)
코드 품질
- 확립된 패턴 준수
- 포괄적인 테스트 작성
- 결정 사항 문서화
- 정기적인 검토
성능
- 최적화하기 전에 측정
- 적절한 캐싱 사용
- 중요 경로 최적화
- 프로덕션 환경에서 모니터링
보안
- 모든 입력 검증
- 매개변수화된 쿼리 사용
- 적절한 인증 구현
- 의존성 업데이트 유지
유지보수성
- 명확한 코드 작성
- 일관된 명명 규칙 사용
- 도움이 되는 주석 추가
- 단순하게 유지
일반 명령어 (Common Commands)
# 개발
npm run dev
npm run build
npm run test
npm run lint
# 분석
python scripts/bundle_analyzer.py .
python scripts/frontend_scaffolder.py --analyze
# 배포
docker build -t app:latest .
docker-compose up -d
kubectl apply -f k8s/
문제 해결 (Troubleshooting)
일반적인 문제 (Common Issues)
references/frontend_best_practices.md의 종합적인 문제 해결 섹션을 확인하세요.
도움 받기 (Getting Help)
- 참조 문서 검토
- 스크립트 출력 메시지 확인
- 기술 스택 문서 참조
- 오류 로그 검토
리소스 (Resources)
- 패턴 참조:
references/react_patterns.md - 워크플로우 가이드:
references/nextjs_optimization_guide.md - 기술 가이드:
references/frontend_best_practices.md - 도구 스크립트:
scripts/디렉토리