우아한 테크코스 지원부터 프리코스까지

https://pixabay.com/ko/photos/글쓰기-작가-메모-펜-공책-923882/

 

우아한 테크코스 프리코스 마지막 미션이 어제 끝났습니다.

애당초 후기를 미션 pr을 제출하면서 같이 제출하는 게 목표였는데, 구현에 급급해서 결국 후기까지는 작성하지 못했습니다.

후기를 공유하는 게 프리코스를 준비하시는 분들께 힘이 된다고 하셨는데 힘을 드리지 못해 죄송하며, 혹시라도 이 글을 확인하신다면 감사하다는 말을 전해드리고 싶네요ㅎㅎ

 

이번 글에는 우아한 테크코스 지원부터 프리코스까지 느꼈던 점에 대해 정리하려 합니다.

 

지원 동기

작년 12월 말부터 지금까지 대학생 창업팀에 속해 프론트엔드 개발자로 앱 서비스를 개발했습니다.

그 앱 서비스가 바로 ATSAY 입니다.

빠르지는 않지만 꾸준하게 사용하는 유저분들이 늘어나고 있고, 유저분들이 '잘 이용하고 있어요~'라는 반응을 해주실 때 보람을 느낍니다ㅎㅎ

 

이렇게 보람을 느낄 수 있는 프로젝트에 참여하게 돼서 감사한 마음을 느끼지만, 한편으로는 앞으로 커리어에 대한 고민도 함께 들었습니다.

ATSAY 는 React Native(이하, RN)으로 개발이 된 서비스고 RN을 이용해서 개발을 하고 있지만, 앱 개발자로서 경험을 어필하기도 애매하고 웹 프론트엔드 개발자로서 경험을 어필하기도 애매하다는 생각을 가지고 있었습니다.

그리고 아쉽게도 작은 규모의 팀이다 보니, 경험 많은 개발자 분들로부터 조언을 얻거나 작업하면서 배우기도 힘든 구조였습니다.

 

이런 생각을 하던 와중 같이 스터디를 하는 팀원으로부터 아래의 사진을 받았습니다.

우아한 테크코스 모집 공고

우아한 테크 코스 모집 소식이었습니다.

진로와 성장에 대해 고민을 했던 시기였고 마침 이번 기수는 작년 기수의 2배 인원을 모집한다고 하길래 망설임 없이 지원하기로 결심했습니다.

 

그리고 팀 리더께 양해를 구하고 자소서를 준비했습니다.

(돌이켜보면 새로운 곳에 도전하고 싶다는 말이 서운할 수 있었는데, 너그럽게 받아주고 오히려 성장에 응원을 보내준 Damon께 고맙다는 말을 전합니다. Damon 고마워요!)

 

프리 코스

프리코스는 본 과정을 미리 체험할 수 있게 미션 형식의 과제가 주어지고, 참가자들은 미션의 요구사항을 지키면서 프로그래밍을 하게 됩니다. 그 과정 중에 부족한 점이 있다면 스스로 공부를 해야 합니다. 그리고 각 미션이 끝나면 메일로 참가자들에게 공통 피드백을 전달해줍니다.

 

프리코스에서 가장 인상적이게 느낀 건, 참가자들이 제출한 모든 코드가 서로에게 공개된다는 점이었습니다.

Github을 통해 PR(Pull Request)를 올리는 법을 연습하는 취지도 있겠지만, 우아한테크코스가 '동료들과 공동으로 학습하고 같이 성장하는 방식'을 추구하기 때문인 점도 있지 않을까 추측합니다ㅎㅎ

덕분에 다른 참가자들의 코드를 보며 많이 배울 수 있었습니다.

같은 목적으로 작성된 코드여서 그런지, 제가 작성한 코드와 더욱 비교됐고 '컴포넌트 기반 개발', 'mvc 패턴', '옵저버 패턴' 등 프로그래밍 관련 키워드들도 많이 배울 수 있었습니다.

열정 있는 분들만 모여서 프로그래밍 외적으로도 배울 점이 많았습니다.

기록의 중요성을 알고 있음에도 바쁘다는 이유로 정리하는 걸 미뤘었는데, 매주 배웠던 내용을 회고록에 작성하시는 분들을 보면서 반성을 하게 됐습니다.(저도 조금 늦은 감이 있지만 프리코스를 하면서 배웠던 내용들을 여기에 정리하려 합니다😎)

 

