1차 합격하고 기뻐서 글적은게 엊그제같은데, 벌써 2차 과정인 3주간의 프리코스 과정이 마무리됐습니다! 🥳
감사히도 1차에 합격해서 프리코스를 참여할 수 있었는데요, 프리코스 전의 저는 상상할 수도 없을만큼 3주라는 짧은 시간동안 정말 많은 성장을 했습니다.
선발 과정에서도 성장할 수 있게 해주는 곳은 우아한테크코스가 유일하지 않을까요?
3주간 프리코스를 하면서 제가 어떤 부분에서 성장했는지, 회고해보려고 합니다.
1주차: 숫자 야구 게임
첫번째 미션은 숫자 야구 게임이였습니다!
1, 2주차 미션은 매 기수마다 동일하게 나오는 미션인 것 같습니다.
첫 미션이라서 그런지 구현 자체는 쉬워보였지만, 절대 쉬운 미션이 아니였습니다.
아무래도 첫 미션이다 보니, github을 다루는 것 부터, 기능 구현 목록을 작성하는 것, 커밋 메시지를 작성하는 것... 모든게 처음이였고 새로 배워야할 것 투성이였습니다. 🥲
특히! 코드 작성해볼 때 한번도 생각해본 적 없는 것들이 '요구 사항'으로 주어졌기 때문에, 이 수많은 요구 사항을 지키는 것부터가 너무 힘들었습니다. (ex. js 코딩 스타일 컨벤션을 지켜라, indent는 2까지, 하나의 함수는 한가지 역할만...)
처음엔 멘붕에 빠졌지만 노션에 공부해야할 것을 차근 차근 정리하고 하나씩 해내다보니, 무사히 미션을 마무리할 수 있었습니다.
정신 없이 지낸 한주였지만, 그만큼 정말 많이 성장한 한주이기도 했기 때문에 2주차 미션이 더더욱 기대됐어요!
1주차 미션에서 배운점은 다음과 같습니다.
📚 과제를 통해 배운점
-
github commit의 중요성을 배웠습니다.
commit 메시지 컨벤션에 따라 기능단위로 commit을 하는 과정을 통해, commit 메시지 작성하는 방법을 배웠습니다.
지금까지는 commit 경험이 많지 않기도 했고 중요성을 깨닫지못해서, 대충 commit을 하곤 했었습니다.
그런데 이번 프로젝트를 통해 개발자들이 공유하는 commit 메시지 컨벤션이 있다는 것을 알게되었고, 실제 컨벤션을 참고하여
commit 메시지를 작성하고나니 커밋 로그가 깔끔해져서 뿌듯함을 느꼈습니다.
commit 메시지를 잘 작성하면 더 좋은 커밋 로그 가독성, 더 나은 협업과 리뷰 프로세스, 더 쉬운 코드 유지보수에 효과적이라고 하니
앞으로도 commit 메시지 작성에 더 신경써야겠다는것을 배웠습니다.
또한 중간에 commit 메시지를 잘못 작성해서 기존 commit을 변경하거나 삭제해야하는 일도 생겼었는데,
구글링을 통해 적절한 명령어를 찾아낼 수 있었고, 이를 통해 새로운 github 명령어도 공부할 수 있었습니다. -
javascript 코드 컨벤션을 배웠습니다.
commit 메시지 컨벤션에 이어, javascript 코드 컨벤션이 있다는 것도 처음 알게됐습니다.
제공된 여러개의 컨벤션 중, NHN FE개발랩의 컨벤션과 airbnb 컨벤션을 정독했습니다. 정독을 모두 하긴 했지만, 이걸 어떻게 다 기억하고 적용할지 막막했습니다.
그러다가 이를 자동화 시켜주는 도구인 eslint, prettier을 발견했습니다.
처음 접하는 도구들이라서 설정하는데 꽤 오랜 시간이 걸렸습니다.
엄청난 시행착오 끝에 eslint와 prettier 공식문서를 참고하여 자동화 시키고 싶은 것을 설정할 수 있었습니다.
설정해놓은 대로 코드가 포맷팅 되고, js 컨벤션에 맞지 않는 것은 에러표시가 떠서 더 깔끔하게 코드를 작성하는데 도움이 되었습니다.
이런 도구가 있다는 것이 너무 신기했고, 앞으로도 일관적인 코드를 위해 eslint와 prettier를 활용해 코드컨벤션을 신경쓸 것 입니다. -
클린코드 작성을 의식적으로 노력했습니다.
javascript를 배운지 얼마 되지 않아서, 이전에는 무작정 코드를 작성하고 기능이 돌아가는 것만 신경썼었습니다.
그런데 이번 프로젝트에서는 클린코드를 작성하고자 의식적인 노력을 했습니다.
우연히 우테코 코치님의 클린코드 강의를 발견하여 처음으로 클린코드를 공부하게됐는데, 코드가 깔끔해지는 과정이 너무 신기하고 재밌게 느껴졌습니다.
이후에 클린코드 자료를 읽으면서 클린코드에 대한 공부를 이어나갈 예정입니다. -
기능 구현 목록 작성의 중요성을 배웠습니다.
개발 전에 요구 사항을 분석하고, 기능 구현 목록을 작성하는 것이 중요함을 배웠습니다.
기능 목록을 작성해보는 것은 처음이라서 작성하는게 쉽지 않았고, 다른분들의 작성 목록을 참고하면서 감을 잡았습니다.
이후 다시 요구 사항을 보며 기능별로 구현 목록을 작성할 수 있었습니다.
개발 과정에서 기능 구현 목록이 중요함을 크게 깨달았습니다.
예전에는 무작정 개발부터 했었는데, 이번에는 작성해놓은 기능 구현 목록을 개발 화면과 같이 띄어놓고 차례대로 구현했더니
개발 시간이 단축됨을 체감했습니다. 구현 목록을 보면서 코드를 작성하는 것은 지금 내가 명확히 구현해야할 것을 알 수 있어서 '뭘 해야하지' 고민하는 시간이 줄어들었고,
기능 단위로 작성해놓은 구현 목록을 체크 하면서, 기능별로 구현 후 commit하는 습관도 자연스럽게 가지게 됐습니다.
(한 기능 구현 다함 → 리드미에 해당 기능 완료했다는 체크 표시 → commit)
기능 구현 목록 작성이 개발 효율성 및 생산성에 엄청난 도움이 됨을 느꼈고, 구현 목록을 하나씩 완료해나가니까 개발이 게임처럼 재밌게 느껴졌습니다. -
파일분리(모듈화) 대한 공부 필요성을 느꼈습니다.
프로젝트를 진행하면서 어려웠던 부분은, 파일 분리(모듈화)입니다.
오랫동안 고민하고 구글링을 해봤지만 아직 이에 대한 적절한 방안과 공부 자료를 찾지 못해서, 좋은 파일 분리(모듈화) 방식에 대해서는 다음 미션에서 더 고민해봐야할 것 같습니다.
✏️ 이론 정리
미션 과정 중 배운 이론을 노션 노트에 정리했습니다. 아래 링크에서 제가 1주차 미션을 통해 배운 이론들을 볼 수 있습니다.
🔗1주차 미션을 통해 정리한 이론
✅ pull request
제출한 pull request가 보고싶으면 아래 링크를 클릭해주세요.
🔗1주차 pull request
2주차: 자동차 경주 게임
두번째 미션은 자동차 경주 게임이였습니다.
그래도 첫번째 미션을 하고 나니, 요구 사항 지키는것은 조금은 더 수월해졌습니다. 그러나 1주차보다 구현 난이도가 조금 올라갔습니다.
1주차 미션에서 요구사항 지키기에 정신이 없어서 신경 쓰지 못했던 부분 + 피드백을 더 신경쓰고자 했습니다. 가장 중점적으로 개선하고자 한 부분은, 모듈(파일)의 분리와 클린 코드였습니다.
사실 이 모듈(파일)의 분리때문에 엄청난 멘붕이 왔었습니다... 💩 파일 분리는 신경써본적이 없기 때문에, 어떤식으로 해야할지 감도 잡히지 않았습니다. 그러다가 'mvc 디자인 패턴'을 알게됐고, 우테코 예전 기수분의 코드 중 mvc 디자인 패턴이 잘 구현된 것이 있어서 이를 통해 모듈 분리의 감을 잡을 수 있었습니다.
엄청난 멘붕이 있었던 미션인 만큼, 또 엄청난 성장을 할 수 있었던 주였습니다.
2주차 미션을 통해 배운점은 다음과 같습니다.
📚 과제를 통해 배운점
-
mvc 디자인 패턴 적용을 통한 소스파일 분리
저번주 미션에서 가장 어려웠던 부분은, 모듈화와 소스파일을 분리하는것이였습니다. 처음에는 이 부분을 공부하기 위해 '파일분리, 모듈화방법'와 같이 검색했는데, 제가 찾고자 하는 개념이 '디자인 패턴'이라는 것을 알게되어서 올바른 방향으로 자료를 찾을 수 있었습니다.
다양한 디자인 패턴이 있지만, 보편적으로 많이 사용되는 mvc 패턴을 프로젝트에 적용했습니다.
실제 mvc 패턴을 기반으로 Model, View, Controller 세가지 역할으로 소스파일을 분리해보니 지난주보다 개발하기가 더 수월했음을 느꼈고, mvc 패턴의 장점 중 하나인 '유지보수가 쉽다'는 말이 무슨 의미인지 배울 수 있었습니다.
처음으로 적용해본 패턴이라 mvc 패턴의 정석은 아닐 수 있지만, 디자인 패턴에 대해서 배우고 적용할 수 있었던 좋은 기회가 됐습니다. -
읽기 쉬운 코드를 작성하기
클린 코드를 더 공부하기 위해, 추가적으로 Robert C. Martin's의 clean code javascirpt를 공부했습니다. 여기서, '우리는 작성할 코드보다 읽을 코드가 더 많습니다. 그렇기 때문에 코드를 읽기 쉽고 검색 가능하게 작성해야 합니다. 그렇지 않으면 여러분의 코드를 이해하려고 하는 사람들에게 큰 어려움을 줍니다.' 라는 내용이 있었습니다. 이 내용을 보고, 지난주에 제출했던 미션을 반성했습니다. 지난주 미션에서는 숫자 데이터를 하드코딩했었는데, '다른 사람들이 봤을 때는 숫자가 무엇을 뜻하는지 알 수 없었겠구나'를 깨달았습니다. 그래서 이번주 미션에서는 읽기 쉬운 코드를 만들고자 숫자 데이터 및 문자 데이터들을 하드코딩 하지 않고, utils/constants.js에서 의미있는 상수로 만들어서 사용했습니다. 예전에 다른분 코드를 보면서 상수 데이터를 왜 따로 빼서 코딩하셨을까, 궁금했었는데 읽기 쉬운 코드를 만들기 위해서임을 배웠습니다. 상수 데이터를 따로 뺀 작업 뿐 아니라, 함수이름도 의미에 맞게 작성함으로써 가독성 좋은 코드를 만들고자 노력했습니다. -
살아있는 문서를 만들기
지난주에는 기능목록 작성이 처음이기도 했지만, 시작부터 완벽히 정리하고 코딩을 시작해야된다는 생각에 README.md 파일을 작성하는 시간이 오래걸렸습니다. 그런데 1주차 피드백 중, '기능 목록을 업데이트하라. 시작부터 완벽히 정리해야한다고 생각하지말고, 구현하면서 계속 업데이트하자. 죽은 문서가 아닌 살아있는 문서를 만들기 위해 노력한다.'라는 내용을 보고, 처음부터 완벽하게 작성하려고하는 강박적인 생각을 버렸습니다. 대신, 피드백 내용처럼 계속 문서를 업데이트 하면서, 살아있는 문서를 만들고자 했습니다. 특히 예외사항같은 경우는 구현 전부터 완벽하게 예측하기 힘든데, 구현 과정에서 생기는 예외사항들을 계속 추가하면서 문서를 완성시키는 방법을 배웠습니다. -
조급함을 버리고 매일, 매주 성장하기
사실 이번주는 '조급함' 때문에 작은 위기가 있었습니다. 아무래도 좋은 코드를 작성하고 싶은 마음이 크고, 그만큼 새롭게 공부해야할 내용이 많은데 시간이 한정되어있다보니 조급함이 생겼습니다. 잠시 머리를 식히면서 생각한 것은, '한정된 시간에 비해 공부해야 할 양이 훨씬 많아서 조급함이 생기는데, 이번주에 모든걸 다 해야한다는 생각을 버리고 매일, 그리고 매주 조금씩 더 발전하자'였고, 이러한 생각 덕분에 조급함을 버리고 시간 내에 할 수 있는 것들을 찾아서 공부하고 성장할 수 있었습니다.
✏️ 이론 정리
미션 과정 중 배운 이론을 노션 노트에 정리했습니다. 아래 링크에서 제가 2주차 미션을 통해 배운 이론들을 볼 수 있습니다.
🔗2주차 미션을 통해 정리한 이론
✅ pull request
제출한 pull request가 보고싶으면 아래 링크를 클릭해주세요.
🔗2주차 pull request
3주차: 자판기
📚 과제를 통해 배운점
-
localStorage를 통한 데이터 저장
localStorage는 저에게 정말 생소한 개념입니다. 하지만 3주간의 프리코스 과정을 통해 배운 학습 방식으로, 새로운 개념인 localStorage도 프로젝트에 무사히 적용할 수 있었습니다. 이번 프로젝트에서는 localStorage.setItem(key, value)와 localStorage.getItem(key)를 활용했습니다. 처음 배운 개념이였기 때문에 중간에 어려움도 있었습니다. 구현 과정 중 value로 객체를 넣어줘야 했는데, value로 객체를 넣었을 때 제대로 작동하지 않았습니다. 그러다가 localStorage는 key, value를 문자열로만 관리한다는 것을 알게되어서, 문제의 원인을 찾고 해결방향을 잡을 수 있었습니다. Json을 사용하면 객체를 쓸 수 있다는 것을 알게되어, 객체 역시 무사히 localStorage로 관리할 수 있었습니다. value에 객체를 넣고 싶다면 JSON.stringify를 사용하여 자바스크립트 객체를 JSON 문자열로 변환시켜주고, 객체로 넣은 것을 가져오고 싶을 때는 JSON.parse를 통해 JSON 문자열을 자바스크립트 객체로 변환하면 됩니다. localStorage를 통해 변화하는 상태를 관리하고, 이를 local에 저장할 수 있다는것이 너무 신기했습니다. 코드에서 '데이터 변화 → 새로운 값을 로컬에도 업데이트(localStorage.setItem) → 렌더링(localStorage.getItem)'과 같이 localStorage에서 새롭게 업데이트 된 값을 렌더링 하는 과정을 반복하며 localStorage를 이해할 수 있었습니다. -
MVC 디자인 패턴의 이해
2주차 미션에서 MVC 디자인 패턴을 처음 적용하며, 역할이 나눠져있음으로서 유지보수가 쉽다는 것을 체감하여 이번 미션에서 역시 MVC 패턴을 적용했습니다. MVC 패턴을 적용하다가 데이터에 대한 유효성 검증은 Controller에서 할지, Model에서 할지에 대한 의문이 생겼습니다. 그러다가 MVC 패턴 이해를 위한 좋은 글을 발견하고, 위 의문에 대한 저만의 답을 내릴 수 있었습니다. 이 글에서는 MVC 패턴을 레스토랑과 비교하는데, 이 글을 통해 유효성 검증 로직은 Controller에 넣기로 결정했습니다. 글에 따르면 Model은 셰프, View는 테이블, Controller는 웨이터입니다. 웨이터(Controller)는 손님으로부터 주문을 받습니다. 이때 이 주문이 유효하다면 셰프(Model)에게 주문 접수를 하고, 유효하지 않다면 셰프(Model)에게 주문을 접수하지 않습니다. 이를 다시 풀어서 생각해보면 Controller는 요청된 데이터가 유효한지 검증하고, 유효하다면 Model로 넘겨서 데이터를 가공하고, 그렇지 않다면 Model로 넘기지 않는다고 이해할 수 있었습니다. 유효성 검증 로직을 Model, Controller 사이에서 왔다 갔다 옮기다가, 위의 이해 과정을 통해 저만의 컨벤션을 만들어 유효성 검증 로직을 Controller에 넣게되었습니다. 이러한 고민 과정을 통해 MVC 패턴에 대한 더 깊은 이해를 할 수 있었으며, 제가 채택한 방식이 물론 정석은 아닐 수 있지만 관련 자료를 통해 나름의 컨벤션을 정의하고 실행에 옮기는 과정이 즐거웠습니다.
✏️ 이론 정리
미션 과정 중 배운 이론을 노션 노트에 정리했습니다. 아래 링크에서 제가 3주차 미션을 통해 배운 이론들을 볼 수 있습니다.
🔗3주차 미션을 통해 정리한 이론
✅ pull request
제출한 pull request가 보고싶으면 아래 링크를 클릭해주세요.
🔗3주차 pull request
프리코스 회고
👨👩👧👦 혼자보다 함께할 때 더 성장할 수 있다
프리코스는 온라인 과정인데 어떻게 동료학습이 가능했을까요? 그건 바로, 프리코스는 과정 중 다른 분의 코드를 마음껏 볼 수 있는 환경이였기 때문입니다. 다른 분의 pull request가 공개되어있었고, 이를 통해 정말 많은 부분을 배울 수 있었습니다.
제 미션을 다 구현하고 나면, 다른분들의 pull request를 보면서 제 코드에 대해 회고했습니다. 정말 대단하신 분들이 많아서 코드, readme, commit 메시지 등을 보면서 제가 부족한 부분들을 회고하고, 이를 이후 미션에서 개선할 수 있었습니다.
이에 더해, 우테코를 준비하시는 분들이 모여있는 오픈채팅방이 있었는데(만들어 주신 분께 정말 감사합니다🤗), 이 오픈채팅방에서 서로 질문하고 함께 고민하며 함께 문제를 해결해나갈 수 있었습니다.
어떻게 보면 선발 과정이라 경쟁자라고 생각할 수 있는데, 서로 좋은 정보를 공유하는 모습을 보면서 우테코는 경쟁이 아닌 함께 성장해나가는 과정이구나를 느꼈습니다. 프리코스 과정에서도 너무 멋진 분들이 많아서, 이 분들과 함께하고 싶다는 생각을 많이 했어요.
아무튼 결론은! 혼자보다 함께할 때 (비교할 수 없이) 더 큰 성장을 할 수 있음을 배웠습니다.
📖 미션을 통한 실용적인 공부
프리코스 3주동안 정말 많은 양의 공부를 했습니다. 이것이 가능했던 이유는, 모두 미션에 필요한 공부였기 때문이라고 생각해요.
당장 써야하니까 더 집중해서 공부하게 됐고, 미션에서 생기는 문제를 해결하기 위해서는 공부를 할 수밖에 없는 환경들이 만들어졌습니다.
특히 프리코스가 아니였다면 신경쓰지도 않았을 부분들을 공부하면서, js 언어 자체만이 아닌 다양하게 배웠다고 생각합니다. (예를 들면 코드 컨벤션, commit 메시지 작성 컨벤션, 클린코드...)
제가 미션 과정에서 정말 많은 도움을 받은 강의가 있는데요, udemy의 '블랙커피 Vanilla JS Lv1. 문벅스 카페 메뉴 앱 만들기'강의와 '클린코드 자바스크립트'강의입니다.
진심으로 이 두 강의가 아니였으면 제가 프리코스를 무사히 잘 끝낼 수 있었을까, 생각될만큼 너무 많은 도움이 됐습니다.
(강의를 듣게 된 계기는 쉬면서 인스타 보다가 광고로 이 두 강의가 떴고, 우테코 강사님이 하시는 강의라고 해서 생각도 안하고 1초만에 결제했습니다. 이걸 운명이라고 해야하는걸까요? 어떻게 적재적소에 좋은 강의가 제 앞에 나타났는지... 인별그램 감사합니다 🙇🏻♀️)
먼저, '블랙커피 Vanilla JS Lv1. 문벅스 카페 메뉴 앱 만들기' 강의는 카페 메뉴 앱을 만드는 과정을 처음부터 끝까지 보여주시면서, 개발의 효과적인 단계(기능 구현 목록 작성 → 개발 → 리팩터링)를 알려주셨습니다. 웹 js 개발 경험이 거의 없었고, 연습 문제 끄적이는 정도였기 때문에 이러한 단계를 가지고 개발을 한다는 생각은 하지 못했었습니다. 실제 프리코스 과정에서도 이를 적용했고, 정말 효과적임을 체감했습니다. (특히 개발을 무작정 하기 전에 기능 구현 목록을 작성하는 것이 개발 속도를 확 줄여줍니다.)
그리고 '클린코드 자바스크립트' 강의는 정말 너무 신기하고, 재밌는 강의였습니다. 일단 '클린코드'라는 것이 처음이기도 했고 그러다보니 더러운 코드들이 깨끗해지는 과정들이 너무 신기했습니다.
이 두개의 강의를 거의 자습서처럼 생각하고, 복습하고, 공부하면서 프리코스에 적용했습니다. 거의 찬양 수준인데, 저에게는 너무 필요한 강의였습니다.
아무튼 프리코스 과정을 통해 당장 필요한 실용적인 공부를 하며, 다양하게 배울 수 있었습니다.
✏️ 놓치고 싶지 않은것들은 기록하기
저는 기록하는 것을 좋아합니다. 매일 개발 일기로 TIL을 작성하고, notion에 공부한 내용을 기록합니다. 단순 기록용이 아닌, 글을 작성하면서 오래 기억이 남기도 하고 오늘 한 공부에 대한 성찰도 하고 마인드컨트롤도 할 수 있습니다.
프리코스 과정에서도 잘 기록한 것 같아서 스스로에게 칭찬해주고 싶습니다.
notion 공부 기록
github에서 작성중인 TIL 커밋메시지
🌱 그래서, 나는 얼마나 성장했을까?
프리코스 이전과는 비교할 수 없을 정도로 성장했다고 생각합니다. 프리코스 이전의 저는 웹 개발을 위한 javascript를 배운지 얼마 되지 않은, 그저 연습 문제를 끄적이던 수준이였습니다.
지금의 저는 구현을 넘어 클린 코드를 작성하려고 노력하며, 가독성이 좋은 코드를 작성하려고 노력하며, 코드 컨벤션(+eslint, prettier)을 지키기 위해 노력합니다. 또한 커밋 메시지를 신경쓰며, README를 통해 프로젝트를 드러내려고 노력합니다. 이것말고도 정말 다양한 부분이 있겠지만, 프리코스 과정이 아니였다면 어쩌면 신경쓰지도 않았을 부분들을 의식적으로 연습하면서 성장했습니다.
프리코스를 시작하기 전에는 3주가 성장하기에는 정말 짧은 시간이라고 생각했는데, 이런 성장이 가능했던 이유는 우아한테크코스에서 선발 과정에서도 학생들이 성장할 수 있도록 미션 설계를 잘 해주셨기 때문이라고 생각합니다.
우테코에서 주신 요구 사항을 지키려고 의식적으로 연습하면서 좋은 코드에 대해 더 고민할 수 있었고, 매주 나오는 피드백을 통해 매주 코드를 개선시킬 수 있었습니다.
많은 분들의 후기글에서 가능하다면 프리코스는 무조건 참여해보면 좋겠다는 글을 봤었는데, 이 과정을 직접 경험해보니까 저도 똑같은 글을 적습니다. 프리코스에 참여할 수 있으면, 무조건 참여하세요!
마무리
정말 짧게 느껴진 3주간의 프리코스가 끝났습니다. 후련하기도 하면서, 한편으로는 더 열심히 할 수 있지 않았을까 하는 아쉬움이 남기도 합니다.
아직도 저는 많이 부족합니다. 하지만, 프리코스 과정을 통해 매일 조금씩 성장할 수 있음을 배웠습니다. 프리코스를 통해 미리 경험한 우아한테크코스는 엄청난 성장을 가능할 수 있게 해줍니다.
물론 과정 중 힘들고 막막한 기분이 들때도 있었지만, 이 과정을 함께하는 동료들이 있다는 것이 큰 힘이 되었습니다. 그리고 스스로 성장함을 느끼며 코딩이 즐겁다는 생각도 했습니다.
프리코스 과정이 너무 좋았기 때문에, 우아한테크코스 정규 과정에도 꼭 참여하고 싶다는 마음이 드네요.
1차부터 2차까지, 쉬지않고 달려온 나에게 수고했다고 말해주고 싶습니다. (예지야 수고했어~ 니가 왕따봉 최고야👍)
이제 남은건 최종 코딩테스트입니다. 남은 시간동안 후회가 남지 않게 최선을 다해서 테스트를 준비 할 예정입니다. 지치지 않도록 마인드 컨트롤 하면서, 화이팅!
