[우테코] 프리코스 3주차 <로또> 미션 회고

[우테코]
프리코스 3주차 <로또> 미션 회고

 

 

🎰 3주차 미션 : 로또
  - 학습 목표 분석하기
  - 구현 과정 
  - 구현 소감
✍️ 일간 회고
  - 발등에 마그마가 흐르고 있어요
  - 고비가 찾아오다
  - 코드 리뷰로 함께 자라기
📑 주간 회고
  - 잘한 점
  - 아쉬운 점
  - 앞으로의 계획

 

 

---

 

 

3주차 미션 : 로또

학습 목표 분석하기

목표

 

3주차 미션은 '간단한 로또 발매기 구현'이었다. 2주차에 이어 관심사를 분리하고, Jest를 이용한 테스트 작성을 목표로 하고 있다. 2주차 공통 피드백에서는 크게 리드미 작성, 메서드 분리, 테스트 작성을 구체적으로 어떻게 해야하는지 가이드를 주고 있었다.

 

리드미 작성은 마크다운 문법을 사용해 프로젝트 개요를 작성하고, 기능 목록에 예외사항도 추가할 것, 이 과정은 한 번에 완벽하게 끝내기보다 리드미를 살아있는 문서로 만들기 위해 꾸준히 업데이트 하라는 내용이었다. 취업 특강에서 '자소서/면접에서 프로젝트 깃허브를 볼 때 제일 먼저 리드미가 눈에 들어오기 때문에 리드미를 정성들여 작성하라'는 얘기를 들었는데, 그런 내용을 알려주기 위한 항목이었으리라 생각된다. 

 

메서드 분리 가이드에서는 한 메서드가 하나의 기능만 담당하도록 함수를 분리하라고 적혀있다. 이를 검증하려면 여러 메서드에서 중복되는 코드가 있는지 확인하고, 메서드의 길이가 15라인이 넘지 않도록 의식적으로 신경쓰라는 조언이 있었다. 메서드를 작게 나누면 추후 단위 테스트를 작성할 때도 수월해질 것이다. 학습 목표를 달성할 수 있는 방향을 제시하고 있다고 판단했다. 

 

테스트 작성에서는 테스트를 작성하는 이유에 대해 본인의 경험을 바탕으로 정리해보라는 내용이 있었다. 작성하라고 하니까 작성하는 테스트가 아닌, 테스트의 장점을 몸소 체험하고 느껴보라는 의도같다. 처음부터 큰 단위의 테스트를 만들지 말라고 되어있다. '테스트의 핵심 목적 중 하나는 코드에 대해 빠르고 자주 피드백을 받는 것'이므로, 핵심 기능부터 작게 테스트를 만들라고 가이드를 주고 있다. 이를 위해서는 메서드 분리가 선행되어야 할 것 같다. 

 

 

구현 과정

이번 미션도 지난주 미션에 이어 관심사 분리에 초점을 맞춰 구현했다. 아래의 구조도는 내가 설계한 프로젝트의 구조이다.

 

프로젝트 구조

 

1, 2주차에 스터디원과 코드 리뷰를 나누고 배운 점을 미션에 적용하려고 했다. 커밋에 본문을 작성하는 것부터 PR 내용에 디렉토리 구조와 리뷰어가 중점으로 봐주었으면 하는 부분, 도식화 다이어그램 등, 코드를 포함해서 배울 것이 있다면 하나씩 시도했다. 이번 과제는 코드 리뷰로 피드백받은 부분과 3주차 학습 목표, 2주차 피드백에 초점을 맞춰서 구현하려고 신경썼다. 

 

