Frontend Checklist
This chapter defines the detailed checklist for the frontend area of TQS-S/W certification. The frontend checklist consists of 6 areas: code and components, routing and state management, data communication, build and tools, UI and styling, and testing and quality. Each item is classified as mandatory (O), recommended (R), or optional (S), with the verification method specified.
32.3.1. Code and Components
The code and components checklist verifies the correct usage of Vue 3 and TypeScript, component design rules, and directory structure standards compliance.
| No. | Item | Classification | Verification Method |
|---|---|---|---|
| 1 | Vue 3 + <script setup> + TypeScript combination is used | O | Code verification |
| 2 | Composition API is used (Options API is not used) | O | Code review |
| 3 | SFC block order is maintained as <script> → <template> → <style> | O | Code review |
| 4 | Component file names use PascalCase | O | File name verification |
| 5 | TypeScript types are specified in defineProps and defineEmits | O | Code review |
| 6 | Standard directory structure is applied (views / components / composables / stores) | O | Directory structure verification |
| 7 | The v-html directive is not used (DOMPurify must be applied if unavoidable) | O | Code search |
| 8 | :key is bound to v-for directives (array index is not used) | O | Code review |
| 9 | TypeScript strict mode is enabled | O | Verify strict: true in tsconfig.json |
| 10 | The any type is not used (no-explicit-any rule is applied) | O | ESLint execution results verification |
| 11 | Type definitions are managed in the src/types/ directory | R | Directory structure verification |
The code and components area is the foundation of the frontend checklist. Vue 3 Composition API and TypeScript strict mode are core TQS specification requirements that must be met.
32.3.2. Routing and State Management
The routing and state management checklist verifies the correct usage of Vue Router and Pinia.
| No. | Item | Classification | Verification Method |
|---|---|---|---|
| 12 | createWebHistory mode is used in Vue Router | O | Router configuration file verification |
| 13 | Routes are configured with lazy loading (() => import()) | O | Router configuration file verification |
| 14 | Authentication guard is implemented in beforeEach | O | Router configuration code verification |
| 15 | Pinia is used as the state management library (Vuex is not used) | O | Verify dependencies in package.json |
| 16 | Setup Store syntax is used | O | Store file code verification |
| 17 | storeToRefs is used to maintain reactivity | O | Code review |
Routing and state management are core elements that determine the structural stability of a frontend application. Vue Router's lazy loading directly impacts initial load performance and must be applied.
32.3.3. Data Communication
The data communication checklist verifies Axios-based HTTP communication implementation, error handling, and form validation.
| No. | Item | Classification | Verification Method |
|---|---|---|---|
| 18 | An Axios instance is created and used (global Axios is not used) | O | Code verification |
| 19 | Authentication tokens are injected in request interceptors | O | Interceptor code verification |
| 20 | Errors are converted to a standard format in response interceptors | O | Interceptor code verification |
| 21 | HTTP status code-specific error handling is implemented (401, 403, 404, 500, etc.) | O | Error handler code verification |
| 22 | Form validation is performed on the client side | O | Code review |
| 23 | File uploads validate extensions and size on the client side | R | Code review |
The data communication area verifies standardized HTTP communication implementation based on Axios instances. Token injection and error conversion through interceptors are essential patterns that prevent code duplication and ensure consistency.
32.3.4. Build and Tools
The build and tools checklist verifies Vite build configuration, environment variable management, and code quality tool application.
| No. | Item | Classification | Verification Method |
|---|---|---|---|
| 24 | The @ alias is configured to the src/ path in Vite | O | Verify vite.config.ts |
| 25 | Environment variables use the VITE_ prefix | O | Verify .env files |
| 26 | Environment variable types are defined in env.d.ts | O | Verify env.d.ts file existence and content |
| 27 | Initial load JavaScript bundle size is 300KB or less (gzip) | O | Build results or Lighthouse report verification |
| 28 | ESLint Flat Config is used | O | Verify eslint.config.js file |
| 29 | Prettier is applied | O | Verify .prettierrc or prettier.config.js file |
| 30 | husky + lint-staged are configured for automatic pre-commit linting | O | Verify .husky/ directory and lint-staged configuration |
| 31 | prettier-plugin-tailwindcss is applied for automated class sorting | R | Verify plugin in Prettier configuration file |
The build and tools area verifies the application of automation tools that ensure development productivity and code consistency. The ESLint and Prettier combination is the core toolset for automatically maintaining code style consistency.
32.3.5. UI and Styling
The UI and styling checklist verifies Tailwind CSS application, style management rules, and accessibility standards compliance.
| No. | Item | Classification | Verification Method |
|---|---|---|---|
| 32 | Tailwind CSS is applied as the styling framework | O | Verify tailwind.config.js file |
| 33 | The scoped attribute is applied to component <style> blocks | O | Code review |
| 34 | Inline styles (style attribute) are not used | O | Code search |
| 35 | WCAG 2.1 AA level accessibility is met | O | Lighthouse accessibility score verification |
| 36 | Text-to-background color contrast ratio is maintained at 4.5:1 or above | O | Accessibility tool inspection results verification |
| 37 | Keyboard navigation is supported (Tab key order, focus indicators) | R | Manual testing |
The UI and styling area verifies visual consistency and accessibility. WCAG (Web Content Accessibility Guidelines) 2.1 AA level accessibility is a fundamental user experience requirement, including color contrast and keyboard navigation.
32.3.6. Testing and Quality
The testing and quality checklist verifies test framework application, coverage criteria, performance metrics, and internationalization implementation.
| No. | Item | Classification | Verification Method |
|---|---|---|---|
| 38 | Vitest is applied as the test framework | O | Verify vitest.config.ts or vite.config.ts |
| 39 | Component tests are written using Vue Test Utils | O | Test file existence verification |
| 40 | Line coverage of 80% or above is achieved | O | Coverage report verification |
| 41 | Branch coverage of 70% or above is achieved | O | Coverage report verification |
| 42 | Lighthouse performance score of 90 or above is achieved | O | Lighthouse report verification |
| 43 | vue-i18n is applied to support internationalization | R | Verify dependencies in package.json and configuration |
| 44 | Translation keys are used without hardcoded strings | R | Code review |
The testing and quality area verifies the reliability and performance of frontend code. Component testing with Vitest and Vue Test Utils is mandatory, and the Lighthouse performance criteria ensure user experience quality.
32.3.7. Item Summary
The total number of items and distribution by classification for the frontend checklist are as follows.
| Area | Mandatory (O) | Recommended (R) | Optional (S) | Total |
|---|---|---|---|---|
| Code and Components | 10 | 1 | 0 | 11 |
| Routing and State Management | 6 | 0 | 0 | 6 |
| Data Communication | 5 | 1 | 0 | 6 |
| Build and Tools | 7 | 1 | 0 | 8 |
| UI and Styling | 5 | 1 | 0 | 6 |
| Testing and Quality | 5 | 2 | 0 | 7 |
| Total | 38 | 6 | 0 | 44 |
The frontend checklist consists of a total of 44 items. All 38 mandatory items must be met to obtain Basic certification, and the compliance rate of the 6 recommended items determines whether the Advanced or Premier certification grade is achieved.