⭐️ 코드 컨벤션 ⭐️ - boostcampwm-2022/web33-Mildo GitHub Wiki

네이밍 규칙

  1. 변수, 함수, 컴포넌트가 아닌 파일 이름은 카멜 케이스 사용

    const myMonth = 5;

  2. 상수는 영문 대문자 스네이크 케이스를 사용

    const SNAKE_CASE = '뱀';

  3. 클래스명, 인터페이스명, enum, 컴포넌트, 컴포넌트 파일 이름은 파스칼 케이스 사용

  4. 타입스크립트 인터페이스 작성 시 이름 끝에 ‘Types’ 붙임

  5. 함수는 동사와 명사로 조합하고, 형용사는 사용하지 않음

  6. 이벤트 핸들러의 변수명은 ‘on’으로 시작

  7. 반환 값이 boolean형인 함수는 ‘is’로 시작

  8. 배열의 이름은 복수형으로 작성

선언과 할당

  1. 변수

    1. 가독성을 위해 const는 let보다 상단에 작성
    2. 선언과 할당을 동시에 하는 변수를 선언만 하는 변수보다 상단에 선언

  2. 배열과 객체

    1. 외부 모듈과 내부 모듈 변수를 참조할 때 선언 사이에 공백
    2. 복잡한 객체 복사 시 스프레드 연산자 사용
    3. 객체 프로퍼티가 1개인 경우 한줄로 정의, 2개 이상인 경우 개행

  3. 화살표 함수

    1. 함수 표현식 대신 화살표 함수 사용

      1. 별도의 this 바인딩 없이 상위 컨텍스트에 바인딩 되어 추론이 쉬움

      2. 암시적 반환을 우선적으로 활용

        //Good
const people = arr.map((i) => i * 2);

//bad
const people = arr.map((i) => { return i * 2 });

      3. 클래스의 메소드는 화살표 함수를 사용하지 않음

  4. 비동기 처리

    1. 가능하면 async/await을 사용
    2. Promise와 async/await을 함께 사용하지 않음

  5. 오브젝트의 프로퍼티에 접근할 경우 구조분해할당(Destructuring)을 사용, 새로운 이름으로 정의할 경우에는 사용하지 않아도 됨

    const changeFirstName = user.firstName;
const {firstName: changeFirstName} = user;

  6. 변수 등을 조합한 문자열을 생성할 경우 템플릿 문자열을 사용

블록 구문

  1. 한 줄 짜리 블록이라도 스코프 사용
  2. switch문은 case와 case, default 사이에 개행, default는 필수로 넣음

타입 캐스팅

  1. 문자열 → 숫자 : +
  2. 숫자 → 문자열 : ${숫자}

기타

  1. 탭 1개의 단위를 띄어쓰기 2개로 정의

  2. 전역변수는 되도록 지양

  3. ES6 방식으로 import , export하며, 되도록 * 보다 {} 를 사용

  4. 기본적으로 early return 사용

  5. 기본적으로 순회는 고차함수 사용

    ex) forEach, map, every , some, reduce, filter

  6. 홑따옴표(single quote) 사용

  7. 옵셔널 체이닝(?.) 대신에 if문 사용

  8. css 컨벤션은 기술 스택 결정 후 논의