[우테코] 우아한테크코스 프리코스 후기

3주간의 프리코스가 끝났다!

 

프리코스에 들어가기에 앞서

---

우테코를 합격하고 5일이라는 시간이 있었다. 우아한테크코스는 기존의 과제들을 모두 github에서 확인이 가능하다. 막 미리 해보는 것보다는 어떤 식으로 과제가 진행되는지만 알아보았다. 기존 과제들을 모두 공유하다니! 너무나도 친절하다

여러 블로그들에서 클린코드라는 책을 많이 추천해주셔서 도서관에서 빌려서 읽어보았다. 역시 유명한 책은 이유가 있었다. 딱딱한 기술 서적인줄 알았는데 번역이 잘 되어있어서 그런지 소설책처럼 술술 읽혔다. 맘에 들어서 그냥 사버렸다. 미션을 진행하다보니 책에서 하지 말라는 대로 코딩하고 있는 내 자신을 발견할 수 있었다. 

 

 

[1주차] 숫자 야구 게임 ⚾

---

1주차 과제는 지난 해와 동일한 숫자 야구 게임이었다. 

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

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

 

프리코스 과제들은 모두 코딩 컨벤션과 깃 컨벤션을 지키면서 제출하도록 되어 있다. 부끄럽지만 항상 혼자 얼렁뚱땅 코딩을 진행해와서 컨벤션이라는 것이 있다는 것도 이번에 처음 알게 되었다. 과제를 진행하거나 앞으로 개발하는데에 있어 많은 도움이 될 것 같아서 1주차에는 코딩 컨벤션과 깃 컨벤션을 위주로 공부했다. 코딩 컨벤션은 Airbnb 스타일 가이드를 공부했다. 

[git] git 커밋 컨벤션 (AngularJS Git Commit Message Conventions)

 

각잡고 README를 작성하는 것도 처음이었다. 기존에는 큰 틀만 종이에 그려놓고 생각나는데로 구현하고 커밋을 해왔다. 작성한 README가 커밋의 단위가 되기 때문에 이를 고심하면서 작성하려고 하니까 생각보다 오래걸렸다. 확실히 미리 시간을 들여 구조를 짜 놓으니 어디까지 구현을 해 놓았는지 스스로 판단하기도 좋고, 커밋하기도 좋았다. 이래서 README를 작성하는구나를 알 수 있었다.

 

내 코드

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

 

 

[2주차] 자동차 경주 게임 🚗

---

2주차 과제도 지난 해와 동일한 자동차 경주 게임이었다.

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

GitHub - woowacourse/javascript-racingcar-precourse: 자동차 경주 게임 미션을 위한 저장소

 

1주차 공통 피드백도 받았다. 피드백이 다 나에게 하는 말인 것 같았다ㅋㅋㅋ 그 중 아래 3개의 항목이 가장 눈에 띄었다.

• 공백 라인을 의미 있게 사용해라
• 기능 목록을 업데이트하라
• linter와 code formater의 기능을 활용해라

피드백을 받고 가장 먼저 2주차에는 ESLint와 pretteir를 사용해보기로 했다. 이전에 깔아놓은 node버전이 낮아서 계속해서 에러가 나느라 설치에 애를 먹었다. 덕분에 ESLint에 대해 제대로 공부해 볼 수 있었다. 이전까지는 코딩 컨벤션에 대한 지식이 없어 두 도구의 필요성을 느끼지 못했었는데 1주차에 코딩 컨벤션에 대해 공부하고 나니 두 도구가 얼마나 편리한 것인지를 알 수 있었다. 

2주차 미션 공유 메일에 다음과 같은 문장이 있었다.

1주 차 미션의 목표는 함수를 분리하는 것이었다면, 2주 차 미션에서는 1주 차에서 학습한 것에 더해 클래스를 분리하며 개발하는 것을 목표로 하고 있어요.
아직 함수 분리가 어려운 분들은 함수 분리하는 연습에 집중해주시고, 함수 분리에 자신있다고 생각하시는 분들은 2주 차부터는 클래스 분리에도 도전해 보면 좋겠습니다.

