Development/Front
Typing Game 만들어보기(비동기 실습)
westcold
2024. 4. 28. 15:45
동기:순차적으로 작업을 수행 하여 소스를 1줄 보고 이해하고 또 다시 1줄 보고 이해하는 직렬적으로 일 처리를한다.
단점:소스 하나 보고 실행하고를 반복하니 두개의 소스를 동시에 실행이 안된다.
*비동기:소스가 두개 이상이 동시에 실행, 즉 병렬적으로 일 처리를 한다
jquery란?
구글링을 하면 $가 붙어 있는 자바스크립트 코드들을 볼 수 있는데
-넷스케이프 ->크롬,인익,파이어폭스,사파리....등으로 유행의 이동
-클라이언트가 다 달라 2000년대 중반에 화면 보이는게 달랐다
-jquery가 호환되게 해줌
-시간이 지난 후 클라이언트끼리 웹표준 약속을 함(mozilla에서 표준을 정함)->jquery가 필요없어짐->공부 할 필요가 줄어드는 추세
*api란?
웹사이트 구성하는 방법
웹사이트 구성하는 방법 *mpa-페이지가 여러개 -스마트폰 나오기 전에 많이 사용 -화면이 깜빡인 후에 로딩이 된다 /list /detail /write /edit 위와 관련된 html을 서버가 준비 해뒀다가 클라이언트가 요
eatitstory.tistory.com
-전에 작성한 글 참고
*json과 xml
-구조화된 데이터들을 주고받기 위한 잘 설계된 어떤 형식이 필요한데, 이럴때 사용되는 데이터 표기 방식
*json
{
a:100
b:200
}
데이터를 모아둔 형태
오브젝트와 다른 개념이다
웹api에서 응답이 오는 건 json형태로 준다
*xml
-html같이 생겼다
*ajax
보통은 클라이언트와 서버한테 http요청을 보낼때 페이지가 이동이되며 요청을 보낸다.
ajax=페이지가 이동이 되지 않으면서 요청이 되는 경우(백단에서 몰래)
(ex.네이버 실시간 검색어 같은 경우 페이지 이동 없이 계속해서 바뀜)
|
정리
api->서비스를 버튼화 json->데이터를 구조화 해놓은 하나의 데이터 형태, 중괄호 가지고 감싸진 키와 벨류가 쌍으로 이루어진 형태
XMl->데이터를 구조화 해놓은 하나의 데이터 형태, html같이 태그 가지고 감싸져 있음
ajax->페이지의 이동없이 백단에서 서버와 http통신을 하는 기술
|
단어 맞추면서 시간 동시에 진행이 되는 즉 비동기가 실행이 되는 게임을 만들어보자!
-typing.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing Game</title>
<link rel="stylesheet" href="typing.css">
</head>
<body>
<div class="game-title">
<h1>Typing Game</h1>
</div>
<div class="word-display">
Are you ready to play?
</div>
<input type="text" class="word-input" >
<input type="button" value="Game Start" class="start" onclick="gamestart()">
<input type="button" value="Game Reset" class="reset" onclick="gamereset()">
<div class="game-info">
<p>점수 : <span class="score">0</span></p>
<p>남은시간 : <span class="time">0</span>초</p>
</div>
</body>
</html>
<script src="typing.js"></script>
<!--js 로딩위치에 따라 로딩 속도차이와 버그가 발생 할 수 있다-->
-typing.css
body{
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
}
.game-title {
background-color: #e1b74c;
width: 100%;
text-align: center;
color: white;
}
.word-display{
font-size: 70px;
margin-top: 15px;
margin-bottom: 15px;
}
.word-input{
font-size: 20px;
padding: 10px;
border: 1px solid #100f0e;
}
.game-info{
display: flex;
width: 200px;
justify-content: space-around;
}
.score, .time{
font-weight: bold;
font-size: 20 px;
}
.start, .reset{
margin-top: 10px;
padding: 10px;
width: 200px;
color: #e1b74c;
border: 1px solid #e1b74c;
cursor: pointer;
}
.reset {
display: none;
}
css
border의
margin선 밖에 공백을 주고 싶다
안에 주고 싶다 padding
-typing.js
//로딩바
const start = document.querySelector(".start");
const reset = document.querySelector(".reset");
const wordDisplay =document.querySelector(".word-display");
const wordInput = document.querySelector(".word-input");
const score = document.querySelector(".score");
const time = document.querySelector(".time");
let timeinterval;
function gamestart() {
//reset 버튼을 보이게 하고 start 버튼을 안보이게
start.style.display= "none";
reset.style.display= "block";
.then(function (response) {
return response.json();
})
.then(function (result) {
//로딩바 없애
const DEFAULT_TIME = 10;
let wordList = result;
let count = 0;
let time_left= DEFAULT_TIME;
wordDisplay.innerText = wordList[0];
time.innerText = DEFAULT_TIME;
wordInput.addEventListener("keydown", function() {
if (event.code === "Enter") {
if (wordInput.value === wordDisplay.innerText) {
count++;
if (count=== wordList.length) {
wordInput.disabled = true
score.innerText = count;
clearInterval(timeinterval);
alert("game over");
return false;
}
wordDisplay.innerText = wordList[count];
wordInput.value ="";
score.innerText = count;
time.innerText = DEFAULT_TIME;
time_left=DEFAULT_TIME; // 시간 초기화
}
}
})
timeinterval = setInterval(function() {
time_left--;
time.innerText=time_left;
if(time_left ===0) {
clearInterval(timeinterval);
}
}, 1000)
});
}
function gamereset() {
wordDisplay.innerText="";
wordInput.value="";
start.style.display= "block";
reset.style.display= "none";
score.innerText = 0;
time.innerText = 0;
clearInterval(timeinterval);
}
-api.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>비트코인 시가 : <span/ class="opening_price">0</span></p>
<p>비트코인 종가 : <span/ class="closing_price">0</span></p>
</body>
</html>
<script>
//api->서비스를 버튼화
//json->데이터를 구조화 해놓은 하나의 데이터 형태, 중괄호 가지고 감싸진 키와 벨류가 쌍으로 이루어진 형태
//XMl->데이터를 구조화 해놓은 하나의 데이터 형태, html같이 태그 가지고 감싸져 있음
//ajax->페이지의 이동없이 백단에서 서버와 http통신을 하는 기술
//api 요청
const opening_price = document.querySelector(".opening_price");
const closing_price = document.querySelector(".closing_price");
console.log(opening_price);
console.log(closing_price);
// 응답값이 함수의 첫번째 argument 매개변수에 값이 들어온다
.then(function(response) {
return response.json(); //json응답값을 오브젝트형태로 바꾸는
})
.then(function(result){
opening_price.innerText = result.data.opening_price;
closing_price.innerText = result.data.closing_price;
console.log(result);
})
</script>
비동기의 문제점:원하지 않는 경우(ex. 로그인 하면 쿠폰 주는 이벤트에서 로그인 들어가고 주는게 아닌 쿠폰을 먼저 주고 로그인이 되는 경우가 발생)
방법:비동기->동기 하는 방법
1.promise
2.async lawait
.then이 promise
*.then에 코드 집어넣어서 순서에 맞게 하면 시간 문제
