[클린코드] 5장 형식 맞추기
클린 코드
형식 맞추기 🙌
형식을 맞추는 목적
다음의 테스트 코드를 살펴보자. 👀
describe('promise', () => {
const until = 3;
const range = [...Array(until).keys()];
const t = 300;
const delay = (t) => new Promise((resolve) => setTimeout(resolve, t));
it('test for promise', async () => {
for await (const rangeItem of range) {
await delay(t);
console.log('a');
await delay(t);
console.log('b');
await delay(t);
console.log('c');
}
console.log('finished');
});
it('changes to promise + await',
async () => {
const promises = range.map((item) => {
return (async () => {
await delay(t);
console.log('a');
await delay(t);
console.log('b');
await delay(t);
console.log('c');
})();
});
await Promise.all(promises);
console.log('finished');
});
})
형식을 맞추지 않으면
가독성이 떨어지고
가독성이 떨어지면
코드의 품질에 지대한 영향을 미친다. 😵
보기 좋게 포맷을 맞춰보자 😉
describe('promise', () => {
const until = 3;
const range = [...Array(until).keys()];
const t = 300;
const delay = (t) => new Promise((resolve) => setTimeout(resolve, t));
it('test for promise', async () => {
for await (const rangeItem of range) {
await delay(t);
console.log('a');
await delay(t);
console.log('b');
await delay(t);
console.log('c');
}
console.log('finished');
});
it('changes to promise + await', async () => {
const promises = range.map((item) => {
return (async () => {
await delay(t);
console.log('a');
await delay(t);
console.log('b');
await delay(t);
console.log('c');
})();
});
await Promise.all(promises);
console.log('finished');
});
})
훨씬 보기가 좋아졌다. 😄
가독성이 올라갔고,
코드를 잘못 해석하여 버그를 발생할 위험도 줄었다. 🙋♂️
적절한 행 길이를 유지하라
코드 길이는 대략 200줄 정도가 적당하고
반드시 지킬 엄격한 규칙은 아니지만
일반적으로 큰 파일보다 작은 파일이 이해하기 쉽다.
한 행의 가로는
대략 100자나 120자 정도가 적당하다.
✅ 신문 기사처럼 작성하자
첫 부분 : 고차원 개념과 알고리즘을 설명
중간 부분 : 아래로 내려갈수록 의도를 세세하게 묘사
끝 부분 : 가장 저 차원 함수와 세부 내역
✅ 개념은 빈 행으로 분리하라
빈 행은 새로운 개념을 시작한다는 시각적 단서이다.
✅ 세로 밀집도
서로 밀접한 개념은 세로로 가까이 둬야 한다.
또한, 변수는 사용하는 위치에 최대한 가까이 선언한다.
변수가 각 사용하는 위치에 최대한 가까이 존재한다.
describe('promise', () => {
const until = 3;
const range = [...Array(until).keys()];
const t = 300;
const delay = (t) => new Promise((resolve) => setTimeout(resolve, t));
})
Java Class Declarations
Class 내부 코드의 순서이다.
✅ static 변수
public ➡️ protected ➡️ package ➡️ private
✅ instance 변수
public ➡️ protected ➡️ package ➡️ private
✅ 생성자
✅ 메서드
public 메서드에서 호출하는 private 메서드는 그 아래에 선언한다.
팀 코딩 컨벤션 🙌
팀 내에 컨벤션 규칙이 있다면 잘 파악하여 따르도록 한다.
여기서는 저희 팀의 컨벤션을 약간 소개하고자 한다.
✅ Camel case VS Snake case VS Kebab case VS Pascal Case
함수나 변수명을 작성할때 코딩 스타일이다.
타입은 Pascal case로 하자. 🙆♂️
변수명은 Camel case로 하자. 🙆♂️
네임스페이스(모듈)은 Kdebab case로 하자. 🙆♂️
// 강의명 (course title)
// Camel case
const courseTitle = '클린코드'; //첫문장은 소문자, 그다음은 대문자로 시작
// Snake case
const course_title = '클린코드'; // 언더스코어(_) 사용
// Kebab case
const course-title = '클린코드'; // 대시(-) 사용
// Pascal Case
const CourseTitle = '클린코드'; // 대문자로 시작
✅ 파라미터 규칙
XX개 이상은 named parameter로 하자. 🙆♂️
const getCourse({ foo, bar, baz, qux}) {}
✅ 테스트 코드
테스트 코드 작성 시에는
it 다음에 should로 시작하여
예상된 결과를 작성하자. 🙆♂️
it('should be ok', () => {}
it('should be fail', () => {}
✅ 단축구문
프로퍼티에 단축 구문을 사용하자. 🙆♂️
//bad
const obj = {
userId: userId
};
//good
const obj = {
userId
};prettier 와 lint
보통 javaScript를 사용한다면
코드 컨벤션을 prettier와 lint의 기본에 맞춰 사용하면 편하다
기본으로 사용하되, 팀 내에 필요한 부분을 커스텀하여 사용하면 좋다.
✅ prettier
prettier site
✅ eslint
eslint site
✅ editorConfig
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8
# 4 space indentation
[*.py]
indent_style = space
indent_size = 4
# Tab indentation (no size specified)
[Makefile]
indent_style = tab
# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2
# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2
참고