[우테코 6기 FE 프리코스] 1주차 구현 사항 및 회고

⚾️ 1주차 프리코스 숫자 야구 게임

---

1. 진행 방식

• 미션은 기능 요구 사항, 프로그래밍 요구 사항, 과제 진행 요구 사항 세 가지로 구성되어 있다.
• 세 개의 요구 사항을 만족하기 위해 노력한다. 특히 기능을 구현하기 전에 기능 목록을 만든다.
• 기능 요구 사항에 기재되지 않은 내용은 스스로 판단하여 구현한다.

2. 과제 제출 전 체크 리스트 - 0점 방지

• 기능 구현을 모두 정상적으로 했더라도 요구 사항에 명시된 출력값 형식을 지키지 않을 경우 0점으로 처리한다.
• 기능 구현을 완료한 뒤 아래 가이드에 따라 테스트를 실행했을 때 모든 테스트가 성공하는지 확인한다.
• 테스트가 실패할 경우 0점으로 처리되므로, 반드시 확인 후 제출한다.

3. 프로그래밍 요구 사항, 라이브러리

• Node.js 18.17.1 버전에서 실행 가능해야 한다. Node.js 18.17.1에서 정상적으로 동작하지 않을 경우 0점 처리한다.
• 프로그램 실행의 시작점은 App.js의 play 메서드이다. 아래와 같이 프로그램을 실행시킬 수 있어야 한다.

예시

const app = new App();
app.play();

• package.json을 변경할 수 없고 외부 라이브러리(jQuery, Lodash 등)를 사용하지 않는다. 순수 Vanilla JS로만 구현한다.
• JavaScript 코드 컨벤션을 지키면서 프로그래밍 한다
• 프로그램 종료 시 process.exit()를 호출하지 않는다.
• 프로그램 구현이 완료되면 ApplicationTest의 모든 테스트가 성공해야 한다. 테스트가 실패할 경우 0점 처리한다.
• 프로그래밍 요구 사항에서 달리 명시하지 않는 한 파일, 패키지 이름을 수정하거나 이동하지 않는다.
• @woowacourse/mission-utils의 Random 및 Console API를 사용하여 구현해야 한다.
  • Random 값 추출은 Random.pickNumberInRange()를 활용한다.
  • 사용자의 값을 입력 받고 출력하기 위해서는 Console.readLineAsync, Console.print를 활용한다.

4. 과제 진행 요구 사항

• 미션은 javascript-baseball 저장소를 Fork & Clone해 시작한다.
• 기능을 구현하기 전 docs/README.md에 구현할 기능 목록을 정리해 추가한다.
• 과제 진행 및 제출 방법은 프리코스 과제 제출 문서를 참고한다.

---

📖 프리코스 목표 설정, 계획

• 계획 1. 함수 모듈화하기
• 계획 2. 자주 쓰는, 상수 constants 폴더에 별도 관리
• 계획 3. Airbnb 코딩 컨벤션 적용하기 (prettier, eslint 설정)
• 계획 4. 깃허브에 익숙해지기
• 계획 5. 대학교 중간고사와 시간 잘 분리해서 프리코스 1주차 정상적으로 제출하기

---

⚙️ 내가 계획한 기능 구현 목록

1. Computer가 1 ~ 9 까지의 Random 숫자중 서로 다른 3개를 선택합니다.
2. '숫자 야구 게임을 시작합니다.' 문구 출력 후, User가 3개의 숫자를 입력합니다.
   • 양식에 맞게, 제대로 입력하였을 경우 3번 과정을 수행합니다.
   • 잘못된 값을 입력한 경우, throw문을 사용하여, 예외를 발생시킨 후, 애플리케이션은 종료되어야 한다.
3. 2번에서, User가 입력한 숫자와, 1번에서 Computer가 선택한 숫자를 비교한 후, 스트라이크 / 볼 / 낫싱이라는 결과를 출력합니다.
   • 스트라이크
     • 같은 숫자가, 동일한 자리에 있는 경우 ex) Computer: 145 User: 132
     • 1이 동일한 위치에 있으므로, 1스트라이크이다.
   • 볼
     • 같은 숫자가, 다른 자리에 있는 경우 ex) Computer: 234 User: 423
     • Computer / User 모두 234 숫자를 갖고있지만, 자리가 다르므로 3볼이다.
   • 낫싱
     • 같은 숫자가 전혀 없는 경우 낫싱이 출력된다. ex) Computer: 123 User: 456
     • 서로 동일한 숫자가 없으므로 낫싱이 출력된다
