컨벤션 도입기

프로젝트 폴더 구조

├── public
│   ├── favicon.ico 
│   └── index.html
├── src
│   ├── assets  //정적파일(image, css, scss)
│	│	├── images
│	│	├── scss
│   ├── conponents  //컴포넌트들
│   ├── router  //라우팅 코드
│   ├── store  //전역상태관리
│   ├── types  // type, interface
│   ├── utills  //재사용하는 함수들
│   ├── views  //실제 라우팅되는 view컴포넌트
│   ├── App.vue  //루트컴포넌트
│   ├── main.ts  //메인 파일(store, router.. 세팅)
└── run.sh

파일 네이밍

• scss(스타일) :
  • 1. 변수, mixin등 컴파일이 필요없고 import로 사용하는 경우
       _파일명.scss

   _mixin.scss
    _variable.scss

• 컴포넌트
  • 컴포넌트 파일명은 PascalCase
  • 두단어 이상의 조합으로 네이밍
  • 약어보단 완전한 단어로

----good----
components/   
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

• 라우터

  • index.ts에 라우터 코드를 넣어준다.

• store

  • 두단어 이상일땐 케밥케이스로
    ex) modal.ts, lotto-numbers.ts

• types

  • 파일명은 케밥케이스 + .type.ts
    ex) lotto-numbers.type.ts

• utills

  • "역할-명사"로 구분, 케밥케이스로
    ex) upper-text.ts / set-numbers.ts

• views

  • path이름대로 파일경로 설정, 컴포넌트라서 상단 컴포넌트 네이밍 참조

변수, 함수 등등 .. 네이밍

• 변수(ref, reactive, let, const)

  • 1. 변수는 스네이크 케이스로 작성
       ex) lotto_number, blue_book

• 함수(function)

  • 1. 함수명은 lowerCamelCase로 작성
  • 2. 동사 + 명사로 작성

• 배열(Array)

  • 1. 단수+Arr 로 네이밍을 해준다, 두단어 이상일 경우 카멜케이스로 해준다.
       ex) const choiceNumberArr = [""]

• 객체(Object)

  • 단수 + Obj 로 네이밍, 두단어 이상일 경우 카멜케이스로 해준다.
    ex) userInfoObj = {name:"jone", age:....}

• type, interface

  • type, class, interface, enum은 파스칼케이스를 사영
    ex) interface UserInfo = {}

• class

  • 케밥케이스로 네이밍을 한다.

• boolean

  • is, has, can으로 시작, 카멜케이스로
    ex) const isCheck = ture / const hasFruit = true

• 상수(constant)

  • 대문자를 사용하고 _언더바로 단어를 구분한다
    ex) const API_URL = "...." / const SOME_ARRAY = [1,2 ,3]

• 스타일
  • css코드 순서
  • import 코드 순서
  • script 내부 코드 순서(import, state, function)

코드 순서

• import
  • 프로젝트내 모듈(컴포넌트 -> 스토어 -> 유틸) -> 라이브러리 모듈 -> type 순서
  • 코드 타입별로 구분은 주석으로 표시해준다
    ex) //component, module, state, function,,,,,
• script 내부 코드 순서(import, state, function . . .)
  - import -> state -> function(유틸 -> 실제사용)
  • 코드 타입별로 구분은 주석으로 표시해준다
    ex) //component, module, state, function,,,,,
• scss
  • styleLint를 사용해 준다
  • 설치
    .........잘 안되누 ,,,

  npm install --save-dev stylelint stylelint-config-standard-scss stylelint-config-recommended-vue stylelint-config-prettier-scss

- 네이밍 참고

https://toma0912.tistory.com/32