1주차에는 익숙했던 함수 형식으로 미션을 구현했기때문에 2주차는 클래스로 구현하기로 했다. 사실 자바스크립트를 사용하며 클래스 사용은 최대한 미루고 피했었다. 뭔가 내가 기존에 알고 있는 클래스와 거리감이 있어서 자신있게 사용하지를 못했다. 이번 기회에 다시 한 번 클래스 공부를 해보자는 마음으로 아에 클래스 문법부터 다시 공부했다. 클래스 공부를 한다는 마음으로 미션을 진행한 것 같다.

1주차에는 README 기능에 번호를 붙여서 작성했는데 이렇게 하니까 수정하기에 영 불편하다고 느껴서 넘버링은 하지 않았다. 확실히 두번째로 하는거라 그런지 README 작성 시간이 확 줄어들었다. 읽기 좋은 코드를 작성하기 위해 숫자들을 하드코딩 하지 않고 상수화하고, 변수와 함수명에 대해 고민했다. 특히 작성한 README를 기준으로 이름을 짓기 위해 노력했다. 이해하기 쉬운 이름 짓는게 의외로 되게 어려웠다.

다른 분들 코드를 볼 수 있다는 점도 참 좋았다. React처럼 구현을 하신분부터 MVC 패턴으로 구현을 하신 분까지 대단한 분들이 많았다. 다른 분들 코드를 보면서 이렇게 할 수 도 있구나 변수명을 이렇게 지으면 좋구나 등 많이 배울 수 있었다. 좋은 코드들을 보며 조금 초조해지기는 했지만 2주차는 클래스에 익숙해지자는 목표로 미션을 진행했기 때문에 나는 따로 디자인패턴을 적용하지는 않았다. 

 

내 코드

GitHub - prefer2/javascript-racingcar-precourse: 자동차 경주 게임 미션을 위한 저장소

 

 

[3주차] 자판기 🥤

---

3주차는 1,2주차와는 난이도가 완전히 달랐다. 3주차 미션은 작년과 다른 자판기 미션이었다.

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

GitHub - woowacourse/javascript-vendingmachine-precourse

 

3주차 미션 공유 메일에는 다음과 같은 문장이 있었다.

3주 차 미션의 목표는 여러 개의 클래스를 분리한 후 서로 관계를 맺어 하나의 프로그램을 완성하는 경험을 하는 것, 그리고 2주 차 미션보다 더 극단적인 연습을 해보는 것입니다.

클래스간의 관계를 맺는 것에 초점을 두고 미션을 진행해야겠다고 마음먹었다. 

2주차 공동 피드백에서 와닿는 피드백은 다음과 같았다. 

• 비즈니스 로직과 UI 로직을 분리해라. 비즈니스 로직과 UI 로직을 한 함수/클래스가 담당하지 않도록 한다. 단일 책임의 원칙에도 위배된다.
• 불필요한 변수를 줄이기 위해 노력한다

함수가 한가지 일만 하도록 했어야 했는데 많이 못지켰다고 느꼈다. 어떻게하면 단일 책임의 원칙을 지킬 수 있게 할지 고민하다 MVC패턴을 적용해보기로 했다. 자바스크립트로 작성한 좋은 MVC 패턴 예시를 찾아보다가 아래 예시를 찾았다.

https://www.taniarascia.com/javascript-mvc-todo-app/

Build a Simple MVC App From Scratch in JavaScript

개인적으로 정말 많은 도움이 되는 예시였다. MVC패턴에 대해 이해를 많이 도와줬다. 자판기 미션을 구현하기 이전에 이해를 바탕으로 1,2주차 미션을 MVC패턴을 적용해서 구현해보았다. View는 DOM 관련된 일만 하도록 Model은 데이터에 관한 일만 하도록 나누는게 중요해보였다. 그래서 이를 기준으로 README를 작성했다. 