메일로 오는 주차별 피드백에도 성장에 도움이 되는 내용이 많았습니다.

지금부터는 주차별 미션의 소개와 제가 배웠던 점 그리고 피드백에 대해 정리하려 합니다.

 

1주차

 

1주차 미션은 숫자 야구 게임을 구현하는 미션입니다.

프로그램을 실행하면, 상대방(컴퓨터)은 1부터 9 사이의 중복되지 않은 세 개의 숫자를 생성합니다.

사용자가 세 개의 숫자를 입력하여 상대방의 숫자를 맞추는 게임입니다.

미션은 여기서 확인할 수 있습니다.

 

첫 미션이어서 그런지 구현해야 하는 기능은 단순했습니다.

하지만 함수의 길이 제한과 indent 제한 그리고 컨벤션 등의 제약사항을 처음 겪는 것이었고, 무엇보다 프레임워크 없이 Vailla Javascript로 프로그래밍하는 게 낯설었기 때문에 체감되는 난이도는 더욱 높았습니다🥲

 

1주차 미션에서 기억에 남는 배운 점을 간략히 정리하면 아래와 같습니다.

 

1. var와 const, let의 차이점

 미션 요구사항에 '변수 선언 시 var를 사용하지 않는다. const와 let을 사용한다'라는 조건이 있었습니다.

그동안 javascript 예시 코드들에서 var 대신에 재할당 하지 않는 변수는 const로 재할당이 필요한 변수는 let을 사용하는 것을 보고,

그 이유를 모른 체 const와 let을 사용했었습니다.

미션 요구사항에서 해당 내용이 있는 걸 보고 이유가 궁금해져서 미션 시작 전에 먼저 공부를 했습니다.

 

var 사용 시 발생될 수 있는 문제점을 정리하면 아래와 같습니다.

• var 키워드는 함수 레벨 스코프를 가진다. 반면, let과 const는 블록 레벨 스코프를 가진다.
  • 이로 인해, for 문을 사용할 때 자주 쓰는 변수 i를 var 키워드로 선언해서 사용하면 해당 변수는 for문의 밖에서도 참조가 가능하게 됩니다.
• 변수를 선언하기 전에 참조가 가능하기 때문에 아래 예시 코드와 같은 현상이 발생한다.(변수 호이스팅과 관련)

console.log(test) // undefined

var test = 100

console.log(test) // 100

 

• 변수의 중복 선언이 가능하다.

var test = 100;

console.log(test);

var test = 200;

console.log(test);

 

 

2. javascript의 전역 객체

• 전역 객체는 자바스크립트 엔진에 의해 어떤 객체보다 먼저 생성되는 최상위 객체이다.
• javascript의 전역 객체는 javascript를 실행하는 환경에 이름이 다르다.(브라우저 환경 - window, Node 환경 - global)
• 전역 객체의 대표적인 프로퍼티로는 네이티브 객체(Object, String, Number와 같은 표준 빌트인 객체를 포함)와 환경에 따른 호스트 객체(브라우저에서는 DOM, BOM 등이 여기에 해당된다.)가 있다.

 

3. eslint 사용법과 컨벤션

1주차 미션에서는 eslint를 처음 사용해봤습니다.

다만, 처음부터 적용한 것이 아니라 미션을 다 구현하고 eslint를 적용했습니다.

컨벤션 가이드를 보고 나서 기능 구현을 시작했기에, 컨벤션을 준수하면서 프로그래밍을 했다고 생각했지만 결과는 그렇지 않았습니다.

가장 기본적인 indent size와 single quote를 지키지 못했습니다.

eslint를 사용해서 알 수 있었던 점이었고 린터의 중요성도 깨닫게 됐습니다.

 

또한 처음 eslint를 설치하고 vscode extension을 연결하는 작업이 잘 안됐는데 그 부분에 대한 경험은 여기에 작성을 했습니다.

(에러를 만나서 eslint를 여러 번 설치한 덕분?에 이제는 eslint를 설치하고 설정하는 작업은 다른 레퍼런스 없이 바로바로 할 수 있게 됐습니다ㅎㅎ)

 

 

