The RED: Back to the Basics - 10년 이상 쓸 수 있는 지속 가능한 코드 작성
===

###### tags: `석기`

---

## 좋은 코드란 무엇인가

## 테스트와 TDD, BDD

프론트엔드에서는 테스트가 쉽지 않다.

==TDD==

- 테스트 커버리지가 자연스럽게 높다.
- 버그 발생률 낮다.
- 코드가 방대해지지 않는다.

**순서**

1. 테스트를 먼저 작성.
2. 테스트를 통과하는 코드 작성.
3. 코드 리팩토링.

- 처음에 지켜지다가.. 우선순위가 밀려 잘 지켜지기 어려운 것 같다.

## 리팩토링

- 소프트웨어의 겉보기 기능은 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부적으로 구조를 바꾸는 것.

- 3의 법칙
- 비슷한 작업을 3번째 진행한다? -> 리팩토링을 해야한다.

**사실 리팩토링하기 전에는 테스트를 먼저 작성해야한다.**

### Code smell

- 너무 큰 함수, 클래스
- 이름이 명확하지 않은 변수와 함수 이름
- 중복코드
- 전역변수
- 과도한 callback 과 중첩된 조건문
- 과도하게 긴 식별자

### 리팩토링과 Test case

- 해피패스?
- 아주 쉬운 테스트 케이스만 작성하는 현상.
- 이러면 안된다!
- 엣지 케이스를 잡아내지 못한다.
- 리팩토링이 너무 간단하면 (변수 이름만 변경), 안하는 경우가 많은데, 그러면 안된다.

### 리팩토링의 방법

1. 함수의 추출, 분리

function processPost(){
    const posts = getPosts();
    
    posts.forEach(post => {
        console.log(post);
    })
}

위와 같은 코드를,

function logPost(post) {
    console.log(post)
}

function processPost(){
    const posts = getPosts();
    
    posts.forEach(logPost)
}

이렇게.

2. 중간 변수 도입.

const user = getUser();
if(user.authKey){
    ...
}

위 코드를,

const user = getUser();
const isLoggedIn = Boolean(user.authKey);
if(isLoggedIn){
    ...
}

이처럼 중간 변수를 생성해서 작업.

3. var 보다는 let, let 보다는 const.
4. 함수의 경우, 순수함수여야한다.
- 똑같은 입력이 들어간다면 똑같은 출력이 나와야한다는 의미.
5. 조건식 통합
6. fast fail
- 조건식에서 if-else가 아니라 if하고 바로 리턴하는 방식.
7. 반복문보다 pipe.

    const names = [];
    for (const i of input){
        if(i.job === 'programmer'){
            names.push(i.name);
        }
    }

    const names = input.filter(item => item.job === 'programmer').map(item => item.name);

위와 같이 깔끔하게 작성 할 수 있다.