8.6 KiB
8.6 KiB
Nuxt 코드 리뷰 평가 기준
이 문서는 nuxt-code-review 스킬에서 코멘트 작성 시 근거로 인용하는 평가 기준 목록입니다.
각 기준은 고유 ID를 가지며, 코멘트에 기준: VUE-001 (제목) 형태로 인용합니다.
VUE — Vue 3 컴포넌트 패턴
| ID | 제목 | 규칙 | 기본 심각도 | 참조 |
|---|---|---|---|---|
| VUE-001 | script setup 사용 | <script setup lang="ts">를 기본으로 사용한다. Options API는 신규 코드에서 사용하지 않는다. |
p1 | rules/framework-rules.md |
| VUE-002 | defineProps 제네릭 타입 | Props는 defineProps<T>() 제네릭 형태로 타입을 명시한다. |
p1 | rules/framework-rules.md |
| VUE-003 | defineEmits 제네릭 타입 | Emits는 defineEmits<{ ... }>() 제네릭 형태로 선언한다. |
p1 | rules/framework-rules.md |
| VUE-004 | ref vs reactive 일관성 | 원시값·단일 객체는 ref, 복잡한 상태 트리는 reactive. 팀 내에서는 가능한 ref 우선. |
p2 | rules/framework-rules.md |
| VUE-005 | computed 활용 | 계산된 값은 메서드 대신 computed로 정의한다. 템플릿에서 반복 호출되는 계산 로직은 반드시 computed로 추출한다. |
p2 | rules/framework-rules.md |
| VUE-006 | 컴포넌트 단일 책임 | 컴포넌트는 단일 책임을 가진다. 200줄을 넘으면 분리를 검토한다. | p2 | rules/framework-rules.md |
| VUE-007 | 불리언 prop 네이밍 | 불리언 prop은 is, has, can, should 접두사를 사용한다. |
p3 | rules/coding-conventions.md |
| VUE-008 | 이벤트 핸들러 네이밍 | 이벤트 핸들러 함수는 handle 또는 on 접두사를 사용한다. |
p3 | rules/coding-conventions.md |
| VUE-009 | 불필요한 reactive 래핑 | 단순 객체에 reactive를 사용해 불필요한 프록시 오버헤드가 생기지 않도록 한다. |
p3 | rules/framework-rules.md |
| VUE-010 | 복잡한 템플릿 표현식 | 템플릿 내 복잡한 인라인 로직은 computed나 메서드로 추출한다. | p2 | rules/coding-conventions.md |
| VUE-011 | 비즈니스 로직 composable 추출 | 재사용 가능한 비즈니스 로직은 composables/ 디렉토리의 useXxx 함수로 추출한다. |
p2 | rules/framework-rules.md |
| VUE-012 | 파일명 PascalCase | Vue 컴포넌트 파일명은 PascalCase.vue를 사용한다. |
p2 | rules/coding-conventions.md |
NUXT — Nuxt 3 프레임워크 패턴
| ID | 제목 | 규칙 | 기본 심각도 | 참조 |
|---|---|---|---|---|
| NUXT-001 | 파일 기반 라우팅 | Nuxt의 파일 기반 라우팅을 사용한다. 수동 라우트 정의는 특수한 경우에만 허용한다. | p2 | rules/framework-rules.md |
| NUXT-002 | useFetch / useAsyncData 사용 | 서버 상태는 useFetch / useAsyncData를 사용한다. 컴포넌트에서 직접 $fetch나 fetch를 호출하지 않는다. |
p1 | rules/framework-rules.md |
| NUXT-003 | 동적 라우트 파라미터 형식 | 동적 라우트 파라미터는 [param].vue 형식을 사용한다. |
p2 | rules/framework-rules.md |
| NUXT-004 | 미들웨어 위치 | 라우트 미들웨어는 middleware/ 디렉토리에 배치하고, 필요한 경우에만 인라인 미들웨어를 사용한다. |
p2 | rules/framework-rules.md |
| NUXT-005 | Nitro 서버 라우트 분리 | BFF 로직은 server/api/ 또는 server/routes/에 배치하며, 클라이언트 컴포넌트에서 외부 API를 직접 호출하지 않는다. |
p1 | rules/framework-rules.md |
| NUXT-006 | createError 사용 | 서버 라우트에서 에러 응답은 createError를 사용하여 일관된 에러 형식을 유지한다. |
p2 | — |
| NUXT-007 | SEO 메타 관리 | 페이지 컴포넌트에는 useHead 또는 useSeoMeta로 메타 태그를 관리한다. |
p3 | — |
| NUXT-008 | auto-import 활용 | Nuxt의 auto-import 대상(ref, computed, useFetch 등)은 명시적으로 import하지 않는다. |
p4 | — |
TS — TypeScript
| ID | 제목 | 규칙 | 기본 심각도 | 참조 |
|---|---|---|---|---|
| TS-001 | any 사용 금지 | any 타입 사용을 금지한다. 불가피하면 unknown을 먼저 고려하고, 사용 시 주석으로 이유를 명시한다. |
p1 | rules/coding-conventions.md |
| TS-002 | 함수 시그니처 타입 명시 | 함수의 매개변수와 반환 타입을 명시한다. | p1 | rules/coding-conventions.md |
| TS-003 | 공개 API 타입 export | 타 모듈에서 import되는 타입은 반드시 export한다. | p2 | rules/coding-conventions.md |
| TS-004 | 유니온 타입 관리 | 유니온 타입은 as const 또는 별도 타입 alias로 관리한다. 인라인 리터럴 유니온 남용을 피한다. |
p2 | rules/coding-conventions.md |
| TS-005 | strict 모드 준수 | tsconfig.json의 strict: true를 유지한다. 타입 오류를 ! (non-null assertion)으로 억지 해결하지 않는다. |
p1 | rules/framework-rules.md |
| TS-006 | 외부 API 응답 타입 정의 | 외부 API 응답은 반드시 타입을 정의하여 사용한다. 응답을 untyped로 사용하지 않는다. | p1 | rules/framework-rules.md |
STYLE — Tailwind CSS / 스타일링
| ID | 제목 | 규칙 | 기본 심각도 | 참조 |
|---|---|---|---|---|
| STYLE-001 | 유틸리티 클래스 우선 | Tailwind 유틸리티 클래스를 직접 사용한다. 공통 패턴은 컴포넌트로 추출한다. | p2 | rules/framework-rules.md |
| STYLE-002 | 임의값 클래스 제한 | w-[123px]과 같은 임의값 클래스는 디자인 시스템에 없는 값에만 제한적으로 사용한다. |
p2 | rules/framework-rules.md |
| STYLE-003 | 조건부 클래스 clsx/cn | 조건부 클래스 조합은 clsx 또는 cn 유틸리티를 사용한다. 삼항 연산자 / 템플릿 리터럴 남용을 피한다. |
p2 | rules/framework-rules.md |
| STYLE-004 | 클래스 순서 | 클래스 순서는 prettier-plugin-tailwindcss 프리셋을 따른다. |
p4 | rules/framework-rules.md |
| STYLE-005 | @apply 제한 | @apply는 꼭 필요한 경우에만 사용한다. 가능한 유틸리티를 직접 나열한다. |
p3 | rules/framework-rules.md |
STATE — 상태 관리
| ID | 제목 | 규칙 | 기본 심각도 | 참조 |
|---|---|---|---|---|
| STATE-001 | Pinia 사용 | 여러 컴포넌트가 공유하는 상태는 Pinia를 사용한다. 컴포넌트 간 props drilling이 3단계 이상이면 Pinia 도입을 검토한다. | p2 | rules/framework-rules.md |
| STATE-002 | Setup Store 패턴 | Pinia 스토어는 Composition API 스타일의 Setup Store로 작성한다. | p2 | rules/framework-rules.md |
| STATE-003 | 서버 상태와 클라이언트 상태 분리 | API 데이터(서버 상태)는 Pinia에 저장하지 않고 useFetch/useAsyncData로 관리한다. |
p2 | rules/framework-rules.md |
| STATE-004 | SSR hydration 안전성 | 스토어 초기값이 SSR/CSR 환경에서 다르면 hydration 불일치가 발생할 수 있다. 서버에서만 유효한 값을 클라이언트 초기값으로 사용하지 않는다. | p1 | — |
PERF — 성능
| ID | 제목 | 규칙 | 기본 심각도 | 참조 |
|---|---|---|---|---|
| PERF-001 | 컴포넌트 lazy 로딩 | 초기 렌더에 필요하지 않은 무거운 컴포넌트는 defineAsyncComponent 또는 <Lazy> 접두사로 지연 로딩한다. |
p3 | — |
| PERF-002 | 불필요한 반응성 | 변경될 필요가 없는 값을 ref/reactive로 감싸지 않는다. 정적 설정 객체, 상수 등은 반응형 불필요. |
p3 | — |
| PERF-003 | computed vs method | 템플릿에서 반복 호출되는 값은 메서드 대신 computed를 사용하여 캐싱 이점을 활용한다. |
p2 | rules/framework-rules.md |
| PERF-004 | 번들 사이즈 | 새 외부 라이브러리 추가 시 번들 영향과 대안을 PR 설명에 기록한다. 동일 기능 라이브러리 중복 도입을 금지한다. | p2 | rules/framework-rules.md |
SEC — 보안
| ID | 제목 | 규칙 | 기본 심각도 | 참조 |
|---|---|---|---|---|
| SEC-001 | 하드코딩 비밀정보 금지 | API 키, 토큰, 비밀번호 등을 소스코드에 하드코딩하지 않는다. 환경변수(runtimeConfig)를 사용한다. |
p1 | rules/claude-workflow.md |
| SEC-002 | v-html XSS 방지 | v-html은 신뢰할 수 있는 서버 데이터에만 사용한다. 사용자 입력값을 v-html에 바인딩하지 않는다. |
p1 | — |
| SEC-003 | 서버 라우트 입력 검증 | Nitro 서버 라우트에서 쿼리 파라미터, 바디 등 외부 입력값은 반드시 검증 후 사용한다. | p1 | — |