나 림졍. 프론트엔드 세계에 떨어진 지 어느덧 1주일이 지났다.
강의를 듣고,, 뭐 할만한 게 없을까 둘러보던 중 눈에 띄던 그 이름,
"직접 해보기". (a.k.a. 퀘스트라 불립니다)
'에이 나쁘지 않게 했었으니까~ 잘할 수 있을 듯..?🤷🏻♂️' 라는 안일한 생각으로
Vs Code를 활용하여 자그마한 미니게임을 만들기로 결정하는데.. (계속)
첫 실습은 [숫자 기억 게임] 만들기.
만들기 위해서는 html 이랑 css 도 중요하지만... 이곳에서의 하이라이트는 JavaScript 님이올시다.
(CSS는 정말 할당값만 잘 주어지면 멀쩡하게 작동을 잘하기 때문에, 필자는 자바에 더 집중할 예정이다.)
그중 조건문과 함수를 중심으로 제작되는 친구이니
가급적이면 내용을 제대로 숙지한 뒤, 실습하는 것을 추천한다.
(그렇지 않다면.. 더 이상의 설명은 생략하겠습니다. 🤦🏻♂️)
그래도 이 게시글을 보고 왔다는 것은,
"아, 저는 시간이 많이 없는 현대인이니 핵심만 알려주시죠." 나
"자바에 대한 모든 내용을 숙지하기에는 매우 귀찮아요." 라는 분들이 봐주실 것으로 생각되기에..
냅다 중요한 부분만 설명드리겠습니다. 가시죠.
맛보기 (?) - Html로 뼈대 만들기
스크립트를 적용하려면, 뼈대는 필수적으로 있어야 한다.
따라서 우리는 html을 통해 게임의 기본적인 구조부터 만져보도록 하겠다.
<!-- 가장 기본이 되는 뼈대구조 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<h1> 숫자 기억 게임 </h1>
<div id="number-display"></div>
<!-- 사용자가 입력할 수 있도록 만들어주는 필스인 form 적용 -->
<form id="submit">
<input id="user-input" placeholder= "숫자를 입력하세요" type="text">
<button class="start-btn" type="button">시작</button>
<button class="submit-btn" type="submit">제출</button>
</form>
<div id="result"></div>
</div>
</body>
</html>
어라, 우리가 봤던 결과물과 전혀 다른데요..? 라고 생각했다면 정답이다.
우리는 아직 꾸미지도 않았고, 조건마저 지정하지 않은 그냥 "뼈대"만 만들었기 때문에
결과물은 저렇게 나올 수밖에 없다..🤷🏻♂️
그래서 우리는 CSS와 JavaScript를 활용하여 이 친구를 다듬어줘야 한다.
CSS의 경우, 마지막에 적용하는 것이 가장 마음에 편하니.. 이제 본격적으로 자바에 대해 알아보자.
JavaScript 1단계 - 함수와 친해지기
조건문을 사용하려면, 우선 함수에 대해 알아야 한다.
'함수 = f(x) 아닌가요?' 하면 그것도 맞지만..
대충 생각하면 어떤 값을 넣으면 새로운 값이 나오는, 우리나라 동화로 따지면 금도끼 은도끼 같은 거라고 할까..
은도끼를 던졌는데 냅다 금도끼를 줘버리시는 산신령님이 계시는 연못을 코딩적 시각으로 바라보면
'은도끼 = 입력값, 금도끼 = 결과값, 산신령 = 입력된 명령들 , 연못 = 함수' 로 볼 수 있을 것이다.
함수의 기본 형태
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);+) Javascript 명령어들은 <body> 안에 넣는 것을 권장한다.
(<head>에 넣었을 경우, 브라우저 렌더링에 영향을 주게 되어 사용자 입장에선 느리게 느껴질 수도 있다.)
명령어까지 들어가면 정말 끝도 끝도 없기에..🙄
스크립트에 필요한 명령어를 모아 4단계에서 이어 설명하도록 하겠다.
JavaScript 2단계 - 조건문 'If' 알아보기
조건문은 조건에 맞춰 다른 행동을 실행을 다르게 해주는 명령어 중 하나이다.
그중 'if' 문의 경우, 변수가 조건에 맞다면 (입력값 = true) 코드 블록이 실행된다고 생각하면 된다.
그리고 if 뒤에는 'else' 라는 절을 붙일 수 있는데, if와 반대로 변수가 조건에 맞지 않을 때 (입력값 = false) 실행된다.
조건문 'if & else'의 형태
if (조건) {
// 조건에 맞는다면(true)~
} else {
// 아니라면(false)~
}
JavaScript 3단계 - 필요한 명령어 및 함수 알아보기
자- 이제 본격적인 스크립트 작성을 시작하기.. 전에
여러분들은 아직 저 프로그램의 조건이 무엇인지 모를 것이다!
(왜냐.. 제가 설명을 안해드렸거든요..🥲)
게임에 필요한 조건은 다음과 같다.
- [시작] 버튼 클릭 시, 1000에서 9999사이의 숫자가 무작위로 나타나게 하기
(단, 숫자는 3초 뒤에 사라지도록) - 사용자가 숫자를 입력하고 [제출] 버튼을 클릭 시, 정답 유무 확인하도록 하기
정답일 경우 "정답입니다!" 를, 오답일 경우 "오답입니다. 정답은[정답숫자]입니다." 를 노출시킬 것
그 외에 시간초 노출, 안내문구 노출 등의 선택조건이 있었지만..
우리는 아직 잘 모르는 응애개발자들이니, CSS로 간단한 디자인까지 배워볼 것이다.
그래서 우리에게 필요한 함수 리스트를 대충 정리해보면 다음과 같다.
- 조건에 맞는 난수 생성
- 타이머 기능(난수 사라지도록)
- 입력된 값과 난수의 일치도 확인
음? 생각보다 별거 없어 보이지만... 막 뜯어보다보면 생각보다 복잡하다.
명령어의 경우, 외울 필요는 없으니..까..
우선 아 그렇구나~ 하고 넘어간 후, 익숙해지는 것을 추천한다.
+) 아 그리고 가장 중요한 변수 선언 or 할당 값에 대한 명령어는 아래를 참고하자.
(적절한 타이밍을 놓쳐서 지금이라도 알고 있으면 좋을 것 같아 적어본다.)
//변수 선언이나 값을 할당할 때 사용되는 명령어 (function 전이나 내부 객체로 사용되니 참고)
let a = 10;
const name = "림졍";
JavaScript 4단계 - 명령어 및 함수 정리
1. 난수 생성 함수
랜덤 숫자(난수)를 생성하는 함수의 경우, function 뒤에 getRandomInt 를 붙이면 된다.
+) generateRandomNumber 도 같은 기능을 수행하므로 둘 중에 하나를 골라서 적용하면 된다.
그렇지만.. 생성되는 숫자가 소수점이나 음의 값이 나오면 안되므로...
내부 코드에 Math 라는 객체를 적용해야 하는데, 뒤에 붙는 명령어에 따라 각 기능이 달라진다.
해당 실습에서 사용되는 Math의 형태 및 기능
Math.random()
//0과 1 사이의 부동 소수점 난수를 출력
Math.floor()
// 소수점 이하를 내림하여 정수를 출력
return
//결과로 값을 출력하는 명령어, 생성된 정수 출력
이를 활용하여 2가지 값 사이에서 난수가 생성되도록 코드를 만들어보면 다음과 같다.
// 최댓값(max)과 최솟값(min)를 모두 포함하는 범위 내 난수 생성 코드
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 최솟값은 포함하지만, 최댓값은 제외된 범위 내 난수 생성 코드는 아래를 활용하자.
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
2. 타이머 기능 함수
생성된 랜덤 숫자를 html 요소에 표시한 뒤, 일정 시간이 지나 지워지도록 만들고 싶다면
showRandomNumber 라는 함수를 적용하면 된다.
하지만 위의 함수만 적용하게 되면, 언제 사라지는지 알 수 없다.
따라서 타이머 기능이 있는 함수인 setTimeout 를 적용할 것이다.
(간단하게 일정시간 지나게 되면 특정 작업을 실행하는 예약 함수라 생각하면 된다.)
html 요소에 숫자를 표시하는 방법은, 적용될 요소를 선택하여 직접 명령어를 넣어주는 것이다.
요소를 지정하는 명령어는 document.getElementById("id 이름") 을 넣어주면 된다.
우리는 <div> 중 "number-display" 라는 id를 가진 요소에 적용시킬 것이다.
이를 활용하여 코드를 작성해보면 다음과 같다.
//num은 1000과 9999 사이에 생성된 난수를 출력하기 위해 필요한 장치로 생각하면 된다.
//왜 let로 할당했는지 모르겠다면 3단계를 참고하자.
let num = 0;
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function showRandomNumber() {
num = getRandomInt(1000, 9999);
//"number-display" 라는 html 요소의 텍스트를 num 값으로 설정하기 위해 적용된 코드
const numberDisplay = document.getElementById("number-display");
numberDisplay.innerText = num;
//3초 후 텍스트가 없어지도록(공백) 적용된 코드
setTimeout(() => {
numberDisplay.innerText = '';
}, 3000);
}
여기서 금쪽이 같은 림졍은 굳이 id를 따로 설정하지 않고 class만 설정해서
getElementsByClassName 를 적용시킬 수는 없을까라는 호기심에 냅다 전부 변환시켜 보았으나..
아쉽게도.. 그렇게 적용하면 정상적으로 작동하지 않는다.
이유를 알아보니.. getElementById 는 주어진 Id 속성을 가진 단일 요소를 반환하고,
getElementsByClassName 은 주어진 클래스 이름을 가진 모든 요소를 반환하기 때문이다.
따라서, 선택 기준과 반환 형태가 다르므로. 특정 요소만 선택하려면 getElementById 를,
여러 요소를 한꺼번에 선택하려면 getElementsByClassName 을 사용하자.
3. 조건문 & 이벤트 함수
사용자에게 받은 입력값과 일치하지 않은지에 대한 조건문은 앞서 배웠던 if & else 를 사용하면 된다.
입력값은 폼을 통해 받게 되는데, 일반적으로 폼이 제출되면 페이지가 새로고침이 된다.
그렇게 되면.. 우리는 값에 대한 일치여부를 판단하기 어려우므로
입력값이 제출되는 이벤트 발생 시, 새로고침이 되지 않도록 preventDefault 를 사용할 것이다.
그리고 오답의 경우, 정답이 보일 수 있도록 문자열 내부에 ${} 를 사용하여 문장과 같이 출력되도록 만들 것이다.
이를 활용하여 코드를 작성해보면 다음과 같다.
function submitAnswer(event) {
event.preventDefault();
//const = 변수 선언 명령어
const inputNumber = document.getElementById("user-input").value;
const resultDiv = document.getElementById("result");
//parseInt = 입력값 -> 정수 변환
if (parseInt(inputNumber) === num) {
resultDiv.innerText = `정답입니다!`;
} else {
resultDiv.innerText = `오답입니다. 정답은 ${num}입니다.`;
}
setTimeout(() => {
resultDiv.innerText = '';
}, 3000);
}
//addEventListener = 특정 이벤트가 발생할 때 함수 실행하도록 설정하는 명령어
document.getElementById("submit").addEventListener("submit", submitAnswer);
마무리
2번과 3번의 코드를 결합하면, 게임에 필요한 모든 스크립트가 완성될 것이다.
간단하게 원큐에 복붙하고 싶은 분들을 위해, 아래에 html을 포함한 코드스니펫을 첨부해 본다.
(이 얼마나 친절한가요.. 근데 이렇게 쓰면서 저도 배워가는 중이랍니다..💁🏻♂️)
CSS의 경우.. 생각보다 길어질 것 같으니 다음 게시글에 이어 작성하는 것으로...⭐️
그럼 2탄에서 봅시다 여러분, 굿바이.
코드스니펫 (Html + JavaScript, <body> 안에 넣어주면 된다.)
<div class="container">
<h1> 숫자 기억 게임 </h1>
<div id="number-display"></div>
<form id="submit">
<input id="user-input" placeholder="숫자를 입력하세요" type="text">
<button class="start-btn" type="button" onclick="showRandomNumber()">시작</button>
<button class="submit-btn" type="submit">제출</button>
</form>
<div id="result"></div>
</div>
<script>
let num = 0;
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function showRandomNumber() {
num = getRandomInt(1000, 9999);
const numberDisplay = document.getElementById("number-display");
numberDisplay.innerText = num;
setTimeout(() => {
numberDisplay.innerText = '';
}, 3000);
}
function submitAnswer(event) {
event.preventDefault();
const inputNumber = document.getElementById("user-input").value;
const resultDiv = document.getElementById("result");
if (parseInt(inputNumber) === num) {
resultDiv.innerText = `정답입니다!`;
} else {
resultDiv.innerText = `오답입니다. 정답은 ${num}입니다.`;
}
setTimeout(() => {
resultDiv.innerText = '';
}, 3000);
}
document.getElementById("submit").addEventListener("submit", submitAnswer);
</script>
'React TIL' 카테고리의 다른 글
| [React] Day_6 데일리 정리 (이어서) (0) | 2024.09.05 |
|---|---|
| [React] Day_5 데일리 정리 (3) | 2024.09.03 |
| [React] Day_4 맨땅에 헤딩하는 실습일기 - (2) (2) | 2024.09.02 |
| [React] Day_2 데일리 정리 (4) | 2024.08.29 |
| [React] Day_1 데일리 정리 (6) | 2024.08.28 |
