20220630 코드, 네이밍 컨벤션

구글
https://google.github.io/styleguide/htmlcssguide.html#HTML

html
https://code-study.tistory.com/24

css
https://code-study.tistory.com/17
https://code-study.tistory.com/18

개발 관리 방법
https://medium.com/prnd/%ED%97%A4%EC%9D%B4%EB%94%9C%EB%9F%AC-%EA%B0%9C%EB%B0%9C%ED%8C%80-%EB%AA%A8%EB%91%90%EA%B0%80-%ED%96%89%EB%B3%B5%ED%95%9C-%EA%B0%9C%EB%B0%9C-pr%EA%B4%80%EB%A6%AC-%EB%B0%A9%EB%B2%95-7%EA%B0%80%EC%A7%80-1d4cd5d091f0

1. 에어비앤비 린트https://github.com/airbnb/javascript

2. vue.js vscode eslint & prettier 설정
   https://velog.io/@korjsh/vue.js-vscode-eslint-prettier-%EC%84%A4%EC%A0%95

3. 네이버
   https://github.com/naver/eslint-config-naver/blob/master/STYLE_GUIDE.md

ESlint

잘못된 코드 스타일로 인해 에러가 나지 않게 코드 문법을 잡아주는 문법 검사기.

• 문법 통일성
• 사용하지 않는 변수, 함수, 모듈
• 문장 뒤 세미콜론, 콤마 붙이기
• 등등..

Pritter

코드 스타일 정리.

• 한줄당 최대 코드 수
• 작은 따옴표, 큰따옴표
• tab대신 space 사용
• 등등…

eslint-plugin-prettier

• ESlint 규칙에 prettier의 코드 스타일 기능 삽입해준다.
• prettier 항목이 ESlint 알림을 통해 표시된다.

VUE

https://kr.vuejs.org/v2/style-guide/index.html
참고

우선순위 A를 지키자

A (에러 방지)

1. 컴포넌트 이름에 합성어 사용

Vue에서 제공되는 빌트인 컴포넌트를 제외하고 컴포넌트 이름은 항상 합성어 사용하기

why? 모든 HTML 엘리먼트의 이름은 한 단어이기 때문에 합성어를 사용하는 것은 기존 그리고 향후 HTML엘리먼트와의 충돌을 방지해줌

2. 컴포넌트 데이터는 반드시 함수여야 함.

컴포넌트(i.e. new Vue를 제외한 모든곳)의 data 프로퍼티의 값은 반드시 객체(object)를 반환하는 함수여야 한다.

why? 컴포넌트는 재사용하여 사용자가 여러 목록을 유지할 수 있도록 해야한다. but 함수가 아닐경우 컴포넌트의 모든 인스턴스가 동일한 data 객체를 참조하므로, 하나의 목록의 타이틀을 변경할 때 다른 모든 리스트의 타이틀도 변경될 것.

대신 우리는 각 컴포넌트의 인스턴스 자체 data만을 관리하기를 원한다. 이렇게 하려면 각 인스턴스는 고유한 data 객체를 생성해야 한다. JavaScript에서는 함수안에서 객체를 반환하는 방법으로 해결할 수 있음

3. Props는 가능한 상세하게 정의되어야 한다.

커밋된 코드에서, prop 정의는 적어도 타입은 명시되도록 가능한 상세하게 정의되어야 함

why? 이 API는 컴포넌트의 API를 문서화하므로 컴포넌트의 사용 방법을 쉽게 알 수 있다.
개발 중에, Vue는 컴포넌트의 타입이 잘못 지정된 props를 전달하면 경고 메시지를 표시하여 오류의 잠재적 원인을 파악할 수 있도록 도와준다.

4. v-for에 key 지정

v-for는 key와 항상 함께 사용한다.
why? 서브트리의 내부 컴포넌트 상태를 유지하기 위해 v-for는 항상 key와 함께 요구. 비록 엘리먼트이긴 하지만 에니메이션의 객체 불변성과 같이 예측 가능한 행동을 유지한느 것은 좋은 습관임!!

