🤍

Code Convention

1. 소스파일 2. 형식 3. 타입 4. 변수 5. 문자열 6. 숫자 7. 배열 8. 함수 9. 제어문 10. 레이아웃 11. 주석 12. 참고한 링크

1. 소스파일

React Component를 정의한 파일은 PascalCase 로 적습니다.

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

2. 형식

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

함수형 프로그래밍으로 작성합니다.

작은 따옴표를 기본으로 사용합니다.

들여쓰기는 2칸 을 사용합니다.

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

인라인 작성은 최대한 억제합니다 → Chakra-ui 사용을 위해 인라인 작성이 허용됩니다.

Chakra-ui를 사용하면 인라인으로 스타일을 작성하게 된다. 이는 CSS 분리가 안되어 있어 가독성을 낮추게 만든다. → 논의 필요 → 인라인으로 작성하기 결정

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

3. 타입

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

type : 그 외 사용

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

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

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

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

Hook의 prop type 네이밍은 Use<...>Props로 합니다.

4. 변수

file-scope 상수는 UPPER_CASE로 적습니다.

그 외에는 모두 camelCase로 적습니다.

Boolean names : true, false를 나타내기 때문에 is, has, can를 사용합니다.

5. 문자열

문자열 연결 연산자보다 백틱을 최대한 이용합니다.

6. 숫자

매직 넘버는 모두 상수로 작성합니다.

7. 배열

변수명 뒤에 s 를 붙여서 작성한다.

8. 함수

Function names : camelCase 로 작성합니다.

컴포넌트 명 : CapitalCase 로 작성합니다.

함수 표현식과 화살표 함수를 이용하여 작성합니다.

일반 함수 작성 : 화살표 함수로 작성합니다.

그 외 함수 작성 : 함수 표현식 으로 작성합니다.

이벤트 핸들러 함수 작성 : handle + 컴포넌트명 + 이벤트명 으로 작성합니다.

하나의 함수에서 하나의 기능을 하도록 만듭니다. 상위 함수(?)를 읽는 것만으로도 무슨 기능을 하는 지 알게 작성합니다. (하위 함수 로직 코드를 안봐도 되도록)

9. 제어문

if, for문, while문 중괄호 생략 금지

if, for문, while문 구문 끝에는 세미콜론을 사용하지 않습니다.

10. 레이아웃

margin, padding을 설정할 때는 [top, left] 로만 적용합니다. → 나중에 논의 필요.

11. 주석

문제를 일으킬 수 있지만 당장은 고치지 않을 때는 FIXME : 코멘트를 적습니다.

기능이나 최적화, 리팩토링 면에서 미래에 하면 좋을 부분을 표시할 때는 TODO : 주석을 적습니다.

코드로 표현이 어려운 소프트웨어 스펙의 애매한 부분을 강조해서 표시할 때는 NOTE : 코멘트를 적습니다.

12. 참고한 링크

🔗JS 초간단 정리 - code convention (블로그)

🔗CLASS101 코드 컨벤션


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

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


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

const 어떤밥 = () => {
}


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);
}


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

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


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

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


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

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


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

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


const users = getUsers();


// BAD 👎
const handleClickButton = useCallback(() => { ... })

<SignUpForm onSubmitForm={~~} />

// GOOD 👍
const handleButtonClick = useCallback(() => { ... })

<SignUpForm onFormSubmit={~~} />


// 상위 함수
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);
	}
}


button {
	margin-top: 10px;
	padding-left: 20px;
}


async function getMP3Metadata(mp3FilePath: string) {
  // FIXME(cheolee): 해당 파일이 존재하지 않으면 제대로 동작하지 않는다
  // 현재는 개발 기간의 제약으로 항상 존재한다고 가정하였다
  // 추후 외부 환경에 배포하게 되면 해결해야 한다
	const result = await openFile(mp3FilePath);
  ...
}


function loginWithEmail(email: string, password: string) {
	try {
	  await authService.loginWithEmail(email, password);
  } catch (error: Error) {
    // TODO(cheolee): 적절한 에러 메세지를 표시한다
  }
}


function trackBranchEvent(name: string, properties: {[key: string]: string | null}) {
  // NOTE: branch에 null이나 empty string인 프로퍼티를 전달하면
  // 에러가 발생하기 때문에 null과 empty string를 제거해준다
	const sanitizedProperties = sanitize(properties);
	branch.trackEvent(name, sanitizedProperties);
}

function revenueOfProduct(product: Product) {
  // NOTE: 현재 구조에서 수익값을 정확히 계산할 수 없기 때문에 차선책으로 평균 수익율을 가격에 곱한다
  return product.price * AVERAGE_REVENUE_RATIO;
}