이번 로또 미션에서는 특히 관심사 별로 클래스를 분리하고 구조화하는 것에 신경썼는데, 이 과정에서 시행착오를 겪었다. 처음에 App.js 파일에서 모든 로직을 구현했다가, 그 후에 클래스를 생성하고 하나씩 기능별로 분리하는 리팩토링 과정을 거쳤다. 리팩토링을 하면서 '애초부터 각 관심사에 맞는 클래스에 코드를 작성했다면 시간도 아끼고 덜 복잡하지 않았을까'라는 생각을 했다. 한 파일에 모든 코드를 작성했다 보니, 관심사 별로 분리하면서 값들이 서로 얽혀 있는 경우가 많았다. 이를 분리하는 과정이 어려웠다. 리액트에서 props로 값을 넘겨주던게 그리웠다...

 

클래스를 사용해 객체지향으로 구현하는 방식이 익숙하지 않아서 구조도를 그려봤다. 머리로 생각했을 때는 너무나 복잡해서 머리가 타들어 가는 것 같았는데, 그림으로 그려보고 각 클래스 별로 어떤 기능을 해야 하는지 정리하고 나니 리팩토링이 수월해졌다. 그렇지만 클래스 사용에 대한 미숙함 때문에 코드를 구현하면서 막혔던 부분이 많았다. 이 부분은 공부를 더 해서 보완해야겠다. MDN 문서 n회독 공부법 시작이다.

 

 

구현 소감

학습목표와 2주차 공통 피드백에서 제시했던 내용들이 이번 과제를 수월하게 할 수 있는 힌트라는 것을 과제를 중간쯤 진행하며 몸소 깨닫게 되었다. 까다로운 요구사항 같아보였던 것들도 사실은 코드를 조금 더 쉽게 작성하기 위한 팁인 경우가 많았고, 이를 지키려고 하다 보니 자연스럽게 도움이 되었다.

 

이번에 아쉬운 점은 기능 별로 나누는 것이 너무 오래 걸려서 테스트 코드를 급하게 작성했다는 점이다. 테스트는 React를 사용하면서 jest와 testing library로 구현해봤기 때문에 어렵지는 않았지만, 테스트 작성에 시간을 많이 내지 못했다. 더 다양한 케이스로 미리 만들어볼걸 후회가 된다... 과제에 기본적으로 주어진 테스트를 실행해보며 구현 사항 중 놓친 부분을 찾기도 했다. 이번 미션은 일단 급한대로 기본 과제 테스트는 다 통과하는걸 목표로 달렸다. 

 

내가 테스트를 직접 써보고 느낀 테스트의 장점은 사용할수록 편리하다는 점이다. 오류가 어디서 발생하는지 일일이 찾지 않아도 되는 것, 그리고 내 코드를 빠르고 간편하게 검증할 수 있다는 것이 특히 장점이다. 프리코스 미션에서와 같이 콘솔에 입력할 내용이 많은 경우, 매번 입력하는 것이 번거롭고 시간도 오래 걸리는데 그럴 때 테스트를 실행하면 바로 원하는 입력값을 입력해볼 수 있어서 편리하다. 4주차에서는 꼭 마지막답게 관심사 분리도 잘 하고, 테스트 코드도 많이 작성하고 완벽한 마무리가 될 수 있도록 해야겠다💪🔥

 

[로또] 오신정 미션 제출합니다. by ShinjungOh · Pull Request #289 · woowacourse-precourse/javascript-lotto-7

 

3주 차 프리코스 (겨우) 통과😭

 

 

 

 

일간 회고

2주차에 작성한 회고 방식이 마음에 들어서, 3주차도 일주일동안 있었던 일 중 몇 가지 주제를 뽑아 적어본다.

 

 

발등에 마그마가 흐르고 있어요

18시간 코딩

 

분명 벼락치기를 하지 않은 것 같은데..? 챙길게 많아지다보니 시간 관리에서 어려움을 겪었다. 과제 제출날에는 마감 시간은 다가오고, 해야할건 계속 보여서 아예 하루 밤을 새고 18시간 풀코딩했다(20대 중반 넘어가면 이게 얼마나 미친짓인지 알 것이다). Wakatime을 이용해 측정한건데, Wakatime은 코드를 치지 않으면 코딩 시간으로 인정하지 않는다. 즉, 순수 코딩 시간이라는 말😇

 

