노베이스의 FE 우아한테크코스 - 프리코스 3 회고

Jinny·2024년 11월 15일

프리코스 회고

목록 보기

2/5

안녕하세요. 우아한테크코스 프론트엔드 7기 지원자 이지인입니다.
이번 주에는 클래스 개념을 배우며 코드를 더 간결하게 만드는 법을 배웠습니다. 클래스가 어렵다고 많이 들었고, 저도 이전에 학습하였을 때 개념이 제대로 이해되지 않은 부분이 있어 걱정이 되었지만, 프리코스 2와 다르게 조급함을 내려놓고 하나씩 학습해가며 적용하였습니다. 결국 혼자서 일반함수들을 클래스로 묶으며 재미를 느끼게 되었습니다. 이 과정이 즐거워 리팩토링에 30시간 정도 할애할 만큼 몰입할 수 있었습니다.

2주차 프리코스에서 마지막 과제 제출 테스트 코드에서 ‘예기치 못한 오류로 인해 실행에 실패하였습니다.’라는 메시지가 나타났었습니다. VS Code에서는 정상적으로 작동했기에 너무나 아쉽게 빌드 실패로 제출을 하였습니다. 원인을 찾아보니 커밋 누락과 파일 대소문자 문제일 가능성이 있었습니다. 마감 직전에 오류가 발생해 수정하지 못한 점이 아쉬웠습니다. 이러한 실수를 보완하기 위해 프리코스 3 에는 제출 전날 PR을 미리 올리고, Git을 철저히 확인하여 문제 발생 시 스스로 해결할 수 있도록 더욱 신중하게 임했습니다.

프리코스 2에서의 실수를 교훈 삼아, 3주차에는 더욱 꼼꼼히 준비하며 마무리할 수 있었습니다.

프리코스 3에서는 다음 사항을 지키기 위해 노력했습니다.

프리코스 2의 공통 피드백 10가지 사항 준수
개인 목표 달성

이 두 가지 사항에 대한 구체적인 내용을 아래에 기입하겠습니다.
기능 요구 사항을 포함한 프로젝트에 대한 설명은 README.md 파일을 참고해 주시면 됩니다.
감사합니다 😊

목차 (바로가기 클릭)

프로젝트 설명
목표달성 여부
- 프리코스 2 공통 피드백 및 달성 여부
- 프리코스 3 개인 목표 및 달성 여부
4L 회고록

프로젝트 설명

💵 로또 발매기

사용자가 로또 구입 금액과 당첨 번호, 보너스 번호를 입력하면 당첨 내역을 알려주는 로또 발매기입니다.

🎯 프로젝트 소개

이 프로젝트는 사용자가 입력한 구입 금액에 따라 로또 번호를 자동으로 발행하고, 입력한 당첨 번호와 비교하여 당첨 결과를 제공합니다. 로또 발매기의 목표는 사용자가 게임을 통해 로또 번호의 조합을 확인하고, 당첨 여부와 수익률을 계산할 수 있도록 돕는 것입니다.

📂 프로젝트 폴더 구조 및 파일 설명

📦src
 ┣ 📂Constant
 ┃ ┣ 📜constants.js
 ┃ ┗ 📜errorMessages.js
 ┣ 📂Controller
 ┃ ┣ 📜bonusNumberValidator.js
 ┃ ┣ 📜purchaseAmountValidator.js
 ┃ ┗ 📜winningNumbersValidator.js
 ┣ 📂Model
 ┃ ┣ 📜lottoListGenerator.js
 ┃ ┣ 📜purchaseCountCalculator.js
 ┃ ┣ 📜rateOfReturnCalculator.js
 ┃ ┗ 📜winningStatisticsCalculator.js
 ┣ 📂View
 ┃ ┣ 📜inputViews.js
 ┃ ┗ 📜outputViews.js
 ┣ 📜App.js
 ┣ 📜Lotto.js
 ┗ 📜index.js

📂 Constant 폴더

