1주차에 이은 2주차…
1주차를 마치고 리뷰할 시간도 없이 2주차를 시작하게 되었습니다.
이번 2주차에서는 특이하게 TDD를 공부해보세요! 라는 내용이 있었습니다.
처음에은 ‘에이 그냥 npm test를 돌리면 맞겠지~’ 라고 생각한 나의 안일한 판단 때문에 코드를 지우게 되었습니다. 그에 대한 내용으로 제가 경험한 2주차의 경험을 적어보겠습니다.
숫자야구게임 만들기
컴퓨터가 랜덤한 반환한 서로 다른 3자리 숫자를 사용자가 3자리 숫자를 입력해서
입력한 숫자에서 해당 숫자+위치가 일치한 경우에는스트라이크
숫자는 들어있지만 위치가 다른 경우볼
스트라이크와 볼이 해당하는 경우가 없을 때는낫싱을 출력한다.
어 뭔가 잘 안되는데…?
먼저 저는 해당 문제를 접근하면서 코딩테스트 느낌대로 뭐 입력 받고 그것을 돌리면 되겠지라고 생각하면 1주차 보다 간단한 문제이지 않을까 생각했습니다.
금방 끝나겠지라고 생각한 저를 보니 인터스텔라의 “그 장면”이 떠오르더군요.
play() {
this.printStartSentence();
this.getRandomNumber();
console.log(this.randomNumber);
do {
this.inputLine('숫자를 입력해주세요');
//계산중....
} while (this.input);
}
무엇인가 이상한 결과를 받았다. 어째서 저 반복문을 돌지 않을까?
왜 이럴까?
일단은 어떻게 이렇게될까를 생각해봤는데 내가 생각하는 scanf와 좀 다른 것 같다고 생각했습니다.
일단 처음 이에 대한 흐름을 예측해보았을 때 readLine의 경우 사용자가 입력하는 과정을 기다리지 않고 바로 다음 줄을 해석합니다.
인터프리터 언어에서 한 줄씩 읽어나간다고 가정했을 때 안에 함수 값을 저장하고 가는 것이 아닌 바로 함수를 실행하고 입력 전에 undefined로 계속해서 들어가게 되는 현상을 확인할 수 있었습니다.
정확히는 입력과정 전에 바로 다음 줄이 실행되기에 이런 현상이 발생한다고 추측하였습니다.
또한 이 과정에서 Missionutil을 확인하였을 때도 readLine은 동기처리로 되어있기에 제가 알고리즘처럼 풀던 방식은 안된다는 것을 깨달았습니다.
그러면 어떻게 해야할까?
일단 처음 떠오른 생각은 비동기 처리였습니다.
입력과 계산 값을 기다려주고 결과가 처리되면 바로 다음을 읽어나는 async , await과 Promise를 활용하여 비동기 처리를 통해 지원하였다.
그래서 각 계산을 담당하는 함수를 Promise로 감싸서 문제를 해결하려했습니다.
function inputLineSync(questionText) {
return new Promise((resolve, reject) => {
Console.readLine(questionText, (input) => resolve(input));
});
}출력은 정상적으로 나오고 있었습니다.
이렇게 저는 완벽하게 해결하였군! 생각했지만 어림도 없지!
테스트 넌 뭐니?
바로 테스트 코드에서 절대 통과가 불가능 했습니다. 왜냐하면 테스트 코드를 읽으면서 분석하였는데, 테스트 코드는 동기 상태이기에 아직 입력이 다 들어가지 않은 상태에서 출력이 나왔는지를 검사가 이루어져서 테스트가 통과할 수 없는 구조였다.
테스트 코드 Jest 분석에 대해서는 다다음 포스팅에서
그러니 테스트를 통과하기 위해서는 동기적인 코드를 생각해서 작성해야한다.
동기적으로 하기 위해서는…
그렇다면 일단 반복문은 불가능하다는 것을 깨달았으니, 이제 이걸 어떻게 해야하나라는 고민에 빠졌습니다.
과연 어떻게 할것인가에 대한 고민 속에서 다시 한번 과정을 생각합니다.
결국에는 readLine이 먼저 실행되는 구조 속에서 연산을 진행해야한다.
그렇다면 연산하는 과정 속에서 함수 호출이 이루어져야하지 않을까라는 생각이 들었고
다시 입력해야하는 경우 자기 자신을 불러오는 구조?
그렇게 생각하여 콜백형식의 구조로 작성하게 되었습니다.
inputUserNumber (questionText) {
Console.readLine(questionText, (input) => {
this.isValidateInputNumber(input);
this.userNumber = stringToArray(input);
let result = compareNumber(this.userNumber, this.randomNumber);
if (result) {
this.gameOption('게임을 새로 시작하려면 1, 종료하려면 2를 입력하세요.\n');
} else {
this.inputUserNumber(questionText);
}
})
}
상기하면서 다시 쓰고 있지만 역시 좀 구조가 좋지는 않아 보입니다. 허허…
리마인드..
현재 3주차가 마무리된 지금 아직 4주차와 최종코테를 남겨두고 있습니다,
2주차를 리마인드하는 과정이기에 현재 3주차도 4주차와 더불어 진행하고 최종코테 이전에 한번 4주차와 함께 정리해볼 예정입니다.
느낀점
2주차에서 가장 크게 문제를 생각하며 보게 된 것은 위와 같은 readLine의 활용이 어렵다는 것입니다. 여러번 반복 입력에 대한 처리를 접근하는 방식을 알 수 있는 프리코스 과정이었습니다.
처음에는 어 이게 안되네. 아 이거 누가만든거야 하면서 짜증이 나기도 하였습니다.
언제나 문제는 바로나! 의심은 언제나 나에게로 향해야한다는 것을 깨닫고 문제를 접근하였습니다.
어려운 과제라고 해도 문제요소를 하나씩 지워간다면 해결할 수 있을테니, 급한 마음은 접어두고 왜이러지? 왜이럴까? 라는 의문으로써 문제를 접근해야한다고 느꼈습니다.
