우아한테크코스 4기 프론트엔드 - 프리코스 후기

 

이번에 운좋게 우아한테크코스(우테코) 서류와 1차 코딩테스트에 합격하여 프리코스를 진행할 수 있었습니다.

프리코스에서는 매주 과제를 해결하여 제출하는 방식이었습니다.

매주 과제를 해결해나갈 때마다 피드백을 주시고, 코딩을 할 때 어떤 점을 신경쓰면 좋은지 알려주셔서 많은 공부가 되었습니다.

덤으로 다른 분들의 PR을 보면서 많은 공부가 되었습니다.

 

과제는 숫자야구, 자동차경주, 자판기 문제로 아래 링크에 있습니다.

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

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

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

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

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

GitHub - woowacourse/javascript-vendingmachine-precourse

과제를 하면서 기능 구현보다는 코드를 어떻게 짤 지에 대한 고민을 많이 했습니다.

코딩 컨벤션

우선 우테코 피드백에 따라 코딩 컨벤션을 지켜서 코딩을 하기 위해 노력했습니다.

코딩 컨벤션은 NHN TOAST 팀에서 작성한 문서를 참고했습니다. 거기에 추가적으로 TOAST팀에서 제공하는 ESLint 플러그인을 설치해서 규칙을 지키려고 노력했습니다. 

하지만 이렇게 해도 커밋하고 나면 항상 ESLint를 지키지 않은 항목들이 한두개 있다는걸 깨달았고, pre-commit를 적용해 커밋하기 전에 ESLint와 Prettier를 확인해 좀 더 엄격하게 규칙을 지키고자 했습니다.

참고자료 : 

https://ui.toast.com/fe-guide/ko_CODING-CONVENTION

코딩컨벤션

​https://ui.toast.com/fe-guide/ko_STATIC-ANALYSIS

정적 분석

기능 구현 목록

저는 이전까지 코딩을 할 때, 머리 속으로 대충 흐름만 생각하고 생각나는대로 구현을 하는 습관이 있었습니다. (MBTI P 87%)

이전부터 계획이라는걸 잘 세우지 않는 성격이라 우테코의 기능 구현 목록 작성이 처음에는 많이 어색했습니다.

익숙하지 않아 1주차에는 단순하게 구현 기능 목록을 작성했고, 2주차부터는 구현 기능 목록을 좀 더 제대로 작성해보고자 시간이 걸렸습니다. 하지만 그럼에도 구현을 해나가면서 놓쳤던 부분이 보였고, 구현 기능 목록을 처음에 더 자세하게 작성해야하나? 라는 생각이 들었습니다.

2주차 피드백에서 살아있는 문서를 작성하라는 피드백을 받고 처음 구현 기능 목록 작성할 때 부담감이 줄어들었고, 구현하면서 기능 목록을 업데이트하니까 시간도 줄이고 효율적으로 기능을 구현할 수 있었습니다.

상수화

기존에 하드코딩으로 작성했던 변수나 숫자들을 상수화시켜서 관리하고자 노력했습니다.

하지만 너무 쓸데없는 것까지 상수화를 시킨건 아닌지 생각이 들었고, 어디까지 상수화를 시키는게 좋은지 스스로 고민도 많이 하게 되었습니다. (TMC 투머치컨스턴트..) 

3주차 과제에서 id명, class명, 0, 10, 50, 100, 500 같이 너무 많은 것을 상수화시켰다고 생각이 들었습니다.

그래서 최종 코딩테스트에선 필요하다고 생각되는 것만 상수화 시켜야겠다고 다짐하게 되었습니다.

디자인 패턴

우테코 프리코스를 진행하면서 코드를 어떻게 하면 더 예쁘게 짤 수 있을지 욕심이 생겼습니다. 

그래서 아키텍쳐에 대해 조사를 하게 되었고 아래 시니어 개발자님의 블로그 글을 발견하고,

웹 프론트엔드 아키텍쳐에 대해 알아가면서 많은 공부가 되었습니다.

