[우아한 테크코스] 프리코스 2주차 회고

2주차 시작

1주차에는 정신 없이 과제를 해서 그런지, 이번 2주차는 꼭 공부와 함께 병행해야겠다는 생각을 했다.

과연 그 다짐은....ㅋㅋㅋㅋ 한 반 정도 지켜진 것 같다.

이번 주에는 테스트 코드에 대한 공부를 하는 시간이었다고 생각한다.

 

 

 

 

 

 

 

2주차 : 자동차 경주 게임

https://github.com/woowacourse-precourse/javascript-racingcar-6

GitHub - woowacourse-precourse/javascript-racingcar-6

이번 주 미션은 자동차 경주 게임이다.

 

우테코 프리코스 회고글들을 보면 다른 분들이 친절히 잘 정리해놓았기에, 이번 주에도 열심히 참고하면서 풀었다.

그리고 처음으로 디스코드에 질문 글도 남겨보았다. 잡담방이었지만 테스트 코드 관련 질문을 했는데,

 

이렇게 친절하게 링크까지 남겨주셔서 열심히 공부하는 계기가 되었다.

디스코드의 친절하신 분...감사합니다!!

 

 

 

 

 

 

 

테스트 코드란 무엇인가

저번주에도 npm test를 하고 test를 실행해보고, 통과되면 통과되었다고 기뻐했지만 이번 주에는 진지하게 생각해 보았다.

 

이번주부터 이런 추가된 요구 사항이 있었기에 테스트 코드를 내 스스로 작성해야 했기 때문이다.

면접에서도 종종 나오는 질문이고, 프로젝트 하면서도 필요한 부분이기에 중간중간 코드를 작성하기 보다는 Jest에 대해 찾아보고 정리해보는 시간을 가졌다.

 

https://daydream-sy.tistory.com/282

Jest로 테스트 코드 작성하기 (기본 사용법)

 

그래서 이런 블로그 글도 작성하게 되었다. 기본 사용법이고, 간단한 문법 정도만 정리해둔 것이지만 이것조차 몰랐던 나이기에 많은 공부를 할 수 있었다. 글을 작성한 게 월요일인데, 그 이후 화-수에는 과제 관련된 테스트를 생각하느라 시간을 오래 썼던 것 같다.

 

 

 

 

 

 

 

내가 만든 테스트에 오류가 생겼다...?

 describe("getChances", () => {
    if (
      ("숫자가 아닐 때",
      async () => {
        const input = "notnumber";
        await expect(app.getChances.bind(app, input)).rejects.toThrow(
          ERROR_MESSAGE.NUMBER
        );
      })
    );

    it("숫자를 제대로 입력했을 때", async () => {
      const input = "5";
      await app.getChances(input);
      expect(app.chances).toBe(5);
    });
  });

변경하기 전 코드는 위와 같다. getChances()는 시도할 횟수를 받는데, 이를 테스트 하기 위해 input 변수를 생성하고 그냥 넣었더니 이런 오류가 발생한 것이다.

 

나름대로 테스트 코드 파일을 만들고 실행시켰는데, 위와 같은 오류가 생기면서 테스트 통과를 못한 것이다...!

처음에는 이게 뭔가 하고 구글링 해봤는데 잘 해결했다. 

 

describe("getChances", () => {
    if (
      ("숫자가 아닐 때",
      async () => {
        const originalReadLineAsync = Console.readLineAsync;
        Console.readLineAsync = jest.fn(() => Promise.resolve("notanumber"));
        await expect(app.getChances.bind(app)).rejects.toThrow(
          ERROR_MESSAGE.NUMBER
        );
        Console.readLineAsync = originalReadLineAsync;
      })
    );

    it("숫자를 제대로 입력했을 때", async () => {
      const originalReadLineAsync = Console.readLineAsync;
      Console.readLineAsync = jest.fn(() => Promise.resolve("5"));
      await app.getChances();
      Console.readLineAsync = originalReadLineAsync;
      expect(app.chances).toBe(5);
    });
  });

위의 코드가 수정한 코드이다.

 

Console.readLineAsync 메서드를 모킹으로 대체하고, 모킹된 Console.readLineAsync를 사용면 된다.

