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

우테코 지원부터 프리코스 3주차까지 작성했던 노션 페이지들

저는 지금 우아한테크코스 프론트엔드 프리코스 과정 중에 있습니다.

프론트엔드는 이전 기수가 존재하지 않아서 많이 기대도 되고 걱정도 되었는데,

진행을 하면서 얻은 경험을 공유하고자 합니다.

어둠 속 걷기

프리코스 과정을 한 마디로 요약해보라면, 어둠 속 걷기라고 표현하고 싶습니다.

보통 기존의 평가는 과제물을 제출하면 그에 대한 평가가 바로바로 주어지는데요.

우아한 테크 코스의 프리코스는 그렇지 않습니다.

제출을 하면 그에 대한 채점, 평가나 개인 피드백을 받을 수 없습니다.

제출 후에 피드백이 주어지긴 하나 이는 참가자 전원에게 보내지는 공통 피드백입니다.

이를 적용하려면 자신의 상태가 어떤지 파악을 해야합니다.

3주를 진행하면서 막막함을 느낀 것은 저뿐만이 아닐 것이라고 확신합니다.

믿을 수 있는 것은 자신의 판단 뿐이었습니다.

자기주도학습 테스트

프리코스에서 이런 상황을 조성하는 이유는 상단의 이미지에 있는 문구 중 첫 번째 자기주도학습 때문이라고 예상해봅니다.

구글에 검색하면 나오는 설명이 우아한테크코스를 규정하고 있습니다.

실제로 우테코 프리코스는 떠먹여주지 않습니다. 미션설명에 url로 주어지는 개념들이 있지만 미션을 해결하기 위해서는 그 이상이 필요합니다. 추가적으로 어떤 문서를 읽어야하고, 어떤 개념을 학습해야하는지는 순전히 본인의 몫입니다.

저는 코드컨벤션과 책 클린코드와 리팩토링을 읽으면서 제 코드의 품질에 대한 평가기준을 잡을 수 있었고, 프로그램 구조 설계를 하기 위해 구글링을 해서 문서를 찾고, 모르는 것이 있으면 역시 구글에 도움을 요청하고 내 것으로 만들었습니다.

미션에 대한 PR도 공개되어 있어서 남들은 어떻게 코드를 짜는지 보고 학습을 할 수도 있습니다.

1주차에는 백엔드 프리코스에 참가자 중 한 분이 PR메시지에 자신이 어떤 고민을 하였고, 어떤 학습을 했는지 상세하게 쓴 글을 보고 어떻게 미션을 해결하고, 학습해야겠다는 프리코스의 방향을 설정하는데 도움을 얻을 수 있었습니다.

3주차에는 난이도가 상대적으로 많이 올라가서 2주차 미션 PR을 보다 저와 같이 컴포넌트 기반으로 과제를 푸는 분을 발견해 의견을 나누고 학습하기도 하였습니다.

학습 방법에 제한은 없다고 생각합니다.

어떻게 학습을 하는가는 온전히 자기 몫입니다.

고민과 성장

맨 위 상단에 노션 페이지 목록을 보면 예상할 수 있겠지만 자바스크립트로 1기, 2기 프리코스의 문제를 사전에 풀어보고 연습했습니다. 백엔드는 과제 제출의 형태가 콘솔앱이어서 저 역시 콘솔앱으로 연습을 하고, 3기 프론트엔드 프리코스도 node.js기반 콘솔앱으로 나오지않을까 예상을 감히 해봤습니다.

보기좋게 빗나갔습니다.

과제는 자바와 같은 주제였지만 이를 웹어플리케이션으로 구현하는 것이었습니다.

비즈니스로직은 어느정도 비슷할 수 있었지만, input에 대한 처리나 ui렌더링을 순차적으로 짤 수 없는게 많이 당황스러웠습니다. 이는 1주차 과제 제출 메일에 여실히 드러납니다.

처음엔 어떤 식으로 설계해야 되는지도 막막해서 실제 코드는 한 줄도 못 짜고 고민하면서 시간을 보냈던 기억이 납니다.

실제 코딩을 들어가서도 콘솔앱으로 연습할 때보다 완성하는데 시간이 더 걸려 마지막 코딩테스트를 어떻게 볼지 막막해했습니다 (사실 지금도 해소가 안된 문제입니다..)

그렇게 힘들어 했음에도 3주차를 지나면서 어느정도 확립되는 프로그래밍 패턴과 적응되어가는 미션에 이전에 했던 고민은 다음 주 미션에선 그렇게 고민이 되지 않았습니다.

제가 생각했던 컴포넌트 기반 설계가 더 탄탄하고 정교해지는 것을 (저는) 느낄 수 있었습니다.

어두웠던 길이 한 층 밝아지는 느낌을 받았습니다.

프리코스로 내가 얻은 것

기능 구현 목록 작성하기 (설계하기)

