[ Vue ] Vue 스타일 가이드를 활용한 코딩 컨벤션

Vue 스타일 가이드

Vue.js

 

 

프로젝트 버전업을 하면서 Vue의 스타일 가이드를 참고하여 코딩 컨벤션을 정했다.

가장 중점적으로 생각한 것은 코딩 문법과 파일 이름 설정이다. (변수명은 엔진과도 맞춰야 했기 때문에 비교적 유동적으로 고려했다.)

 

 

1. prettier 설정 통해 코드 컨벤션 강화

{
  "semi": true,                    // 문장 끝에 세미콜론 사용 
  "tabWidth": 2,                   // 탭 너비는 2칸
  "bracketSpacing": true,          // 중괄호 안에 양쪽 공백 생성
  "trailingComma": "all",          // 후행 쉼표 자동 생성
  "arrowParens": "always",         // 화살표 함수 사용 시 괄호 항상 생성
  "singleQuote": true              // 문자열은 작은 따옴표 사용
}

그 외 printWidth  등은 기본 설정을 따름

 

 

 

2. setup 설정

script 태그 안에 setup 키워드를 작성하기

 

 

 

3. 공통 컴포넌트 이름은 Common으로 시작

분명한 의미 전달 + template 에서 사용 시 다른 태그들과 구분

ex) CommonInputBox, CommonExpansion 등

 

 

 

4. 하위 컴포넌트 이름은 페이지명(기능명)으로 시작

뷰 스타일 가이드 강력 추천 수준 - 긴밀하게 결합된 컴포넌트 이름

• 장점 : 컴포넌트 이름만으로도 어느 페이지(기능)의 어떠한 기능인지 알 수 있음. 정렬에 유리함.
• 단점 : 컴포넌트 이름이 길어짐
• ex) (상위) SamplePage → (하위) SampleCondition, SampleContent

 

 

5. 디렉티브 약어는 전부 사용 O

• v-bind → :
• v-on → @
• 생략할 수 없는 디렉티브는 사용(v-if, v-for 등)

 

 

6. style 파일 작성 시 요소선택자(button, input 등)은 피하기

1. 스타일 오버라이딩 위험
2. 성능 문제 (요소선택자는 클래스 선택자에 비해 느림)

예외적으로 테이블 관련 요소선택자(td, th, tr) 등은 사용 가능 → 반드시 특정 클래스 하위에 테이블 요소 CSS 작성하기

.class-name {
	td {
		...
	}
	tr {
		...
	}
}

 

 

 

7. 컴포넌트 범위 스타일 적용

vue 스타일 가이드 필수 수준

<style scoped> 속성을 사용하여 style 태그 내부에 적용한 CSS가 컴포넌트 범위 안에서만 사용되도록 함

전역적으로 사용해야 하는 CSS 속성의 경우 css 폴더 내부에 따로 정의

 

 

 

8. 함수는 화살표 함수로 작성

 

 

 

9. 인터페이스는 파스칼 케이스로 의미 분명하게 작성

헝가리안 네이밍(I) 채택 X

 

 

 

10. 인터페이스 선언 방식

• 공통 인터페이스의 경우에는 declare로 선언
• 기능별 인터페이스의 경우에는 모듈화해서 사용(export/import)

 

 

11. emit 네이밍 규칙

"동작:데이터" 형식으로 작성

ex) update: type, request:date 등

 

 

 

12. 셀프 클로징 컴포넌트

vue 스타일 가이드 강력 추천 수준

태그 내부에 콘텐츠가 없다면 닫는 태그 없이 자체적으로 닫음

ex) <CommonInput />

 

 

 

13. 템플릿 내 컴포넌트 이름은 파스칼케이스 사용

vue 스타일 가이드 강력 추천 수준

케밥 케이스도 사용가능하지만 코드 가독성과 통일성을 위해 파스칼 케이스로 선정