Back to Details

fe-code-review

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

FE Code Review

前端代码审查

$ARGUMENTS
로 전달된 파일 또는 디렉토리의 코드를 체계적으로 리뷰한다.
对通过
$ARGUMENTS
传递的文件或目录中的代码进行系统化审查。

리뷰 절차

审查流程

  1. 대상 파일 읽기: 
    $ARGUMENTS
    경로의 파일을 Read로 읽는다. 디렉토리면 Glob으로 
    .tsx
    , 
    .ts
    파일 목록을 가져온다
  2. 관련 파일 탐색: import된 모듈, 사용된 타입, 훅 등 연관 파일도 함께 확인한다
  3. 체크리스트 기반 리뷰: 아래 6개 카테고리에 대해 검사한다
  4. 결과 리포트: 심각도별로 분류하여 개선안과 함께 보고한다
  1. 读取目标文件：读取
    $ARGUMENTS
    路径下的文件。若为目录，则通过Glob获取
    .tsx
    、
    .ts
    文件列表
  2. 关联文件排查：同时检查导入的模块、使用的类型、Hook等关联文件
  3. 基于检查清单的审查：针对以下6个类别进行检查
  4. 结果报告：按严重程度分类，附带改进方案进行报告

리뷰 체크리스트

审查检查清单

1. TypeScript 타입 안전성

1. TypeScript类型安全性

  • any
    타입 사용 여부 → 
    unknown
    + type guard로 대체
  • 불필요한 
    as
    타입 단언
  • nullable 처리 누락 (optional chaining, nullish coalescing)
  • 제네릭 타입 적절성
  • interface
    vs 
    type
    사용 일관성
  • 미사용 타입/변수 존재 여부
  • 是否使用
    any
    类型 → 建议用
    unknown
    + type guard替代
  • 不必要的
    as
    类型断言
  • 可空值处理缺失（可选链、空值合并）
  • 泛型类型的适用性
  • interface
    与
    type
    使用的一致性
  • 是否存在未使用的类型/变量

2. React 패턴 & Best Practices

2. React模式与最佳实践

  • 컴포넌트 단일 책임 원칙 (200줄 초과 시 분리 권장)
  • Props drilling 깊이 (3단계 초과 시 Context/Zustand 권장)
  • key
    prop에 배열 index 사용 여부
  • 불필요한 
    useEffect
    (derived state로 대체 가능한지)
  • useEffect
    의존성 배열 정확성
  • 이벤트 핸들러 인라인 함수로 인한 불필요한 재생성
  • 조건부 렌더링에서 
    0 &&
    falsy 버그
  • 커스텀 훅 추출 가능한 로직 확인
  • 组件单一职责原则（超过200行建议拆分）
  • Props透传深度（超过3层建议使用Context/Zustand）
  • 是否将数组索引用作
    key
    属性
  • 不必要的
    useEffect
    （是否可通过派生状态替代）
  • useEffect
    依赖数组的准确性
  • 事件处理程序因内联函数导致的不必要重创建
  • 条件渲染中的
    0 &&
    假值Bug
  • 检查是否有可提取为自定义Hook的逻辑

3. 성능

3. 性能

  • 불필요한 리렌더링 유발 패턴 (객체/배열 리터럴을 prop으로)
  • useMemo
    /
    useCallback
    필요한 곳에 미사용 (무분별한 사용도 지적)
  • 큰 리스트의 가상화 미적용 (100+ 아이템)
  • 이미지 최적화 (
    next/image
    미사용)
  • 번들 크기에 영향 주는 무거운 import (lodash 전체 import 등)
  • Server/Client Component 경계 적절성
  • 引发不必要重渲染的模式（将对象/数组字面量作为props传递）
  • 需使用
    useMemo
    /
    useCallback
    的场景未使用（同时指出过度使用的情况）
  • 大型列表未应用虚拟化（100+条数据）
  • 未优化图片（未使用
    next/image
    ）
  • 影响打包体积的重量级导入（如完整导入lodash）
  • Server/Client Component边界的合理性