1주차 피드백에서 인상적이었던 피드백은 '기능목록을 업데이트하라 - 죽은 문서가 아니라 살아있는 문서를 만들기 위해 노력한다'였습니다.

프리코스 미션은 기능 목록을 먼저 만들고, 기능 단위로 커밋하는 방식으로 진행하는 게 기본 규칙이었습니다.

때문에 기능 구현 전에 미션에 필요한 기능들과 예외 조건들을 정리하는 데 많은 시간을 투자했습니다.

하지만 피드백에서는 '시작할 때 모든 기능 목록을 완벽하게 정리해야 한다는 부담은 가지기보다는 기능을 구현하면서 문서를 업데이트하라'는 말이 있습니다. 

어려워했던 점에 대해 피드백을 받았던 게 놀라웠고, 저는 '구현 전에 프로그램의 전체적인 구현 과정을 생각하지만 모든 걸 완벽하게 계획을 하지 않아도 된다.'라고 받아들였습니다.

이 피드백 덕분에 2주차 미션에서는 기능 목록을 구현할 때 부담이 줄어들었습니다.

 

 

2주차

 

2주차 미션은 간단한 자동차 경주 게임을 구현하는 것입니다.

사용자는 ,(콤마)로 구분해서 자동차 이름을 입력합니다.

그리고 레이싱을 시도할 횟수를 입력하고 확인 버튼을 누르면 레이싱 실행결과와 최종 우승자를 출력하는 자동차 경주 게임을 구현하는 것이 2주차 미션이었습니다.

미션은 여기서 확인할 수 있습니다.

 

1주차 미션이 끝나고 도착한 메일에는 '2주차 미션의 목표는 클래스 분리'라고 명시됐습니다.

그리고 미션의 요구사항에도 'Car 객체를 만들고, new를 이용해 인스턴스를 만들어 사용하라'는 조건이 있었습니다.

미션의 목표가 클래스 분리이기 때문에 여러 파일이 생성될 거라 예상했고, 미션을 시작하기 전에 프로젝트 구조를 구성하는 방법에 대해서 많은 고민을 했었습니다.

 

2주차 미션도 진행하면서 배운 점이 많지만 그중 중요하다고 생각되는 것들을 정리하면 아래와 같습니다.

 

1. 중복을 피하는 방법 중 하나는 상속이다.

1주차 피드백으로 '중복은 소프트웨어에서 모든 악의 근원이다.'라는 피드백이 있었습니다.

피드백을 처음 봤을 때는 가독성 때문에 중복을 지양하라는 걸로 받아들였습니다.

하지만 JS의 객체지향 개발에 대해 공부를 하면서 '상속' 또한 중복을 피하는 방법이라는 것을 알게 됐습니다.

특히, 상속을 통해 중복을 피하면 코드 재사용성을 높이는 효과뿐만 아니라 메모리 사용의 감소 효과도 있다는 점이 놀라웠습니다.

 

이번 미션에서는 상속을 어디에 사용할 수 있을지 고민을 했습니다.

입력 자동차 이름을 입력하는 form과 시도할 횟수를 입력하는 form 이 공통점이 있다는 걸 발견했고, Form 컴포넌트를 만들고 각각의 입력 form에 상속을 적용시켜서 구현을 했습니다.

 

상속을 적용시켜 구현한 컴포넌트

제가 2주차 미션에서 상속을 적용시켰던 코드는 여기서 확인이 가능합니다.

 

 

2. DOM을 다루는 방법과 추상화에 대한 경험

2주차 미션이 1주차 미션과 달랐던 점은 필요한 DOM 엘리먼트를 직접 생성을 해야 한다는 점이었습니다.

또한, 이번 미션에서는 직접 index.html에 엘리먼트를 추가 및 삭제를 금지하는 프로그래밍 요구사항이 있었습니다.

 

이전 미션에서는 간단히 엘리먼트의 텍스트를 변경하는 정도였지만, 이번 미션에서는 DOM 엘리먼트를 동적으로 생성하는 기능이 필요했습니다.

따라서 DOM을 다루는 방법에 대해 공부했고, createElement나 appendChild 등의 api에 대해 연습할 수 있었습니다.

 

또한 리팩토링을 하면서 DOM 엘리먼트를 생성하고, 부모 엘리먼트에 첨부하는 코드가 중복되는 느낌을 받았습니다.

