레벨1 행운의 로또 - step1

개요

미션	기간	Repository	PR & Review
행운의 로또 1단계	23-02-14 - 23-02-16	Repo	PR & Review

🚀 미션 진행 과정

레벨 1의 두 번째 미션은 콘솔 기반의 행운의 로또 게임을 구현하는 것이다. 로또 게임은 이전 프리코스에서 진행이 되었던 미션 중 하나여서 큰 부담감 없이 시작할 수 있었다. 하지만 새롭게 추가된 프로그래밍 요구 사항 중 TDD로 구현하는 것이 있었기 때문에, 한 번도 이를 이용한 적이 없었던 나에겐 어려움으로 다가왔다. 뿐만 아니라 함수(메서드)의 들여 쓰기 depth를 1단계로 해야 했기에 고민할 부분이 많이 생겼다.

TDD로 구현하기 위해 우선 페어와 함께 기능 목록을 작성한 후 어떤 기능을 TDD로 구현할 수 있일까 고민을 하였다. 첫 TDD로 구현하는 것이었기 때문에 페어인 쵸파와 함께 어떻게 적용을 하면 좋은지 많은 이야기를 하였다. 일단, 기능 목록을 작성한 뒤 외부 모듈의 의존성을 받지 않고 매개변수를 받아 실행될 수 있는 함수 위주로 테스트 코드를 작성하기 시작하였다. 즉, Mock 함수없이 매개변수만을 이용하여 테스트를 진행할 수 있는 기능들에 대해 고민을 하였다. 이런 과정에서 행운의 로또 게임에 필요한 함수들을 최대한 작은 단위에서 생각할 수 있었다.

또한 재사용할 수 있는 함수에 대해서도 TDD를 통해 많이 생각할 수 있었다. 재사용할 수 있는 함수란, 어느 객체든 이를 필요로 할 때 가져다 쓸 수 있는 것을 의미하며 이 또한 가장 작은 단위의 함수라고 생각하기 때문이다. 나와 페어는 로또 번호, 당첨 번호, 보너스 번호, 구입 금액의 유효성 검사에 필요한 것들이 무엇이 있는지 생각하였고 공통된 역할을 하는 함수를 만들어 TDD를 진행하였다.

미션을 진행하면서 TDD 구현에 거의 이틀의 시간을 소비하였다. 그만큼 많은 고민을 하였고 고민을 통해 전체적인 흐름을 잡을 수 있었다. TDD가 끝난 후, 로또 게임이 진행되기 위해 입출력과 입력에 따른 유효성, 그리고 TDD를 하면서 이미 만들어 두었던 클래스 또는 객체의 메서드들을 연결하며 기능을 완성시켰다.

기존에는 입력부터 시작하여 게임의 흐름에 맞게 코드를 작성했다면 이번 미션은 TDD를 적용하여 작은 단위의 함수부터 만들어 나갔다. 처음에는 TDD가 어렵고 복잡하다고 느꼈지만 오히려 함수를 분리하고 객체의 역할을 생각하며 재사용할 수 있는 함수들을 생각할 수 있어 전체적인 완성도는 이전 미션보다 더 높아졌다고 생각한다. 비록 TDD를 알맞게 사용했는지는 의문이지만 이런 시도가 뿌듯하였다.

👬 페어프로그래밍 진행 과정

이번 미션의 페어는 쵸파이다. 두 번째 페어프로그래밍이라서 그런지 페어프로그래밍에 거부감은 없었다. 오히려 하원을 하고 나면 내일 아침이 되어서 빨리 페어프로그래밍을 통해 미션에 대한 이야기를 하고 싶었다. 이번 미션은 저번 미션의 페어프로그래밍보다 서로 이야기하는 시간이 많았다. TDD를 통해 미션을 진행하는 것도 하나의 이유지만, 또 다른 이유는 서로 각기 다른 의견이 보다 많이 있었기 때문이다. 이 과정에서 쵸파에게 많은 것을 배울 수 있었다. 특히 자바스크립트의 기본 동작에 대해 생각을 많이 해보았다. 이전에 나는 단지 배열 메서드를 잘 사용하는 것, 함수를 잘 활용하는 것, 객체에 알맞은 역할을 부여하는 것과 같이 실제 미션에 도움이 되는 것 위주로 생각을 했다면 쵸파는 그것뿐 아니라 자바스크립트가 동작하는 원리에 대해 고민하여 코드를 작성하는 모습을 보였다. 이를 옆에서 보며 많은 것을 배울 수 있었다. 간단한 예로는 아래의 코드를 통해 알 수 있다.

const arr = ['1', '2', '3'];

const numbers1 = arr.map((num) => Number(num));
const numbers2 = arr.map(Number);

number1과 number2는 같은 동작을 한다. 위의 코드가 내가 작성했던 코드라면 아래는 쵸파가 제시해 준 코드이다. 이런 점이 나에게 신선하게 다가왔고 나도 기본기를 잘 다져야 겠다는 생각을 하게 되었다.

뿐만 아니라 if 문의 빠른 리턴에 대해서도 다시 생각을 하게되었다. 왜 if-else 문 말고 빠른 리턴을 사용하는지에 대해 의문을 가지고 있지 않았다. 단지 더 깔끔해 보인다는 이유였다. 하지만 이번 페어프로그래밍에서 쵸파의 기준을 듣고 너무 공감이 되었다. 이를 간단히 정리하자면 아래와 같다.

