코딩 컨벤션: 예시로 알아보자!

코딩 컨벤션의 필요성

'코딩 컨벤션'이란 코드 작성 방식에 대한 약속이자 규칙입니다.

코딩 컨벤션은 왜 필요할까요?

제가 생각하는 코딩 컨벤션의 이점은 '일관성' 또는 '안정성' 측면입니다.

 

사람들은 저마다 생각이 다르고, 생각이 다르니 행동도 다릅니다.

마찬가지로 개인별로 결과물(코딩)의 편차가 존재합니다.

 

예컨대 김 대리는 VS Code으로 탭(tab) 두 칸 들여쓰기 하고,

박 사원은 웹 스톰으로 스페이스 바 두 칸 들여쓰기 합니다.

왠걸 이 과장 님은 Vim으로 네 칸 들여쓰기를 하고 계시네요?

 

이러한 기반에서는 결과물의 일관성을 지키기 어렵습니다.

일관성 없음은 곧 혼란으로 이어집니다. 혼란은 곧 무질서 상태를 만들 것이구요.

 

그래서 우리는 약속이 필요합니다.

코딩 컨벤션이라는 약속이요!

 

예시로 살펴보는 코딩 컨벤션

1. 공통 설정

공통적용 사항은 정적분석 도구를 이용해서 자동화한다.

정적분석 도구로는 eslint와 prettier를 사용한다.

1.1 eslint

• extends
  • react-native-community
  • prettier
  • plugin:prettier/recommended
  • prettier/@typescript-eslint
  • plugin:react/recommended
• plugins
  • @typescript-eslint

1.2 prettier

• rules
  • semi: true
  • arrowParens: 'always'
  • bracketSpacing: false
  • jsxBracketSameLine: true
  • singleQuote: true
  • trailingComma: 'all'

1.3 comment

tsdoc 형식을 따른다.

참고 링크: https://tsdoc.org/

1.4 ETC

1.4.1 import 방식

공통

상대 경로를 사용한다.

import * as Colors from '../styles/colors';

 

예외

babel.config.js의 alias 경로에 해당 되면 alias path를 사용한다.

// babel.config.js 
[ 
	'module-resolver',
    {
    	alias: {
        	'@': './src',
            stories: './stories',
            test: './__test__',
        }, 
    }, 
 ],

causes using alias path

소속 디렉토리	alias	example
stories	@	import store from '@/store/store'
test	@	import styles from '@/styles/colors'
test	stories	import Button from 'stories/Button.stories.ts'

 

2. Naming

2.0 Kinds of naming cases

case	Description	example
kebob-case	소문자만 사용. 띄어쓰기 대신 '-' 사용	what-do-you-want
lowerCamelCase	소문자 사용. 띄어쓰기 대신 대문자 사용	whatDoYouWant
PascalCase	첫문자 대문자 사용. 띄어쓰기 대신 대문자 사용	WhatDoYouWant
snake_case	소문자만 사용. 띄어쓰기 대신 '_' 사용	what_do_you_want
UPPER_CASE	대문자만 사용. 띄어쓰기 대신 '_' 사용	WHAT_DO_YOU_WANT

2.1 Resource

2.1.1 directory

kebab-case를 사용한다.

// 1 단어 
order

 

// 2 단어 이상 
intersection-observer

 

2.1.2 .ts | .js

• 공통

lowerCamelCase를 사용한다.

cartService.ts

 

 

• Class | Type | Interface

PascalCase를 사용한다.

// Timer.ts 
class Timer { 
	// ... 
}

 // OrderDetail.ts 
type OrderDetail { 
	// ... 
}

2.1.3 .tsx

PascalCase를 사용한다.

CartList.tsx

2.1.4 ETC

kebab-case를 사용한다.

home-logo.png
favicon.ico

2.2 Code

2.2.1 상수

UPPER_CASE를 사용한다.

const MAXIMUM_COUNT = 99

2.2.2 React Component | Class | Type | Interface

PascalCase를 사용한다.

// HomeScreen.tsx 
function HomeScreen () { 
	return ( <div>Home</div> ) 
}

2.2.3 ETC

lowerCamelCase를 사용한다.

function getStock () {
}