출처 : Let's Get IT 자바스크립트 프로그래밍
1. 순서도 그리기 & 기본 뼈대
input이 있으면 주로 form으로 감싼다고 한다.logs라는 div태그안에 쌓이게 될 것이다.
2. 무작위로 숫자 뽑기
우선 무작위로 숫자를 만드는 함수는 Math.random()가 있다. 이 함수는 0이상 1미만의 수를 무작위로 생성한다. 따라서 숫자야구 게임에는 1에서 9까지 숫자가 필요하므로 아래처럼 코드가 필요하다. 숫자를 자연수로 만들어야 하니 내림함수를 추가로 덮겠다.
Math.floor(Math.random() * 9 + 1 ) // x = {1,2,3,4,5,6,7,8,9}Math.random() * 10; 이라고 가볍게 생각할 수 있지만 0.**이 나올수 있기에 0이 안나오게 하기 위해서 Math.random() * 9 + 1을 해주는 것이다.
참고로 올림은 Math.ceil(), 반올림은 Math.round() 이다.
하지만 알다싶이 Math.random()은 암호학적으로 완전한 무작위가 아니고 알고리즘으로 해석?도 할수 있다고 해서 보완이슈가 있다. 이를 위해서 window.crypto.getRandomValues() 함수가 있다.
숫자야구 게임은 중복된 숫자는 허용하지 않기 때문에 중복되지 않게 뽑아야한다.
우선 1에서 9까지의 숫자를 먼저 모아야하는데, 이때 배열또는 객체를 사용한다. 간단하게 고르는 방법은 단순한 값들의 나열이면 배열을 사용하고, 값에 이름이 붙는다면 객체를 사용하면 된다. 숫자야구의 숫자들은 단순한 숫자의 나열이므로 배열로 충분하겠다.
프로그래밍 세계에서 보통 숫자는 0부터 시작한다.
numbers라는 빈 배열을 만들고 그 안에 1부터 9까지 숫자를 넣었다. 숫자를 배열에 담아 놓았으니 여기서 네 개를 뽑아보자.
여기서 유의하게 봐야할 점은 Math.random() * 9 이다.
배열은 0부터 시작하기 때문에 +1을 해줄 필요가 없다.
push 할 때 numbers의 배열은 하나씩 사라지게 되는데 실제 숫자를 뽑을 때 현기준으로는 배열의 위치에 undefined가 나타날수 있다.
따라서 아래처럼 코드를 수정한다.
3. 입력값 검증하기
보통 입력창이 있으면 폼 태그로 감싸서 submit 이벤트를 사용하는 것이 좋다. 그래야 버튼을 클릭하지 않고도 enter를 눌러값을 제출할 수 있다.
근데 여기서 event.preventDefault()를 사용했는데 이는 폼 태그의 기본 동작을 취소하는 코드이다. 폼 태그는 submit 이벤트가 발생할 때 기본으로 브라우저를 새로고침하는게 있어서 초기화를 방지하기 위해 이 코드를 사용한다.
배열 안에 요소가 존재하는지 알려주는 tries.includes, Set의 요소개수를 세면 중복된 값이 있는지 아닌지 검사할 수 있는 new Set(input)을 사용했다. 개수는 length가 아니라 size로 사용한다.
(chat에게 물어봄)
4. 입력값과 정답 비교하기
홈런인짖 검사하는 부분과 시도 횟수가 10번을 넘겼는지 검사하는 부분을 추가 한다.