'중복을 피하라'는 피드백에 따라 해당 로직을 추상화를 했고 코드는 여기서 확인 가능합니다.

 

 

3. 컴포넌트 기반 개발에 대한 흐름

2주차 미션에서는 프로젝트 구조에 대해 고민을 많이 했습니다.

레퍼런스와 다른 분들의 프로젝트 구조를 참고한 결과 프로젝트 설계가 크게 'mvc 패턴 설계'와 '컴포넌트 기반의 설계'로 나뉘는 것을 확인했습니다.

React에 대한 경험이 약간 있었기 때문에 컴포넌트 기반의 설계가 더 익숙하다고 판단해서, 2주차 미션에서는 컴포넌트 기반으로 프로젝트 개발을 진행하기로 결정했습니다.

하지만, Vanilla Javascript로 컴포넌트 기반 개발이 처음이어서 그런지 프로그램의 모든 부분을 컴포넌트화 시키지는 못했습니다.

대신 미션이 끝나고 다른 분들의 PR을 보면서 컴포넌트 기반 개발의 흐름에 대해 감을 잡을 수 있었고 좋은 레퍼런스도 찾을 수 있었습니다.

 

그리고, 2주차 미션에서는 부족함을 느꼈기 때문에 미션이 끝나자마자 찾은 레퍼런스를 참고하여 컴포넌트 기반의 개발을 연습했습니다.

덕분에 컴포넌트의 생명주기도 직접 구현을 해보게 됐고, 추가적으로 이벤트 위임과 dataset 속성, Javascript의 스코프 개념에 대해서도 배울 수 있었습니다.

이때 연습한 내용은 여기에 기록을 했습니다.

 

 

2주차 피드백에서는 '값을 하드 코딩하지 말고 상수를 활용하라 그리고 이름에서 의도를 들어내라'는 피드백이 눈에 들어왔습니다.

피드백을 보고 코드를 살펴보니 엘리먼트의 속성 이름과 엘리먼트의 텍스트 컨텐츠를 하드 코딩한 게 눈에 들어왔습니다.

코딩을 할 때는 이런 것들은 의미가 전달이 되겠지라고 판단을 했었는데, 피드백을 받고 나니 읽는 사람의 시선에서는 의미가 잘 전달되지 않을 수 있겠다는 생각이 들었습니다.

이 피드백 덕분에 다음 미션에서는 하드 코딩을 완전 지양하는 방향으로 진행했고, 상수의 이름에서 의도가 잘 드러나는지 한번 더 고민을 하게 됐습니다.

 

 

3주차

 

마지막 미션이었던 3주차 미션은 자판기의 기능을 구현하는 미션이었습니다.

사용자는 프로그램을 통해 할 수 있는 행동(구현해야 하는 기능)은 아래와 같습니다.

1. 상품을 추가할 수 있다.

2. 잔돈을 충전할 수 있다.

3. 금액을 투입할 수 있다.

4. 상품을 구매할 수 있다.

5. 남은 잔돈을 반환할 수 있다.

 

미션은 여기서 확인 가능합니다.

 

3주차 미션은 마지막 미션인 만큼 가장 어려웠습니다.

이번 미션에서는 모든 DOM 엘리먼트를 JS로 구현을 해야 했기 때문에 더욱 체감 난이도가 높았던 거 같습니다.

그리고 구현할 기능도 많았기 때문에 한 주 동안은 미션을 완료하기에 급급했습니다.

 

3주차 미션이 끝나고 아직 공부하지 못한 내용도 있지만, 미션을 하면서 배웠던 것들과 공부할 내용에 대해 적으려 합니다.

 

1. 템플릿 스트링을 이용해서 엘리먼트를 원하는 위치에 추가하기

이번 미션에서는 생성해야 하는 DOM 엘리먼트가 많았고 테이블과 같은 구조가 복잡한 엘리먼트도 필요했기 때문에 createElement나 appendChild 등의 api 만을 활용해서 구현하기에는 시간이 너무 오래 걸렸습니다.

때문에 템플릿 스트링을 이용하는 방법을 사용하게 됐고, 엘리먼트를 원하는 위치에 찾는 방법에 대해 찾다가 insertAdjacentHtml 에 대해 알게 됐습니다.