• if 문의 빠른 리턴: 어떤 조건에서는 아무런 동작이 필요 없을 때
• if-else 문: 각기 서로 다른 조건에서 다른 동작이 필요할 때

코드의 의미를 분명히 하는 느낌이 너무 좋았다.

함께 오류를 맞이하고 이를 해결하기 위해 투자한 시간도 적지 않아 있었다. 그중 생각나는 것은 두 가지가 있다. 하나는 reduce 메서드의 사용이고 다른 하나는 정규 표현식이다. 나와 쵸파 모두 reduce 메서드에 대해 잘 알고 있다고 생각을 하면서 메서드를 사용했다. 하지만 reduce 메서드에서 계속 오류가 발생하였고 이는 메서드의 두번째 매개변수인 initialValue을 적절히 활용하지 않았기 때문이다. 이런 과정이 페어프로그래밍을 하면서 얻을 수 있는 이점이라고 생각한다. 혼자서도 충분히 발견할 수 있지만 함께 해결하는 과정을 통해 보다 머릿속에 더 잘 각인되는 느낌이다.

정규 표현식도 마찬가지이다. 입력값 유효성 검사를 위한 정규 표현식을 작성하기 위해 많은 시간을 투자하였다. 잘 해결되지 않아 지칠 때 쯤, 포기하지 않는 쵸파의 모습을 보며 나도 의지를 다질 수 있었다. 결국엔 정규식이 완성되어 잘 사용하고 있다.

앞으로 종종 쵸파에게 궁금한 점이나 고민되는 점이 있다면 찾아가서 함께 이야기를 해봐야겠다!

👍 잘한 점

• TDD를 포기하지 않고 끝까지 끌고갔다.
• 재사용할 수 있는 함수를 만들어 적재적소에 잘 활용하였다.
• 페어와 다른 의견이더라도 주저하지 않고 나의 의견을 말했다.
• 11시까지 남아서 페어프로그래밍을 하였다.
• 페어 회고를 매일 하였다.
• 페어에게 맛난 간식을 주었다.

👎 아쉬운 점

• 자바스크립트의 기본기가 부족하여 페어가 이야기 한 내용을 이해하는 데 많은 시간을 사용했다.
• 기능 목록에 따른 커밋이 잘 이루어지지 않았다.
• 페어와 함께 정한 페어프로그래밍 규칙을 잘 지키지 않았다.(시간)

👊 앞으로의 각오

• 일단, 자바스크립트의 기본기를 잘 다지도록 하자!
• 페어프로그래밍을 진행하면서 나만의 규칙을 정하자! 물론 그 근거도 함께 정리!

🛠️ 리팩터링

1. 매직넘버 상수화

부족한 매직넘버의 상수화를 진행하였다. 항상 매직넘버를 상수화를 할 때, 어디까지 상수화를 해야 하는지 고민이다. 이런 숫자는 상수화를 하지 않고도 해석을 할 수 있지 않을까? 하면서 상수화를 하지 않았던 부분을 추가적으로 상수화를 하였다.

내가 아니라 해당 코드를 읽는 사람을 배려하는 코드를 작성하도록 하고, 의미가 있다면 상수화에 대해 고민하자. 네이밍도 잘하도록..!

추가적으로 해당 리펙터링을 하면서 객체의 키에 변수를 적용할 수 있는 방법에 대해 배우게 되었다. 객체의 키가 1,2,3과 같은 숫자인 경우, 해당 숫자에도 의미가 있을 수 있으므로 이를 상수화를 할 필요가 있었다. 이를 위해 기존에 만들어 두었던 상수를 변수로 활용하였다. 이는 아래의 매직넘버 상수화 3에서 확인할 수 있다.

매직넘버 상수화1
매직넘버 상수화2
매직넘버 상수화3

2. 함수 분리

함수가 한 가지의 일을 하도록 만드는 것을 연습 중에 있다. 연습을 하면서 느낀 점은 함수명과 함수가 하는 기능을 잘 연관 지어야 보기 좋고 읽기 좋은 코드가 된다는 것이다. 또한 재사용이 가능한 함수도 분리하여 작은 단위의 함수를 만드는 것이 확장성과 가독성을 고려했을 때 좋은 방향이라고 생각한다.

리펙터링을 통해 함수 분리를 진행한 것 중 하나의 예를 들자면, 수익률을 계산하는 함수에서 숫자의 세 자리마다 ,을 찍는 것을 분리하였고 해당 기능을 유틸 함수로 만들었다. 크게 생각하자면 세 자리마다 ,를 찍는 것도 수익률 계산에 필요한 기능여서 하나의 함수에서 작성할 수 있다고 생각한다. 하지만 함수를 분리한 이유는 아래와 같다.

1. 해당 기능은 다른 곳에서도 충분히 사용할 수 있다.
2. 1000%를 1,000%으로 바꾸는 것은 하나의 일이라고 생각하기 때문에 다른 함수가 담당해야 한다.

실제로 분리한 함수는 다른 곳에서도 재사용하니 더욱 유용하게 느껴졌다.

함수 분리1
함수 분리2