constants.js: 로또 발매기에 사용되는 상수들을 정의하는 파일입니다.
errorMessages.js: 에러 상황에서 사용자에게 출력할 메시지를 정의하는 파일입니다.

📂 Controller 폴더

사용자의 입력을 검증하는 기능을 담당하는 폴더입니다. 사용자의 입력값이 올바른지 확인하고, 유효하지 않은 입력일 경우 에러를 발생시킵니다.

bonusNumberValidator.js: 보너스 번호 입력의 유효성을 검증하는 파일입니다.
purchaseAmountValidator.js: 구입 금액 입력의 유효성을 검증하는 파일입니다.
winningNumbersValidator.js: 당첨 번호 입력의 유효성을 검증하는 파일입니다.

📂 Model 폴더

로또 발매에 필요한 데이터 생성과 계산 로직을 담고 있는 폴더입니다.

lottoListGenerator.js: 구입 금액에 따라 발행할 로또 번호 리스트를 생성하는 파일입니다.
purchaseCountCalculator.js: 사용자가 입력한 구입 금액을 바탕으로 구입한 로또 장수를 계산하는 파일입니다.
rateOfReturnCalculator.js: 발행된 로또 번호 리스트와 사용자가 입력한 당첨 번호를 바탕으로 최종 수익률을 계산하는 파일입니다.
winningStatisticsCalculator.js: 로또 결과를 바탕으로 당첨 통계를 계산하는 파일입니다. 3개 일치, 4개 일치, 5개 일치, 5개 일치 + 보너스 번호, 6개 일치로 구성되어있습니다.

📂 View 폴더

입력과 출력을 관리하는 폴더로, 사용자와의 상호작용을 담당합니다.

inputViews.js: 사용자의 입력을 받는 기능을 담당합니다. 사용자가 구입 금액, 당첨 번호, 보너스 번호를 입력하면 해당 데이터를 적절한 형식으로 반환합니다.
outputViews.js: 사용자에게 필요한 데이터를 출력하는 기능을 담당합니다. 로또 구매 개수, 발행된 로또 리스트, 당첨 통계, 최종 수익률을 사용자에게 보여줍니다.

📜 App.js

프로그램의 진입점이자, 전체 프로그램의 전체 흐름을 한 눈에 볼 수 있는 메인 파일입니다.

📜 Lotto.js

로또 번호의 유효성을 검사하는 기능을 포함하며, 예외 상황을 처리하여 올바른 로또 번호만 생성하도록 합니다.

📜 index.js

프로그램을 실행하기 위한 초기 설정을 포함한 파일입니다. App.js의 run() 함수를 호출하여 프로그램을 시작합니다.

목표달성 여부

📝 프리코스 2 공통 피드백 및 달성 여부

전반적으로 10가지 모두 준수하려고 노력하였습니다.