이 메서드 덕분에 조금 더 간편하게 코드를 작성할 수 있었습니다.

 

이번 미션에서는 createElement나 appendChild 등의 api와 템플릿 스트링을 같이 혼합해서 사용을 했었는데, 최종 코딩 테스트에는 시간제한이 있는 만큼 템플릿 스트링을 활용해서 DOM 엘리먼트를 생성하는 방식을 적극적으로 활용하려 합니다.

 

2. Object.freeze()를 이용한 객체 동결

2주차 미션이 끝나고 다른 분들의 코드에서 발견한 메서드입니다.

Object.freeze() 메서드는 매개변수로 전달된 객체의 속성을 변경할 수 없게 만들어줍니다.

따라서 상수 객체를 이 메서드에 전달하게 되면 불변성을 보장할 수 있어 유용하게 사용할 수 있습니다.

이번 미션에서는 상수 관리에 신경을 썼고, 모든 상수 객체에 Object.freeze() 메서드를 사용해서 불변성을 보장했습니다.

 

3. localStorage 사용법

이번 미션에는 localStorage를 이용해서, 새로 고침을 해도 최근 작업했던 내용이 유지되도록 하는 기능 요구사항이 있었습니다.

localStorage를 공부하면 알게 된 내용은 아래와 같습니다.

• localStorage는 key를 이용해서 value를 구분한다.(hash처럼!)
• localStorage는 문자열 값만 사용할 수 있다. 따라서, 객체를 저장할 때는 추가적인 처리가 필요하다.
  • 객체를 저장할 때: JSON.stringify() 메서드를 이용해서 객체를 문자열로 변환
  • 객체를 불러올 때: JSON.parse() 메서드를 이용해서 문자열을 객체로 변환
• localStorage에 인스턴스를 저장하게 되면, 프로퍼티만 저장이 된다.(경험을 통해 배우게 됐습니다..!)

 

4. 디자인 패턴의 적용과 새로운 패턴 발견

디자인 패턴은 글로만 공부를 했었는데, 이번 미션에서는 데이터를 저장하고 비즈니스 로직을 처리하는 객체에 싱글톤 패턴을 했습니다.

그리고 이번 미션에서 아쉬웠던 점 중 하나가 컴포넌트 기반으로 개발을 했지만, 컴포넌트 생명주기를 적용시키지 못했던 점었습니다.

하지만, 다른 분들의 PR을 보니 옵저버 패턴을 활용해서 상태 값이 변할 때 특정 컴포넌트만 리 렌더링 되도록 구현하신 것 확인할 수 있었습니다.

덕분에 아쉬웠던 부분을 해결할 수 있는 키워드를 알 수 있었고, 후기를 작성하고 천천히 옵저버 패턴과 전역 상태 그리고 컴포넌트 생명주기 구현을 연습해 보려 합니다.

 

어떻게 공부했는 가?

1. javscript 기본기 쌓기

1차 합격 소식을 받고 프리코스가 시작되기 전에 '모던 자바스크립트 딥 다이브(이웅모 지음)' 책을 구했습니다.

저는 미션이 공개되고 바로 미션을 시작하지 않았습니다.

대신, 해당 주차 미션에 기본이 될만한 내용을 먼저 기본서에서 공부를 하고 미션을 진행했습니다.

덕분에 미션을 진행할 때 공부한 내용을 새롭게 적용시킬 수 있었습니다.

 

미션에 필요한 거 같은 내용을 선정해서 공부했기 때문에 3주의 기간 동안 해당 책을 모두 완독 하지는 못했습니다.

프리코스 기간이 끝나고 나서는 처음부터 책을 완독을 해보려 합니다.

 

2. 다른 사람의 PR과 코드를 참고하기

Javascript의 기본 개념과 동작원리에 대해서 책에서 가장 많이 배웠다면 프로그래밍적인 스킬과 활용법은 다른 분들의 PR과 코드에서 가장 많이 배웠습니다.

미션을 진행하면서 정말 막막할 때 다른 분들의 코드에서 힌트를 찾아 공부할 수 있었고, 미션이 끝나고 아쉬웠던 부분도 PR과 코드에서 해답을 찾을 수 있었습니다.

그리고 이를 기반으로 다음 미션에서는 막혔던 부분과 아쉬웠던 부분에 대해서 스스로 해결하고 개선할 수 있었습니다.

 

