[ 우테코 ] Lv. 1 자동차 경주 구현 - 2단계(리팩토링) 후기

배경지식!

01. 1단계(페어)를 끝내고 리뷰가 오면 피드백을 반영한다.

02. 그리고 머지가 되면 2단계를 진행한다.

03. 멘토의 여러 리뷰와 우테코에서 말하는 조건을 반영한다.

 

---

 

혼자 리팩토링을 하며 아래와 같은 것들을 했다.

물론 바로 적용한건 아니고 여러 번 피드백을 들으며 진행했다.

 

 

변경한 것들

1. inputView.js에 input 관련 함수와 try-catch를 모아놓기
   
   1. 사용자의 차 이름 덩어리 인풋값을 inputView에서 가공하지 않기 위해 index.js에서 처리했다.
   2. 근데, 또 round는 inputView.js안에서 try-catch를 잡아냈다.
   3. 통일성이 없다고 생각되어 해당 부분은 모두 input.view에서 처리를 하도록 수정했다.
   4. 다만, input값을 inputView에서 가공하는 것이 맞을지에 대한 의문은 가지고 있다. 
2. 테스트, 변수, 함수, 클래스 명 바꾸기
   1. 지속적인 피드백이 있었음. 다행히 친절한 멘토님이 예시도 들어주셨다.
   2. 처음에는 이정도면 괜찮지 않나? 했는데 예시를 읽자 어렴풋이 "아, 이런 느낌인거구나"싶었다. 그래도 여전히 짜는건 어렵다.
   3. 나름대로 알게 된 규칙 (함수는 동사로 시작하는 게 좋다, 테스트명은 "어떤 상황"에서 "어떻게 실행" 했을 때 "어떤 결과"를 반환해야하는지 test code 실행 결과만 보고 유추할 수 있도록..)
   4. 예시
      1. [constant] random_min ... => min_move_condition  : min, max 같은 것은 앞으로 빼는 것이 좋다고 한다.
      2. [constant] "---출력 메세지----\n" => "---출력 메세지----" : 출력메세지에 줄바꿈을 넣지 않고 따로 처리 시 넣는 것을 피드백 받은 분이 있어 처리해 보았다. 어느것이 나은지는 모르겠지만 통일이 되지 않으면 문제가 생겼을 때 어디서 찾아야 하는지 헤맬 것 같다는 생각이 들었다.
      3. [test] 승리자가 있으면 true => 자동차 경주가 종료 됐을 때 우승자가 존재할 경우 true를 반환: 테스트를 돌리고 해당 코드 내용을 모르는 사람이 봐도 이해가 가도록 짜기.
      4. [car] carGo() => moveCar() : 동사가 앞으로 가는 것이 함수가 수행하는 일을 더 잘 표현한다고 한다.
   5. 이 외에도 is---()라는 함수는 boolean값을 반환하는 경우를 일컫는다고 한다. 이런 이름을 정하는 것도 찾아서 정리해보면 좋을 것 같다. 
3. domain과 UI은 분리하기
   1. 이 두 가지는 서로 분리되어있어야 나중에 수정이 쉬운 듯 함
   2. 우테코에서 제시한 조건인데, 해당 부분은 따로 빼서 글을 올리려고 함
4. let -> const 로 바꾸기
   1. let 은 값이 바뀌기 때문에 의식적으로 인식을 해줘야 한다. 어떤 경우는 변수에 대한 (형식이라든가를 적은) 파일을 만들기도 한단다. 그래서 const를 쓰면 형태가 고정되기 때문에 const을 지양한다고 한다.
   2. 그래서 나는 let을 이용해 getWinner()를 짰는데 이를 다음과 같이 수정했다.

//수정전
getWinner() {
    let winner = [];
    let winnerScore = 0;
    this.#cars.forEach((car) => {
        const [name, score] = car.exportNameScore();
        if (score > winnerScore) {
            winnerScore = score;
            winner = [name];
        } else if (score !== 0 && score === winnerScore) winner.push(name);
    });
    return winner;
}
    
    
//수정후
getWinner() {
    const winnerScore = Math.max(
        ...this.#cars.map((car) => car.exportNameScore()[1])
    );
    const winner = this.#cars.map((car) => {
        car.exportNameScore()[1] === winnerScore;
        return car.exportNameScore()[0];
    });
    return winner;
}

 

---

 

아래의 것들은 찾아보고 정리하고자 한다.

 

 

새로 알게 된 개념

1. Domain/UI는 나누는 것이 좋다?
2. util

 

우테코에서 제시한 생각해보기

• 함수를 선언하는 다양한 방식은 각각 어떤 차이가 있나요?
  • 어떤 경우에 어떤 방식을 활용하고 있나요?
• 어떤 경우에 class를 사용하고, 어떤 경우에 일반 객체를 사용하나요?
• class와 함수의 차이는 무엇인가요?
• 비동기 입력을 처리할 때 callback, promise, async/await 중 어떤 것을 활용했고 왜 선택했나요?
• require/ module.exports 와 import/ export는 어떤 차이가 있나요?
  • 자바스크립트의 모듈 시스템에 대해 알아보세요.
• 명령형, 선언형 무엇이 다를까요?