상세한 README.md 작성
- 프로젝트 소개, 주요 기능, 프로젝트 폴더 구조 및 파일 설명을 README.md에 추가하였습니다.
- 마크다운 문법을 학습하여 가독성 있게 정리하였습니다.
기능 목록 재검토
- 기능 목록에는 변경이 가능한 클래스 설계, 구현 기능 중심으로 작성하였습니다.
기능 목록 업데이트
- 구현을 하면서 추가해야하는 기능(e.g. 예외처리, 테스트 코드 기능 목록 작성 등) 들은 추가해서 지속적으로 REAMDE.md 파일을 업로들 하였습니다.
하드 코딩 방지
- 상수는 따로 폴더를 만들어 상수를 따로 관리하여 하드코딩을 방지하였습니다. 프리코스 1, 2 와 달리 상수를 잘 처리하려고 노력하였습니다. 에러메시지 이외에 다른 상수들도 상수 폴더에서 관리하여 export 할 수 있게 설정하니, 코드 가독성이 정말 좋아진 것을 느꼈습니다.
코딩 컨벤션 준수
- 처음으로 클래스 문법을 공부하고 적용하였습니다.
- 모든 클래스의 순서를 필드, 생성자, 메서드 순으로 일관되게 작성하였습니다.
한 메서드, 한 기능
- 한 메서드가 최대한 한 가지 기능을 수행하도록 함수를 분리하였습니다.
- 클래스를 배우면서 이 부분을 더 잘 이해하게 되었으나, 너무 잘게 쪼개어 가독성이 떨어지지 않도록 조절하려고 합니다. 이 부분은 코드 리뷰 때 피드백을 받고자 합니다.
메서드 길이 제한
- 메서드의 길이를 15줄 내외로 작성하였고, 클래스 개념을 배운 후 이 요구사항을 더 잘 적용할 수 있었습니다.
테스트 작성 이유 정리
- 테스트를 작성해야 하는 이유를 다음과 같이 정리해 보았습니다:
  
  이번 주차를 통해 테스트 코드를 작성해야 하는 이유가 리팩토링을 더 효과적으로 수행할 수 있기 때문이라는 생각이 들었습니다. 이번에는 리팩토링에 많은 시간을 투자하면서, 파일의 로직 자체를 변경하는 대규모 리팩토링을 진행한 후에 항상 npm run start로 실행하여 프로그램이 정상적으로 작동하는지 확인했습니다. 하지만 이러한 방식은 비효율적이었습니다. 예를 들어, 보너스 번호에 대한 리팩토링 작업을 할 때마다 npm run start를 실행하면 구입 금액부터 당첨 번호까지 모두 입력한 후에야 보너스 번호를 테스트할 수 있었습니다.
  반면에, 테스트 코드를 작성해 두면 npm run test로 한 번에 결과를 확인할 수 있어 훨씬 효율적이었습니다. 이번 주차에는 단위 테스트만 작성하는 것이 요구사항이었지만, 이후 통합 테스트까지 작성하게 된다면 리팩토링 시 훨씬 더 큰 도움이 될 것이라고 생각합니다.
작은 기능 테스트 작성
- 작은 기능 테스트를 중심으로 작성하였습니다. 이후 통합 테스트도 학습하여 적용해보고 싶습니다. 프리코스 2에서 통합 테스를 작성해보긴 했는데 완전히 이해가 되지 않은채로 우테코에서 작성한 테스트를 참고하며 동일하게 만들었습니다. 프리코스 4에서는 제가 이해하며 통합 테스트를 구현해보고 싶습니다.
객체를 만드는 방법 이해하고 사용
- 상수를 객체로 관리하고 Object.freeze를 사용하여 에러 메시지를 관리하였습니다.
- 아직은 낯설지만, 프리코스 4에서는 더욱 익숙해질 수 있도록 노력하겠습니다.

🚀 프리코스 3 개인 목표 및 달성 여부

🧑‍💻 몰입하는 개발자

1. GPT 사용 줄이기

목표: 최종적으로 프리코스 4에서는 GPT 사용을 완전히 중단하며, 공식 문서와 구글링을 활용해 스스로 문제를 해결한다.

수치화 지표:

리팩토링을 최대한 나의 힘으로 한 후, 정말 필요한 경우 5분 이내로 1회 GPT를 사용한다.

목표 달성 여부:

[70%]

이번 주차에는 클래스를 학습하는 과정에서 최대한 혼자서 해보려고 노력했습니다. 이전에도 클래스를 조금 공부해본 적이 있었지만, 어려워서 두려움부터 생겼습니다. 그래도 차근차근 먼저 YouTube 강의와 구글링을 통해 클래스의 개념을 이해하고, 스스로 제 코드를 클래스 구조로 바꾸기 위해 시도했습니다.

그 과정에서 어려움이 생겨, GPT에게 기존의 일반 함수로 작성한 코드를 클래스로 바꾸어 달라고 요청했습니다. 한 번만 요청한 뒤에 제 코드의 전반적인 부분을 스스로 힘으로 클래스로 고쳤습니다. 가독성이 점점 좋아지니 더 재미있어서 모든 함수를 대부분 클래스로 모듈화하게 되었습니다.
목표처럼 GPT를 완전히 사용하지 않거나 5분 이내로 제한하지는 못했지만, 단순히 답을 받는 용도가 아닌 학습 목적으로 이렇게 사용하는 것은 괜찮다는 생각이 들었습니다.

