무시험 추첨기

뭐몸이 추첨기 아픈건아픈거고일단 할 건 해보자할 수 있을 것같다.​쓰러지기 전에얼른 마무리 해보쟈​오늘은로또 추첨기를만드는 챕터인데​로또 추첨을 잘 모르고보너스 번호도 잘 모르겠어서그냥 순서도는 보고 해야겠다.​여튼 시작해보자로또는45개의 공이 든 통에서7개를 공을 뽑는다.​그리고 중복이 불가능하며당첨 숫자 6개를 모두 맞히면1등당첨 숫자 5개와 보너스 숫자를 1개 맞추면2등​당첨 숫자 5개를 맞추면3등​당첨 숫자를 4개 맞추면4등,3개 맞추면5등이다.​오오...사실 관심없어서잘 몰랐는데 이제 알았다.​여튼 저기 순서도는방금 말한 절차를 토대로만들어진 순서도이다.​이 프로그램은길제로 구현하기가 어렵다.​순서대로 구현하다보면생각처럼 안되는 추첨기 것을볼 수 있는데바로 비동기 특성 때문이다.​이제 하면서 알아보자프로그램이 시작되면서숫자 6개를 입력받아야한다.​input태그 6개를 써서각각의 숫자를 입역받아도 되고input 태그 하나로6개를 전부 받아도 되는데여기서는 input 태그 하나만을사용한다.​단 input 태그 안에숫자 6개가 제데로 들어있는지 확인해야 한다.​input 태그나 prompt()태그가있을 때는 입력을 잘 했는데확인하는 절차가 꼭 필요하다.​숫자를 입력했는지숫자가 6개인지숫자가 중복되지 않는지1부터 45까지의 숫자인지차례대로 검사한다.​오류가 잘 뜨는 모습을 볼 수 있다.​이번에는무작위로 숫자를 뽑아보자​숫자를 무작위로 뽑는 로직은전에 이미 만들었다.​먼저 추첨기 1에서 45까지의 숫자를 준비하고for문 대신 배열의 메서드를 사용하여 숫자들을candidate 변수에 저장한다.​어떤가이렇게 candidate를저장해 놓았다.​빈 배열을 하나를만들고 candidate 변수의길이가 0이 될때까지candidate.length>0 반복하는데이번에는 while문을 사용 할 것이다.여기서 작성한코드를피셔-예이츠 셔플알고리즘이라고 한다.​이제 공 45개가 준비되었으니공 7개를 뽑느다.​배열 메서드인slice 로 shuffle 배열에서값 6개를 잘라 새로운 배열을 만든다.​이 배열은 당첨 숫자가 된다.​그리고 잘라낸 값들의 다음 값을 뽑으면이 값은 보너스 숫자가 된다.​당첨 숫자는 오름차순으로 정렬해야한다. 지금은 무작위로 들어가 있다.​여기서는배열의 추첨기 정렬 매서드인sort()를 사용하여오름차순으로 정렬했다.​잘 나오는 모습을 볼 수 있다.​​이번에는공을 순서대로 표시해보겠다.​뽑은 공들을화면에 표시하겠다.​긴장감을 위해 1초에하나씩 뽑기로 했으며​타이머 함수(setTimeout())를사용한다.​1초 뒤 뽑는다면?1. 1000밀리초 후에 실행되도록setTimeout()을 설정한다.​2. document.createElement()를사용하여 기존 HTML에 없던ball 태그를 새로 생성한다.​3. ball 태그의 클래스를'ball'로 지정하여style 태그에 있는 CSS를 적용한다.​4. 태그 내용물로는winBalls 배열의 첫번째 요소를넣는다.​5.#result 태그 안에 ball 태그를 추가한다.​공 하나가 화면에표시되는 것을확인 했으니공 7개를 모두 화면에 표시해보자​setTimeout()을 7번 사용해도 되지만,코드가 중복되므로반복문과 추첨기 함께 사용하자​화면에 표시되는 위치가 다르니 어떻게 해야하는지 생각해보자1. for문으로 0부터 winBalls.length()-1 까지 반복한다.1초에는 winBalls[0]2초에는 winBalls[1]3초에는 winBalls[2]이렇게 생성된다.보너스 공은 7초부터나오게 하면된다.이렇게 하면당첨 곰을 뽑는 코드와중복되는 부붑ㄴ이 보이니까​중복되는 부분은 함수로 뽑아내고중복 되지 않는 부분은매개변수로 만든다.오오..여기서앞에서 작성한 반복문for(let i ϐ i<winBalls.length;i++)여기부분의let 을 var로 바꾸면?​스코프와 클로저 처럼setTimeout()과 반복문var가 만나 문제가 발생한다.var는 함수 스코프라서windballs[i]와 i를콘솔로 출력하면모두 undefined,6이 나오게 된다.​async/await로공을 순서대로 표시하기​setTimeout()으로 공을 표시했는데좀더 깔끔한 코드를 위해프로미스와 추첨기 async/awiat 문법을 사용해보자​async/await문법은 프로미스에만적용 가능하므로setTimeout()을 setTImeoutPromise라는고차함수로 변경하겠다.​await문법을 사용하기 위해submit 이벤트 리스너를async()함수로 변경한다.​차이점이전 코드바뀐 코드정렬 후 1초 뒤에 첫 번째 공 표시정렬 후 1초 귀에 첫 번째 공 표시정렬 후 2초 뒤에 두 번째 공 표시첫 번째 공 표시 1초 뒤에 두 번째 공 표시정렬 후 3초 뒤에 세 번째 공 표시두 번째 공 표시 1초 뒤에 세 번째 공 표시정렬 후 추첨기 4초 뒤에 네 번째 공 표시세 번째 공 표시 1초 뒤에 네 번째 공 표시정렬 후 5초 뒤에 다섯 번째 공 표시네 번째 공 표시 1초 뒤에 다섯 번째 공 표시정렬 후 6초 뒤에 여섯 번째 공 표시다섯 번째 공 표시 1초 뒤에 여섯 번째 공 표시정렬 후 7초 뒤에 보너스 공 표시여섯 번째 공 표시 1초 뒤에 보너스 공 표시타이머가 추첨기 생성되는시점이 바뀌었다고 볼 수 있다.​전자는한번에 일괄적으로생성한거고바뀐코드는앞 공을 표시한 후타이머가 생성되는 것이다.​마지막으로몇 등인지 표시해보자​1등과 4~5등은당첨 숫자의 개수에 따라 결정되고2등과 3등은5개의 숫자를 맞췄을 때보너스 숫자를 맞췄는지에 따라갈린다.​그런데보너스 숫자가 뜨기전에먼저 실행이 되버린다.​alert()메서드는화면을 그리는 동작보다더 먼저 실행되는 현상이 있기 때문에화면을 그리는 코드(drawBall())과 alert()사이에비동기 함수가 있으면 된다.잘 실행되는 모습을 볼 수 있다.​비동기 함수에 대해개념만 설명할떄는잘 이해가 안됐는데​실습을 통해서 하니까확실히 조금 더 이해가 되고복습도 되면서학습에 도움이 되는 추첨기 것 같다.​ㄲ ㅡ ㅌ!