[우아한테크코스 4기] 프리코스 1주차: 숫자 야구 게임 회고

 

프리코스 1주 차를 끝내고 적는 회고록.

 

저번 주 수요일 그러니까 11월 26일 오후 3시에 우테코한테서 메일이 날아왔다.

1주 차 프리코스는 작년과 똑같은 (아마 재작년과도 똑같은 것일 거다.) 숫자 야구 게임이었다.

 

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

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

 

해당 레파지토리는 공개가 되어있기 때문에 누구나 풀어볼 수 있다.

프리코스를 시작하기 전에 들은 강의에서 배운 것을 바탕으로 처음에 진행을 하려고 했다.

 

1. 요구사항 파악

우선 요구사항을 꼼꼼히 읽어봤다.

코드 컨벤션뿐만 아니라 커밋 컨벤션 또한 지켜야 했다.

코드 컨벤션을 참고하라고 올려준 링크는 총 4개였다.

전부 같은 컨벤션이 아니라서 하나를 정해서 진행하는 것이 나아 보였다.

나는 그중에 airbnb의 코드 컨벤션을 보면서 따랐다.

그리고 커밋 컨벤션은 커밋 타이틀에 하나의 주제를 정하고 커밋을 하는 것이었는데

주제는 아래와 같았다.

• feat (기능 개발)
• fix (버그 수정)
• docs (문서 작업)
• style (코드 포맷팅, 세미콜론(;)을 빠트림, …)
• refactor (기능은 바뀌지 않지만 코드가 바뀔 때)
• test (테스트 코드 작성 시)
• chore (주석 또는 환경설정)

만약에 기능 개발을 했다면

"feat: 어떤 기능을 개발"과 같이 제목을 달아주면 된다.

조금 더 자세하게 알아보고 싶다면 아래의 링크를 참고하자!

 

https://gist.github.com/stephenparish/9941e89d80e2bc58a153

AngularJS Git Commit Message Conventions

 

코드 컨벤션, 커밋 컨벤션 말고도 기능 목록을 문서화해서 docs/README.md에 작성을 해야 했다. 

내가 작성한 기능들은 아래와 같다.

 

내가 작성한 기능 목록 리스트

컴퓨터가 1부터 9까지 서로 다른 임의의 수 3개를 뽑게 한다.

• [x] MissionUtils 라이브러리를 이용해서 1부터 9까지 서로 다른 수를 뽑는 함수를 만든다.

게임 플레이어가 3개의 숫자를 입력받도록 한다.

• [x] 사용자가 3개의 숫자를 입력하고 엔터 혹은 확인 버튼을 클릭했을 때, 제출이 되도록한다.
• [x] 사용자가 잘못 입력했다면 alert를 띄우고 입력창을 초기화한다.

컴퓨터가 게임 플레이어가 입력한 숫자에 대한 결과 값을 출력하도록 한다.

• [x] 입력한 숫자를 판별하는 함수를 만들고 제출이 될 때 실행이 되고 결과를 출력한다.
  • 같은 수가 자리에 있으면 스트라이크
  • 다른 자리에 있으면 볼
  • 같은 수가 전혀 없으면 낫싱

컴퓨터가 뽑은 숫자를 게임 플레이어가 맞추면 재시작 버튼이 노출된다.

• [x] 정답 결과창과 재시작 버튼이 포함되어 있는 템플릿을 정답을 맞췄을 때 띄운다.

재시작 버튼을 클릭하면 컴퓨터가 새로운 번호 3개를 뽑고 게임이 다시 시작된다.

• [x] 재시작 버튼을 클릭했을 때 컴퓨터가 새롭게 숫자를 뽑고 게임이 다시 시작된다.

2. 기능 개발

기능 개발은 크게 어렵지 않았다. 우선 1주 차이기도 하고 어려운 기능이나 요구사항이 딱히 없었다.

그런데도 진행을 하다 보니까 시간이 꽤나 걸렸다. 그래서 시간이 걸린 이유를 생각해보았다.

 

1. 코드 컨벤션, 커밋 컨벤션을 항상 생각해야 하는 게 꽤나 집중을 요구했다.

2. 뒤에 후기에도 나오지만 처음부터 너무 완벽하게 짜려고 하니까 초반에 시간이 너무 많이 걸렸다.

 

 

프리코스 전에 메일을 주신 내용에 하루에 1,2시간만 투자하면 구현할 수 있는 수준이라고 하셨는데

나는 평일에는 할 일들이 있어서 하지 못했다.

금요일 밤에 3시간 정도, 주말에 몰아서 했는데 일요일에 7-8시간? 정도 집중을 해서 구현했다.

이것도 아마 프리코스 진행이 처음이고 어색해서 조금 더 걸린 것 같다.

최종 코딩 테스트 때는 구현에만 열심히 집중할 수 있도록 노력해야 할 것 같다.

3. 마무리 및 회고

개발을 진행하면서 느낀 것과 실수한 것들을 바로바로 노션에 적어 놓았다.

그리고 코드를 제출하면서 느끼고 배운 점과 많은 시간을 투자한 부분을 생각하고

제출할 때 같이 냈다. 아래는 그 내용들이다!

느끼고 배운 점 & 많은 시간을 투자한 부분

정말 간단한 기능 구현이라서 금방 할 수 있을 줄 알았는데

코드, 커밋 컨벤션을 지키면서 구현을 하려고 하다 보니

기능 개발은 한참 전에 끝났는데 리팩터링 커밋이 기능 개발 커밋보다 훨씬 많은 걸 볼 수 있었습니다.

그리고 리팩터링을 하면서 평소에 정말 코드를 깔끔하게 짜는 것이 아니라는 것을 느꼈습니다.

