코드 컨벤션

코드 컨벤션

1. 공통

1-1. 들여쓰기

• HTML, CSS, JavaScript 모두 2칸으로 통일합니다.

<div>
  <ul>
    <li>저희 팀의 들여쓰기 간격은 2칸입니다.</li>
    <li>HTML, CSS, JavaScript 모두 동일합니다.</li>
  </ul>
</div>

1-2. 따옴표

• 문자열, 클래스 이름 등에 모두 큰 따옴표( ” ) 를 사용합니다.

const inputId = document.querySelector(".input-id");
inputId.value = "qwerty1234";

2. CSS

2-1. 클래스 이름

• 케밥 케이스를 사용합니다.
• 약어를 사용하지 않습니다.
• 두 개 이상의 단어의 조합으로 하나의 기능을 표현하는 경우에는 스네이크 케이스를 혼용합니다.
• 요소-기능의 순서로 작성하고, 상태를 나타내는 클래스는 따로 분리합니다.
• 여러 요소를 하나로 묶는 용도의 클래스는 container, 한 요소의 레이아웃을 맞추기 위한 용도의 클래스는 wrapper로 이름을 붙이기를 권장합니다.

/* <button type="submit" class="button-submit_form disabled">폼 전송</button> */

/* button을 btn으로 줄이지 않습니다. */
/* submit form은 두 단어이지만 하나의 기능을 표현하므로 스네이크 케이스로 연결합니다. */
/* 상태를 나타내는 disabled의 경우에는 클래스를 분리합니다. */

.button-submit_form .disabled{
  pointer-events: none;
}

3. JavaScript

3-1. 함수 방식

• function statement 방식을 사용합니다.

function isFunction() {
  return true;
}

3-2. 함수 이름

• 카멜 케이스를 사용합니다.
• 약어를 사용하지 않습니다.
• 현재 시제 동사형으로 작성합니다.

// message를 msg로 줄이지 않습니다.
// showing, showed 대신 현재 시제인 show를 사용합니다.

function showErrorMessage(){
  console.err("에러가 발생했습니다.");
}

3-3. 변수 이름

• 카멜 케이스를 사용합니다.
• 약어를 사용하지 않습니다.
• 명사형으로 작성합니다.

// image를 img로 줄이지 않습니다.

const profileImage = "./profile_image.png";

3-4. 상수 이름

• 스네이크 케이스를 사용합니다.
• 대문자로 작성합니다.

const TEAM_NAME = "FEeasy404";

3-5. 기타

• var를 사용하지 않습니다.
• 코드의 마지막에는 **세미콜론( ; )**을 붙입니다.
• 조건문 또는 반복문의 실행문이 한 줄이더라도 무조건 중괄호로 감싸줍니다.

const useVar = false; // var 사용 금지
let useSemiColon = "코드의 마지막에는 세미콜론을 붙입니다."; // 세미콜론 필수
if(반환문.length === 한 문장) {
  return "대괄호로 감쌉니다."; // 한 줄만 있어도 중괄호로 감싸기
}

4. 파일 이름

4-1. CSS 파일 이름

• 소문자로 작성합니다.
• 파일명이 두 개 이상의 단어로 이루어지는 경우 **언더라인( _ )**으로 연결합니다.

4-2. JSX 파일 이름

• 단어의 첫 글자는 대문자, 나머지는 소문자로 작성합니다.
• 파일명이 두 개 이상의 단어로 이루어지는 경우 **언더라인( _ )**으로 연결합니다.

4-3. 에셋 파일 이름

• 소문자로 작성합니다.
• 파일명이 두 개 이상의 단어로 이루어지는 경우 **언더라인( _ )**으로 연결합니다.
• 요소_기능 또는 요소_형태 순으로 작성합니다.