프론트엔드 표준 개요

본 장은 TQS 인증 프로젝트의 프론트엔드 개발에 필요한 모든 표준을 정의합니다. 6개 카테고리, 13개 토픽, 50개 세부 항목으로 구성되어 있습니다.

---

코드 및 컴포넌트

Vue.js 컴포넌트 작성 규칙과 TypeScript 타입 시스템에 관한 표준입니다.

토픽	세부 항목
Vue.js 컴포넌트 표준 (10장)	Composition API 기본 규칙, 컴포넌트 네이밍 및 설계, 디렉토리 구조, SFC 작성 규칙
TypeScript 사용 표준 (11장)	타입 정의 규칙, Props/Emits 타이핑, 유틸리티 타입, 타입 가드 및 단언

---

라우팅 및 상태 관리

Vue Router 설정과 Pinia 상태 관리에 관한 표준입니다.

토픽	세부 항목
Vue Router (12장)	라우터 설정, 라우트 가드, 지연 로딩, 네이밍 규칙
Pinia 상태 관리 (13장)	Setup Store 표준, Store 설계 규칙, 반응성 패턴, Store 테스트

---

데이터 통신

API 통신과 폼 처리에 관한 표준입니다.

토픽	세부 항목
API 클라이언트 (14장)	Axios 설정, 인터셉터, 에러 처리, 인증 토큰 관리
폼 및 유효성 검증 (15장)	폼 패턴, 유효성 검증 규칙, 서버 에러 통합, 파일 업로드

---

빌드 및 도구

Vite 빌드 도구와 코드 품질 도구에 관한 표준입니다.

토픽	세부 항목
Vite 빌드 설정 (16장)	설정 파일, 환경변수, 빌드 최적화
ESLint + Prettier (17장)	ESLint 설정, Prettier 설정, VSCode 연동, husky + lint-staged

---

UI 및 스타일링

Tailwind CSS와 접근성에 관한 표준입니다.

토픽	세부 항목
Tailwind CSS (18장)	설정 및 초기화, 유틸리티 규칙, 컴포넌트 스타일링, 반응형 디자인
접근성 (19장)	WCAG 2.1 기준, ARIA 속성, 키보드 네비게이션

---

테스트 및 품질

프론트엔드 테스트, 성능, 국제화에 관한 표준입니다.

토픽	세부 항목
프론트엔드 테스트 (20장)	Vitest 설정, 컴포넌트 테스트, Composable 테스트, 커버리지 기준, E2E 테스트 개요
성능 최적화 (21장)	Core Web Vitals, 코드 분할, 이미지 최적화, 번들 모니터링
국제화 (22장)	vue-i18n 설정, 번역 파일 구조, 로케일 포맷팅