Code Convention

1. 소스파일

React Component를 정의한 파일은 PascalCase 로 적습니다.
React Component를 포함하고 있지 않다면 camelCase 로 파일을 정의합니다.

2. 형식

변수명이 조금 길어져도 줄임말은 지양합니다.

// BAD
const 함수 = (msg) => { }

// GOOD
const 함수 = (message) => {}

함수형 프로그래밍으로 작성합니다.
작은 따옴표를 기본으로 사용합니다.
들여쓰기는 2칸 을 사용합니다.

Import → Type → 컴포넌트{ 변수 → 함수 → return<HTML> } 순서로 작성합니다.

// 유명한 사이트에도 이런 부분이 컨벤션으로 안적혀 있어서 
// (뎁스가 높고 낮은 함수의 순서에 대한 고민)
// (-> 함수를 utils로 최대한 분리할 예정이라서 문제되면 그때 재논의)
const 밥 = () => {
   const 밥 종류 = 어떤밥()
}

const 어떤밥 = () => {
}

인라인 작성은 최대한 억제합니다 → Chakra-ui 사용을 위해 인라인 작성이 허용됩니다.
- Chakra-ui를 사용하면 인라인으로 스타일을 작성하게 된다. 이는 CSS 분리가 안되어 있어 가독성을 낮추게 만든다. → 논의 필요 → 인라인으로 작성하기 결정
```
const handleButtonClick = () => {}
const styledDiv = styled.div`
	display: flex
`;

// <styledDiv onClick={handleButtonClick} ></styledDiv>
```

중첩 레벨을 가능한 억제합니다.

// BAD
for (int i = 0; i < 10; i++) {
	if (i % 2 === 0) {
		console.log(i);
	}
}

// GOOD
for (int i = 0; i < 10; i++) {
	if (i % 2 !== 0) {
		continue;
	}
	console.log(i);
}

3. 타입

interface : object, class의 모양을 특정하는 경우 사용
type : 그 외 사용

any 타입을 사용하지 않습니다.

가급적 제네릭 타입을, 그것도 안되면 unknown 타입을 사용해야 합니다.

// BAD 👎
function print(value: any) { ... }

// GOOD 👍
function print<Value>(value: Value) { ... }
function print(value: unknown) { ... }

제네릭을 사용할 때 T, U, V 같이 한 문자가 아닌 명시적인 이름을 사용합니다.

// BAD 👎
function print<T>(value: T) { ... }

// GOOD 👍
function print<Value>(value: Value) { ... }

Props 타입 정의 이름은 컴포넌트이름 + Props 로 합니다.

// BAD 👎
type Props = {...}

// GOOD 👍
type HeaderProps = {...}