프리코스
프리코스는 우아한테크코스 본 과정을 경험해 보는 단계로써, 매주 주어지는 미션을 구현하여 제출하는 방식으로 진행되는 우아한테크코스의 선발 과정입니다. 미리 우아한테크코스를 체험해 볼 수 있는 체험판이라 할 수 있겠죠.
별도의 강의는 없고, 미션이 주어지면 지원자가 스스로 해결 방법을 찾아 나가는 방식입니다.
4주 간의 미션 해결하기
우아한테크코스 5기 프리코스는 4주 간 진행되었고, 매 주 미션이 하나씩 주어졌습니다. 각 미션은 기능 요구사항, 프로그래밍 요구 사항, 과제 진행 요구사항의 세 가지로 나뉘며, 주차가 진행될 수록 미션의 난이도가 높아집니다. 모든 미션을 제출해야(미션 성공/실패 여부와 상관없이) 1차 심사를 받을 수 있습니다.
아래에 4주 간의 미션과 제가 제출한 미션의 저장소, 그리고 지원자분들끼리 진행한 코드 리뷰를 링크로 첨부해 드릴 테니, 궁금하신 분들은 확인해 보세요!
미션
제출
코수타
코수타는 코치와 수다타임을 의미합니다. 코수타는 매주 1회, 미션 시작 1시간 전에 시작되며, 프리코스 진행 중 지원자분들이 올려 주신 사전 질문에 대한 Q&A, 그리고 개발자 관련 조언, 다음 미션에 대한 설명을 코치님들께서 설명해 주시는 시간이에요. 프리코스 종료 후의 마지막 코수타 시간에는 전화 데이트도 있었어요.
코수타에 대해서는 다른 지원자분께서 정리를 정말 잘 해두셔서, 정리해 두신 링크를 대신 첨부할게요. 프리코스 동안 진행된 코수타는 모두 유튜브 영상으로 올라와 있으므로, 직접 보고 싶으신 분들은 유튜브에서 검색하시면 될 것 같아요.
프리코스 커뮤니티와 코드 리뷰
프리코스 커뮤니티는 지원자분들끼리 코드 리뷰를 하고, 개발 관련 질문 및 토론을 할 수 있으며, 미션 후기(회고록)를 적을 수 있는 커뮤니티입니다. 저도 이곳에서 지원자분들과 미션 마감 이후 코드 리뷰를 해 보곤 했었는데, 다양한 코드를 보고 왜 이러한 코드를 작성했는지에 대해 의견을 들어볼 수 있어서 좋았습니다. 아래는 제가 제출했던 미션에 대해 다른 지원자분들께서 코드 리뷰 해 주신 내용에 대한 링크입니다.
코드 리뷰
프리코스 미션을 수행하면서 배운 점
4주 간의 프리코스 미션을 수행하면서 배웠던 점, 고민해 봤던 점을 아래에 적어볼게요.
콘솔 Git과도 친해지기
프리코스 당시 Git이 처음은 아니었지만, 저는 GUI를 제공하는 Git Fork라는 프로그램을 주로 사용하고 있었어요. 가장 기본적인 콘솔 Git은 사용법이 저에게는 너무 어려웠고, 검색해 봐도 무엇을 해야 하는지 감을 잡기 힘들었고, 그리고 무엇보다 오류가 자주 발생했었거든요.
프리코스 미션을 수행하기 위해서는 Git을 사용해야 했고, 마침 Git을 사용하여 미션을 제출하는 방법도 프리코스 저장소에 작성되어 있었습니다. 그래서 이 기회에, 계속해서 미뤄만 왔던 콘솔 Git을 연습해야 한다고 생각하고, 프리코스 동안 콘솔 Git만 사용해 보도록 노력했습니다.
물론 사용 중 오류가 자주 발생하곤 했습니다. 특히, 잘못 커밋된 변경사항을 되돌리거나 브랜치를 변경할 때 많이 헤매곤 했는데, 계속해서 구글링을 한 끝에 결국 해결하고 무사히 미션을 제출할 수 있었습니다. 시행착오 끝에 해결하니까 기억에도 잘 남더라고요. 아직 Git에는 익숙하지 않지만 협업을 위한 기본 툴인만큼 앞으로도 계속해서 배워 나가야겠습니다.
코딩 컨벤션과 커밋 컨벤션 지키도록 노력해보기
코딩 컨벤션과 커밋 컨벤션은 1주차 미션을 제외하고 항상 프리코스 요구사항에 들어 있었습니다. 그만큼 우아한테크코스에서도 중요하게 생각한 요구사항이지 싶네요. 프리코스 동안 가장 지키려고 노력했던 요구사항이었습니다.
코딩 컨벤션/커밋 컨벤션은 읽고 관리하기 쉬운 코드를 작성하기 위한 코딩 스타일/커밋 스타일에 대해 정해놓은 규칙입니다. 프로젝트는 다른 사람과 함께 협업하며 만드는 경우가 훨씬 많기에, 쉽게 읽을 수 있는 코드, 역할을 한 눈에 알아볼 수 있는 코드가 정말 중요합니다. 좋은 코딩 컨벤션을 사용한다면 협업에 있어서 생산성이 높아지고, 코드 리뷰를 하기에도 편해지겠죠. 또한 코드를 지속적으로 개선해야 하는 유지보수 작업 또한 용이해질 것입니다. 커밋 컨벤션의 경우에도 마찬가지입니다. 어떤 종류의 커밋인지, 무엇을 추가로 작업했는지 명확하게 알 수 있다면 같이 협업하는 동료분들이 한눈에 쉽게 변경 사항을 확인할 수 있겠죠.
즉 코딩 컨벤션과 커밋 컨벤션의 올바른 사용은 협업과 유지보수를 위해 꼭 지켜야 하는 중요한 규칙입니다. 프리코스 동안 저는 Airbnb 코딩 컨벤션과 AngularJS 커밋 컨벤션을 사용했습니다. 첫 프로젝트 때 작성했던 커밋 메시지와 프리코스 4주차 때 작성했던 커밋 메시지를 여기 올려둘게요.
Before
After
구조에 대해 생각해 보기, 그리고 MVC 패턴 사용해 보기
파일 하나에 모든 코드를 작성해도 프로그램은 작동하지만, 코드가 길어지면 가독성이 떨어지고 유지보수 하기도 힘들어질 거에요. 프리코스 2주차부터 기능 단위로 파일을 나누는 연습을 해 보았습니다.
또한 3주차부터는 디자인 패턴 중 하나인 MVC 패턴을 사용했습니다. 프리코스에는 4주차에 한해 MVC 패턴 등의 디자인 패턴을 사용해 볼 것을 제약조건을 통해 요구했어요.
- 도메인 로직과 UI 로직을 분리하여 작성한다.
MVC 패턴은 Model - View - Controller의 세 구성요소로 나누어 프로젝트를 작성하는 기법입니다.
각 요소는 아래와 같은 역할을 맡습니다.
- Model - 주로 데이터베이스
- View - 주로 사용자가 보게 되는 인터페이스
- Controller - 주로 사용자의 입력을 받아들이고, 모델로부터 사용자가 원하는 정보를 얻은 후, 뷰를 통해 사용자에게 결과를 보여준다. 심부름꾼 같다는 생각이 들었습니다.
프리코스에서는 Model에 핵심 기능 구현을 위한 클래스를 담았고, View에는 오로지 UI 출력만을 담았습니다. 그 외에 사용자로부터 값을 받아오고 프로그램 구동을 위해 여러 작업을 처리하는 것은 Controller에게 맡겼습니다.
MVC 패턴을 사용해 보는 것은 정말 힘들었습니다. 개념을 이해하는 것, 구조를 어떻게 나눌 지 생각하는 일체의 과정이 정말 저에게는 어렵게 느껴졌습니다. 당연히 익숙하지 않았기에 구현하는 데 걸리는 시간도 훨씬 길었습니다. 그렇지만 작성을 마치고 기능들이 명확하게 분리된 것을 보니 확실히 유지보수하기에 훨씬 편할 것이라는 생각이 들더군요.
MVC 패턴과 같은 디자인 패턴들은 구조를 깔끔하게 하고 유지보수가 용이하도록 하기 위해 사용하는 것들이니, 상황에 따라 적절하다고 판단하는 디자인 패턴을 고르면 될 것 같습니다. 이론으로만 배우고 대충 넘어갔던 MVC 패턴을 직접 사용해 보니 신기하고 재밌더라고요.
테스트에 대해 배우고, 테스트 코드 작성해 보기
프리코스 미션의 저장소에는 기능이 제대로 구현되었는지를 확인하는 테스트 코드가 담겨있는 파일 ApplicationTest.js 가 항상 포함되어 있습니다. 기능을 구현하고 테스트 코드를 실행하면 미리 저장되어 있는 예제와 값을 비교하면서 제대로 구현했는지를 확인해 볼 수 있어요. 테스트를 위해 Jest라는 라이브러리가 사용되었더라고요.
여기까지는 뭐, 그러려니 하고 넘어갔습니다. 그런데 2주차 숫자야구 미션에서 신기한 광경을 봤습니다.
분명 숫자야구 게임의 숫자는 랜덤으로 설정되도록 구현했는데, 테스트 프로그램은 마치 답이 정해진 것처럼 정해진 값하고만 비교하고 있었습니다. 그러면서 테스트 프로그램은 정상적으로 작동하고 있었고요. 어떻게 이게 가능했는지 알아보니, Jest에는 함수를 모킹하는 jest.fn(), 모듈을 모킹하는 jest.mock() 가 있었기에 가능한 것이었습니다.
"모킹" 은 흉내내는 것을 의미합니다. 여기서는 테스트를 위해 실제 함수 또는 모듈을 흉내내고, 리턴 값 등을 테스트에 알맞게 조작하기 위해 사용되었습니다. 숫자야구 프로그램에서 값이 1, 2, 3으로 설정되었을 때를 테스트하고 싶은데 일일이 실행해 본다면 1, 2, 3이 얻어걸릴 때까지 기다려야 하니 번거로울 수밖에 없습니다. 모킹을 이용해 랜덤으로 값이 결정되는 함수의 리턴 값을 1, 2, 3으로 고정한다면 테스트하기 한결 편해지고, 예제 출력도 만들기 수월하겠죠?
테스트를 하는 방법도 다양했는데, 프리코스에서 사용해 보았던 테스트 방법은 유닛 테스트, 그리고 TDD(Test-Driven Development)였습니다. 유닛 테스트의 경우 프로그램이 제대로 작동하는지 기능 단위로 테스트를 해 보는 것을 의미하고, TDD의 경우 원활한 협업과 빠른 피드백을 위해 본격적으로 코드를 작성하기에 앞서 테스트 코드를 작성하는 것을 의미합니다.
이외에도 클래스와 객체, Prettier와 Eslint 같은 유용한 클린 코딩을 위한 도구, Node.js에 대한 기본적인 구조 등을 배울 수 있었습니다.
느낀 점
프리코스 전에는 자바스크립트 문법 기초 등을 배운다고 생각했는데, 프리코스는 미션과 피드백 위주였고 협업과 유지보수를 원활하기 위해 필요한 정보들을 많이 배울 수 있었습니다. 열정 있는 동료분들과 협업하고 싶은 제 바램에 대해 협업을 하기 위해서는 무엇을 알아야 하는지에 대해 답신을 받은 것 같았습니다. 알고리즘 문제를 풀 때 문제를 풀기 위해 어떤 아이디어로 접근할 지 오랜 시간 고민해 보는 것을 좋아했는데, 프리코스에서도 어떻게 구조를 짤 지, 이 문제는 어떻게 해결해야 할 지 고민하는 시간을 가질 수 있어 즐거웠습니다.
참고하면 유용한 정보들
- Git Fork 다운로드 페이지
- 프리코스 과제 제출 (Git 사용법)
- [Javascript] Eslint와 prettier 설치 및 vscode 에러 해결법
- AngularJS 커밋 컨벤션
- airbnb 코딩 컨벤션
- 정적 메소드, 너 써도 될까?
- getter를 사용하는 대신 객체에 메시지를 보내자
- JavaScript의 메모리 관리법
- What is the difference between the object method and the static method?
- [Jest] jest.fn(), jest.spyOn() 함수 모킹
- [FE] 다리 건너기 게임 jest 테스트 코드 이해하기
- 제리의 MVC 패턴
- MVC 디자인 패턴
- TDD(Test-Driven-Development) 방법론
- 효과적인 코드리뷰를 위한 리뷰어의 자세
'우아한테크코스' 카테고리의 다른 글
| 온보딩 미션 - 연극 후기 (6) | 2023.02.27 |
|---|---|
| 우아한테크코스 5기 지원 후기 (2) | 2023.01.12 |
| 우아한테크코스 5기 - 최종 코딩테스트, 그리고 결과 (0) | 2023.01.12 |
| 우아한테크코스 5기 - 최종 코딩테스트 준비 (2) | 2023.01.12 |
| 우아한테크코스 5기 - 지원 (0) | 2023.01.09 |