[회고록] 우아한 테크코스 6기 프리코스 1주차 회고

목차

1. 숫자 야구 게임 로직

   1.1. 게임 시작

   1.2. 게임 진행

   1.3. 게임 종료와 재시작

   1.4. 폴더 구조

2. 구현 기능 목록

3. 테스트 결과

4. 느낀점

   4.1. 관심사 분리의 어려움

   4.2. 리팩토링 진행

   4.3. JSDoc 사용

   4.4. 상수 관리 시 Object.freeze() 사용

GitHub - hyzzzzy/javascript-baseball-6

⚾ 숫자 야구 게임 로직

---

1.1. 게임 시작

• 게임 시작 문구 출력
• 랜덤 숫자 제작

1.2. 게임 진행

• 사용자 입력 받기
• 유효성 검사 (숫자가 올바르게 입력 되었는지, 중복된 숫자는 없는 지 등)
• 올바르게 입력 되었다면 사용자 입력에 따른 스트라이크 or 볼 or 낫싱 계산

1.3. 게임 종료와 재시작

• 3 스트라이크가 나오면 모두 맞혔다는 문구 띄움 및 게임이 종료
• 재시작할지 종료할지 입력받음
• 유효성 검사 (1 or 2가 제대로 입력 되었는지)
• 재시작을 원한다면 상태를 다시 초기화

1.4. 폴더 구조

App.js
 - 메인 App.js
Game.js
 - 게임 클래스
constant.js
 - 게임 상수 설정
util.js
 - 자주 쓰이는 유틸함수

⚾ 구현 기능 목록

---

• 사용자 입력값 유효성 검사
  • 3글자 인지?
  • 모두 숫자로 이루어져 있는지?
  • 1~9 사이의 숫자로 이루어져 있는지?
  • 세 수가 중복이 없는 유니크한 값인지?
  • ⇒ 잘못된 값 입력 시 throw 문을 사용해 예외를 발생시키고 종료
• 판정
  • 숫자가 있으나 위치가 다른 경우 BALL
  • 숫자와 위치가 일치한 경우 STRIKE
  • 아무것도 일치하지 않으면 낫싱 (0볼0스트라이크)
• 판정 결과 출력
  • _볼 _스트라이크 / _볼 / _스트라이크 / 낫싱 형식으로 출력
  • 정답이면 (3S)
    • 정답을 맞췄다는 메시지 출력
    • 재시작 할지 입력값 받기
  • 정답이 아니면
    • 판정 결과 출력

⚾ 테스트 결과

---

작고 소중한 테스트 2개

⚾ 느낀점

---

관심사 분리의 어려움

우선 class 형식으로 코드를 구현하다보니 익숙하지 않다는 느낌을 받아서 로직 자체는 어렵지 않은 문제임에도 불구하고 저에겐 많이 어려웠다. 함수형 프로그래밍으로만 진행하다가 클래스형 프로그래밍으로 진행해보니 제 코드에 대한 확신이 들지 않았던 것 같다. 특히 어떻게 관심사 분리를 해야할 지 감이 잡히질 않아 제출 이후에도 관심사 분리 및 리팩토링을 진행하고자 했다.

리팩토링 진행

기존에는 메인함수 파일(App.js), 상수 관리 파일(constants.js), 유틸함수 파일(utils.js)로만 관리해서 코드를 작성했다. 이렇다 보니 메인함수에서 모든 코드를 관리하게 되어 가독성이 많이 떨어졌다.

이를 해결하기위해 게임클래스 파일(Game.js)을 따로 만들어 상태 관리나 게임 관련 로직을 따로 보관해야겠다고 생각이 들었다. 이렇게 진행하다보니 메인 함수에서는 게임의 사이클과 상태만 관리할 수 있도록 분리하고 게임 클래스에서는 게임에 관련된 로직과 유틸함수를 관리할 수 있게 하여 코드의 가독성을 높일 수 있었다.

JSDoc 사용

수많은 프리코스 참여자 분들에게 코드리뷰를 받는다고 생각하니 많은 분들이 코드를 편하게 볼 수 있도록 주석을 꼼꼼하게 달아야겠다는 생각이 들었다. JSDoc을 사용하여 매개변수, 함수설명과 리턴값등을 요약하여 적어서 읽기도 편하고 저 또한 함수에 대한 타입 관리를 주석으로 할 수 있다는 점을 깨닫게 되었다.

그치만 전체 피드백 내용 중 과도한 주석 사용은 지양하자는 피드백이 있었다. 주석을 사용하는 것도 좋지만 함수, 변수 네이밍 등을 명확하게 해서 주석이 필요없는 코드를 작성하는 것에 더 초점을 맞추는 것도 좋을 것 같다.

상수 관리 시 Object.freeze() 사용

기존에는 상수들을 정의해서 관리할 때 전부 간단한 객체로 정의하였다. 페어 리뷰를 해보니 Object.freeze() 라는 함수를 알게되었다.

Object.freeze() 메서드는 객체를 동결합니다. 동결된 객체는 더 이상 변경될 수 없습니다. 즉, 동결된 객체는 새로운 속성을 추가하거나 존재하는 속성을 제거하는 것을 방지하며 존재하는 속성의 불변성, 설정 가능성(configurability), 작성 가능성이 변경되는 것을 방지하고, 존재하는 속성의 값이 변경되는 것도 방지합니다. 또한, 동결 객체는 그 프로토타입이 변경되는것도 방지합니다. freeze()는 전달된 동일한 객체를 반환합니다.

Object.freeze() - JavaScript | MDN

const 키워드를 사용하면 변수의 재할당이 불가하지만 객체에 사용하게 된다면 객체의 속성을 변경할 수 있었다. 특히나 상수를 관리하기 위해선 값이 변하지 않아야 하는 점에서 Object.freeze() 함수를 사용하여 변경되는 것을 방지할 수 있다는 점을 알게 되었다.