Coding Convention

🔥 리액트 프로젝트 13조 - 13est 팀의 코딩 컨벤션을 정리한 Wiki 입니다.

Code Convention

1. 문자열 데이터를 입력할 때 작은 따옴표(')를 사용합니다.
2. 템플릿 리터럴을 사용해야 할 경우에만 작음 따옴표(') 대신 백틱 기호(`)를 사용합니다.
3. 들여쓰기 등에 사용되는 1탭은 공백(Space) 2칸으로 합니다.

Naming Convention

1. 폴더 네이밍은 소문자로 설정합니다.
   단, 컴포넌트 폴더 내에서는 파스칼 케이스(PascalCase) 로 설정합니다.
   ex) src/lib, src/layout, src/component/SingIn, ...
   
2. 컴포넌트 파일의 이름은 파스칼 케이스(PascalCase) 로 설정합니다.
   ex) Home, NavList, DataFetch, ...
3. 이미지 파일의 이름은 케밥 케이스(kebab-case) 로 설정합니다.
   ex) logo.png, menu-icon.svg, ...
4. 그 외 파일은 카멜 케이스(camelCase) 로 설정합니다.
   ex) getRandom.js, numberWithComma.js, ...

JavaScript Convention

1. 변수 지정시 let과 const만 사용합니다.
2. 변수, 함수, 속성의 이름은 카멜 케이스(camelCase) 를 사용합니다.
3. 함수 이름은 [동사+명사] 형태로 정의합니다.

   // 함수가 Boolean 유형의 값을 출력할 때 is~ 로 정의합니다.
   isNumber()
   // 배열 혹은 객체 내에서 값의 유무를 판별하여 Boolean 유형으로 값을 출력할 때 has~ 로 정의합니다.
   hasNumber()
   hasNotLoginUserData()
   // 데이터 값을 호출하는 함수는 get~ 으로 정의합니다.
   getUserData()
   // 데이터 값을 설정하거나 변경하는 함수는 set~ 으로 정의합니다.
   setUserDate()
   // 이벤트 핸들러 함수는 handle~ 로 정의합니다.
   handleEvent()

4. 함수는 하나의 단일 행동만 지정, 여러 개의 동작을 하나의 함수에 담지 않습니다.
5. 재사용이 가능한 코드는 라이브러리로 분리합니다.
6. 함수 내부의 블록 중첩이 4중첩을 초과할 경우에는 함수를 분리합니다.

   // example
   
   function func () {    // 1중첩
     if() {    // 2중첩
       array.reduce((pre, cur) => {    // 3중첩
   	    if(cur == status) {    // 4중첨
          }
        }
      }
    }

7. if 문 사용 시 else if 는 지양합니다.
   • else if 문을 많이 사용해야 하는 경우에는 switch 조건문을 사용합니다.
   • 가능하다면 짧고 간단한 if 문은 삼항 연산자로 작성합니다.
8. 서버와 통신을 해야하는 경우에는 async & await 을 사용합니다.
9. 함수 내 매개변수의 개수가 4개 이상일 경우 객체를 생성하여 구조 분리 할당합니다.
10. 컴포넌트를 export 할 때, 하단에서 export default Component 하는 방식을 사용합니다.

    function Component() {
      return (...);
    }
    
    export default Component;

Comment Convention

1. 한줄 주석은 // 로, 그 이상은 /** */로 주석을 작성합니다.
2. 작성한 함수 코드에 대한 주석을 작성하며, 시작 부분에 주석으로 함수의 상세 내용을 작성합니다.
   • 함수의 전체 기능 설명
   • 함수의 매개변수에 대한 설명 (parameter: ...)