[클린코드] 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

 

 

 

참고

제로베이스 - 한달한권(클린코드)