Coding Convention

변수 & 컴포넌트

• 상수는 영문 대문자 스네이크 표기법 (예를 들면 키값)
  • const API_KEY
• 클래스나 컴포넌트, 는 파스칼 케이스를 사용한다. (함수형 컴포넌트)
• 변수는 var 사용 금지
• const 를 let 보다 위에 선언한다
• 변수 등을 조합해서 문자열을 생성할 때는 무조건 리터럴을 이용한다(백틱)
• 스타일링 된 컴포넌트명에 St 혹은 Styled를 붙이지 않는다. (이미 대/소문자로 구별가능 & 컴포넌트명이 길어지면 가독성 저하)
• 변수명은 의미를 잘 나타낼 수 있는 간결한 표현을 사용한다. 특히 배열 & 객체의 변수명을 정할 때, ~Arr 이나 ~Obj 보다는 변수s 라는 네이밍으로 의미를 더 잘 나타낼 수 있는 네이밍 규칙을 사용! (ex. const nameArr = [지수,예원,명헌,지영] ❌  const names = [지수,예원,명헌,지영] ⭕️ )
• 변수 선언 먼저 ⇒ 한간 띄고 ⇒ 함수 선언
• interface 선언시, 함수의 인자는 ~Type(s), 컴포넌트의 인자는 propsType(s)이라는 네이밍 사용!

함수

• 함수의 선언은 function() {} 을 이용하도록하자.
• 함수명은 어떤 일을 하는지 명확히 알 수 있도록 동사+명사 의 형식을 지킨다.
• 함수 간에 한 줄 띄우도록 하자.
• 함수 내에서 반환문은 한번만 쓰는 것을 지향하자.
• fetch에 대한 함수는 따로 정의하고, 이 함수를 호출해서 쓰자.
• return 문 바로 위는 한칸 띄운다.

메소드

• 배열 복사 시 순환문을 사용하기 보다는 스프레드 연산자를 사용하자.
• 객체의 프로퍼티가 1개인 경우에만 한 줄 정의를 허용하고, 2개 이상일 경우에는 개행을 강제한다.
• 축약 메소드 표기를 사용한다.
• mapping할 때 요소가 하나만 있을때에도 소괄호를 생략하지 말자.
• axios, async await을 이용할 때 try & catch를 이용한다.
• 구조분해할당을 적극 이용하자.
• switch-case 사용시 break를 강제하자. case문 사이들끼리는 가독성을 위해 띄어주자.
• for는 지양하고 forEach를 사용

기타 문법

• 콜론을 쓸 때 앞에는 공백을 허용하지 않고(붙여쓰고), 뒤에는 공백을 강제한다.
• wildcard import (import * from “~”)는 사용하지 않는다.
• 한 줄짜리 블록일 경우라도 { }를 생략하지 말자
• color & font 사용할 때는 ${({theme}) ⇒ theme.colors.main} ${({theme}) ⇒ theme.fonts.headline} 을 사용한다.