2.3 KiB
2.3 KiB
코딩 컨벤션
언어
- JavaScript (TypeScript 미사용)
- JSDoc으로 타입 명시
- Zod로 스키마 검증
문법
- 세미콜론 미사용
- const/let 사용 (var 미사용)
- 화살표 함수 우선
네이밍
- Vue 컴포넌트: PascalCase (SiteHeader.vue)
- 일반 파일/폴더: kebab-case
- Vue 컴포넌트 파일: PascalCase
- CSS 클래스: kebab-case
- 고유 클래스명 필수 (Tailwind 외)
- Nuxt 컴포넌트 자동 import는 경로 prefix 없이 파일명 기준으로 사용
스타일
- TailwindCSS 기본 사용
- 다크 인증(
signin/signup)의 텍스트 입력에는auth-form-input클래스를 붙여main.css의 글자색·캐럿·placeholder를 적용한다(폼 컨트롤은 부모color를 상속하지 않는 경우가 많음). - Tailwind 엔트리는
nuxt.config.js의tailwindcss.cssPath: '~/assets/css/main.css'로 통일한다(@nuxtjs/tailwindcss기본assets/css/tailwind.css부재 시 패키지tailwind.css가 중복 주입될 수 있음). - 관리자 글 에디터는 Markdown-first textarea 편집을 기준으로 하며 저장 값은 기존 마크다운 문자열을 유지
- 관리자 미디어 화면에서 모달에 가릴 수 있는 오류·안내는
useAdminToast의showToast로 우측 상단(z-[100])에 표시한다. - 관리자 메뉴 관리는 상단/하단 탭으로 나누고, 순서는 드래그로 조정한다(상단은 동일 부모의 형제끼리만).
<main class="site-main w-full max-w-full lg:max-w-[720px]">
주석
- JSDoc 형식
- 한국어 작성
/**
* 게시물 목록 조회
* @param {Object} options - 조회 옵션
* @param {number} options.page - 페이지 번호
* @param {number} options.limit - 페이지당 개수
* @returns {Promise<Post[]>} 게시물 목록
*/
설정
- 경로/URL/키값: .env로 관리
- 하드코딩 금지
- 로컬 개발 설정과 NAS 운영 설정은 별도 환경 파일로 분리
- 운영 DB 접속 정보는 개발용
.env에 기록하지 않음 - 운영 환경에서는
DATABASE_URL과MEMBER_SESSION_SECRET누락을 허용하지 않음
검증
npm run lint: JavaScript 파일 문법 점검npm run test: Nuxt 프로덕션 빌드 기반 회귀 검증npm run verify: 문법 점검과 빌드를 함께 실행