4. 접근성 (a11y)

4. 可访问性（a11y）

  • 시맨틱 HTML 사용 (div 남용 대신 적절한 태그)
  • 인터랙티브 요소의 접근성 (aria-label, role)
  • 이미지 alt 텍스트
  • 키보드 네비게이션 가능 여부
  • 색상만으로 정보 전달하지 않는지
  • 포커스 관리 적절성
  • 是否使用语义化HTML（避免滥用div，使用合适标签）
  • 交互式元素的可访问性（aria-label、role）
  • 图片alt文本
  • 是否支持键盘导航
  • 是否仅通过颜色传递信息
  • 焦点管理的合理性

5. 보안

5. 安全性

  • dangerouslySetInnerHTML
    사용 시 sanitize 여부
  • 사용자 입력 직접 렌더링 (XSS)
  • API 키/시크릿이 클라이언트 코드에 노출
  • Server Action에서 입력 유효성 검사
  • CSRF 보호 여부
  • 使用
    dangerouslySetInnerHTML
    时是否进行了内容清理
  • 直接渲染用户输入（存在XSS风险）
  • API密钥/机密信息暴露在客户端代码中
  • Server Action中是否对输入进行有效性验证
  • 是否具备CSRF防护

6. 코드 품질 & 유지보수성

6. 代码质量与可维护性

  • 네이밍 일관성 및 명확성
  • 매직 넘버/스트링 → 상수 추출
  • 중복 코드 (DRY 위반)
  • 에러 처리 적절성 (try-catch, Error Boundary)
  • Import 순서 규칙 준수
  • 불필요한 코드/주석
  • 命名的一致性与明确性
  • 魔法数字/字符串 → 建议提取为常量
  • 重复代码（违反DRY原则）
  • 错误处理的合理性（try-catch、Error Boundary）
  • 是否遵循导入顺序规则
  • 不必要的代码/注释

리포트 형식

报告格式

markdown
undefined
markdown
undefined

Code Review: [파일명]

Code Review: [文件名]

요약

摘要

  • 전체 평가: [우수/양호/개선필요/심각]
  • 주요 이슈: N개 (Critical: N, Warning: N, Info: N)
  • 整体评价: [优秀/良好/需改进/严重]
  • 主要问题: N个（Critical: N, Warning: N, Info: N）

Critical (즉시 수정 필요)

Critical（需立即修改）

[C1] 이슈 제목

[C1] 问题标题

  • 위치: 
    파일:라인
  • 문제: 설명
  • 수정안: ```tsx // before ... // after ... ```
  • 位置: 
    文件:行号
  • 问题: 说明
  • 改进方案: ```tsx // before ... // after ... ```

Warning (수정 권장)

Warning（建议修改）

[W1] 이슈 제목

[W1] 问题标题

...
...

Info (개선 제안)

Info（改进建议）

[I1] 이슈 제목

[I1] 问题标题

...
...

잘한 점

优点

  • ...
undefined
  • ...
undefined

실행 규칙

执行规则

  1. 인자가 없으면 사용자에게 리뷰 대상을 질문한다
  2. 파일이 여러 개이면 각 파일별로 리뷰하되, 공통 이슈는 묶어서 보고한다
  3. 수정안은 항상 before/after 코드를 함께 제시한다
  4. 프로젝트의 기존 패턴을 존중하고, 일관성을 우선한다
  5. 과도한 지적을 피하고, 실질적 영향이 있는 이슈에 집중한다
  1. 若未传入参数，则询问用户审查目标
  2. 若涉及多个文件，则逐个文件审查，但将共性问题合并报告
  3. 改进方案需始终附带before/after代码示例
  4. 尊重项目现有模式，优先保证一致性
  5. 避免过度指出问题，聚焦有实际影响的内容