우아한 테크코스 6기: 프리코스 1주차 후기

최종 코드

https://github.com/woowacourse-precourse/javascript-baseball-6/pull/867

[숫자 야구 게임] 박진효 미션 제출합니다. by jinmidnight01 · Pull Request #867 · woowacourse-precourse/javascri

 

1차 코드

https://github.com/woowacourse-precourse/javascript-baseball-6/pull/521

[숫자 야구 게임] 박진효 미션 제출합니다. by jinmidnight01 · Pull Request #521 · woowacourse-precourse/javascri

 

---

Intro

처음에 과제 명세서를 봤을 때는 간단한 프로그래밍 과제라고 생각했습니다. 

 

하지만, 보면 볼수록 어떻게 구현하느냐에 따라 쉬울 수도 있고 어려울 수도 있겠다는 생각을 했습니다.

왜냐하면 지금까지 프로그래밍을 배우거나 프로젝트를 진행할 때

 

1. Javascript 컨벤션을 엄격하게 신경써보거나

 

2. 기능별로 Commit을 세세하게 하면서

 

코드를 작성해본 적이 많이는 없었기 때문입니다. 이전까지는 팀원들과의 소통이나 주석으로 해당 사항들을 어찌저찌 해결했던 것 같습니다. 하지만, 우테코에 지원한 본질적인 이유도 결국 토이 프로젝트나 소규모 프로그램에 그치지 않고 실무에서 효과적으로 일하고 효율적으로 협업할 수 있는 개발자로 성장하고 싶었던 것이기에, 프리코스부터 최대한 위의 기준들을 최대한 신경쓰며 과제를 수행해봐야겠다고 생각했습니다.

 

---

진행 과정

Javascript 컨벤션 (airbnb)