프리코스는 코딩을 시작하기 전에 요구사항에 대해 분석하라고 합니다. 3주 기간을 거치면서 어떤게 기능인지, 어떤 요구사항은 어떤 기능으로 정의할 수 있는지, 쪼개야하는지, 합쳐야하는지 기능 판단법을 체화하는 것이 프리코스 기간의 핵심 중 하나였다고 생각합니다.

저는 여기에 +@로 컴포넌트 단위를 나누어 보았습니다.

어떤 UI가 단일 컴포넌트가 되어도 좋고 ,어떤 UI들은 하나의 컴포넌트로 합쳐야하는지 연습해볼 수 있는 시간이었습니다. 앞으로 프론트엔드 기술을 익히는데 기초가 될 수 있는 유익한 고민을 했다고 생각합니다.

기능 단위 커밋 (커밋 잘하기)

커밋로그도 신경써서 올려야합니다. 혼자 관리하는 레포지토리와 친구들끼리 하는 팀프로젝트의 깃 관리보다 더 어렵고 신중해지는 경험이었습니다. 평가를 받는다고 생각하니 좀 더 일관성있고 직관적인 로그를 의도했습니다. 사실 평가를 받지 않아도 노력을 기울여야 하는 것이기에 학습을 하면서 이제 이런 것들을 보고 있구나 부끄럽기도 했습니다.

저는 아래의 두 사이트를 기준으로 삼고 학습했습니다.

 

좋은 git 커밋 메시지를 작성하기 위한 7가지 약속 : TOAST Meetup

좋은 git 커밋 메시지를 작성하기 위한 7가지 약속 : TOAST Meetup

나만의 commit message 작성법

나만의 commit message 작성법

(참고로 나만의 commit message 작성법 아티클은 본문에 나와있지 않아서 첨언하자면 angular commit convention 기반입니다.)

Git 다루기

커밋 로그를 일관성있게 올리기 위해선 저같은 초보는 Git을 다 헤져가는 연습장처럼 지웠다 쓰고 지웠다 써야합니다. 프리코스 이전의 저는 pull, push, checkout만 쓰면 Git 쓸 줄 안다고 말하고 다녀도 되는 것 아닌가 여겼습니다.

아니었습니다. Git을 좀 더 유연하고 자유자재로 쓰려면 더 많은 기능을 알아야합니다. 이것은 일관된 기능단위 커밋을 가능케하는 필요충분조건입니다.

rebase -i, commit —amend, revert, reset. 저는 3주간 수도 없이 이 기능들을 활용했습니다.

이 기능들은 아래의 사이트에서 재밌게 시각적으로 배울 수 있었습니다.

Learn Git Branching

Learn Git Branching

좀더 깔끔한 코드에 대한 기준

클린코드에서 저자가 말하기를 클린코드를 위해서 메서드의 라인은 10줄 이내로 뎁스는 1로 제한하라고 합니다. 그에 비하면 프론트엔드 프리코스 과정은 정말 자비로운 제약을 주셨다고 생각합니다.

함수는 15라인 까지 허용
뎁스는 2까지 허용

이 제약을 지키는 데에도 정말 많은 고민과 노력이 필요했습니다. 코딩 컨벤션은 라인을 잡아먹게 스타일을 강제합니다. 그러다보니 자연스럽게 함수를 분리하려고 궁리를 하고, 어떤 부분이 추상화가 가능한 단위인 것인지 찾으려고 노력합니다. 결과적으로 제 코드는 1주차 2주차 3주차가 다르게 깔끔해질 수 있었습니다.

추가로 도입해본 것: 테스트

테스트를 학습해서 도입해보았습니다. 라이브러리 사용을 제한하고는 있으나 구현에 관련되지 않는 (eslint, prettier, jest) 라이브러리는 제한하지 않습니다.

배워서 활용해보았는데 미흡했습니다. 제 코드 특성 상 side effect 가 많이 발생할 수 밖에 없었는데 이를 어떻게 테스트로 시험해야하는지 돌이켜보면 아쉽습니다. 본과정에서 테스트를 배우는 것으로 홈페이지에서 확인했는데 좀더 시간을 갖고 학습을 한다면 더 능숙한 테스트 코드를 짤 수 있을 것이라고 생각합니다.

결론

저의 3주는 불안이었습니다.

내가 과정에 붙을 수 있을까. 어떻게 미션을 수행해야하나. 다른 사람들은 어떻게 하고 있나.

하지만 지금 후기를 작성하며 돌이켜보면 저는 전에 없던 성장을 단 기간에 할 수 있었습니다.

협업프로젝트를 지금 시작한다면 3주 전보다 더 나이스하게 프로젝트를 이끌 수 있을 거라고 생각합니다.

물론 아직 부족한 점이 많습니다.

그렇기에 과정에 붙어 학습하고 싶은 마음이 굴뚝같지만, 떨어지더라도 이 텐션은 내려놓지 말아야겠다고 다짐을 해봅니다. 

하지만 합격하기를..