2. 개발 시간 단축

목표: 최종적으로 프리코스 4에서는 테스트를 모두 통과(All pass)할 때까지의 개발 소요 시간을 10시간 이내로 줄이며, 더 효율적으로 작업한다.

수치화 지표:

요구사항 체크리스트 완료 1시간 이내, 테스트(All pass)까지 총 개발 소요 시간 15시간 이내

목표 달성 여부:

요구 사항 체크리스트는 1시간 이내에 작성하였습니다. 프리코스 1에 비해서 굉장히 많이 발전하였습니다. 프리코스 1에서는 1시간 30분이 소요되었는데, 프리코스 3은 프리코스 1에 비해서 미션 난이도가 어려운 것을 고려하면 시간이 많이 단축된 것을 알 수 있습니다.

구현 시간은 따로 측정하지 않았지만, GPT에게 커밋 로그를 분석하여 전체 개발 시간과 기능 구현(feat 커밋 메시지) 및 리팩토링(refactor 커밋 메시지) 시간을 추정해 달라고 요청했습니다. 그 결과, 기능 구현(feat)은 약 15시간 이내에 완료되었고, 리팩토링은 20~30시간 정도 걸린 것으로 나타났습니다.
총 개발 시간도 프리코스 1에는 30시간이었지만, 지금은 15시간으로 줄었고 이후 리팩토링에 시간을 많이 사용한 것은 엄청난 성장이라 기쁩니다!

🤝 협업 잘하는 개발자

1. 클린 코드 작성

목표: 다른 사람이 보았을 때 한눈에 이해되는 코드를 작성하여 협업을 효율적으로 한다.

수치화 지표:

Airbnb 스타일 가이드 영문 버전 2회 정독

린트 오류 1개 이하 유지

코드 리뷰 시 함수명·변수명 관련 피드백 최소 2개 이하

목표 달성 여부:

Airbnb 스타일 가이드를 영문 버전으로 2회 정독을 하였습니다. 점점 개발 단어들이 익숙해지고 있습니다.

린트 오류는 이번에 6개가 났는데, await를 쓸 수 밖에 없는 상황이라 이 부분은 계속 고민 중입니다.

프리코스 2에 코드리뷰에서 함수명, 변수명 피드백이 6개 이상 받았습니다. 이 부분을 프리코스 3에서는 많이 신경써서 직관적이고 가독성 있게 네이밍을 만들기 위해 노력하였습니다. 프리코스 3의 피드백이 기대가 됩니다.

2. 가독성 좋은 커밋 작성

목표: 최종적으로 프리코스 4에서는 기능 단위로 커밋을 작성하고, git 커밋 메시지 컨벤션을 준수하는 습관을 들인다.

수치화 지표:

git 커밋 메시지 컨벤션 1회 이상 학습
프리코스 3에서는 커밋 메시지 컨벤션을 학습하고, 저만의 기준을 확립하는 것을 목표로 하겠습니다.

커밋에 대한 피드백 받기 (프리코스 4 적용을 위해)

목표 달성 여부:

저만의 커밋 벤션을 만들었습니다.

chore: 패키지 매니저 수정

docs: 문서 수정

feat: 새로우 기능 추가

fix: 버그 수정

refactor: 코드 리팩토링

style: 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우

test: 테스트 코드 작성 및 수정

rename: 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우

remove: 파일을 삭제하는 작업인 경우

이대로 지키려고 했지만, 파일을 삭제하는 경우 따로 remove를 사용하지 않았습니다. 프리코스 4에서는 이 부분도 잘 지켜보겠습니다.

🌱 함께 성장하는 개발자

1. 배운 내용 정리 및 공유

