React Component를 포함하고 있지 않다면 camelCase 로 파일을 정의합니다.
2. 형식
변수명이 조금 길어져도 줄임말은 지양합니다.
// BAD
const 함수 = (msg) => { }
// GOOD
const 함수 = (message) => {}
함수형 프로그래밍으로 작성합니다.
작은 따옴표를 기본으로 사용합니다.
들여쓰기는 2칸 을 사용합니다.
Import → Type → 컴포넌트{ 변수 → 함수 → return<HTML> } 순서로 작성합니다.
// 유명한 사이트에도 이런 부분이 컨벤션으로 안적혀 있어서
// (뎁스가 높고 낮은 함수의 순서에 대한 고민)
// (-> 함수를 utils로 최대한 분리할 예정이라서 문제되면 그때 재논의)
const 밥 = () => {
const 밥 종류 = 어떤밥()
}
const 어떤밥 = () => {
}
인라인 작성은 최대한 억제합니다 → Chakra-ui 사용을 위해 인라인 작성이 허용됩니다.
Chakra-ui를 사용하면 인라인으로 스타일을 작성하게 된다. 이는 CSS 분리가 안되어 있어 가독성을 낮추게 만든다. → 논의 필요 → 인라인으로 작성하기 결정
// 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 = {...}
Hook의 prop type 네이밍은 Use<...>Props로 합니다.
// BAD 👎
type CoverSectionHookProps = {...}
// GOOD 👍
type UseCoverSectionProps = {...}
4. 변수
file-scope 상수는 UPPER_CASE로 적습니다.
그 외에는 모두 camelCase로 적습니다.
Boolean names : true, false를 나타내기 때문에 is, has, can를 사용합니다.
하나의 함수에서 하나의 기능을 하도록 만듭니다. 상위 함수(?)를 읽는 것만으로도 무슨 기능을 하는 지 알게 작성합니다. (하위 함수 로직 코드를 안봐도 되도록)
// 상위 함수
const 함수명 = (a, b, message) => {
const count = sumABetweenB(a, b);
printN번(count, message);
}
// 하위 함수
const sumABetweenB = (a, b) => {
let total = 0;
for (int i = a; i <= b; i++) {
total += i;
}
return total;
}
// 하위 함수
const printN번 = (n, message) => {
for (int i = 0; i < n; i++) {
console.log(message);
}
}
9. 제어문
if, for문, while문 중괄호 생략 금지
if, for문, while문 구문 끝에는 세미콜론을 사용하지 않습니다.
10. 레이아웃
margin, padding을 설정할 때는 [top, left] 로만 적용합니다. → 나중에 논의 필요.
button {
margin-top: 10px;
padding-left: 20px;
}
11. 주석
문제를 일으킬 수 있지만 당장은 고치지 않을 때는 FIXME : 코멘트를 적습니다.
async function getMP3Metadata(mp3FilePath: string) {
// FIXME(cheolee): 해당 파일이 존재하지 않으면 제대로 동작하지 않는다
// 현재는 개발 기간의 제약으로 항상 존재한다고 가정하였다
// 추후 외부 환경에 배포하게 되면 해결해야 한다
const result = await openFile(mp3FilePath);
...
}
기능이나 최적화, 리팩토링 면에서 미래에 하면 좋을 부분을 표시할 때는 TODO : 주석을 적습니다.
