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

우아한테크코스 3기 프론트엔드 선발과정에 포함된 3주간의 프리코스에 참여하고 작성한 후기입니다.

 

글을 쓰는 지금은 이미 최종 테스트까지 끝났지만, 많은 것을 배운 3주 였기에 뒤늦게라도 프리코스 후기를 남겨본다. 각 미션에 대한 자세한 내용은 링크된 저장소에서 볼 수 있으니, 매주 미션을 진행하며 공부한 내용위주로 작성할 것이다. 이 글이 미래에 우아한테크코스에 지원하게 될 누군가에게 도움이되면 좋겠다.

1주 차 - 숫자 야구 게임

목표: 함수와 메서드를 분리

요구사항

• 들여쓰기 depth 2까지
• 함수는 한가지 일만 하도록 최대한 작게

이런 제약사항을 두고 코드를 짜본 것이 처음이라 즐거운 경험이었다. 들여쓰기 depth를 최대 2로 맞추는 것은 생각보다 어렵지 않았다. 첫 번째 미션의 기능이 많은 편이 아니었고 Javascript에서 제공하는 API(foreach, map)를 적극적으로 사용하면서 함수를 작게 쪼개면 충분히 지킬 수 있는 정도였다고 생각한다.

구현 기능 작성

첫 번째 미션은 코드 작성보다 구현 기능 작성에 더 오랜 시간이 걸렸다. 하나의 기능의 범위가 어디까지인가?를 오래 고민했기 때문이다. 하나의 함수가 하는 일이 하나의 기능인가? '계산한다'와 '계산한 값을 화면에 출력한다'는 서로 다른 기능인가? 하나의 기능인가? 이런 고민을 오래 했다. 결론적으로는 일찍 PR을 올린 분들과 이전 기수 참여자들의 문서를 참고하여 작성했다.

추후 든 생각인데 이 게임을 전혀 모르는 사람을 위한 게임 진행 설명서를 쓴다고 생각하고 작성했으면 어떨까 싶다. 게임 방식에 대해 전혀 모르는 사람에게 설명하려면 입력할 값, 예외적인 상황, 결과를 내는 방법등에 대해 자세하게 설명해줘야 할 테니까.

코드 컨벤션

미션을 받고 가장 먼저 한 일은 Javascript 코드 컨벤션을 읽어본 것이다. 우테코에서는 두 회사(Google, NHN)의 코드 컨벤션을 제시하고 지키도록하였다.

• Google Javascript Style Guide
• TOAST UI Javascript 코딩 컨벤션

컨벤션을 보고 내 코딩 스타일과 다른 부분만 따로 정리해서 매주 미션 진행 전에 읽어봤다. 평소에도 코딩스타일에 엄격한 편이라 일반적인 것은 거의 잘 지키고 있는 편이었는데, 몇 가지 다른 부분이있었다.

문장의 종료에는 세미콜론을 사용한다.

Javascript는 세미콜론 사용이 필수가 아니다. 조금이라도 더 간결한 것을 선호해서 평소 세미콜론을 안썼는데, 컨벤션 위쪽에 떡하니 적혀있어 충격이었다. 최대한 직접 붙이려고 노력했지만 이미 습관이 빼먹는 경우가 많았다. 실수 방지를 위해 prettier를 설정해두고 미처 놓친 부분은 자동으로 세미콜론이 붙도록 해주었다.

배열과 객체는 반드시 리터럴로 선언한다.

// Bad
const arr = new Array(1, 2, 3, 4, 5);
const obj = new Object();

// Good
const emptyArr = [];
const emptyObj = {};

한 줄짜리 블록일 경우라도 {}을 생략하지 않으며 줄바꿈한다.

코드를 조금이라도 줄이려고 한 줄짜리 블록은 줄바꿈 없이 작성할 때도 있었는데(심지어 그때 그때 달랐다), 이번 기회에 확실히 줄바꿈하게 되었다.

2주 차 - 자동차 경주 게임

