노마드코더 AI 기초 탄탄 클럽 #10 JS Casino

노마드코더에서 수강 가능한 풀스택 웹 기초를 6주만에 훑는 챌린지. 해당 강의: JS #10은 JS로 랜덤 숫자 맞추기 작성

---

챌린지 조건

1. 0에서 사용자가 지정한 숫자까지의 범위에서 랜덤한 숫자를 찾으세요.
2. 범위에는 음수가 포함될 수 없습니다.
3. 실시간으로 범위 값을 업데이트해야 합니다.
4. 유저가 숫자를 선택한 후에 게임을 플레이할 수 있습니다.
5. 유저에게 게임의 승패를 알려야 합니다.

---

event.preventDefault()의 역할과 필요성

• form 태그의 기본 동작은 제출 시 페이지를 새로고침하는 것인데, 이 게임에서는 그걸 막았다. 막지 않으면 결과 메시지가 뜨자마자 페이지가 새로고침되고 변수 상태(randomNum 등)가 초기화 되어 사용자가 결과를 확인할 수 없게된다. 따라서 페이지 리로드 없이 JS로 결과를 처리하기 위해 이 함수가 필수적이다.

---

변수의 스코프(Scope)와 업데이트 시점

• randomNum을 함수 외부가 아닌 submit 이벤트 내부에 선언하여 매번 버튼을 누를 때 마다 랜덤한 숫자를 얻도록 한다.
• 만약 함수 외부에 선언한 경우 정답이 고정된다.

---

parseInt와 ===

• input.value가 string이라서 HTML에서 유효성 검사(required, min, number)를 지정했어도 JS로 넘어올 때 자료형이 int가 아닌 string이 된다.
• HTML의 유효성 검사는 쉽게 block될 수 있어서 뭐가 들어오든 JS에서는 정상적으로 작동되어야 하기 때문에 input.value를 parseInt로 받고 ===를 통해 엄격하게 검사한다.
• 더 엄격하게 하려면 Number()이나 정규식 체크가 필요하지만 이 미션에서는 이 정도로 충분했다.

---

사용자 경험(UX)을 위한 상태 제어: disabled 속성

• submit 버튼을 계속 누르면서 시도하는 게임이기 때문에 지면 계속 시도해도 되지만 이겼을 때는 게임이 끝났음을 사용자가 확실하게 인지할 수 있도록 input과 button에 disabled 속성을 활성화 하여 사용자의 추가 입력을 막았다.

---

Series: 노마드코더 - AI 기초 탄탄 클럽