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

const myMonth = 5;

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

const SNAKE_CASE = '뱀';

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

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

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

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

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

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

변수

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

배열과 객체

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

화살표 함수

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

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

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

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

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

비동기 처리

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

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

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

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

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

전역변수는 되도록 지양

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

기본적으로 early return 사용

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

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

홑따옴표(single quote) 사용

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

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