목표: 모듈 분리하기

요구사항

• 들여쓰기 depth 2까지
• 함수는 한가지 일만 하도록 최대한 작게
• 함수의 길이는 최대 15라인까지
• var를 사용하지 않고, const와 let만 사용
• import를 이용해 스크립트 모듈화
• template literal을 이용해 정보와 HTML String을 가독성 좋게 표현

이전 미션에 더해 여러 가지가 추가되었다. 그 중 가장 치명적인 것은 함수 길이 제한이 아닐까 싶다. 사실 이번 미션에서는 크게 의식하지 않아도 함수 길이가 15라인이 넘는 일이 거의 없었는데, 문제는 다음 미션이었다...

README 작성하기

미션 시작전에 README에 기능 목록을 작성하더라도 구현 하다보면 변경될 수 있고, 한 번에 완벽히 작성하려고 부담가지기보다 계속 업데이트하면서 살아있는 문서를 만들라는 피드백을 받았다. 보자마자 나를 위한 피드백이라고 생각했다. 1주 차 미션을 시작하며 기능 목록을 한 번에 완벽하게 작성해야한다는 생각에 구현을 시작하지 못한채 목록 작성에 많은 시간을 쏟았다. 하지만 뒤늦게 생각해보면 완전한 주객전도였다. 기능 목록 작성을 완벽히 못 해서 코드를 못 짜고 있다니. 2주 차 미션은 빠르게 구현 기능 목록을 작성하고 구현하면서 처음 생각과 달리 구현 순서가 바뀌거나 추가되는 기능이 생기면 그때 그때 수정하며 진행했다.

더불어 유명 오픈소스들을 화려한 README를 보며 README를 어디까지 작성해야 할 지 찾아본 적이 있다. 따로 정리하지 않기도 했고, 그 동안 별 대단한 프로젝트도 아닌데 README를 그렇게 자세히 써야하나 하는 생각에 실천하지 않아 다 잊어버렸다. 이번 기회에 다시 찾아보고 새 프로젝트를 시작할 때 마다 보려고 Notion에 정리해두었다. 간단히 README에 포함할 내용을 열거해보자면 아래와 같다. 내용 목록만 봐도 변경사항이 있을 때 마다 업데이트해서 살아있는 문서로 만들어야 정보전달의 역할을 제대로 할 수 있는 것들이 많다.

• 프로젝트 이름
• (옵션) Badge
• 프로젝트 소개
• 실행 방법
• 지원 브라우저 : 웹 프로젝트의 경우 작성. 버전까지 명시하는 것이 좋음.
• 사용 방법 : 모듈, 라이브러리, API를 만든 경우 작성. 간단한 예제를 포함하기.
• 저장소 기여 방법 : 오픈소스의 경우 작성. 오픈소스의 계획이나 지향점을 적어두면 도움이 됨.
• 저작권
• 오류 : 새로운 오류를 보고하는 방법. 알려진 오류 표시.

3주 차 - 지하철 노선도

목표: 여러 모듈간에 서로 관계를 맺어 하나의 프로그램 완성하기

요구사항

• 들여쓰기 depth 2까지
• 함수는 한가지 일만 하도록 최대한 작게
• 함수의 길이는 최대 15라인까지
• var를 사용하지 않고, const와 let만 사용
• import를 이용해 스크립트 모듈화
• template literal을 이용해 정보와 HTML String을 가독성 좋게 표현
• data속성을 활용해 HTML 태그에 데이터 관리
• localStorage를 이용하여 새로고침해도 정보 유지

이전 미션까지는 요구사항이 큰 제약이라고 느끼지 못했다. Javascript에서 제공하는 api(foreach, map 등)를 적극적으로 활용(2주차 피드백에도 있었다)하면 들여쓰기 depth 2까지, 함수 길이 최대 15라인까지 요구사항을 맞추는 것이 어렵지 않았었다. 하지만 마지막 미션에서 컴포넌트와 기능이 크게 늘어나면서 함수 길이 요구사항을 위해 작성한 코드를 분리하는 일이 심심치 않게 있었다.

