feat: 기능구현 (미완성)

[sung-eunji]

오늘 오전에 멘토님께서 해주셨던 말씀 중에 우선 기능적으로 작동시킨 후에 재사용성에 따라 리펙토링 하는 경우를 말씀해주셨는데, 저는 일단 기능구현 자체가 막막한 상태라 먼저 글로 정리를 해봤습니다.

---

상대방의 역할을 컴퓨터가 한다.
컴퓨터는 1에서 9까지 서로 다른 임의의 수 3개를 선택한다.
게임 플레이어는 컴퓨터가 생각하고 있는 3개의 숫자를 입력하고,
버튼을 눌렀을 때,

• 사용자가 잘못된 입력 값을 작성한 경우 alert을 이용해 메시지를 보여주고, 재입력할 수 있게 한다. -제대로된 값을 입력했을 때,
  컴퓨터의 랜덤값 3개가 나온다.
  input값과 겹치는 숫자가 있을 때,

컴퓨터는 입력한 숫자에 대한 결과를 출력한다.

사용자인풋과 컴퓨터 랜덤 배열 중,
볼:0, 스트라이크:0 객체 생성

1. 같은수 없으면 = 낫싱

2. 같은 수, 같은 자리 = 스트라이크 +=. indexOf() 로 배열 비교

3. 같은 수, 다른 자리 = 볼 +=. includes()로 배열 비교
   스트라이크와 볼은 합산 계산 가능
   play(123, 134); // '1볼 1스트라이크' 1볼 불포함 계산 후 스트라이크 계산
   play(123, 132); // '2볼 1스트라이크'
   스트라이크와 볼이 같이 있는 경우 볼을 먼저쓰고, 스트라이크를 쓴다.

4. 숫자를 모두 맞히면: 🎉정답을 맞추셨습니다!🎉
   게임을 새로 시작하시겠습니까? 게임재시작 버튼
   게임이 종료된다.

필요한 함수 펼쳐보기

인풋 버튼 클릭이벤트 함수

사용자 인풋을 배열안에 넣는 함수

겹치지 않는 세자리 난수 생성

인풋 세자리 겹치지 않는 숫자로 제한

게임이 승리했을 때 함수?

• 축하메시지 문자열과 버튼 태그 div 생성
• 버튼 누르면 게임 리셋

리셋 버튼 클릭이벤트 함수

게임결과를 문자열로 나타내는 함수

• 볼, 스트라이크, 낫싱 출력 후
• 각 결과에 맞는 문자열 생성

---

전반적으로
구글과 이전 강의 검색과 함께 제가 해본 것은 다른 분들 코드를 살펴본 것 이었습니다.
코드 작성 중에 전반적으로 제가 강의에서 배운 내용을 실재로 사용하는데에 경험치가 너무 부족하단걸 절실히 느꼈습니다. 특히 모던 자바스크립트 쪽에서요.
그리고 다른분들 코드를 읽을 순 있더라도 제가 해뵜던 함수 선언문과 for loop, 에서 더 발전된 코드를 적기가 어려웠습니다.

질문을 정리해보았습니다.

1. html 파일 마지막에 script tag 의 type='module'이 index.js
   export default class BaseballGame { play(computerInputNumbers, userInputNumbers) { return "결과 값 String"; } } new BaseballGame();

에서 활용해야 하는지 모르겠습니다.

2. 그리고 new 함수도 찾아보�긴했지만 역시 활용법을 잘 모르겠습니다.

3. 다른 분들PR을 보는데 멘토님 코멘트에 submit기능을 사용하라는 코멘트를 봤습니다. 왜 사용해야 하나요? 서버로 폼을 전송하면 그 다음에 어떤일이 일어나길래 제안하셨던건지 궁금합니다.

4. 한 함수가 한 기능을 갖고있는것 의 경우 일단 그러면 함수들을 먼저 만들고, 연결시켜서 결국 클릭이벤트가 발생했을 때 작동되게 해야 하는것인가요? 구체적으로 어떻게 해야하는지 잘 모르겠습니다.

너무 잘 몰라서 기운이 없지만 PR요청 드립니다. 모르는 범위도 너무 크네요..
주말인데 답변 금방 주셔서 감사합니다.