그런데 묘하게 이렇게 몸을 갈아 코딩을 하니 득도의 경지에 오른다고 하나? 코딩의 깨달음을 얻은 것 같기도 하다. 그렇지만 건강에 너무 안좋고, 저 시간 동안 압박감이 심했기 때문에 다시는 이런짓 하지 않도록 마지막 미션은 시간 관리를 잘 해보려 한다. 시간이란걸 관리해봐 좀~!!!!😭😭😭

 

 

고비가 찾아오다

이번 과제는 지금까지의 미션 중 가장 어려웠다. 주차를 거듭하며 지켜야 할 요구사항도 많아지고, 지난 주에 작성한 코드보다 더 잘 작성해야 한다는 압박감에 시달렸다. 매주 블로그에 회고글을 작성하고 매일 회고와 일기를 남기기로 스스로와 약속했지만, 이번 주는 구현하기에 급급해 매일 작성하는 짧은 일기조차 남기지 못했다.

 

프리코스를 도전하면서 처음에는 '나는 잘할 수 있다'는 자신감을 가지고 시작했다. 하지만 활발한 디스코드와 다른 사람들의 과제를 보면서 긴장감이 들었다. 훌륭한 코드를 단시간에 구현해내는 능력자 분들과, 다양한 예외 케이스를 생각해내는 창의적인 분들이 많아서 주눅들었다. 나는 우테코에 정말 합격하고 싶었고, 꼭 그래야만 한다고 생각했다. 3주차까지 미션을 진행하면서 내가 부족한 부분이 많다는 것을 깨달았다.

 

프리코스 기간 동안 나의 부족함을 인지하고 받아들이면서, 자책보다는 열심히 했다는 것에 스스로를 다독여 주고 싶다. 나는 이미 나에 대한 질책과 반성을 넘치도록 했다. 내 타고난 기질이 그런 것을 어떻게 하겠는가. 이제는 이런 부정적인 생각을 떨쳐내고 자신감과 용기를 심어주는 것이 필요하다고 느꼈다. 몇 주 전 참여한 넥스트 스텝의 <의식적인 연습>과정을 듣고 많은 괴로움과 고민 끝에 깨달은 점이다. 

 

3주차는 마인드 컨트롤이 제대로 되지 못해서 정신적으로 많이 힘들었던 한주였다. 미션이 어려웠다보니 희노애락을 많이 느꼈다. 가족행사도 다 빠지고 밤을 새가면서 코딩을 했지만, 마음같이 쉽게 풀리지 않아서 울기도 하고 답답해서 미쳐버릴 것 같은 순간도 있었다. 어려웠던 문제를 해결하면 머리가 잠시 맑아졌지만, 무의식 중에 ‘잘해야 한다’는 강박이 느껴졌다. 그러나 그런 압박감 속에서 분명 성장했으리라 믿는다. 4주차 미션은 훨씬 더 어려워졌지만,3주차보다는 조금 더 의연하고 성장한 모습으로 마주하고 싶다.

 

 

코드 리뷰로 함께 자라기

디스코드에 작성하신 포비님의 글

 

2주차 미션이 끝나고 포비님이 디스코드에 글을 올리셨다. '새로운 코드를 작성하는 시간과 다른 사람 코드를 읽는 시간의 비율은?'이라는 제목을 보고 많은 생각을 했다. 이전까지의 나는 내 코드를 작성하는데에 거의 99%의 시간을 보냈다. 프리코스에 참여하며 달라진게 있다면, 다른 분들의 코드를 읽고 고민해보는 시간이 늘어났다는 것이다. 

 