코드를 둘러보면서 새로운 키워드와 레퍼런스 그리고 깔끔한 디렉터리 구조에 대해서 많이 배워갔습니다.

 

 

성장한 점

1. 마크 다운 문법에 친숙해졌습니다.

프리코스 전까지는 노션을 이용해서 쉽게 마크다운을 작성하고 필요한 곳에 붙여 넣는 방식으로 마크다운 문서를 작성했습니다.

하지만, 피드백 중 '마크다운 문법을 학습하고 적용해 본다.'라는 피드백을 본 이후부터는 README나 PR 본문을 작성할 때 notion을 이용하는 걸 지양했습니다.

그리고 새로운 문법들도 사용한 경험이 됐습니다.

프로젝트 구조를 마크다운으로 도식화했고, 기능 목록은 체크리스트로 관리하게 됐습니다.

프리코스를 통해 마크다운 문법에 친숙해졌고, 이전보다 더 원활하게 문서를 작성할 수 있게 됐습니다.

 

2. 린터와 포메터를 통해 전보다 통일성 있는 코드 작성을 할 수 있게 됐습니다.

프리코스 기간에 린터와 포메터를 처음 사용해봤습니다.

컨벤션을 많이 어기고 있는 걸 인지하지 못했는데, 직접 두 소프트웨어를 사용해서 확인을 해보니 규칙에 어긋난 부분이 많아서 놀라웠습니다.

컨벤션이라는 게 정답이 있는 건 아니지만, 많은 사람들이 지키고 있는 규칙이 있다면 따라야 한다고 생각합니다.

앞으로 새로운 프로젝트를 시작하게 된다면, 통일성 있는 코드 작성 전에 위해 린터와 포매터를 먼저 설정할 것입니다.

 

3. 읽은 사람을 생각하면서 작업하는 습관이 생겼습니다.

프리코스 미션의 피드백과 요구사항을 지키기 위해 노력한 결과, 다른 코드를 작성할 때도 자연스레 '이게 의미가 잘 전달이 되나?', '함수의 길이를 줄일 방법이 없나?' 고민하는 과정이 생겼습니다.

또한 함수는 하나의 일만 잘하도록 분기를 해서 작업을 하고, 커밋을 할 때는 작업한 내용이 잘 파악될 수 있도록 내용을 구성하고 커밋 컨벤션을 준수하고 있습니다.

프리코스 과정을 통해 더 나은 협업을 위한 좋은 습관을 들인 거 같아 기쁩니다.

 

4. 자바스크립트의 기본기에 대해 공부 시작했습니다.

지금까지 Javascript는 다른 프레임워크와 같이 사용을 했었는데, 이번 프리코스에서 Vanilla Javascript로만 프로그래밍을 하면서 부족함을 많이 느꼈습니다.

Javascript로 객체지향적으로 코딩하는 법, DOM 엘리먼트를 직접 생성하고 조작하는 법, 컴포넌트 단위로 개발하는 패턴 등 'Javascript만으로 코딩하는 방법'에 대해 많이 배워가는 시간이었습니다.

프리코스를 진행하면서 프로그래밍 외적으로 Javascript의 기본기에 대해 공부를 병행하면서 문뜩 '여러 언어를 얕게 공부하기보다는 하나의 언어를 끝까지 깊게 파보라'는 말이 떠올랐고, 그 말이 공감이 됐습니다.

아직 부족한 점이 많다는 걸 알기에 이번 과정을 계기로 Vanilla Javscript에 대해 계속 공부를 하려 합니다.

 

마무리

후기를 적기 전에는 프리코스 때 성장했던 점과 공부했던 방법에 대해서만 정리하려 했는데, 기억을 되짚어 보니 지원하기 전 마음이 떠올라서 지원 동기부터 적게 됐네요.

덕분에 처음 우아한테크코스에 지원을 했던 마음이 떠올라 다시 열정이 불타올랐습니다🔥

이제 최종 코딩 테스트를 앞두고 있는데, 미션마다 구현에 어려움을 겪었던 만큼 시간 안에 미션을 완료할 수 있도록 구현 위주로 연습을 하려 합니다!

끝맺음을 잘해서 합격 후기를 올리는 날이 오면 좋겠네요🙏