목표: 공유를 위해 어려운 개념을 정리하여 매 프리코스마다 1개 이상 티스토리에 업로드하는 것을 목표로 한다. PR 본문에 해당 티스토리 링크를 첨부해 다른 사람들이 참고할 수 있도록 한다.

수치화 지표:

새로 배운 개념 또는 어려운 개념 1개 이상 정리 후 티스토리에 공유, PR 본문에 링크 첨부

목표 달성 여부:

[100% 달성]

isNaN와 Number.isNaN 블로그 게시글

이번주 미션에 !isNaN()으로 숫자를 검증하려고 했는데 린트 오류가 떴습니다. 단순히 !Number.isNaN()으로 하니 문자열 안에 있는 숫자도 판별이 안되어 이 부분을 1시간 이상 공부하고 블로그에 정리하였습니다.

이렇게 개념을 하나씩 알아가니 더욱 개발의 흥미가 더 올라가는 걸 느꼈습니다.

2. 코드 리뷰 교환

목표: 1:1 코드 리뷰를 교환하며 피드백을 통해 더 깊이 있는 학습을 이어간다.

수치화 지표:
- 코드 리뷰 2개 교환

목표 달성 여부:

[200% 달성]

코드리뷰 4개 교환 완료

총 4명과의 코드 리뷰를 진행하였습니다. 처음 개발을 시작하다 보니 프리코스를 시작하기 전에는 망설여졌지만, 프리코스 1에서도 코드 리뷰를 하면서 저도 다른 분 코드를 보면서 배운 것도 많고, 피드백을 받은 부분도 적용하여 프리코스 2에서는 더욱 저도 코드를 잘 짤 수 있었습니다. 그리하여 프리코스 2에서는 4명과 함께 진행을 했고, 피드백을 받은 것들 중 상수를 처리하는 부분, 네이밍 가독성 부분, 파일 구조 부분에 대한 피드백을 프리코스 3에서는 적용하려고 노력하였습니다.

4L 회고록

4L 회고록을 통해 일주일간 프리코스 3을 진행하면서, 제가 느낀 생각과 경험을 중심으로 회고를 진행하였습니다.

[1] Liked (좋았던 점)

클래스를 활용한 코드 리팩토링
이번 주에 클래스 개념을 익히며 코드를 더 간결하고 가독성 있게 만들 수 있음을 깨달았습니다. 클래스를 적용하면서 코드의 구조가 체계적으로 정리되었고, 개발이 점점 더 즐거워졌습니다. 클래스 개념을 알고 난 뒤, 일반 함수만으로 구현되었던 코드를 전체적으로 클래스로 변경하였습니다. 리펙토링에 시간을 30시간 가까이 사용하였습니다.

MVC 패턴 적용과 파일 구조 개선
MVC 패턴을 적용하여 코드를 구조화했고, 각 파일을 구분해 import/export 작업이 훨씬 편리해졌습니다. 프리코스 1에서 시작된 MVC 패턴을 프리코스 3에서 확실히 체득하며, 성장한 느낌을 받았습니다.

커밋 메시지 컨벤션 정립
커밋 메시지 컨벤션을 설정하고, 기능 단위로 명확히 커밋을 작성하는 습관을 기르며 코드를 보다 체계적으로 관리할 수 있었습니다.

1:1 코드 리뷰 교환
총 4명과 코드 리뷰를 진행하면서 다른 분들의 코드 스타일을 배우고, 상수 처리, 네이밍 가독성, 파일 구조 등 다양한 피드백을 적용해볼 수 있었습니다. 프리코스 3에서 이러한 피드백을 반영해 가독성 높은 코드를 작성하는 데 집중했습니다.

[2] Lacked (아쉬웠던 점)

App 클래스의 run 함수 작성

run 함수 내에서 프로그램 전체 흐름이 한눈에 보이도록 로직을 구성하였습니다. 함수를 최대한 작게 나누었으나, 오히려 가독성이 떨어지지 않았는지에 대한 고민이 있습니다. 이 부분은 코드 리뷰를 통해 피드백을 받아보고자 합니다.