data속성을 활용하여 HTML 태그에 데이터를 관리해야하는 요구사항이 추가되었다. 역, 노선, 구간의 유일한 데이터 값들을 관리하라고 되어 있었으나, 리스트의 인덱스를 저장하고 삭제하는 이벤트에 사용하는 정도로 그쳤다. 역, 노선, 구간에 고유한 id값을 주어야하나 생각했었지만 배열에 저장했기 때문에 인덱스로 충분할 것이라 생각했다. 

localStorage는 이전에 Todolist를 만들며 사용해보았기 때문에 그때의 코드를 참고하여 구현했다.

3주차 미션은 4개의 탭을 가지고 각 탭마다 보여주는 화면과 기능이 다르다. 탭 전환을 각 탭의 화면 전체를 감싸는 컴포넌트의 isShow값에 따라 display값을 none 또는 block으로 변경하는 방식으로 구현했다. 이렇게 하면 현재 화면에 보이지 않는 탭의 DOM요소도 display: none상태로 존재하게 된다. 개발을 하다보면 개발자도구가 항상 켜져있는데 화면에 보이지 않는 요소의 HTML태그가 존재하는 것이 거슬렸지만, 다른 방법을 몰라 이런 방식으로 구현을 하게 되었다. 이런 방식이 괜찮은 것인지, 다른 방법을 써야했는지 잘 모르겠다. 우테코에 합격해서 이런 고민에 대한 리뷰를 받을 수 있으면 좋겠다...

제출 직전에 세 번째 탭에 정보를 입력하면 화면이 사라지는 오류가 있는 것을 발견했다. 그런데 마감 시간이 얼마 남지 않아 수정하지 못하고 제출했다😥.

상수 분리하기

저번 미션 피드백으로 상수를 활용하라는 내용이있었다. constants.js파일에 요구사항으로 주어진 DOM요소 id와 class이름, localStorage의 key값, 에러 메세지 등을 상수로 만들어 따로 관리하였다. 

시멘틱한 HTML 구조

시멘틱한 HTML 구조에 맞는 태그를 사용하기 위해 노력했다. 메인 화면을 header, nav, main태그로 나누고 새로운 데이터를 입력하는 곳은 form태그를 이용했다.

비구조화 할당

이번 미션에서는 비구조화 할당에 대해 공부하고 사용했다. 비구조화 할당을 이용하면 단 한 줄로 객체나 배열 내에 있는 각각의 값을 서로 다른 변수에 저장하는 것과 같은 작업을 할 수 있다.

const person = { name: "sunny", age: 25 };

const { name, age } = person;

console.log(name); // "sunny"
console.log(age);  // 25

프리코스에 참여하며 느낀점

시간약속을 잘 지킨다. 3주동안 메일을 통해 미션 안내를 받았는데, 모두 수요일 3시 정각(혹은 3시 1분)에 메일이 도착했다. 프리코스 참여자들을 기다리게 하지 않는다는 점이 좋았다.

미션을 정말 정성들여 준비했다는 생각이 들었다. 미션의 요구사항이 아주 자세하고, 각 실행 예시를 GIF로 만들어줘서 모호한 부분이 거의 없었다. 지원자들이 자주 묻는 질문은 따로 정리해서 추가 메일을 보내주기도 했다. 

다른 사람의 코드를 볼 수 있는 것이 엄청난 이점이다. 같은 주제로 60여 명(백엔드를 포함하면 180여 명)이 짠 코드를 볼 수 있는 경험은 흔치 않다. 분명 모두 같은 미션을 받아 같은 기능을 구현했는데 코드는 천차만별이다. 누군가는 class형으로 또 다른 누군가는 function형으로, 화면에 결과를 그리는 방식도 서로 다르고, 테스트 코드를 짠 사람도 있으며 파일 구조도 다 다르다. 다른 사람의 코드를 보다보면 내 코드에서 부족했던 부분도 보이고, 추가로 공부하고 싶은 것도 생긴다. 좋은 자극을 주는 소중한 경험이다.