5. v-if와 v-for를 동시에 사용하지 말자.

v-for가 사용된 엘리먼트에 절대 v-if를 사용하지 마세요.

사용 가능해 보이는 두 가지 일반적인 경우

1. 리스트 목록을 필터링하기 위해서 (e.g. v-for="user in users" v-if = "user.isActive").
   이 경우 users을 새로운 computed 속성으로 필더링된 목록으로 대체(e.g. activeUsers).

2. 숨기기 위해 리스트의 랜더링을 피할 때(e.g. v-for="user in users" v-if="shouldShowUsers"). 이 경우 v-if를 컨테이너 엘리먼트로 옮겨라 (e.g. ul, ol).

6. 컴포넌트 스타일 스코프

app 구성 요소와 레이아웃 구성 요소의 스타일은 전역일 수 있지만, 다른 모든 구성 요소는 항상 범위를 지정해야 한다. -> 싱글파일컴포넌트에서만!

대규모 프로젝트를 개발 중이거나 다른 개발자와 협력하거나 때때로 타사 HTML/CSS(예: Auth0)를 포함하는 경우 일관된 범위 지정을 통해 스타일이 해당 구성 요소에만 적용되도록 해야함

속성 외에도 scoped 고유한 클래스 이름을 사용하면 타사 CSS가 자신의 HTML에 적용되지 않도록 할 수 있음. 예를 들어 많은 프로젝트 button에서 btn, 또는 icon클래스 이름을 사용하므로 BEM과 같은 전략을 사용하지 않더라도 앱별 및/또는 구성요소별 접두사(예: ButtonClose-icon)를 추가하면 어느 정도 보호할 수 있음

7. Private 속성 이름 $_

플러그인, mixin 등에서 커스텀 사용자 private 프로터피에는 항상 접두사 $_ 사용. 그 다음 다른 사람의 코드와 충돌을 피하려면 named scope를 포함. (e.g. $yourPluginName).

JS

1. JS 코드 컨벤션
   https://velog.io/@cada/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%94%EB%94%A9-%EB%B0%8F-%EB%84%A4%EC%9D%B4%EB%B0%8D-%EC%BB%A8%EB%B2%A4%EC%85%98-1%ED%8E%B8

2. JS 네이밍 컨벤션
   https://velog.io/@cada/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%ED%83%80%EC%9D%BC-%EA%B0%80%EC%9D%B4%EB%93%9C-%EB%84%A4%EC%9D%B4%EB%B0%8D-%EC%BB%A8%EB%B2%A4%EC%85%98-%ED%8E%B8

GIT

🧶Branching
master : 제품으로 출시될 수 있는 브랜치
develop : 다음 출시 버전을 개발하는 브랜치
feature : 기능을 개발하는 브랜치
release : 이번 출시 버전을 준비하는 브랜치
hotfix : 출시 버전에서 발생한 버그를 수정하는 브랜치

• 하위 브랜치
  브랜치/이슈번호내용이슈카테고리
  ex) feature/36_home_layout

💫Issue Naming
이슈 카테고리
[layout] : 뷰
[network] : 서버
[feature] : 기능
[refactor] : 코드 개선
[fix] : 버그 수정
ex) [layout] 마이 유니버스 등록

💬Commit Message
[ ] 카테고리 5개 중 하나 쓰기.
깃 이슈 번호 붙이기
[이슈카테고리] #이슈번호 뒤에 내용
ex) [feature] #1 Add

<참고>

1. 카카오
   https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/
2. 다양한
   https://velog.io/@dell_mond/Coding-Style-Guide-%EB%A5%BC-%EC%9E%91%EC%84%B1%ED%95%98%EB%A0%A4%EB%8A%94-%EC%A7%80%EA%B8%88-%EC%9A%B0%EB%A6%AC%EA%B0%80-%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EA%B1%B4-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C
3. 토스트
   https://ui.toast.com/fe-guide/ko_CODING-CONVENTION