그래서 1차 코드를 작성할 때, 우선 .eslintrc 파일과 .prettierrc 파일을 생성하여 Javascript 컨벤션을 최대한 지키고자 했습니다. 과제 명세서에 따라 Airbnb 규칙까지 적용하면서, 프로그래밍 하는 내내 IDE가 지시하는 가이드라인에 맞춰 최대한 구현했습니다. 뿐만 아니라, airbnb javascript 스타일 가이드(https://github.com/airbnb/javascript)를 수시로 확인하면서, 컨벤션을 잘 지키면서 구현하고 있는지 재검토했습니다.

 

일례로, 특정  js 파일의 함수를 불러오고 내보낼 때 const와 module.exports를 활용하기보다는, import와 export default를 활용하라는 airbnb 스타일 가이드를 보며 코드를 수정하기도 했습니다.

 

기능별로 commit: 1차 코드

기능별로 commit하기 위해서 우선적으로 생각했던 것은 브랜치를 세분화하는 것이었습니다. 메인 브랜치(jinmidnight01)에서만 지속적으로 commit하는 것도 나쁘지 않지만, 만약 이것이 실무라면? 이라는 생각을 했을 때 절대 이렇게 작업하지 않을 것이라는 생각을 했기 때문입니다.

 

그래서 1차 코드를 작성할 때는 다음과 같이 '프로그램 단계'별로 feature 브랜치들을 세분화하여 작업했습니다.

 

1. 초기 단계: 사용자 입력 전까지

 

2. 플레이 단계: 사용자 입력 후 결과 출력까지

 

3. 종료 후 단계: 재시작 여부 입력

 

각 feature가 하나의 js파일이자 class를 담당했으며, 내부적으로 필요한 함수들은 최대한 각 class 내에서 세분화하고자 했습니다. 출력 Message들은 하나의 객체로 분리하여, 코드의 가독성을 높이고자 했습니다. 이후에는 모든 feature들을 develop 브랜치에 합한 뒤, 최종적으로 메인 브랜치(jinmidnight01)에 병합하는 방식으로 최종 프로그램을 구현했습니다.

 

사실 이 프리코스 기간에 4과목의 중간고사를 보면서 시간이 꽤 빠듯했는데, 그 와중에 프로그램을 다 완성하고 나니 성취감이 크게 느껴졌고 매우 뿌듯했습니다. 항상 느끼는 것이지만, 이런 순간에 가장 개발자로서 만족감과 보람을 느끼는 것 같습니다.

 

기능별로 commit: 최종 코드

하지만, 1차 코드를 제출하고 나서도 어딘가 모르게 아쉬움이 남았습니다. 왜 그럴까 생각을 해보니 다음과 같은 이유들이 있었습니다.

 

1. 기능(feature 브랜치)을 나눈 기준에 '프로그램 단계'보다 더 좋은 기준이 있지 않을까?

 

2. 테스트 코드는 주어진 것만으로 충분한가?

 

더 나은 개발자가 되기 위해서는 위 2가지 질문들에 더 나은 답이 보일 때 지나치면 안 된다고 생각했습니다. 구체적으로, 1차 코드에서 아쉬웠던 부분이 '프로그램 단계'별로 기능을 나누니까 feature 간의 병렬적인 작업보다는 시간 순의 직렬적인 작업을 하면서, feature 구분이 무의미하게 느껴진다는 것이었습니다. 그래서 다시 코드를 뜯어보며 더 나은 프로그램을 구현하고자 했습니다.

 

그렇게 해서 'MVC 패턴'에 따라 feature 브랜치들을 다시 세분화했습니다. 현재 우테코 프리코스 스터디를 같이 진행하는 자교 학우들 사이에서 MVC 패턴 구현에 관한 논의가 나오기도 했고, 이전에 MVC 패턴으로 팀 프로젝트를 진행해본 경험도 있다 보니 과제 코드를 아래 기준들로 바로 재구성하기 시작했습니다.

 

1. Models: 프로그램에서 필요한 데이터 모음

 

2. Views: 프로그램에서 화면에 보여지는 부분(ex. 입력 창 메세지)

 

3. Controllers: Models와 Views를 한 데 모아 유기적으로 작동시킴(프로그램의 핵심부)

 

4. utils: 재사용성이 높을 것으로 예상되는 함수들 모음

 

5. constants: 출력 메세지, 출력 조건을 코드 가독성을 위해 각각 객체로 분리

 

feature 브랜치를 위 5가지 기능 그룹으로 나누어 구현하기 시작했고, 이에 따라 1차 코드에서는 구현하기 애매했던 병렬 작업이 가능했습니다. 타 feature 브랜치에서 작업하던 코드를 가져와 구현하기에도 용이했고, 확실한 역할 분리로 인해 더 직관적이고 효과적인 작업이 가능했습니다. 뿐만 아니라, Git commit 메세지 종류를  신경쓰면서 commit을 하다보니, Github에서 프로그래밍 작업의 개괄적인 타임라인을 보다 쉽게 확인할 수 있었습니다. 이로써, 1차 코드보다는 재사용성이 높고 유지/보수가 쉬운 코드를 구현할 수 있었습니다.

 

또한, 입력값의 유효성을 검사하는 테스트 코드를 작성하여 보다 오류를 필터링할 수 있는 프로그램을 구현할 수 있었습니다.

---

마무리

코드를 재구성하여 제출했음에도 불구하고, 다시 보니 아래와 같은 부족한 점들이 보였던 것 같습니다.

 

1. while 문 안의 비동기 처리(await) refactor
2. 더 다양하고 많은 테스트 코드 작성
3. if-else문 보다 더 간단한 삼향연산자로 제어문 구현
4. 비동기로 값을 받아오는 부분을 try-catch문으로 구현

하지만, 과제를 단순히 통과하는 것을 넘어 더 나은 프로그램을 향해 발전하면서, 아래와 같은 생각과 깨달음도 얻을 수 있었습니다.

 

1. 자기주도적으로 학습하는 것이 제 적성에 매우 잘 맞다는 생각이 들었고, 이러한 학습 방식을 충분히 추구할 수 있는 우테코라는 환경에서 크게 성장하고 싶고 성장할 수 있겠다는 생각을 했습니다.
2. 괜찮게 구현했다고 생각하는 프로그램도 시간이 흘러 다시 보거나 Peer 리뷰를 받아보면 부족한 점이 발견되기에, 항상 겸손한 배움의 자세를을 지녀야겠다는 생각을 했습니다.
3. 비동기 처리 등 Javascript 문법을 이론서를 바탕으로 집중 학습해야겠다는 생각을 했습니다.
4. docs/README 파일에서 작업의 큰 그림을 사전에 잘 그릴 수 있어야, 효율적으로 개발하고 시간을 아낄 수 있다는 것을 깨달았습니다.

이러한 깨달음을 바탕으로 앞으로의 프리코스 과제들에 더 개선된 모습을 보이면서 빠르게 성장하고자 합니다. 1주차 과제를 하며 느꼈던 성취감과 성장을 또 겪을 수 있다는 점에서 감사하고 설레는 것 같습니다.