우아한테크코스 프론트엔드 3기 최종합격 후기 (프리코스, 온라인코딩테스트)

3주간의 프리코스를 마무리하고 오프라인 코딩테스트를 마치고 12/30일 오후 3시 

기다리고 기다리던 우아한 테크코스 합격 메일이 도착했다.

우아한테크코스 합격

작년에 탈락한 우아한테크코스 2기의 설움을 딛고 1년만에 성취한 목표라서 감회가 남다르고 뛸뜻이 기뻤다. (zereight.tistory.com/416)

 

서류와 코딩테스트 관련해서는 이전에 포스팅했으니 (zereight.tistory.com/748)

이번엔 한달간의 프리코스 + 오프라인코딩테스트에 대해 글을 써보고자 한다.

 

프리코스는 백엔드, 프론트엔드에게 모두 같은 주제가 주어졌으며 언어는 java, javascript, 구현방식은 콘솔, 웹페이지으로 차이가 있었다.

 

1주차에 주어진 과제는 작년에도 한듯한 숫자야구게임이었다. (github.com/zereight/javascript-baseball-precourse)

웹페이지에 주어진 요구사항대로 구현하되, 자바스크립트 코드컨벤션을 지키고, 함수는 15라인을 넘으면 안되었다.

처음 해보는 과제였기 때문에 최대한 코드컨벤션을 정리해놓고 체크했고 commit log도 의미있게 남기고자 했으나, 훈련이 되어있지 않았던 터라 기능단위로 남겼다고 생각했는데도 난잡했다.

다행인점은 기능을 구현하는 것은 간단한 html, css, js 프로그래밍을 해본 사람이라면 쉽게 구현할 수 있는 난이도여서 부담이 크지는 않았다는 점이다.

 

그리고 미션이 끝나면 지난 미션에 대한 전체적인 피드백을 주신다. (아래 참고)

1. 이름을 통해 의도를 드러내어라. (a1,a2 안됨, Info, Data, a, the 등의 불용어 안됨)

2. 축약하지 마라. (의도를 드러낼 수 있다면 이름이 길어져도 상관없다.)

3. linter와 code formater를 사용해라

4. for, while의 space바도 convention이다.

5. 불필요하게 공백라인을 만들지 않는다.

6. 구현 순서도 convention이다.

7. 최대한 중복을 없애라

8. space vs tab 를 혼용하지 마라

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

10. var를 사용하지 마라

11. git commit 를 의미있게 작성하라

12. README는 초기에 완벽히 작성하려고 하지말고, 구현하면서 기능을 추가해 나가도록하라

13. 기능 목록을 구현을 재검토한다.. (input/output은 언제든 바뀔 수 있기 떄문이다.) + 예외적인 상황도 정리해야한다.

14. README 문법을 익히고 가독성있게 작성한다.

 

2주차

작년 기수 분들이 했었던것과 동일한 주제의 자동차 경주 게임이 미션으로 주어졌다. (github.com/zereight/javascript-racingcar-precourse)

구현자체는 난이도가 있게 보이지 않았으나, 모듈분리 + Car 객체를 생성해서 구현하기 라는 조건이 붙어있어서 1주차보다 많은 고민을 요구했다.

고민에 고민을 거듭한 끝에 필요한 기능들을 나열하고, 기능들을 범주에 맞게 모듈로 분리하여 import하여 사용했다.

또한 eslint, prettier 사용 + convention을 준수하여 가독성있는 코드로 리팩토링도 수행했다.

하지만 되돌아 생각해보니 Car 객체를 사용할때 대부분 정적메소드를 선언하여 사용했고, 구현순서를 고려하지 않았고, commit log도 그다지 가독성있는 상태가 아니었던것 같다. 

 

2주차 피드백

1. 기능 목록을 구현을 재검토한다.. (input/output은 언제든 바뀔 수 있기 떄문이다.) + 예외적인 상황도 정리해야한다.

ex)

- 사용자가 입력한 이름을 쉼표 기준으로 분리해야 한다.

- 자동차는 4이상인경우 전진한다.

- 자동차는 4미만인경우 정지한다.

- 0~9 사이의 임의의 값을 생성한다.

2. 하드코딩되는 값들을 상수로 사용한다.

3. 축약하지 말자

4. boolean 값을 반환하는 경우 간결하게 하자.

5. javascript 에서 제공하는 api를 적극활용하자

6. 불필요한 변수를 줄이자

7. 비지니스 로직과 ui로직을 구분하자

8. 함수는 15라인을 넘지않도록 한다. (공백라인도 포함)