특히 스터디에서 코드 리뷰를 진행하고 있는데, 이 경험이 너무 좋았다. 3주차 코드 리뷰까지 마친 지금 '왜 코드 리뷰를 추천하는지' 알게된 것 같다. <함께 자라기> 책에서 읽었던 다함께 성장하기를 무려 내가 하고 있는 것이다! 이번 회고에서는 우리의 코드 리뷰가 어떻게 진행되었는지 자세히 적어보려 한다.

 

스터디원들과 오전 모각코 & 오프라인 코드 리뷰 👩🏻‍💻

 

3주차 과제가 끝난 다음날, 오프라인 스터디를 위해 스터디원과 카페에 모였다. 코드 리뷰는 3주차 과제의 핵심 목표와 공통 피드백을 바탕으로 진행했다. 아래의 기준에 따라 나와 팀원들의 코드가 요구사항을 잘 따르고 있는지, 다른 사람이 보기에도 잘 이해되는 방식으로 작성되었는지 체크했다.

 

💎 1. 리드미에 구현사항 정리가 잘 되었는가?
💎 2. 메서드가 잘 분리되었는가?
  - 한 메서드가 하나의 역할만 수행해야 함
  - 메서드 길이가 15줄 이상 넘지 않아야 함
💎 3. 함수, 변수, 메서드명이 명확하고 이해가 잘 되도록 작성되었는가?
💎 4. 테스트 코드가 제대로 작성되었는가?
  - 테스트 코드가 처음이라 어려웠다면, 그것을 해결하기 위해 무슨 노력을 했는가

 

 

스터디는 개인 사정상 불참하신 한 분을 제외하고 3명이서 3시간 동안 진행했다. 스터디 시간 동안에 총 3번의 몰입의 순간이 있었다. 1시간에 1번씩 몰입 상태로 빠져들었다. 무의식 중에 몰입의 영역으로 돌입하는 경험을 했다. 각 경험별로 5점 만점의 점수를 매겨보았다.

 

✅ 나의 코드를 설명할 때 - 3점

 

내 코드를 설명하면서 어떻게하면 내 코드를 처음 보는 다른 사람에게 잘 이해시킬지 고민했다. 우선 PR에 작성한 내용을 바탕으로 프로젝트 구조, 어려웠던 부분을 설명하고 코드로 넘어갔다. PR에 구현 기능 목록과 시연 동영상, 프로젝트 구조도, 감상문 등을 지난주보다 자세히 작성해서 다른 사람에게 이해가 잘 되도록 한 덕분이다. (한 단계 발전했다!)

 

전체적인 흐름을 먼저 제시하고, 흐름대로 코드를 설명하니까 이전 회차 스터디보다 수월했다. 이번에는 메서드 분리를 꼼꼼하게 해두고, View와 Controller, 도메인으로 분리해 두어서 각 클래스가 어떤 기능을 하는지 관심사 분리를 했기 때문에 내 코드를 설명할 때도 어려움이 줄어들었다.

 

아쉬운 점은, 나는 내 코드를 설명할 때 ‘어쩔 줄 모르는 것처럼’ 말하는 것 같다고 느껴지는 점이다. 팀원들의 배경지식과 경험이 모두 다르고, 모두 내 코드를 처음 본다. 그래서 어떻게 말해야할지 어렵다. 긴장되기도 하고, 내 말과 코드가 제대로 전달되었는지 확신이 잘 안되서 아쉽다. 얼마나 잘 전달됐는지 수치로 측정할 수 있으면 좋겠는데… 정량적인 부분이 아니라 어려운 문제다.

 

✅ 팀원의 에러를 같이 해결할 때 - 4점

 

과제에 주어진 테스트를 통과하지 못했는데, 이유를 알 수 없어서 너무 답답했다는 팀원분이 계셨다. 이 문제를 해결하려고 우리는 모두 IDE를 켜고, 팀원의 코드를 디버깅하기 시작했다. 이런 경험은 처음이었는데, 나도 그렇고 다들 디버깅 하는 것을 재밌어했다. 이 부분에서 '개발자들은 문제해결에 진심'이라는게 느껴졌다. 

 

