프론트엔드 체크리스트
본 장은 TQS-S/W 인증의 프론트엔드 영역에 대한 상세 체크리스트를 정의합니다. 프론트엔드 체크리스트는 코드 및 컴포넌트, 라우팅 및 상태 관리, 데이터 통신, 빌드 및 도구, UI 및 스타일링, 테스트 및 품질의 6개 영역으로 구성됩니다. 각 항목의 분류는 필수(O), 권장(R), 선택(S)으로 구분되며, 검증 방법을 함께 명시합니다.
32.3.1. 코드 및 컴포넌트
코드 및 컴포넌트 체크리스트는 Vue 3와 TypeScript의 올바른 사용, 컴포넌트 설계 규칙, 디렉토리 구조의 표준 준수를 검증합니다.
| 번호 | 항목 | 분류 | 검증 방법 |
|---|---|---|---|
| 1 | Vue 3 + <script setup> + TypeScript 조합을 사용한다 | O | 코드 확인 |
| 2 | Composition API를 사용한다 (Options API 미사용) | O | 코드 리뷰 |
| 3 | SFC 블록 순서를 <script> → <template> → <style> 로 유지한다 | O | 코드 리뷰 |
| 4 | 컴포넌트 파일명에 PascalCase를 사용한다 | O | 파일명 확인 |
| 5 | defineProps와 defineEmits에 TypeScript 타입을 명시한다 | O | 코드 리뷰 |
| 6 | 표준 디렉토리 구조를 적용한다 (views / components / composables / stores) | O | 디렉토리 구조 확인 |
| 7 | v-html 디렉티브를 사용하지 않는다 (불가피한 경우 DOMPurify 적용) | O | 코드 검색 |
| 8 | v-for 디렉티브에 :key를 바인딩한다 (배열 index 미사용) | O | 코드 리뷰 |
| 9 | TypeScript strict 모드를 활성화한다 | O | tsconfig.json의 strict: true 확인 |
| 10 | any 타입을 사용하지 않는다 (no-explicit-any 규칙 적용) | O | ESLint 실행 결과 확인 |
| 11 | 타입 정의를 src/types/ 디렉토리에서 관리한다 | R | 디렉토리 구조 확인 |
코드 및 컴포넌트 영역은 프론트엔드 체크리스트의 기반입니다. Vue 3 Composition API와 TypeScript strict 모드는 TQS 규격의 핵심 요건이며, 반드시 충족해야 합니다.
32.3.2. 라우팅 및 상태 관리
라우팅 및 상태 관리 체크리스트는 Vue Router와 Pinia의 올바른 사용을 검증합니다.
| 번호 | 항목 | 분류 | 검증 방법 |
|---|---|---|---|
| 12 | Vue Router에서 createWebHistory 모드를 사용한다 | O | 라우터 설정 파일 확인 |
| 13 | 라우트를 지연 로딩으로 설정한다 (() => import()) | O | 라우터 설정 파일 확인 |
| 14 | 인증 가드를 beforeEach에 구현한다 | O | 라우터 설정 코드 확인 |
| 15 | Pinia를 상태 관리 라이브러리로 사용한다 (Vuex 미사용) | O | package.json 의존성 확인 |
| 16 | Setup Store 문법을 사용한다 | O | 스토어 파일 코드 확인 |
| 17 | storeToRefs를 사용하여 반응성을 유지한다 | O | 코드 리뷰 |
라우팅과 상태 관리는 프론트엔드 애플리케이션의 구조적 안정성을 결정하는 핵심 요소입니다. Vue Router의 지연 로딩은 초기 로드 성능에 직접적으로 영향을 미치므로 반드시 적용해야 합니다.
32.3.3. 데이터 통신
데이터 통신 체크리스트는 Axios 기반의 HTTP 통신 구현과 에러 처리, 폼 유효성 검증을 검증합니다.
| 번호 | 항목 | 분류 | 검증 방법 |
|---|---|---|---|
| 18 | Axios 인스턴스를 생성하여 사용한다 (글로벌 Axios 미사용) | O | 코드 확인 |
| 19 | 요청 인터셉터에서 인증 토큰을 주입한다 | O | 인터셉터 코드 확인 |
| 20 | 응답 인터셉터에서 에러를 표준 형식으로 변환한다 | O | 인터셉터 코드 확인 |
| 21 | HTTP 상태코드별 에러 처리를 구현한다 (401, 403, 404, 500 등) | O | 에러 핸들러 코드 확인 |
| 22 | 폼 유효성 검증을 클라이언트 측에서 수행한다 | O | 코드 리뷰 |
| 23 | 파일 업로드 시 클라이언트 측에서 확장자와 크기를 검증한다 | R | 코드 리뷰 |
데이터 통신 영역은 Axios 인스턴스 기반의 표준화된 HTTP 통신 구현을 검증합니다. 인터셉터를 통한 토큰 주입과 에러 변환은 코드 중복을 방지하고 일관성을 보장하는 필수 패턴입니다.
32.3.4. 빌드 및 도구
빌드 및 도구 체크리스트는 Vite 빌드 구성, 환경변수 관리, 코드 품질 도구의 적용을 검증합니다.
| 번호 | 항목 | 분류 | 검증 방법 |
|---|---|---|---|
| 24 | Vite에서 @ alias를 src/ 경로로 설정한다 | O | vite.config.ts 확인 |
| 25 | 환경변수에 VITE_ 접두사를 사용한다 | O | .env 파일 확인 |
| 26 | 환경변수 타입을 env.d.ts에 정의한다 | O | env.d.ts 파일 존재 및 내용 확인 |
| 27 | 초기 로드 JavaScript 번들 크기가 300KB 이하이다 (gzip 기준) | O | 빌드 결과 또는 Lighthouse 리포트 확인 |
| 28 | ESLint Flat Config를 사용한다 | O | eslint.config.js 파일 확인 |
| 29 | Prettier를 적용한다 | O | .prettierrc 또는 prettier.config.js 파일 확인 |
| 30 | husky + lint-staged를 설정하여 커밋 전 린트를 자동 실행한다 | O | .husky/ 디렉토리 및 lint-staged 설정 확인 |
| 31 | prettier-plugin-tailwindcss를 적용하여 클래스 정렬을 자동화한다 | R | Prettier 설정 파일에서 플러그인 확인 |
빌드 및 도구 영역은 개발 생산성과 코드 일관성을 보장하는 자동화 도구의 적용을 검증합니다. ESLint와 Prettier의 조합은 코드 스타일의 일관성을 자동으로 유지하는 핵심 도구입니다.
32.3.5. UI 및 스타일링
UI 및 스타일링 체크리스트는 Tailwind CSS 적용, 스타일 관리 규칙, 접근성 표준의 준수를 검증합니다.
| 번호 | 항목 | 분류 | 검증 방법 |
|---|---|---|---|
| 32 | Tailwind CSS를 스타일링 프레임워크로 적용한다 | O | tailwind.config.js 파일 확인 |
| 33 | 컴포넌트의 <style> 블록에 scoped 속성을 적용한다 | O | 코드 리뷰 |
| 34 | 인라인 스타일(style 속성)을 사용하지 않는다 | O | 코드 검색 |
| 35 | WCAG 2.1 AA 수준의 접근성을 준수한다 | O | Lighthouse 접근성 점수 확인 |
| 36 | 텍스트와 배경의 색상 대비를 4.5:1 이상으로 유지한다 | O | 접근성 도구 검사 결과 확인 |
| 37 | 키보드 네비게이션을 지원한다 (Tab 키 순서, 포커스 표시) | R | 수동 테스트 |
UI 및 스타일링 영역은 시각적 일관성과 접근성을 검증합니다. WCAG (Web Content Accessibility Guidelines) 2.1 AA 수준의 접근성은 사용자 경험의 기본 요건이며, 색상 대비와 키보드 네비게이션을 포함합니다.
32.3.6. 테스트 및 품질
테스트 및 품질 체크리스트는 테스트 프레임워크 적용, 커버리지 기준, 성능 지표, 국제화 적용을 검증합니다.
| 번호 | 항목 | 분류 | 검증 방법 |
|---|---|---|---|
| 38 | Vitest를 테스트 프레임워크로 적용한다 | O | vitest.config.ts 또는 vite.config.ts 확인 |
| 39 | Vue Test Utils를 사용하여 컴포넌트 테스트를 작성한다 | O | 테스트 파일 존재 확인 |
| 40 | 라인 커버리지 80% 이상을 달성한다 | O | 커버리지 리포트 확인 |
| 41 | 브랜치 커버리지 70% 이상을 달성한다 | O | 커버리지 리포트 확인 |
| 42 | Lighthouse 성능 점수 90점 이상을 달성한다 | O | Lighthouse 리포트 확인 |
| 43 | vue-i18n을 적용하여 국제화를 지원한다 | R | package.json 의존성 및 설정 확인 |
| 44 | 하드코딩된 문자열 없이 번역 키를 사용한다 | R | 코드 리뷰 |
테스트 및 품질 영역은 프론트엔드 코드의 신뢰성과 성능을 검증합니다. Vitest와 Vue Test Utils를 사용한 컴포넌트 테스트는 필수이며, Lighthouse 성능 기준은 사용자 경험 품질을 보장합니다.
32.3.7. 항목 요약
프론트엔드 체크리스트의 전체 항목 수와 분류별 분포는 다음과 같습니다.
| 영역 | 필수(O) | 권장(R) | 선택(S) | 합계 |
|---|---|---|---|---|
| 코드 및 컴포넌트 | 10 | 1 | 0 | 11 |
| 라우팅 및 상태 관리 | 6 | 0 | 0 | 6 |
| 데이터 통신 | 5 | 1 | 0 | 6 |
| 빌드 및 도구 | 7 | 1 | 0 | 8 |
| UI 및 스타일링 | 5 | 1 | 0 | 6 |
| 테스트 및 품질 | 5 | 2 | 0 | 7 |
| 합계 | 38 | 6 | 0 | 44 |
프론트엔드 체크리스트는 총 44개 항목으로 구성됩니다. 필수 항목 38개를 모두 충족해야 기본 인증을 획득할 수 있으며, 권장 항목 6개의 충족률에 따라 우수 또는 최우수 인증 등급이 결정됩니다.