Facts
- 페어 프로그래밍을 하면서 로또 게임 리팩토링을 진행했다.
- 자동차 경주 게임에 대한 코드 리뷰를 받아서 수정했다.
- 로또 게임을 혼자 구현해봤다.
Feelings & Findings
페어와 로또 게임 리팩토링을 진행했는데, 나는 아직 아이디어는 많지만 빠르게 수정하는 능력이 부족한 것 같다. 그래서 나는 알려주는 역할이고, 페어가 빠르게 코드를 수정하는 역할로 굳어진 것 같은데 이것은 페어 프로그래밍을 하는 의미가 없다고 생각해서 2단계 미션을 할 땐 꼭 내가 해야겠다고 말을 해야겠다.
하지만 너무 느려서 눈치가 보인다...
그래서 오늘은 2시간 이내로 로또 게임을 구현하겠다는 목표를 가지고 혼자 진행해봤다. 절대 불가능할 것 같다고 생각했지만 성공했고, 은근히 나도 빠르다는 것을 알게 되었다. 자신감이 생기는 걸 보니 좋은 것 같고, 매일 이런 연습을 해야겠다.
자동차 경주 게임에 대한 코드 리뷰를 받았는데, 충격적이었다.
우선, document.querySelector, document.querySelectorAll에 대해서 $, $$로 구현을 했었는데, 이것을 하나로 합쳐서 그 안에서 element를 반환하지 말고, 클로저를 사용해 각종 메소드도 사용할 수 있도록 구현을 해보라고 하셨다.
나는 $('car-input').addEventListener()와 같이 사용할 수 있어야 한다고 생각했고, 이를 위해서는 반환 값으로 반드시 element가 들어가야 했다. 하지만 리뷰어의 의견대로 반환 값으로 메소드를 담은 객체를 반환하게 되면 element를 도저히 사용할 수 없었다.
그래서 어떻게 해야할지 방법을 찾다가 객체에 구조 분해 할당으로 element를 반환하면 되지 않을까라는 생각을 했는데 이상하게도 {...element}는 빈 객체를 반환했다. 이유는 조금 더 알아봐야겠다.
결국 리뷰어에게 다시 피드백을 받았는데, addEventListener을 사용하고 싶다면 객체를 반환할 때, addEventListener도 만들어서 반환하라고 하셨다.
즉, 나만의 $ 함수를 만들라는 것이었다. 기존의 것을 사용하려면 그냥 document.querySelector을 사용하면 된다.
이 의미를 깨달았고, 내일은 꼭 해보려고 한다.
또 다른 리뷰로는 setTimeout과 setInterval에 대한 차이를 알아보라는 것이었는데, 난 이 둘의 차이가 단순히 setTimeout은 한 번만 실행, setInterval은 여러 번 실행이라는 차이만 있는 줄 알았다.
하지만 알고보니 setInterval을 1초로 설정해두면 1초 후에 콜백 함수가 실행되고, 실행이 끝나면 다시 1초 후에 콜백 함수가 실행되는 것이 아닌 콜백 함수의 실행 시간도 interval로 사용된다는 것이었다. 즉, 콜백 함수의 실행 시간이 0.5초라면 interval은 1초가 아닌 0.5초인 것이다. setInterval은 단순히 1초 간격으로 콜백 함수를 실행하라는 명령만 내릴 뿐...
그래서 내가 사용한 setTimeout은 강제로 시간을 지연시켜 로딩바를 띄워준 것이고, setInterval은 콜백 함수와 콜백 함수 사이의 지연된 시간에 로딩바를 띄워준 것이라는 차이점이 있었다.
새로운 사실을 알게 되어서 기분이 좋은 하루다.
아, 그리고 alert도 화면에 출력하는 것이기 때문에 뷰에서 다뤄야하지 않을까라는 생각을 했었는데, 리뷰어에게 확답을 받았다.
alert은 화면을 담당하는 것이기 때문에 컨트롤러는 몰라야 하고, 뷰가 알아야 한다는 것이다
다만, 메소드 명을 alert으로 하면 안된다. 왜냐하면 alert이 아닌 커스텀 다이얼로그를 띄워야 할 수도 있고, 여러 기능이 추가될 수도 있기 때문이다. 그래서 범용적인 이름을 지어주고, 컨트롤러에서는 어떤 메시지를 보내야 할 때, 뷰에게 메시지 자체만 전달하면 된다는 피드백을 받았고, 나는 메소드 명을 showMessage라고 지었다.
이름이 괜찮다고 하셨다!! 정말 기분이 좋은 날이다.😀😀
Plan
- 매일 회고를 작성하면서 배웠던 것을 돌이켜보기
- 새롭게 배운 것이 있으면 항상 기록해두기
- 배운 것을 까먹지 않기
