🔗 깃허브 주소
https://github.com/woowacourse-precourse/javascript-racingcar-6/pull/92
💡 고민하고 새로 배운 내용
1. Jest 테스트 코드 수정
기존 테스트 코드인 ApplicationTest.js에 맞춰 App.js 를 수정하다 보니 기능 요구 사항을 전부 반영 하기엔 한계가 있어서 직접 테스트 코드를 수정해가며 작업했습니다.
그 전에는 테스트 코드에 임의로 설정되어 있던 값 input 값이 1 이었기 때문에 n 번 반복되도록 경주 실행하는게 정상적으로 작동되지 않았습니다. 입력 받은 횟수가 1이 아닌 여러 번인 경우를 고려하기 위해 ["pobi,woni", "1"] 인 부분을 ["pobi,woni", "3"] 로 수정하고, random 값을 [4, 6, 6, 4, 6, 6] 이라고 임의로 수정하여 동점자까지 모두 출력 해낼 수 있도록 처리했습니다.
직접 테스트 코드를 수정해가며 작업을 하니 Jest의 테스트 코드에 대한 이해도를 더 높일 수 있었습니다.
2. 기능 별로 함수 작성하기 (인덴트 2 이하 유지)
이번 과제를 진행하면서 기능 별로 함수를 분리하고 기능 별 커밋을 올리는 등, 좀 더 깔끔한 작업을 하는 데 중점을 두었습니다.
또한 1주차 과제와는 달리 2주차 과제에서는 각각의 메소드들을 별도의 폴더 및 파일로 분리하여 코드를 작성했습니다.
ㄴsrc
ㄴconstants
ㄴconstants.js
ㄴgetAttempts
ㄴGetAttemptsFromUser.js
ㄴgetCarNames
ㄴGetCarNamesFromUser.js
ㄴgetResults
ㄴGetResults.js
ㄴApp.js
ㄴindex.js1주차 과제 때는 기능 구현에 초점을 두고 커밋 내용에는 크게 신경을 쓰지 못했는데 2주차 과제는 기능 별로 커밋하기 위해 신경 써가며 작성한 커밋 내역들이 나중에 리팩토링을 하거나 협업을 하게 될 때 더욱 효율적으로 도움이 되겠구나 하고 깨닫는 계기가 된 것 같습니다.
커밋 양식은 과제에 주어진 요건대로 Angular Commit Message Convention을 따랐습니다.
3. 클래스 변수 대신 메소드 매개변수 처리
테스트 코드를 통과하고 리팩토링을 진행하며 어떤 코드가 클린한 코드일까에 대한 고민을 하게 되었습니다.
제 초기 코드는 모두 클래스 변수(this.cars, this.attempts)로 처리되어 있기 때문에 메소드 간 독립성이 떨어졌습니다. 이러한 문제를 해결하기 위해 클래스 변수들을 메소드 매개변수(cars, attempts)로 처리함으로써 독립성을 갖출 수 있도록 했습니다. 매개변수로 처리하는 과정에서 여러 시행착오를 겪었지만, 처리 성공 후 다시 테스트가 통과되는 것을 확인하면서 1주차 때보다 더 성장했음을 느낄 수 있었습니다.
4. Static 상수 처리
이번 과제에서는 상수 처리를 같은 App.js 파일 내에서 하지 않고 별도의 파일 constants.js로 분리시켜서 import 해오는 방식을 사용했습니다. 초반에는 객체 내 const 로 정의했다가 import 해오는 과정에서 오류가 나서 헤맸습니다. 해결 방법을 찾던 도중, 객체가 아닌 클래스로 정의해야 하며, 클래스 내에서 상수 값을 정의할 때 일반적인 변수에서 사용되는 const 대신 클래스의 정적 멤버를 정의하기 위한 static을 사용해야 한다는 것을 새로 배우게 되었습니다.
다음은 제 수정 전과 수정 후 코드 내용입니다.
// constants.js 수정 전
export default class Message {
const GET_ATTEMPT_MESSAGE = "시도할 횟수는 몇 회인가요?";
const GET_CARS_MESSAGE = "경주할 자동차 이름을 입력하세요 (5자 이하): ";
const CARNAME_ERROR =
"[ERROR] 자동차 이름이 잘못된 형식입니다. (5자 이하만 가능)";
const ATTEMPT_NUMBER_ERROR = "[ERROR] 숫자 형식이 아닙니다.";
const WINNER_IS = "최종 우승자: ";
}
// constants.js 수정 후
export default class Message {
static GET_ATTEMPT_MESSAGE = "시도할 횟수는 몇 회인가요?";
static GET_CARS_MESSAGE = "경주할 자동차 이름을 입력하세요 (5자 이하): ";
static CARNAME_ERROR =
"[ERROR] 자동차 이름이 잘못된 형식입니다. (5자 이하만 가능)";
static ATTEMPT_NUMBER_ERROR = "[ERROR] 숫자 형식이 아닙니다.";
static WINNER_IS = "최종 우승자: ";
}5. 직접 테스트 코드 작성
이번에는 메소드 별로 테스트 코드를 직접 작성해보는 경험을 할 수 있었습니다. 직접 예외 상황에 대한 처리 및 정상 작동 처리를 위한 코드들을 짜봄으로써 Jest의 문법을 더욱 손에 익힐 수 있었으며, unit test의 중요성을 느낄 수 있었습니다.
🔆 느낀 점
1주차에는 Jest의 개념 및 코드 내용을 익히는 것이 주요 목표였으나, 2주차 프리코스 과제 [자동차 경주]를 진행하는 동안에는 코드를 어떻게 더 깔끔하게 작성할 수 있는지에 중점을 두어 고려할 수 있는 좋은 기회가 되었습니다.
코드의 인덴트가 2를 넘어서는 안됐으며, 그렇기에 기능 별로 함수를 더 꼼꼼하게 나누려고 노력했습니다. 더 나아가
App.js파일 안에서 모든 것을 처리하지 않고 기능 별로 페이지를 나눔으로써 코드의 가독성을 높이고자 했습니다.또한 1주차 때 Jest의 코드 내용을 파악하느라 공부했던 것이 2주차에도 적용이 되어 직접 테스트 코드를 작성하고 수정해가며
npm test를 진행할 수 있어 뿌듯한 경험이었습니다. 1주차 때 Jest에 대한 개념 공부를 제대로 해놓지 않았으면 많이 헤맸을 것 같습니다. 계속해서 꾸준한 발전을 이루기 위해선 매주 과제마다 더욱 꼼꼼하게 살펴보고 공부 해야겠다는 다짐을 하게 되었습니다.
