원티드 프리온보딩 - 클린코드1
원티드 프리온보딩 - 클린 코드 1강
강사님 깃헙 https://github.com/pocojang/clean-code-js
클린 코드란?
누구나 이해하기 쉬운, 직관적인 코드
시간이 지나도 언제나 깨끗하게 유지해야함
But, 클린 코드에 너무 집착하지만고 일단 기능을 구현한 다음 리팩토링을 통해 클린코드를 만들어도 됨! (기능을 구현하는 것이 먼저일것!)
일관성이 중요한 이유
나쁜 코드라도 일관성만 잘 지킨다면 자동화도 할 수 있기 때문에!
- 일관성이 명확하다면 편집기, 정규식 조합으로 한번에 고칠 수 있다.
- JSCodeShift 까지 활용한다면 덤
- 실무에서는 일관성이라는 규칙을 정하기 위해 논의해야한다.
- 규칙으로 정한 일관성은 어떠한 경우에도 깨지 않도록 노력해야한다.
- 일관성은 향후 문서화로 표현하고 Lint로 강제할 수 있다.
네이밍 컨벤션
저장소, 폴더, 파일, 함수, 변수, 상수, 깃 브랜치, 커밋 등 프로그래밍 전반적으로 이름을 위한 규칙이나 관습을 만드는 것
대표적인 케이스
- camelCase
- pascalCase
- kebab-case
- SNAKE_CASE
■ 접두사/접미사
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// prefix-*, *-suffix
data-id
data-name
data-value
AppContainer
BoxContainer
ListComponent
ItemComponent
ICar
TCar
AType
BType
동사-* // 함수는 동사로 시작한다. ()
_ // private
# // private
■ 연속적인 규칙
1
2
3
4
5
6
7
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
}
}
function func<T, U, V>(name: T, value: U)
■ 자료형 표현
1
2
3
const inputNumber = 10;
const someArr = [];
const strToNum = "some code";
■ 이벤트 표현
1
2
3
4
5
6
7
function on-*
function handle-*
function *-Action
function *-Event
function take-*
function *-Query
function *-All
■ CRUD
1
2
3
4
5
6
7
8
function generator-*
function gen-*
function make-*
function get
function set
function remove
function create
function delete
■ Flag
1
2
3
4
const isSubmit
const isDisabled
const isString
const isNumber
■ ETC
1
2
function selectById(id)
function selectrAll
This post is licensed under CC BY 4.0 by the author.