그리고 진행하면서 제가 배운 것을 적어보았습니다.

1. 우선은 기능이 되도록 구현을 하자. (리팩터링은 기능이 다 구현되고 나서 뒤에 하자.)
2. 주석 처리는 chore를 사용하자.
3. 함수보다는 클래스를 사용하자.
4. boolean이 아닌 string, number를 조건에서 사용할 때는 확실히 명시를 해주자.
5. class안에서 eventListener를 할 때는 bind(this)로 this를 바인딩해주어야 한다.
6. 요구사항을 정말 잘 읽자...!

제가 많은 시간을 투자한 부분은

첫 번째로 function과 class에서의 갈등이었습니다.

평소에 함수로 코드를 짜는 것이 조금 더 익숙해서 함수로 짜고 싶었는데

airbnb 컨벤션을 보다가 function에서 this 변수를 생성하는 것보다는 class로 생성하는 것이

문맥적으로 더 이해하기 쉽다고 해서 class로 사용하는 것을 권장해서

class로 코드를 리팩터링 하는 과정에서 조금 시간이 걸렸던 것 같습니다.

(function에서는 this 바인딩을 해주지 않아도 동작하는 것들이

class에서는 안 되는 것을 까먹고 왜 안되는지 한 시간을 그러고 있었습니다.)

 

그리고 두 번째로 커밋 컨벤션에서 조금 시간을 많이 잡아먹은 것 같습니다.

기능 개발은 feat로 확실해서 크게 시간을 잡아먹지 않았는데

주석 추가 또는 단순 변수명 변경은 어떤 것을 해야 하나 검색을 해보다가

해당 부분들은 개인의 취향이 조금 들어가는 것 같아서 저도 딱 정해놓고 진행을 했습니다.

(주석 추가 (chore), 단순 변수명 변경 (refactor)으로 고정했습니다.)

 

마지막으로 처음부터 완벽하게 코드를 짜려고 하다 보니 시간이 너무 많이 걸렸습니다.

다음 주부터는 우선 기능 하나하나를 구현에만 집중을 한 다음에

리팩터링과 컨벤션을 확인하는 것이 나아 보였습니다!

또한 요구사항 기능 목록 문서는 하면서도 계속 바뀌는데 너무 거기에 한정되어서

개발 할 필요는 없다고 생각했습니다. 문서는 계속 바뀔 수 있다는 가능성을 열어두어야 할 것 같습니다.

 

코드 컨벤션, 커밋 컨벤션을 지키면서 코딩을 하다 보니

제가 평소에 하는 코딩은 정말 마구잡이로 하고 있구나 라는 생각이 들었습니다.

제가 안다고 생각했던 것도 아는 것이 아니었다는 걸 느낀 1주차 였습니다.

감사합니다.

 

refactor가 몇개야

 

이렇게 1주차가 마무리 되었다.

2주차도 1주차에 했던 것들을 거름 삼아 조금 더 나은 코드를, 조금 더 완벽하게 구현을 하고 싶다.

화이팅!

 

제출 완료

 

12월 1일 피드백이 올라오고...

우테코 프리코스에는 과제가 끝나면 해당 과제에 대한 전체적인 피드백을 보내준다.

해당 피드백은 개개인 피드백은 아니고 모든 사람에게 주는 피드백이다.

그 중에 내가 꼭 깊게 새겨야 할 피드백 몇 개를 다시 되짚고 간다.

(사실 대부분의 것들이 전부 마음 깊게 새겨야 하지만... 정말 안되는 것 몇 개를 들고 왔다.)

1.  이름을 통해 의도를 드러내라 & 축약하지 마라

클래스나 메소드, 변수명의 명명에 온 힘을 다하자.

사실 이 두 개를 지키려면 정말 많은 생각을 해야하는데 이름을 짓는데 시간을 많이 쓰라는 내용이었다.

그리고 메서드 같은 경우 이름을 통해 의도를 드러내려면, 함수가 하나의 일만 하도록 명명하게 지어야한다.

함수가 두 가지 일을 하면 명명을 어떻게 해야하는지 자연스럽게 의문을 갖기 때문이다.

2. 공백 라인을 의미 있게 사용해라

공백은 문맥을 처리하는 부분에 사용하자. 남발하지 말자.

3. 의미 없는 주석을 달지 않는다

내가 1주차 과제에 모든 함수와 설명이 필요한 로직에 주석을 달았는데
최대한 변수명과 함수명에 의도를 드러내고, 필요없는 주석은 달지 않고
의도를 드러내기가 힘들다면 그 때 주석을 달자!
(...내 과제를 보셨나?)

4. 커밋 메세지를 의미 있게 작성하라

커밋 타이틀이 아닌 메세지를 강조하신 것.

해당 커밋에서 작성한 내용에 대해서 이해가 가능하도록 작성을 하자.

5. 기능목록을 재검토하라 & 업데이트하라

기능목록 README.md는 계속 변경될 수 있으니

처음부터 완벽하게 정리해야 한다는 부담을 가지기보다 계속 업데이트를 하자.

그리고 변수명이나 클래스명과 같은 시그니처와 반환값은 언제든지 변할 수 있기 때문에

기능목록에서 언급을 하지 않는게 좋다고 하셨다.

그리고 중요한 것은 예외 상황도 기능 목록에 정리를 하라고 하셨다.

1주차 과제를 진행하면서 내 스스로 내가 만든 기능목록에 억압이 된 느낌을 받았었는데

귀신같게도 1주차가 끝나자마자 나의 고민을 들여다 보셨는지 피드백에 적어주셨다.

 

이번 2주차 과제에서는 피드백과 내가 반성한 것들을 잘 적용해서 조금 더 완벽하게 하자!