9. commit 메시지에 #번호를 추가하지 않는다. 

10. 발생할 수 있는 예외케이스에 대해 고민한다.

11. 주석은 꼭 필요한 경우에 남긴다.

12. .vscode, node_modules와 같은 폴더들은 git으로 관리하지 않아도 된다.

 

 

3주차

이번에는 작년기수와 다른 미션이 등장했다. (github.com/zereight/javascript-subway-map-precourse)

지하철 노선도를 관리하는 프로그램을 만드는 것이었는데, 구현 난이도가 이전 미션에 비해 3배이상 상승한것같다.

이번 미션에 수행한 사항을 간단히 되짚어보면,

요구사항을 이해하고, 기능목록을 작성했고

비즈니스로직과 UI을 분리하기 위해서 MVC패턴을 사용하기로 했다.

값을 하드코딩하지 않기 위해서 얼럿메시지와 스타일등등을 상수로 두어서 import하여 사용하기로 했으며

View에서 element를 생성하는 코드가 중복이 발생했는데, 이를 해결하기 위해서 element에 속성까지 추가하여 만들 수 있는 함수를 만들어서 사용하였고, 각 page에서 공통적으로 사용되는 table을 중복코드를 줄여 구현하기 위해서 table을 만들어주는 템플릿도 만들었다.

구현과 더불어 localStorage와 html의 data 속성을 사용하여 값을 저장해는 방법도 익혀야했고, 

각 기능별로 commit log를 가독성있게 남길 수 있게 README를 정리해야했다.

또한 구현하는데 필요한 노선도, 지하철의 객체를 어떻게 반영해야할지, 모듈이 잘분리되었는지, convention을 준수했는지 등의 고민을 수없이 해야했다.

 

개인적으로 3주간의 프리코스 중에서 가장 인상깊고 재미있고 난이도가 높은 미션이었다. 

3주간의 프리코스를 통해 MVC패턴을 나름 몸에 익힐 수 있었고, 코드컨벤션이라는 것을 처음 접해봤고, commit log를 꽤 가독성있게 만들어 낼 수 있었으며, README기능 목록을 잘 정리하는 습관을 들일 수 있었다.

프리코스를 하면서 내가 밤에 잠을 자지않고도 멀쩡하게 생활이 가능하다는 사실을 깨달았고, 이러한 몰입경험을 매주 경험하고 싶다는 생각도 했다. ㅎㅎ

 

 

 

이제 대망의 온라인 코딩테스트가 남았는데, 시국이 시국인지라 줌으로 진행한다고 하셨다. (휴대폰으로 코딩하는 나의 옆모습을 생중계해야했다.)

문제는 다익스트라 알고리즘을 이용한 지하철 노선도 경로 조회 미션 (github.com/zereight/javascript-subway-path-precourse) 이었다.

다익스트라 알고리즘을 구현하라는 건 아니다. 다익스트라 알고리즘 템플릿이 주어져있고, 최소시간/최단거리 조건에 맞는 출발지 => 목적지 까지의 경로를 출력하는 문제였다.

3주차 프리코스 코드를 사용해도 된다고 하셔서 MVC패턴으로 빠르게 어떻게 구현할지 구상하고, eslint+prettier 세팅값들을 복사해왔으며, element를 생성하는 함수를 조금 손보고 가져왔다.

데이터는 json 형으로 파일에 저장해서 테스트해야했다. (아마 채점에 용이하게 하기 위함?)

 

훈련한것처럼 당황하지않고 기능목록 구현을 README에 정리하고 (예외사항까지)

MVC패턴을 적용하기 위한 파일들을 만들고,

UI를 구현하면서 필요한 동작기능을 함께 구현했다. 

다익스트라는 ps를 하면서 단련되어 있었기에 적용하는데 큰 문제는 없었다.

핵심적으로 체크해야할 convention을 우선순위를 두고 확인했으며

그동안 문제가 많았던 commit log를 잘 작성하는것에 가장 큰 무게를 두고 진행했다.

그렇게 온라인 코딩테스트는 마무리가 되었다.

 

온라인 코딩테스트는 결코 쉽지는 않았으나, 3주차 프리코스의 연장선이라 비교적 수월했던 면도 있었다.

마지막 최종제출을 하면서 스스로도 코드가 성장했다는 것을 느꼈고 내가 프로그래밍이라는 진로를 정한것에 대한 확신이 들었다!

 
이번에 처음 진행하게 된 우테코의 프론트엔드 과정에 합격하게 되어 다시한번 감사하는 마음으로 힘차게 공부해봐야겠다. ㅎㅎ