우아한 테크 코스 5기 2주차 프리코스 회고록

https://github.com/woowacourse-precourse/javascript-baseball

GitHub - woowacourse-precourse/javascript-baseball: 숫자 야구 게임 미션을 진행하는 저장소

 

예상했던대로 전 기수에서 했었던 야구게임을 구현하라는(?) 과제를 받게되었다. 그래서 React에 익숙해져버린 나로써는 난감했다. VanilaJS로 DOM을 다를 생각에 살짝 걱정은 했었는데, 다행히 터미널에서 실행하는 게임을 만드는건데, 위 레포를 들어가서 읽어보면 알겠지만 기능은 간단하지만 지켜야할 사항들이 있었다. 그것들을 지키면서 하기가 여간 쉬운게 아니였다. 

 

일단 코딩을 시작하기전에 어떤 기능을 먼저 구현할지 생각하고 ReadMe에 적어놓고 시작하는 것이였다. 물론 단순해서 어렵진 않았지만 이렇게 작업한적이 없었다. 그리고 이게 일주일씩 주어지다보니까 계속계속해서 신경을 쓰게 되었다. 그래서 작업하면서 생각나는 어려웠던 점을 적어보고자 한다. 

 

1. 컨벤션을 지키자.

 

우테코 측에서는 이미 정해주었다. AirBnB 코딩 컨벤션과 Angular의 커밋 컨벤션을 내려주었다. package.json을 변경을 하지말라는 것이였다. 그래서 Eslint, Prettier를 따로 설정하면 안될 것 같았다. 그래서 나중에 코드를 짜고 난 후, 내가 의문이 갔던 부분에 대해서 에어비엔비 컨벤션 레포가서 검색해보면서 하나하나 고쳐나갔던게 기억난다. 

ex) 문자열은 ('')로 감싸라는 것, if, while 소괄호 앞에 스페이스 넣기 

 

커밋 컨벤션은 내가 항상 계속 써왔던 부분이랑 비슷해서 크게 이질감은 없었는데, 워낙 프로그램 자체가 작다보니 스코프를 넣기가 애매했다. 그래서 optional인 스코프를 안넣고 주로 타입과 주제, 바디 만 바꿔가면서 커밋을 했었다. 

 

2. Jest를 사용한 테스트 

TDD를 통해 개발을 하라는 건가(?) 하는 생각이 들었다. 요즘 TDD에 대해서 많이 들리니까 하지만 그렇다면 기능목록에 따른 테스트 코드 먼저 작성 후 개발을 시작하라고 요구사항에 적혀있지 않을까란 생각을 했다. 

그래서 이 문구를 보고, 아 ~ 테스트 도구에 익숙해지고, Unit Test를 해보라는 뜻이구나 라고 생각을 하게 되었고, 먼저 동작을 구현하고 테스트 코드를 더해가면서 내 코드가 맞는지 확인을 하였다. 근데 아무래도 처음써보는거라서 굉장히 힘들었다. 단순한 mock 함수도 그렇고 아예 사전지식이 없으니 쉽지 않을 수 밖에.. 전에 멘토한테 질문을 한적이 있는데 "현재 프로젝트에 함에 있어 사전지식이 없는 상태에서 모르는 기술스택에 마주했을 때, 너무 막무가내로 코드짜고 너무 나에게 오버스펙인가라는 생각을 자주하게 된다"라는 질문에 멘토는 그때 지식을 대출받는 다는 말을 하셨다. 개발자는 항상 알고있는 기술을 사용하게 되는 일이 많이 없다고 하셨다. 그럴때는 일단 해당 기술을 사용하면서 대출을 받고 그 후 공부를 하면서 계속 갚아나가면서 리팩토링을 한다고 말해주셨는데 많은 공감을 했었다. 그런데 어떡하겠나 일단해야지 

 

https://jestjs.io/docs/getting-started

Getting Started · Jest

 

그런데 일단 우테코 측에서 먼저 주었던 테스트 코드 예시를 보면서 해당 함수가 어떤 의미를 하는지 찾아가 보면서 내 나름의 코드를 작성해 나아갔다. 나는 최대한 작게 Unit Test를 하려고 잘게 짤랐지만 간단한 예외처리에 대해서만 내가 mock 함수를 만들어서 사용을 했다.

나의 귀여운 Jest Test Code

 

3. Class

솔직히 나는 일단 자바스크립트 공부하면서 Class를 사용해본게 정말 손꼽을 정도로 적었고, 과제는 Class로 내려왔다. 

OOP로 하라는건가 싶더라 그래서 바로 미친듯이 관련 영상 보고 공부했다. 

https://www.youtube.com/playlist?list=PLuHgQVnccGMAMctarDlPyv6upFUUnpSO3 

JavaScript Object Oriented Programming

 

결론적으로는 메인코드에서는 게임 자체의 흐름만 알 수 있는 코드를 넣고, 랜덤 숫자만들거나 유효성검사를 하는 그런 메소드들은 굳이 코드에 보일 필요가 없다는 생각이 들어서 추상화를 하고자 했고, GameUtil이라는 클래스를 만들어서 메인코드에 상속을 시키면서 핵심적인 코드만 볼 수 있도록 리팩토링했었다. 

 

---

제출 기한이 끝나고 다음날 공통 피드백을 전달받았다.

전 주차처럼 내가 부족했던 것을 한번 적어보고 수정해 나가보도로 하겠다.

 

1. README를 상세히 작성한다. 

이번 2주차에는 README에 힘들 많이 실어서 PR을 하지는 않았다. 이게 무슨 소용일까 하는 생각이였던거 같다. 근데 아니나 다를까, README 를 상세히 작성하라는 피드백이 와버렸다 ;; 어떻게 딱 내 마음을 읽으셨는지... 정신차리고 다시 다른 사람들꺼를 보니 거의다 메뉴얼 수준의 README를 자랑하셨다. 다음 주차부턴 열심히 README에도 많이 신경쓰도록 해야겠더라.

 

2. 기능목록 관련 

이번에는 철저하게 딱 기능 목록을 여섯개로 추려서 여섯줄만 작성했는데, 예외 처리에 대한 것과 그리고, 기능 개발함에 있어서 변경되는 사항도 계속 업데이트하면서 살아있는 문서로 만들라는 것이였다. 

 

3. 값을 하드 코딩하지 않는다. 

고백하자면 모든 메세지나 출력 관련해서 문자열관련해서 나는 하드코딩을 해버렸다. 상수를 사실 생각을 못한 것은 아니였으나 그냥 내가 부족한게 맞다. 다음부터는 무조건 상수로 빼내서 수정을 해야겠다는 생각뿐이다. 

잔인한 나의 하드 코딩의 흔적들..

4. JavaScript에서 객체를 만드는 다양한 방법을 이해하고 사용한다.

사실 OOP에 굉장히 익숙하지 않은 나로써는 쉽지 않은 미션이였다. 그래서 급하게 관련 영상과 자료 찾아가면서 공부를 해보고 나중에 다른 사람들이 올린 PR을 보니 역시 ... 나는 안될놈인가 싶기도 하고, OOP와 Class로 계속해서 다른 프로젝트도 해보면서 실력을 늘려나가야 할 거 같다. 아무래도 이 과정이 끝나고 DeepDive를 다시한번 봐야할 것 같다.

 

 

이상 2주차 회고록 이었다. 정말 공부할게 너무 많네.. 

https://github.com/froggy1014/javascript-baseball

GitHub - froggy1014/javascript-baseball: 숫자 야구 게임 미션을 진행하는 저장소