///
Search
Duplicate
🤴

세종대왕 프로젝트 (한글 코딩 컨벤션)

한글 코딩? 어려운 도메인 용어에 대해 변수명을 정할 때, 어색한 영어보다 이해하기 쉬운 한글로 짓는 컨벤션을 말합니다.보다 이해하기 쉽고 눈에 잘 들어오는 코드를 작성할 수 있다는 장점이 있습니다.

컨벤션이 왜 필요한가요?

한글 코딩을 한번도 해보지 않은 사람은 있어도 한번만 하는 사람은 없다.
여러 제품, 여러 프로젝트에서 사용되다보니 다양한 방식으로 사용하는데, 이에 대한 규칙(이하 컨벤션)이 없어서 의견이 엇갈리는 경우, 코드리뷰에 자주 언급되어 정리하고자 합니다.

1. 범위

 Do
1.
상수
2.
변수명
3.
타입
4.
서버 응답값
5.
에러코드
6.
함수
 Don’t
1.
Props
2.
컴포넌트 이름
3.
파일명
4.
디렉토리명
컴포넌트 이름 논의 배경
Props
파일명과 디렉토리명

2. 방식

이해하기 쉽도록 작성하는 것을 제 1 원칙으로 한다.
영문/한글 혼용은 지양하며 단순 음차하는 방식이더라도 이해가 더 쉽다면 적용한다.
한글이라도 어려운 용어(고어, 한글로 대체 가능한 한자어) 사용은 배제한다.
 Do
const 사용자가_선택한_결제_파라미터_타입 // 파라미터는 Parameter이지만 허용한다.
TypeScript
복사
 Don’t
const 기탄받아_마땅한가: boolean const 사용자가_선택한_결제_parameter_type
TypeScript
복사

3. 자세

어려운 도메인, 비즈니스 로직에서만 사용하자.
무분별한 한글 코딩은 지양하자.
 Do
국가지방자치단체공공단체금융사여부?: { 실소유자확인제외대상: boolean; 이십오프로이상지분을보유한사람?: boolean; 이십오프로미만보유자중최대지분1?: boolean; }
TypeScript
복사
 Don’t
const [열려있는가, 열기, 닫기] = useBoolean(false); function 유저정보_가져오기() { ...} // fetchUserInfo
TypeScript
복사

4. 컨벤션

Boolean

-인가
 Do
let 실제소유자인가: boolean
TypeScript
복사
 Don’t
let 실제소유자일까: boolean
TypeScript
복사

Space

_ 로 구분
 Do
let 국가지방자치단체_공공단체_금융사_여부: boolean
TypeScript
복사
 Don’t
let 국가지방자치단체공공단체금융사여부: boolean
TypeScript
복사

5. Next,

ESLint Rule ?

토스페이먼츠 프론트엔드 챕터에 대해 더 알아보러가기