프리코스 4주 차 - 다리 건너기 미션

1. 개요

22년 11월 16일 15시에 4주 차 미션 안내 이메일이 도착했다. 일주일 동안 이루어진 우아한테크코스 프리코스 4주 차 다리 건너기 미션에 대한 간단한 소개와 소감을 작성한다.

2. 미션 소개

프리코스 4주 차의 미션은 다리 건너기 게임을 만드는 것이었다. 오징어 게임의 징검다리 건너기 게임과 같은 규칙의 게임을 직접 만드는 것이다.

오징어 게임과 다른 점은 목숨이 무한개여서 실패를 해도 다시 시도할 수 있는 점이 게임을 진행하는데 부담감을 줄여주었다.

오징어 게임에서의 징검다리 건너기 게임과 다른 점은 실패를 해도 다시 시도할 수 있다는 것이다. 오징어 게임에서는 바로 추락하여 사망을 하지만 다행히 프리코스의 다리 건너기 미션은 그러지 않았다. 그래서 게임에 실패하더라도 무한히 도전을 하며 이어나갈 수 있었다.

이번 미션에도 새롭게 추가된 요구 사항이 있었다.

1. 함수(또는 메서드)의 길이가 10라인을 넘어가지 않도록 구현한다.
   • 함수(또는 메서드)가 한 가지 일만 잘하도록 구현한다.
2. 메서드의 파라미터 개수는 최대 3개까지만 허용한다.

더욱 자세한 내용은 아래의 미션 저장소를 참고하면 된다.

우아한 테크코스 4주차 다리 건너기 미션 저장소

GitHub - woowacourse-precourse/javascript-bridge

3. jest.fn(), jest.spyOn()

3주 차 미션에서의 아쉬운 점이 있다면, 출력에 관한 테스트 코드를 작성하지 않았다는 것이다. ApplicationTest 파일을 참고하여 jest.fn()과 jest.spyOn() 메서드 사용에 대해 고민을 하였고, 공식문서와 기술 블로그를 보며 학습을 진행하였다.

이에 대해 정리한 내용은 아래에 링크를 남긴다.

모의 함수(Mock Functions) 사용하기
함수의 호출 테스트하기 with jest.spyOn()

해당 학습을 통해 mock 함수를 만드는 방법을 알게 되었고 출력에 관한 테스트 코드를 작성할 수 있었을 뿐 아니라 함수 호출에 대한 테스트도 함께 진행할 수 있었다.

Jest를 활용한 테스트 코드는 우테코 프리코스에서 처음 접했다. 그렇기 때문에 기능 구현에 쏟은 시간 못지 않게 Jest를 학습하는데 많은 시간을 투자하였다.

4. 객체(또는 클래스)의 사용에 대해 고민

3주 차 미션에 대한 공통 피드백에는 객체(또는 클래스)에 대한 내용이 있었다. 이를 바탕으로 어떻게 객체(또는 클래스)를 사용할지에 대해 고민하였다.

공통 피드백에는 아래와 같은 목록이 있었다.

• 객체의 상태 접근을 제한한다
• 객체는 객체스럽게 사용한다
• 필드의 수를 줄이기 위해 노력한다

클래스에 대해 많이 사용을 하지 않았기 때문에 피드백의 내용만 봐서는 어떤 의미인지 감이 잡히지 않았다. 그래서 일단 피드백의 내용을 꼼꼼히 읽어보고 의도한 바가 무엇인지 깨닫기 위해 노력하였다. 또한 객체(또는 클래스)를 올바르게 사용하기 위해 여러 블로그의 글을 찾아 읽어보았다.

누구나 고개를 끄덕이는 결론을 내릴수는 없었지만 나름 정의한 객체(또는 클래스)를 사용하는 방법은 아래와 같다.

객체를 존중하자.

객체의 상태 접근을 제한함으로써 객체의 자율성을 존중할 수 있고 객체가 해야 할 일을 다른 곳에서 대신 하는 것은 객체(또는 클래스)를 존중하지 않는 것과 다름이 없다는 생각이 들었다. 마치 객체가 살아있는 생명체로 생각되는 순간이었다.

이에 대한 더욱 자세한 내용은 아래의 링크에서 확인할 수 있다.

클래스 사용에 대한 고찰

5. 의식적인 연습

4주 차 미션에는 '함수(또는 메서드)의 길이가 10라인을 넘어가지 않도록 구현한다.'라는 요구 사항이 있다. 이를 지키기 위해 많은 고민을 하였다. 최대한 함수가 하나의 일만 하도록 쪼개어 함수(또는 메서드)의 길이를 줄이고자 하였다.

3주 차 미션에서는 리팩터링을 한 후 테스트 코드를 작성하였는데 4주 차 미션에서는 반대로 진행하였다. 그 이유는 하나의 함수(또는 메서드)에서 작성할 수 있는 모든 테스트 코드를 고민함으로써 해당 함수(또는 메서드)가 담당하는 역할을 쪼갤 수 있기 때문이다.

예를 들어 아래의 함수를 살펴보자.

const sum = (a, b) => {
  if (a > 10 || b > 10) throw new Error('10보다 작은 숫자를 입력하세요.');

  return a + b;
};

sum 함수는 두 개의 수를 인자로 받아 수의 범위를 확인한 뒤 합을 반환하는 역할을 한다. sum 함수에서 작성할 수 있는 테스트는 크게 두 개로 나눌 수 있다.

1. a, b의 범위 테스트
2. 합을 반환하는 테스트

이를 통해 sum 함수는 2가지의 일을 하고 있다는 것을 알 수 있다. 그렇다면 테스트를 토대로 sum 함수가 한 가지의 일만 할 수 있도록 쪼개어 보자.

const sum = (a, b) => {
  [a, b].forEach((number) => validateRange(number));

  return a + b;
};

const validateRange = (number) => {
  if (number > 10) throw new Error('10보다 작은 숫자를 입력하세요.');
};

숫자의 범위에 대한 검사는 validateRange 함수에서 함으로써 함수가 한 가지의 일만 할 수 있도록 코드를 리팩터링을 하였다.

예시로 들었던 방법을 바탕으로 미션을 진행하였다. 물론 완벽하게 쪼개었다고는 생각은 하지 않지만 최대한 의식적으로 생각하며 고민을 하였다. 또한 최종 제출 전까지 부족한 부분이 없는지 계속 코드를 확인하고 더욱 작게 분리할 수 있는 함수(메서드)를 찾기 위해 노력하였다.

6. Conclusion

4주간의 프리코스가 끝이났다. 지난 4주 동안 10년 전 고등학교 시절이 떠올랐다. 공부를 하다 졸기도 하고 피곤하면 책상에서 눈을 붙이곤 했던 나의 모습이 프리코스를 진쟁하면서 다시 볼 수 있었다. 효율적인 학습 방법은 아닐 수 있지만 목표를 위해 노력하는 과정을 다시 한번 더 겪었기 때문에 의미 있는 시간이었다.
주사위는 던져졌다. 12월 14일 1차 합격자 발표까지 약 3주간의 시간이 남아있다. 마냥 기다리는 것이 아니라 지난 미션을 다시 돌이켜 보면서 부족했던 부분을 보완하고자 한다. 스터디에 참여하면서 많은 사람들에게 배움을 얻고 보다 성장하는 시간을 가지도록 하자.
하지만 떨리는 마음은 감출 수가 없다.... 12월 14일만 생각하면 가슴이 떨려온다🫣