테오님이 velog를 시작하신지 얼마안되셨는데 글들의 퀄리티가 어마어마하셔서... 앞으로 개발하면서 많이 참고할 것 같습니다!!

 

테오 - 프론트엔드에서 아키텍쳐란 무엇인가

프론트엔드에서 MV* 아키텍쳐란 무엇인가요?

 

리액트처럼 컴포넌트 단위로 개발하는 방식에 익숙해져있다보니 바닐라 자바스크립트에서도 컴포넌트 형식으로 개발을 하고 싶었고,

아래 블로그를 보면서 우테코 과제에 적용시켜봤습니다.

 

황준일 - 바닐라 자바스크립트로 웹 컴포넌트 만들기

Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일

블로그에서 작성자가 의도하신대로 완벽하게 구현했다고 생각하진 않지만, 저만의 방식대로 구현해보고자 했습니다.

3주차 과제부터 위 방식을 사용했고, 위 방식에서 이벤트 처리하는 부분에서 익숙해지는데 시간이 좀 걸렸습니다.

그래도 과제가 끝나갈 때쯤엔 어느정도 익숙해진 것을 느껴 이 방식으로 코딩테스트를 봐야겠다고 생각했습니다.

 

테스트

이번 기수부터 cypress를 사용하여 테스트까지 진행한 점도 저에겐 좋았습니다.

테스트의 필요성을 들어서 언젠가 테스트 주도 개발을 해봐야지! 라고 생각만 하고 있었는데,

미리 짜여진 테스트를 보니 다음에 어떻게 테스트를 작성하면 좋을지 감을 잡을 수 있었습니다.

 

그리고 기능 구현이 됐다고 생각했는데, 테스트에서 실패하는 경우를 겪어보고 놓쳤던 부분을 찾을 수 있어서 너무 좋았습니다!

테스트의 중요성을 몸소 느꼈으니까요!!

 

그리고 cypress같은 경우는 설치하면 웹에서 테스트하는 모습을 직접 볼 수 있어서 더 좋았습니다. 

 

최종코딩테스트

12월 18일 토요일 오후 1시부터 6시까지 코딩테스트를 진행했습니다.

 

코딩테스트를 보기 전에 미리 ESLint, Prettier, pre-commit에 대한 준비를 했고, 

과제에서 연습했던거처럼 문제를 보면서 구현 기능 목록을 생각나는대로 간단하게 작성했습니다.

구현하면서 생각난 기능들을 하나하나씩 추가해나가면서 살아있는 문서를 체감했습니다.

docs 커밋들..

그리고 신기하게도 문제를 풀면서 지난 과제에 대한 생각이 주마등처럼 스쳐지나가는 것을 느낄 수 있었습니다.

지난 과제들 틀에서 크게 벗어나지 않아서 지난 3주간 스스로 학습하고 연습했던 것들을 적용해볼 수 있었던 테스트였다고 생각합니다.

하지만 그래도 시간이 더 있었으면 코드를 더 이쁘게 짤 수 있었겠다라는 아쉬움이 많이 남습니다아...

 

공개하기 부끄럽지만 다음에 시험을 치룰 사람들을 위해... 저의 최종 코테 PR도 올리겠습니다..

https://github.com/woowacourse/javascript-teammatching-precourse/pull/17

[크루 관리 & 팀 매칭] 신지호 미션 제출합니다. by Zih0 · Pull Request #17 · woowacourse/javascript-teammatchi

 

 

결론

한달동안 프리코스를 통해서 스스로 성장했다는 느낌이 많이 들었습니다.

최종 결과가 어떻게 될지는 모르겠지만, 프리코스로 인해 웹개발에 대한 흥미가 더 생겼고, 동기부여가 생겨서 너무 좋습니다.

 

이런 기회가 있었다는거에 정말 감사하고, 더욱 욕심이 생기는 것 같습니다! 오늘도 열심히 코딩하겠습니다~ 즐코