공부는 셀프다. 우테코는 나아갈 방향을 제시할 뿐이다. 혼자 공부하다보면 가장 어려운 것이 내가 지금 뭘 공부해야하는지 모른다는 것이다. 공부할 것이 넘쳐나는 것은 알겠는데, 현재 내 상황에서 어떤 공부를 먼저 해야할 지 알 수 없다. 프리코스는 미션 요구사항과 피드백을 통해 미션을 통해 학습해야 할 것의 키워드를 제시한다. 하지만 지식을 떠먹여주진 않는다. 아마 똑같이 프리코스에 참여했더라도 미션 내용에 맞춰 구현만 한 사람과 다른 사람의 코드도 둘러보고, 미션 요구사항과 피드백에서 주어진 개념에 대해 알아보고 왜 이런 요구사항이나 피드백이 주었는지 생각해본 사람은 프리코스 과정에서 얻은 것의 질과 양에 큰 차이가 있을 것이다. 우테코는 기본적으로 자기주도적 학습을 지향하니 본 과정도 비슷하리라 생각한다. 

우테코 지원을 준비한다면?

프로그래밍은 기본이니 제외하고 말하자면, Git 공부하기와 클린코드 책을 읽어보길 추천한다.

Git 공부하기

프리코스에 참여하기 위해서는 Git을 반드시 알아야한다. 모든 미션은 Github 저장소에 주어지고 해당 저장소를 Fork해서 구현 후 Pull Request를 보내 제출해야한다. 여러 블로그 후기를 보니 최종 선발되어도 같은 방식으로 Github에서 미션을 받고 코드리뷰를 하는 것으로 보인다. 꼭 우테코를 위해서가 아니더라도 개발자라면 Git은 필수이니 미리 공부하고 사용에 익숙해지는 것을 추천한다. 프로젝트 하나정도 Git으로 관리하다보면 기본적인 기능은 사용할 수 있을 것이다.

프리코스를 진행하며 가장 많이 사용한 명령은 아래와 같다. 이 외에도 Github에서 Pull Request보내는 방법(어렵지는 않지만 경험이 없다면 실수할 수 있다)에 익숙해지면 좋다. 

$ git clone '저장소주소'
$ git checkout -b '새로 만들 브랜치 이름'
$ git reset .
$ git add '파일 이름'
$ git add .
$ git commit -m '커밋 메세지'
$ git commit --amend -m '커밋 메세지'
$ git push

클린코드

필수는 아니지만 클린코드를 읽어볼 것을 추천한다. 프리코스 직전에 참여했던 스터디에서 추천해줘서 프리코스를 진행하며 조금씩 읽었는데, 프리코스에서 피드백으로 주신 내용과 겹치는 부분이 많았다. 

• 길어도 좋으니 한눈에 의미를 파악할 수 있는 이름 짓기 -> 2장. 의미 있는 이름
• 의미없는 주석 달지 않기 -> 4장. 주석
• 구현 순서도 컨벤션이다 -> 5장. 형식 맞추기

사실 이건 프리코스를 진행한 후 책을 읽어도 좋다. 접하는 순서에 상관 없이 이전에 봤던 내용을 또 보게되면 더 집중해서 보게되고, 기억에도 잘 남고, 더 여러 예시를 알게 되며, 중요성도 부각되니까. 워낙 유명한 책이니 우테코 지원과 상관없이 읽어보는 것을 추천한다.

 

---

참고 사이트

• [Git, 깃] README.md 작성하는 방법, 예시 | markdown (마크다운) 사용법, 문법 - 쥰
• Github README.md 작성법 - 꾸무 
• [HTML 바로 알기] Semantic Web을 위한 Semantic Elements - bono
• 비구조화 할당(구조분해) 문법 - velopert