회사에 가면 남의 코드를 읽는 시간이 많고, 그런 코드가 무조건 "클린 코드"일 수는 없다. 그런 면에서 우리에게는 실무에서 필요한 역량을 키우는 시간이 됐다. 메서드를 분리해보고, 미처 구현하지 못했던 부분도 채워보고, 테스트에서 필요한 입력받는 문장의 오타도 찾고, 여러 가지를 시도해 보았다. 왠지 내 코드를 짤 때보다 더 몰입해서 머리 싸매고 고민했다. 아쉬운 점은 시간 관계상 오래 붙잡고 있을 수 없어서 결국 왜 오류가 발생했는지 원인을 찾지 못했고, 팀원분은 계속 답답해 하셨다는 점이다.🥲 나중에라도 꼭 해결하시길 바란다. 

 

✅ 팀원의 코드를 리뷰할 때 - 5점

 

다른 팀원분이 MVC 패턴으로 처음 코드를 작성해보았다고 하셨다. 특히 관심사가 제대로 분리되었는지 리뷰받고 싶다고 하셨다. 그래서 진행 방식에 쓰인 기준으로 꼼꼼하게 코드 리뷰를 진행했다.

 

리드미에 기능 구현 사항이 자세하게 적혀있고 마크다운 문법을 잘 이용하셔서 가독성이 좋았다. 오타가 난 부분을 발견해서 알려드렸다. View 클래스가 따로 없는 점, 변수명이 모호한 부분, 상수로 분리되면 좋을 값, 메서드가 더 잘게 나눠질 수 있는 부분을 찾아서 리뷰해드렸다.

 

특히 이분의 코드에서 인상깊었던 점은, 지난주에 어려웠던 것을 이번주에는 해내셨다는 부분이었다. 지난주에는 map, filter, forEach 등 자바스크립트 배열 메서드가 어려워서 for문을 쓰셨는데, 이번주에는 '자바스크립트에서 제공하는 내장 API를 최대한 사용할 것'이라는 요구조건을 달성하기 위해 공부하고, 직접 사용하셨다. 팀원의 성장을 보니 뿌듯하고 멋있었다. 그 외에 내가 생각지 못한 방법으로 구현하신 부분도 있어서 참고가 많이 되었던 유익한 시간이었다.

 

 

 

 

주간 회고

한 주간의 잘한 점, 아쉬운 점, 앞으로의 계획을 정리해본다. 일정과 시간 관리에 초점을 맞춰 4주차 계획을 세우자.

 

 

잘한 점

1. 오프라인 스터디에서 서로 코드 리뷰를 주고받은 점 + 팀원의 에러를 같이 디버깅한 점

2. PR에 동영상, 구조도, 구현 감상을 올려 제출한 과제의 가독성과 완성도를 높인 점

3. ⭐️ 포기하지 않고 과제를 끝까지 완성하고 제출하려고 한 점

 

아쉬운 점

1. 매일 기록을 남기며 회고하지 못한 점

2. 시간 관리가 제대로 되지 못해서 매일 정해둔 일정을 지키지 못한 점

3. 감상문을 급하게 쓴 점(그렇지만 울분으로 할말이 많았기에 금방 썼다)

4. 습관 챌린지가 작심삼일 된 점 x 2

5. 부정적인 생각으로 멘탈 관리가 잘 되지 못한 점 

 

앞으로의 계획

1. 생활 패턴 바로잡기 - 밤에 자고 아침에 일어나자

2. 일정이 잘 관리될 수 있도록 매일 투두리스트 작성하기

3. 투두리스트를 지키려고 의식적으로 행동하기

4. 매일 짧더라도 노션에 일기/회고 작성하기

5. AI를 사용하지 않기

6. 🔥 포기하지 않기