네이밍 컨벤션
변수 및 함수명은
camelCase 로 작성합니다.
상수명은 대문자_SNAKE_CASE 로 작성합니다.
컴포넌트명, 생성자명은 PascalCase 로 작성합니다.
지역변수명 또는 private 변수명은 _ 로 시작합니다.
스타일 컴포넌트명은 Styled 로 시작합니다.
타입 및 인터페이스명은 {Pascal Case}Type 형태로 작성합니다.이름의 길이는
20자 내외 로 제한합니다.
만약 4단어 이상 또는 20자 이상일 경우 팀원과 상의하여 결정합니다.약어 사용은
지양 합니다. 부득이하게 사용해야할 경우 팀원과 상의하여 결정합니다.
ex) index(o), idx(x) | count(o), cnt(x) | array(o), arr(x)변수
const를 사용합니다. let은 정말 부득이한 경우에만 사용합니다.
함수
함수명은
동사+명사 형태로 작성합니다.
ex) getUserInfomation()함수의 정의는
화살표 함수 를 사용해 정의합니다.함수의 본체가 하나의 표현식이라면 중괄호를 생략하고
암시적 반환 을 활용합니다.
암시적 반환을 사용할 경우 혼란을 줄이기 위해 함수 본문 전에 개행을 하지 않습니다.// Bad (foo) => bar; // Good (foo) => bar;
그 외에는 중괄호 사용 시
return 문을 명시해야 합니다.조건문
조건문은 늘 early return을 우선으로 사용합니다.
조건문의 가독성과 버그 방지를 위해 항상 중괄호 {} 를 사용해 정의합니다.
주석
주석은 코드에 대한 설명이 필요한 경우에 작성합니다.
한 줄일 때는
// 를 이용하고, 두 줄 이상일 때는 /* */ 를 이용합니다.전역에서 사용되는 유틸 함수나 API 함수의 경우, 해당 함수를 처음 사용해보는 다른 팀원들이 쉽게 사용할 수 있도록
JSDoc 을 작성합니다.
또한 코드 리뷰에 소요되는 시간을 줄이기 위해, 복잡한 로직을 가진 함수에 JSDoc 을 작성하여 다른 팀원들의 이해도를 높여주어도 좋습니다.ex)
/** * @brief 전체 사용자 목록을 불러옵니다. * @details 디폴트 값은 offset = 0, limit = 10 입니다. * 반드시 {} 중괄호 내부에 offset, limit 설정해야 합니다. */ export const getUsers = async ({ offset = 0, limit = 10, }: GetUserListRequestType): Promise<UserType[] | never> => { ... };
@brief : 간략하게 함수를 소개합니다.
@details : 함수에 대해 상세하게 설명 합니다. 로직이 복잡한 경우 함수의 로직을 간단히 설명합니다. 해당 함수를 사용하며 주의 해야할 사항이 있다면 적어주는 것이 좋습니다. 매개변수와 리턴값에 대한 자세한 설명을 해도 좋습니다.
각 속성은 필수 키워드가 아닙니다. 간단히/** */를 사용하여 키워드 없이 작성해도 좋습니다.
스타일드 컴포넌트
스타일드 컴포넌트에는 기본적으로 해당 HTML 태그의 기본 속성 타입을
extends 로 추가합니다.CSS
참고자료