그런 다음 테스트가 완료된 후에 원래 Console.readLineAsync 메서드로 바꾼다 

 

mocking은 뜻 그대로

테스트하고자 하는 코드가 의존하는 function이나 class에 대해 모조품을 만들어 '일단' 돌아가게 하는 것이다. 가짜로 만드는 이유는 테스트 하고싶은 기능이 다른 기능들과 엮여있을 경우(의존) 정확한 테스트를 하기 힘들기 때문이다.

Jest는 가짜 함수(mock functiton)를 생성할 수 있도록 jest.fn() 함수를 제공하기 때문에 이를 사용하면 된다.

 

그래서 이를 사용해서 코드를 수정했더니, 제대로 테스트를 통과했다.

처음에는 너무 얼떨떨해서 멘붕이었는데, 그래도 잘 해결하고 플러스로 mocking에 대해 알게 되는 계기가 되었다.

 

 

 

 

 

 

 

기능 구현은 잘 했는가?

1주차도 그렇고, 지금 미리 2주차 pull request 날린 다른 지원자 분들을 보면 각 기능마다 함수 혹은 메소드를 따로 분리하신 분들이 보인다. 나는 이번주 목표가 그것이었으나...한 파일 안에 전부 기능을 구현하였다.

(+ MVC 패턴을 적용하신 분들도 있다...! 대단하신 분들...)

 

우선은 어떤 식으로 나눠야 할 지 감이 안 잡혀서 한번에 쭉 구현해봤다. 리팩토링을 해야겠다는 생각은 했으나, 테스트 코드 관련 고민을 너무 오래하는 바람에 제출 날짜인 오늘이 다가왔다. 물론 시간을 더 쏟았으면 할 수 있었을 텐데, 그 부분은 좀 아쉽다.

 

그래도 1주차 공통 피드백에 따라 변수명을 좀 더 직관적으로 작성하기 위해 노력했다. 그리고 추가 요구사항이었던 depth에 대해서도 생각하면서 구현했던 것 같다. 공백에 대한 생각은 해본적이 없는데, 이번에 생각하면서 하려니 오히려 더 깔끔하게 코드를 작성할 수 있었던 것 같다. (이건 나만의 생각일수도 있음)

 

아무튼!

그래서 3주차에는 좀 더 기능을 세분화해보고, 파일별로 정리해보는 시도를 해볼 예정이다.

생각보다 분리하는 게 어렵다....프로젝트는 대체 어떤 식으로 한거지? 에 대한 반성도 조금 했다 ㅋㅋㅋㅋㅋㅋ

 

 

 

 

 

 

 

3주차 목표

• MVC 패턴에 대해 공부하기
• 테스트 코드 깔끔하게 정리하는 방법 배우기
• 다른 분들 코드 리뷰(해보기도 하고, 적극적으로 리뷰 해달라고 해야지)
• App.js 파일에 전부 구현하지 않기

 

간단해 보이지만 절대 간단하지 않은 목표...저 중 절반만 성공해도 꽤 많이 배울 것 같다.

이번 주는 테스트 코드에 대해 공부해봤으니, 다음 주 과제는 테스트 코드를 보다 더 깔끔하게 작성해보는 게 목표다.

내가 구현한 기능에 대한 테스트가 몇 개가 나올 수 있는지 고민하는 데도 시간이 오래 걸렸는데, 다음주에는 좀 덜 걸리지 않을까 싶다...ㅎ

 

그리고 코드 리뷰!

1주차에는 너무 멋쩍어서 코드 리뷰를 해달라고 글을 올리지 못했는데, 디스코드를 좀 염탐(?)한 결과 좀 더 적극적인 사람이 되기로 마음 먹었다. 코드 리뷰를 받는 건 언제라도 감사한 일이니까!

 

 

 

 

 

 

 

 

---

이렇게 2주차가 끝이 났다. 1주차 보다 더 많이 배우게 되었는데, 3주차에도 비슷한 말을 할 것 같다 ㅋㅋㅋㅋ

프리코스 동안 다른 사람들의 코드도 보면서 공부하고, 교류하면서 잘 받아먹어야지(?)

물론 나 역시도 적극적으로 참여하고. 이제 반이 지나갔는데 남은 시간도 화이팅해야겠다...!