3주차 미션은 이전 미션들과 다르게 html파일에 정말 script 한 줄만 추가할 수 있었다. 모든 DOM관련 동작을 자바스크립트로 구현해야했다. 요구사항에 다양한 id와 class명이 있어서 이를 적용해서 View를 만드는데만 하루를 썼다. 템플릿을 만들기보다 직접 createElement로 추가하고 싶어서 몽땅 작성했는데 이 과정에서 15줄 안에 작성하라는 요구사항을 지키기가 어려웠다. 이 과정에서 메서드를 많이 나눴는데 조금 깨끗하지 않은 것 같아서 아쉽다. 아무래도 하나의 View 안에서 모든 작업을 진행하려하다보니 복잡해진 것 같다.

미션의 크기가 커지다보니 예외사항에 대해서도 고민을 많이 할 수 있었다. 이름이 같은 상품이 들어온다면? 구매하고자 하는 상품보다 돈이 부족하다면? 등의 예외사항들을 고려해야 했다. 구현을 하면서 발견하는 예외사항들도 그때그때 README에 추가하면서 진행했다. 

 

내 코드

GitHub - prefer2/javascript-vendingmachine-precourse

 

 

프리코스를 끝내며

---

프리코스 이전의 나의 코드

3주동안 구조를 짜고 보기 좋은 코드를 만들기 위해 노력했다. 기존에 돌아가기만 하면 되지 라는 마인드로 살아왔는데 돌아가는건 기본이고 규칙에 맞는 좋은 코드를 만드는게 중요하다는 것을 느낄 수 있었다. 코딩 스타일이 많이 변했다. 기존에 진행하던 1일 1알고리즘 문제 풀기도 함께 병행하면서 미션을 진행했는데 나도 모르게 변수명을 고민하고 있었다. 기존에는 그냥 a,b,c,d나 나만 알아볼 수 있는 축약형을 주로 사용했었는데 확실히 알아보기 좋은 이름을 부여하니 가독성이 좋아진 것 같다. 

다른분들의 코드를 볼 수 있다는 점도 좋았다. 혼자 공부를 하다보면 늘 하던대로만 공부하게 되는데 다른 분들의 코드를 보면서 이렇게도 할 수 있구나를 많이 배울 수 있었다. 수업이나 선생님이 따로 있는 과정이 아니었지만 다른 분들의 코드를 보면서 내가 무엇이 부족한지를 알아갈 수 있었다.

프리코스를 진행하기 직전 보내주셨던 메일을 이 글을 작성하면서 다시 한 번 읽어보았다

프리코스를 진행하면서 여러분이 한 단계 성장하는 계기를 만드는 기회로 만들었으면 합니다.
우아한테크코스가 목표가 아니라 좋은 개발자로 성장하는 것을 목표로 하면서 성장해 나가는 과정으로 생각하고 도전했으면 합니다.

놀랍게도 적어도 반단계 정도는 성장한 것 같은 기분이 든다. 미션을 진행하며 처음 공부해보는 내용도 있었고 이정도는 알지하고 자신했던 내용들도 다시 공부해야 했다. 공부거리를 찾고 공부해나가는 것만으로도 의미있는 시간이었다. 얼렁뚱땅 돌아가는 코드를 뱉어내는게 아니라 좋은 코드에 대해서 고민을 많이 했다. 지금까지 이런 경험을 해 볼 기회가 없었는데 이 기억을 잘 남겨서 앞으로도 좋은 코드에 대해서 고민할 수 있는 사람이 되고 싶다.

나머지 반단계는 최종 코딩테스트를 봐봐야 와닿을 것 같다. 우아한테크코스가 목표가 아니라 좋은 개발자로 성장하는 것을 목표로 하면서 성장해 나가는 과정으로 생각하고 도전하라 하셨지만 그래도... 그래도... 이런 경험을 계속 이어나갈 수 있으면 좋...겠...다... 

3주차를 몰아서 적다 보니 양이 좀 많아졌네...