4. User가 정답을 맞출 경우 게임을 종료합니다.
5. 게임을 종료한 후, 입력값에 따라, 게임을 다시 시작하거나, 완전히 종료할 수 있습니다.
   • 다시 시작 (1 입력시)
     • 1번 과정 반복
   • 종료 (2 입력시)
     • 애플리케이션 종료

💡 우테코는, 계획한 기능 구현 목록에 따라 작업하는 것을 목표로 하는 것 같다. 2주차 부터는 체크리스트 형식으로 만들어서, 기능 구현을 할 때마다 체크 후 커밋하는 것이 좋을 것 같다.

---

⚙️ constants 폴더에 상수 관리

상수화를 잘 시켜 놓으면, 나중에 게임의 규칙이 변경될 경우 조금 더 수월하게 리팩토링을 진행할 수 있다.

export const ANSWER = {
  MIN: 1,
  MAX: 9,
  LENGTH: 3,
};

export const RESULT = {
  NOTHING: '낫싱 ',
  BALL: '볼 ',
  STRIKE: '스트라이크',
};

export const GAME_END = {
  RETRY: '1',
  EXIT: '2',
};

export const TEXT = {
  INITIAL: '숫자 야구 게임을 시작합니다.',
  GET_USER_NUMBER: '숫자를 입력해주세요 : ',
  CORRECT_ANSWER: `${ANSWER.LENGTH}개의 숫자를 모두 맞히셨습니다! 게임 종료`,
  RETRY: `게임을 새로 시작하려면 ${GAME_END.RETRY}, 종료하려면 ${GAME_END.EXIT}를 입력하세요.\n`,
};

export const ERROR = {
  INVALID_USER_NUMBER: '잘못된 값을 입력하였습니다.',
  INVALID_RETRY: '1이나 2가 아닌 값을 잘못 입력하였습니다.',
};

export const REG_EXP = {
  INPUT_VALIDATION: /^[1-9]{3}$/,
};

---

⚙️ 기능별 분리

폴더 분리를 아래와 같이 진행했습니다.

랜덤하게, 숫자를 출력하는 함수를 generateRandomNumber.js

결과를 출력하거나, 확인하는 함수는 result.js

입력값을 변경하거나, validation 판단을 하는 곳을 userInput.js

그리고, 큰 틀에서 App.js 에서는 게임을 시작하거나, input을 확인하거나, 결과를 비교하는 주체 역할을 하거나, 게임을 종료하고, 재시작할건지 여부를 판단하는 로직을 담았습니다.

---

⚙️ Airbnb Setting

Airbnb 코딩 세팅을 위해 eslint와 prettier를 통해 적용하였다.

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": ["airbnb", "plugin:prettier/recommended"],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
  }
}

// .prettierrc
{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "avoid"
}

AirBnB 세팅 중 실수!

하지만, 여기서 실수를 저질렀다!

설치 과정중에 package.json을 건들여버렸다. 제출 전까지 알지 못했다..

추후에 알아보니 현재 작업하고 있는 JAVASCRIPT-BASEBALL 파일에 설정하지말고, 그 바깥에 폴더에 Airbnb 세팅을 하면, JAVASCRIPT-BASEBALL의 package.json을 건들이지 않고 작업할 수 있음을 알게 되었다.

---

1주차 프리코스 회고

1주차 프리코스 이후에, 여러 사람들의 코드를 확인한 결과 2주차 부터는 새로운 코드스타일로 작업해봐야 할 것 같다고 생각했다.

1. class를 사용해서 static 을 활용해서 모듈별로 분리해서 작업을 해보기
2. jest를 학습해서, 우테코에서 제시해준 초기 테스트에 대해 이해해보기.
3. 여러가지 경우의 수를 생각해서 jest로 테스트 케이스 코드를 추가해서 작성해보기

순수, 자바스크립트로 무엇인가 만들어본 경험이 많지않아서 생각보다 어려움을 겪었던 과제였지만, 다른 사람의 코드를 보면서 부족한 점을 학습하고, 학습 방향성을 잡을 수 있는 좋은 프리코스 1주차 시간이었던 것 같다.

4주차 끝나면 발전한 내모습이 보이지 않을까 생각된다!