🔸명명 규칙

상수: 영문 대문자, 스네이크 표기법을 사용

const NAME_ROLE;

변수 및 함수: 카멜케이슬 사용

// 배열: 복수형 이름으로 사용
const datas = [];

// 정규표현식: 'r'로 시작
const = rName = /.*/;

// 이벤트 핸들러: 'on'으로 시작
const onClick = () => {};
const onChange = () => {};

// 반환 값이 불린인 경우: 'is'로 시작
const isLoading = false;

// Fetch함수: method(get, post, put, del)로 시작
const getEnginList = () => {...}

함수: 함수는 함수표현식, 화살표함수 모두 사용

//함수표현식
function fnName() {};
[1,2,3].map(function(x){
    retrun {};
})
//화살표 함수
const fnName = () => {};
[1,2,3].map(x => x);

이벤트 핸들러: 앞에 handle을 붙여 사용

<MyComponent handleclick={this.handleClick} />

블록 구문: 한 줄짜리 블록일 경우라도 {}를 생략하지 않고, 명확히 줄 바꿈 하여 사용한다

// bad
if(true) return 'hello'

// good
if(true){
  return 'hello'
}

테그 네이밍:

• Styled-component태그 생성 시 아래 네이밍 규칙을 준수하여 의미 전달을 명확하게 한다.
• 태그명이 길어지더라도 의미 전달의 명확성에 목적을 두어 작성한다.
• 전체 영역: Container
• 영역의 묶음: {Name}Area
• 의미없는 태그: <>

<Container>
  <ContentsArea>
    <Contents>...</Contents>
    <Contents>...</Contents>
  </ContentsArea>
</Container>

🔸주석 규칙