직관적인 네이밍 고민

파일명, 함수명, 변수명, 클래스명에 신경을 써서 직관적인 의미 전달을 목표로 하다 보니 네이밍이 점차 길어졌습니다. 이로 인해 협업 시 가독성이 유지될지에 대한 걱정이 있습니다. 이 부분도 코드 리뷰에서 피드백을 받아보고자 합니다.

객체 개념 적용의 어려움

객체를 처음 사용하며 로또 당첨 번호의 개수를 계산하는 방식에 적용해 보았으나, 객체 생성과 데이터 활용에 혼란이 있었습니다. 객체 개념에 대한 이해가 아직 완벽하지 않아 익숙해지기까지 시간이 걸렸습니다.

[3] Learned (배운 점)

1.객체와 클래스 사용법
객체를 활용하여 로또 당첨 번호를 관리하고, 이를 다른 파일로 export해 사용하는 방법을 배웠습니다. 객체를 활용함으로써 코드가 더욱 체계적으로 정리되었고, 코드 재사용성이 높아졌습니다.
2. 상수 정의와 관리 방법
하드코딩을 방지하기 위해 상수를 따로 관리하는 방법을 배웠고, Object.freeze()를 사용하여 상수를 안전하게 관리했습니다. 상수화한 변수들은 다른 파일에서 import해 사용하는 구조로 정리하여 가독성을 높였습니다.
3. 테스트 코드 작성의 중요성
리팩토링 중 반복적인 테스트 실행으로 비효율성을 느꼈고, 테스트 코드의 필요성을 실감했습니다. 단위 테스트를 작성해 효율을 높였으며, 프리코스 4에서는 통합 테스트도 작성해보고자 합니다.
4. 코드 리뷰를 통한 성장
코드 리뷰를 통해 filter 메소드 사용과 같은 더 나은 코딩 방식을 배웠고, 상수화와 네이밍 규칙, 파일 구조 정리에 대한 피드백을 반영했습니다. 프리코스 2에서 배운 내용을 바탕으로 프리코스 3에서 코드의 가독성과 효율성을 높일 수 있었습니다.
5. 커밋 메시지 일관성 유지
커밋 메시지를 일관성 있게 작성하는 방법을 학습하고, 저만의 커밋 메시지 컨벤션을 만들어 코드 기록을 체계적으로 관리할 수 있게 되었습니다.

[4] Longed for (바라는 점)

통합 테스트 작성 능력 향상
단위 테스트에는 익숙해졌지만, 통합 테스트는 아직 어려움이 있습니다. 프리코스 2에서 우테코에서 제공한 미션을 참고하여 통합 테스트를 작성할 수 있었지만, 스스로 작성하는 데는 한계가 있었습니다. 프리코스 4에서는 통합 테스트를 제 힘으로 작성할 수 있도록 학습하고 연습하겠습니다.

명확한 네이밍 능력 향상
함수, 변수, 파일 네이밍의 중요성을 점차 실감하고 있습니다. 타인이 제 코드를 읽을 때 한눈에 파악할 수 있도록 네이밍을 개선하고, 프리코스 3의 코드 리뷰를 통해 피드백을 받아 더욱 성장하고자 합니다.
객체 개념 완전 이해 및 활용
이번에 객체를 처음 사용해보았으나, 아직 완전히 이해하지 못한 부분이 남아 있습니다. 객체 사용에 익숙해져 가독성을 높이고 코드 구조를 개선할 수 있도록 학습을 지속할 계획입니다.

고차 함수 활용 능력 강화
filter, map과 같은 고차 함수를 활용해보니 코드가 훨씬 간결하고 편리하게 작성된다는 점을 느꼈습니다. 프리코스 4에서는 이러한 메소드를 최대한 활용하여 코드의 효율성과 가독성을 높이겠습니다.

Jinny

세상을 이롭게 하는 프론트엔드 개발자 Jinny

이전 포스트

노베이스의 FE 우아한테크코스 - 프리코스 1 회고

다음 포스트