Convention

커밋 컨벤션 가이드

[Header] Commit Type

타입	설명
feat	새로운 기능 추가
fix	버그, 에러 수정
refactor	코드 리팩토링
style	코드 포맷팅 (코드 변경이 없는 경우)
modify	수정
chore	빌드 스크립트 수정 등의 기타 작업
docs	문서 수정

[ClassName] {Commit Type}: Subject

변경된 내용 요약

[Body]

자유로운 커밋 메서지 작성

🤓 Naming

파일명

• 파일명은 기본적으로 camelCase를 사용한다.
• 컴포넌트(react)는 cammelCase 구조를 따른다.
• 컴포넌트는 파일명 혹은 index.jsx의 경우 상위 폴더이름을 따라야한다.
  ex) root/index.js => ?
• 파일 이름은 소문자로, 컴포넌트 이름은 대문자로 시작한다.

변수명

• 변수명은 기본적으로 cammelCase를 사용한다.
• class나 함수형 컴포넌트의 이름은 cammelCase를 따른다.
• enum에 선언되는 값들은 CAPITAL_UNDER_SCORE를 따른다.
• 컴포넌트를 제외한 함수의 이름은 동작의 의미가 담겨 있어야 한다.
• 컴포넌트 코드가 들어간 파일의 확장자는 jsx를 사용한다.

함수명

• 함수명은 기본적으로 cammelCase를 사용한다.

😊 Code

• else 예약어 사용을 최대한 자제한다.
• 컴포넌트 렌더링의 경우 삼항연산자 사용을 권장한다.
• 하나의 함수는 하나의 역할만을 한다.
• 한 메서드에 오직 한 단계의 들여쓰기만 한다.
• 작은 변수들을 목적을 나타내는 객체 안에 할당하여 목적을 분명히 한다.
• 메서드, 클래스, 변수 이름을 축약하지 않고 목적을 가지고 있는 클래스 안에 집어넣어 목적을 나타낸다.
• 클래스는 50줄 이하, 패키지 10개 이하로 제한한다.
• 게터/세터 속성 사용을 금지한다.

참고 : 객체지향 생활 체조 규칙 1, 2, 3, 5, 6, 9번

🧐 Issue

• 수정이 필요한 Issue는 Icebox에 보관한다.
• 수정이 끝난 Issue는 client, server 분야에 따라 Frontend Backlog, Backend Backlog에 각각 보관한다.

🖥 FE

Scss

css 기술 순서는 Mozilla에서 제공한 기술 순서를 따른다.

• display
• list-style
• position
• float
• clear
• width / height
• padding / margin
• border / background
• color / font
• text-decoration
• text-align / vertical-align
• white-space
• other text
• content

속성 단위

• Scss 속성 단위는 px 사용을 지양한다.

리액트 컴포넌트

• 리액트 컴포넌트는 React.FC를 사용하지 않고, arrow function으로 생성한다.