๋ค์ด๊ฐ๊ธฐ
๊ฐ์๋ณด์๋ณด ๊ฒ์์ ๊ฐ์, ๋ฐ์, ๋ณด ๋ฒํผ์ ํด๋ฆญํด ์ปดํจํฐ์ ์นํจ๋ฅผ ๊ฐ๋ฅธ๋ค.
๋ฒํผ์ ๋๋ฅด๋ฉด ์น๋ถ๋ฅผ ํ์ํ๊ธฐ ์ํด ๋์๊ฐ๋ ๊ทธ๋ฆผ์ 1์ด ๋์ ๋ฉ์ถ๊ฒ ํ๊ฒ ๋ค.
๐ ์์๋ ๊ทธ๋ฆฌ๊ธฐ
๐ ์ฒซ ์ฝ๋
<!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>๊ฐ์๋ฐ์๋ณด</title>
<style>
#computer {
width: 165px;
height: 200px;
}
</style>
</head>
<body>
<div id="computer"></div>
<div>
<button id="scissors" class="btn">๊ฐ์</button>
<button id="rock" class="btn">๋ฐ์</button>
<button id="paper" class="btn">๋ณด</button>
</div>
<div id="score">0</div>
<script>
const $computer = document.querySelector('#computer'); //html ์ computer id ์ ํ.
const $score = document.querySelector('#score'); //html ์ score id ์ ํ.
const $rock = document.querySelector('#rock'); //html ์ rock id ์ ํ.
const $scissors = document.querySelector('#scissors'); //html ์ scissors id ์ ํ.
const $paper = document.querySelector('#paper'); //html ์ paper id ์ ํ.
const img_url = './rsp.png'; //.์ ๋นผ๋ฉด c๋๋ผ์ด๋ธ์์ ์ถ๋ฐ (์ ๋๊ฒฝ๋ก) / .์ ๋ฃ์ผ๋ฉด ๋ด ์์น๋ก๋ถํฐ ํ์ผ์ ๊ฐ๋ฆฌํจ๋ค(์๋๊ฒฝ๋ก)
$computer.style.background = `url(${img_url}) 0 0`; //์ด๋ฏธ์ง์ ๊ฐ๋ก,์ธ๋ก ์์น ์ง์ .
$computer.style.backgroundSize = `auto 200px`;
</script>
</body>
</html>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
๐ ๊ฐ์ฒด๋ก ๋ณ์ ๋ฌถ๊ธฐ
img_url ๋ณ์์ ์ฃผ์ด์ง ์ด๋ฏธ์ง๋ ์์ ๊ฐ๋ค.
์ด๊ฒ์ ๊ฐ์, ๋ฐ์, ๋ณด๊ฐ ํ๋์ ์ด๋ฏธ์ง๋ก ํฉ์ณ ์๋ค.
์ด๋ฐ ์ฌ์ง์ ์ฒ์ ๋ณธ๋ค. ์์ผ๊น?
์๋ฒ์ ์ด๋ฏธ์ง๋ฅผ ์์ฒญํ๋ ํ์๋ฅผ ์ค์ด๊ธฐ ์ํ ๊ธฐ๋ฒ์ด๋ค.
๊ฐ์, ๋ฐ์, ๋ณด ๊ฐ๊ฐ์ ์ด๋ฏธ์ง๋ฅผ ํ ๋ฒ์ฉ ์์ฒญํ๋ฉด ์ด 3๋ฒ์ ์์ฒญ์ด ์๋ฒ๋ก ์ ์ก๋์ง๋ง, ๊ทธ๋ฆผ์ฒ๋ผ ํ๋๋ก ํฉ์ณ ๋๋ฉด ํ ๋ฒ๋ง ๋๋ค.
์ด๋ฅผ ์ด๋ฏธ์ง ์คํ๋ผ์ดํธ ( image sprite ) ๋ผ๊ณ ํ๋ค.
๋จ, ์ด๋ฏธ์ง๊ฐ ํ๋๋ก ํฉ์ณ์ ธ ์์ผ๋ฏ๋ก CSS ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ ์ ํ ์๋ผ์ ํ๋ฉด์ ํ์ํด์ผ ํ๋ค.
๐ค background CSS ์์ฑ ์กฐ์
๋ฐ์, ๊ฐ์, ๋ณด๋ ๊ฐ๊ฐ #computer ํ๊ทธ์ ๋ค์๊ณผ ๊ฐ์ background CSS ์์ฑ์ ์ ์ฉํ๋ฉด ํ์๋๋ค.
background ์์ฑ์ url ( ์ฃผ์ ) , x ์ขํ, y ์ขํ ๋ก ๊ตฌ์ฑ๋์ด ์๋ค.
//์ด๋ฏธ์ง์ ๊ฐ๋ก,์ธ๋ก ์์น ์ง์ .
$computer.style.background = `url(${img_url}) 0 0`; //๊ฐ์
$computer.style.background = `url(${img_url}) -220px 0`; //๋ฐ์
$computer.style.background = `url(${img_url}) -440px 0`; //๋ณด
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์ด๋ฏธ์ง๊ฐ ๋งค์ฐ ํฌ๋ฏ๋ก ํ๋ฉด์ ์๋ง๊ฒ ํ์ํ๊ธฐ ์ํด ๋ค์ ์ฝ๋๋ก ์ด๋ฏธ์ง์ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ๋ค.
๊ฐ๋ก๋ auto ( ์๋ ) , ์ธ๋ก๋ 200px ๋ก ์ค์ ํ๋ค.
backgroundSize CSS ์์ฑ์ background ์์ฑ๊ณผ ํญ์ ๊ฐ์ด ๋์์ผ ํ๋ค.
$computer.style.backgroundSize = `auto 200px`;
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ๊ฐ์๋ x ์ขํ๊ฐ 0 / ๋ฐ์๋ -220px / ๋ณด๋ -440px ์ ์์นํ๋ค.
y ์ขํ๋ ๋ชจ๋ 0 ์ด๋ค. ๋ฐ๋ผ์ x ์ขํ๋ฅผ ๋ณ์์ ์ ์ฅํ๋ฉด ๋๋ค.
const scissorsX = '0'; //๊ฐ์
const rockX = '-220px'; //๋ฐ์
const paperX = '-440px'; //๋ณด
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์ฌ๊ธฐ์ ๊ณตํต์ ์ ์ฐพ์๋ด๋ผ.
์ ์ฝ๋์ ๋ณ์๋ค์ x ์ขํ๋ผ๋ ๊ณตํต์ ์ด ์๋ค.
๋ฐ๋ผ์ ๊ฐ์ฒด๋ก ๋ฌถ์ด์ ํํํ๋ ๊ฒ์ด ์ข๋ค.
//x์ขํ๋ฅผ ๋ณ์์ ์ ์ฅ. (์ฌ๋ฌ๊ฐ์ ๊ฐ์ฒด๋ค์ ๊ทธ๋ฅฉํ)
const rspX = {
scissors : '0', //๊ฐ์
rock : '-220px', //๋ฐ์
paper : '-440px', //๋ณด
};
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐNote!
๊ฐ์ฒด๋?
์ฌ๋ฌ ์์ฑ์ ํ๋์ ๋ณ์์ ์ ์ฅํ ์ ์๋๋ก ํด์ฃผ๋ ๋ฐ์ดํฐ ํ์ ์ด๋ค.
๊ฐ์ฒด์ ๊ดํด ๋ ์๊ณ ์ถ๋ค๋ฉด?
[ JavaScript ] ๊ฐ์ฒด ๋ฆฌํฐ๋ด
๐ ๊ฐ์ฒด ๋ฆฌํฐ๋ด ๊ฐ์ฒด๋ ์ฌ๋ฌ ๊ฐ์ ๋ณ์๋ฅผ ํ๋์ ๋ณ์๋ก ๋ฌถ์ ๋ ์ฌ์ฉํ๋ค. ๋ค์์ ์์๋ฅผ ๋ณด์. const name = '์ด๋ก'; const year = 1997; const month = 12; const date = 12; const gender = 'W'; //์ฝ๋ ์ถ์ฒ (๋์)Let's
irro.tistory.com
๐ ์ผ์ ์๊ฐ๋ง๋ค ๋ฐ๋ณตํ๊ธฐ
๐ค ํ์ด๋จธ ์ฌ์ฉํ๊ธฐ (setInterval)
์ด์ 0.05์ด ( 50๋ฐ๋ฆฌ์ด ) ๋ง๋ค ๊ฐ์๋ฐ์๋ณด ๊ทธ๋ฆผ์ ๋ฐ๊ฟ๋ณด๊ฒ ๋ค.
์ฒ์์๋ ๊ฐ์์๋ค๊ฐ ๋ฐ์๋ก, ๊ทธ ๋ค์์๋ ๋ณด๋ก ๊ทธ๋ฆผ์ด ๋ฐ๋๋ค.
์ด๋ฏธ์ง์ x ์ขํ๋ง ๋ฐ๊ฟ์ #computer ํ๊ทธ์ background ๋ก ๋ฃ์ผ๋ฉด ๋๋ค.
<script>
const $computer = document.querySelector('#computer'); //html ์ computer id ์ ํ.
const $score = document.querySelector('#score'); //html ์ score id ์ ํ.
const $rock = document.querySelector('#rock'); //html ์ rock id ์ ํ.
const $scissors = document.querySelector('#scissors'); //html ์ scissors id ์ ํ.
const $paper = document.querySelector('#paper'); //html ์ paper id ์ ํ.
const img_url = './rsp.png'; //.์ ๋นผ๋ฉด c๋๋ผ์ด๋ธ์์ ์ถ๋ฐ (์ ๋๊ฒฝ๋ก) / .์ ๋ฃ์ผ๋ฉด ๋ด ์์น๋ก๋ถํฐ ํ์ผ์ ๊ฐ๋ฆฌํจ๋ค(์๋๊ฒฝ๋ก)
//์ด๋ฏธ์ง์ ๊ฐ๋ก,์ธ๋ก ์์น ์ง์ .
$computer.style.background = `url(${img_url}) 0 0`; //๊ฐ์
$computer.style.backgroundSize = `auto 200px`;
//x์ขํ๋ฅผ ๋ณ์์ ์ ์ฅ. (์ฌ๋ฌ๊ฐ์ ๊ฐ์ฒด๋ค์ ๊ทธ๋ฅฉํ)
const rspX = {
scissors : '0', //๊ฐ์
rock : '-220px', //๋ฐ์
paper : '-440px', //๋ณด
};
let computerChoice = 'scissors'; //์ฒ์์ ์ปดํจํฐ๊ฐ ๊ฐ์๋ฅผ ๋ด๋๋ก ์ค์ .
//์ปดํจํฐ์ ์ ์ด๋ฏธ์ง๋ฅผ ๋ฐ๊พธ๋ ํจ์.
const changeComputerHand = () => {
//๋ฐ์ดํฐ๋ฅผ ์์ ํ๋ ๋ถ๋ถ.
if (computerChoice == 'rock'){
computerChoice = 'scissors';
} else if (computerChoice == 'scissors'){
computerChoice = 'paper';
} else if (computerChoice == 'paper'){
computerChoice = 'rock';
}
//ํ๋ฉด์ ์์ ํ๋ ๋ถ๋ถ.
$computer.style.background = `url(${img_url}) ${rspX[computerChoice]} 0`;
$computer.style.backgroundSize = `auto 200px`;
setTimeout(changeComputerHand, 50); //50๋ฐ๋ฆฌ์ด๋ง๋ค ํจ์ ์คํ.
}
//ํน์ ์ฃผ๊ธฐ๋ก ์ด๋ค ์์
์ ๊ณ์ ์ํํ๋ ค๋ฉด setTimeout ๋ด๋ถ์์ ๋ค์ setTimeout ์คํํ๋ค.
setTimeout(changeComputerHand, 50); //ํจ์๊ฐ ๋๋๊ธฐ ์ง์ ์ ๋ค์ ํ์ด๋จธ๊ฐ ์๋ ๋์ด 50๋ฐ๋ฆฌ์ด ์ฃผ๊ธฐ๋ก ํจ์ ํธ์ถ.
</script>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
์ฒ์์ ์ปดํจํฐ๊ฐ ๊ฐ์๋ฅผ ๋ด๋๋ก ์ค์ ํ๊ณ , ์ดํ ์ปดํจํฐ์ ์ ์ด๋ฏธ์ง๋ฅผ ๋ฐ๊พธ๋ ํจ์๋ฅผ ๋ง๋ค์๋ค.
ํจ์ ๋ด๋ถ๋ฅผ ๋ณด๋ฉด ๋ฐ์ดํฐ ( computerChoice ) ๋ฅผ ์์ ํ๋ ๋ถ๋ถ๊ณผ ํ๋ฉด์ ์์ ํ๋ ๋ถ๋ถ ( $computer.style.background ) ๋ก ๋๋์ด ์๋ค.
๋ฐ์ดํฐ๋ ๋ค๋ฅธ ๊ณณ์์ ์์ฃผ ์ฌ์ฌ์ฉ๋๋ฏ๋ก ์ด๋ ๊ฒ ๋ฐ์ดํฐ์ ํ๋ฉด์ ๋ถ๋ฆฌํด์ ํ๋ก๊ทธ๋๋ฐํ๋ ๊ฒ์ด ์ข๋ค.
chnageComputerHand ํจ์๋ฅผ 50๋ฐ๋ฆฌ์ด๋ง๋ค ์คํํด์ผ ํ๋ค.
setTimeout ์ ํน์ ์๊ฐ ์ดํ์ ํ ๋ฒ๋ง ์คํ๋๊ณ ๋๋๋ค.
setTimeout ์ด ๊ถ๊ธํ๋ค๋ฉด?
[ JavaScript ] ํ์ด๋จธ ์ฌ์ฉํ๊ธฐ_ ๋ก๋ ์ถ์ฒจ๊ธฐ_2 ( ๊ฐ์ข ์ฐธ๊ณ )
๐ ์ผ์ ์๊ฐ ํ์ ์คํํ๊ธฐ ๋ฝ์ ๊ณต๋ค์ ํ๋ฉด์ ํ์ํ์. 1์ด์ ํ๋์ฉ ๋ฝ์ ๊ฒ์ด๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์์๋ setTimeout ํจ์๋ก ์ง์ ํ ์๊ฐ ๋ค์ ์ฝ๋๊ฐ ์คํ๋๊ฒ ํ ์ ์๋ค. setTimeout(() => { // ๋ด์ฉ
irro.tistory.com
ํน์ ์ฃผ๊ธฐ๋ก ์ด๋ค ์์ ์ ๊ณ์ ์ํํ๋ ค๋ฉด ์ด๋ป๊ฒ ํด์ผ ํ ๊น?
setTimeout ๋ด๋ถ์์ ๋ค์ setTimeout ์ ์คํํ๋ฉด ๋๋ค.
const changeComputerHand = () => {
...
$computer.style.backgroundSize = 'auto 200px';
setTimeout(changeComputerHand, 50);
}
setTimeout(changeComputerHand, 50);
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ50๋ฐ๋ฆฌ์ด ํ์ changeComputerHand ๊ฐ ์คํ๋๋ค.
changeComputerHand ํจ์ ๋ด๋ถ์ setTimeout ์ด ํ๋ ๋ ๋ค์ด์๋ค. ์ด๋ ๊ฒ ํ๋ฉด changeComputerHand ํจ์๊ฐ ๋๋๊ธฐ ์ง์ ์ ๋ค์ ํ์ด๋จธ๊ฐ ์๋๋์ด 50๋ฐ๋ฆฌ์ด ์ฃผ๊ธฐ๋ก ํจ์๊ฐ ํธ์ถ๋๋ค.
๐ค setInterval ํจ์
์์ ๊ฐ์ด ์ฝ๋๋ฅผ ์์ฑํ ์๋ ์์ง๋ง, ์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ฐ์ ํจ๊ณผ๋ฅผ ๋ด๋ setInterval ํจ์๋ฅผ ๋ฐ๋ก ์ ๊ณตํ๋ค.
setInterval(() => {
// ๋ด์ฉ
}, ๋ฐ๋ฆฌ์ด);
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐsetTimeout ์ setInterval ๋ก ๋์ฒดํด๋ณด์.
<script>
const $computer = document.querySelector('#computer'); //html ์ computer id ์ ํ.
const $score = document.querySelector('#score'); //html ์ score id ์ ํ.
const $rock = document.querySelector('#rock'); //html ์ rock id ์ ํ.
const $scissors = document.querySelector('#scissors'); //html ์ scissors id ์ ํ.
const $paper = document.querySelector('#paper'); //html ์ paper id ์ ํ.
const img_url = './rsp.png'; //.์ ๋นผ๋ฉด c๋๋ผ์ด๋ธ์์ ์ถ๋ฐ (์ ๋๊ฒฝ๋ก) / .์ ๋ฃ์ผ๋ฉด ๋ด ์์น๋ก๋ถํฐ ํ์ผ์ ๊ฐ๋ฆฌํจ๋ค(์๋๊ฒฝ๋ก)
//์ด๋ฏธ์ง์ ๊ฐ๋ก,์ธ๋ก ์์น ์ง์ .
$computer.style.background = `url(${img_url}) 0 0`; //๊ฐ์
$computer.style.backgroundSize = `auto 200px`;
//x์ขํ๋ฅผ ๋ณ์์ ์ ์ฅ. (์ฌ๋ฌ๊ฐ์ ๊ฐ์ฒด๋ค์ ๊ทธ๋ฅฉํ)
const rspX = {
scissors : '0', //๊ฐ์
rock : '-220px', //๋ฐ์
paper : '-440px', //๋ณด
};
let computerChoice = 'scissors'; //์ฒ์์ ์ปดํจํฐ๊ฐ ๊ฐ์๋ฅผ ๋ด๋๋ก ์ค์ .
//์ปดํจํฐ์ ์ ์ด๋ฏธ์ง๋ฅผ ๋ฐ๊พธ๋ ํจ์.
const changeComputerHand = () => {
//๋ฐ์ดํฐ๋ฅผ ์์ ํ๋ ๋ถ๋ถ.
if (computerChoice == 'rock'){
computerChoice = 'scissors';
} else if (computerChoice == 'scissors'){
computerChoice = 'paper';
} else if (computerChoice == 'paper'){
computerChoice = 'rock';
}
//ํ๋ฉด์ ์์ ํ๋ ๋ถ๋ถ.
$computer.style.background = `url(${img_url}) ${rspX[computerChoice]} 0`;
$computer.style.backgroundSize = `auto 200px`;
}
setInterval(changeComputerHand, 50); //50๋ฐ๋ฆฌ์ด ์ฃผ๊ธฐ๋ก ์์
๊ณ์ ์ํ.
</script>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->setInterval ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด changeComputerHand ํจ์์์๋ setTimeout ํจ์๋ฅผ ์ ๊ฑฐํด๋ ๋๋ค.
Quiz!
๋ค์ setInterval ํจ์๋ฅผ ๊ฐ์ ํจ๊ณผ๋ฅผ ๋ด๋ setTimeout ์ผ๋ก ๋ฐ๊พธ์ด๋ผ.
setInterval(() => { console.log('hello'); }, 1000); //์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๋ต
๋๋ณด๊ธฐ
function hello() { console.log('hello'); setTimeout(hello, 1000); } setTimeout(hello, 1000); //์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๐ ํ์ด๋จธ ๋ฉ์ท๋ค ๋ค์ ์คํํ๊ธฐ
์ด์ ๋ฒํผ์ ํด๋ฆญํด์ ๊ฐ์๋ฐ์๋ณด๋ฅผ ํด์ผ ํ๋ค.
๋ฒํผ์ ํด๋ฆญํ๋ ์๊ฐ์ ์น๋ถ๋ฅผ ํ์ธํ ์ ์๊ฒ ์ปดํจํฐ์ ์์ ์ ๊น ๋ฉ์ถ์.
๐ค clearInterval ํจ์
์๋ฐ์คํฌ๋ฆฝํธ๋ setInterval ํจ์๋ฅผ ์ทจ์ํ ์ ์๋ ๋ฐฉ๋ฒ์ผ๋ก clearInterval ํจ์๋ฅผ ์ ๊ณตํ๋ค.
let ์์ด๋ = setInterval(ํจ์, ๋ฐ๋ฆฌ์ด);
clearInterval(์์ด๋);
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐsetInterval ํจ์๋ ๋ฐํ๊ฐ์ด ์๋ค.
๋ฐํ๊ฐ์ ํ์ด๋จธ์ ๋ํ ์์ด๋๋ก, ๋์ค์ ์ด ๊ฐ์ ์ฌ์ฉํด ํ์ด๋จธ๋ฅผ ์ ๊ฑฐํ ์ ์๋ค.
Note!
์ด์ ๋ง์ฐฌ๊ฐ์ง๋ก setTimeout ํจ์๋ clearTimeout ํจ์๋ก ์ทจ์ํ ์ ์๋ค.
๋จ, setTimeout ํจ์์ ์ธ์๋ก ๋ฃ์ ํจ์๊ฐ ์คํ๋๊ธฐ ์ ์ clearTimeout ์ ํธ์ถํด์ผ ํ๋ค.
์ด๋ฏธ ์คํ๋ ํจ์๋ฅผ ์๋ ์ผ๋ก ํ ์๋ ์๊ธฐ ๋๋ฌธ์ด๋ค.
let ์์ด๋ = setTimeout(ํจ์, ๋ฐ๋ฆฌ์ด); clearTimeout(์์ด๋); //์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
setInterval ์ ํ์ฉํ์ฌ ๋ฒํผ์ ํด๋ฆญํ๋ฉด ๊ฐ์๋ฐ์๋ณด๊ฐ ๋ฉ์ท๋ค๊ฐ 1์ด ๋ค์ ๋ค์ ์คํํด๋ณด์.
<script>
const $computer = document.querySelector('#computer'); //html ์ computer id ์ ํ.
const $score = document.querySelector('#score'); //html ์ score id ์ ํ.
const $rock = document.querySelector('#rock'); //html ์ rock id ์ ํ.
const $scissors = document.querySelector('#scissors'); //html ์ scissors id ์ ํ.
const $paper = document.querySelector('#paper'); //html ์ paper id ์ ํ.
const img_url = './rsp.png'; //.์ ๋นผ๋ฉด c๋๋ผ์ด๋ธ์์ ์ถ๋ฐ (์ ๋๊ฒฝ๋ก) / .์ ๋ฃ์ผ๋ฉด ๋ด ์์น๋ก๋ถํฐ ํ์ผ์ ๊ฐ๋ฆฌํจ๋ค(์๋๊ฒฝ๋ก)
//์ด๋ฏธ์ง์ ๊ฐ๋ก,์ธ๋ก ์์น ์ง์ .
$computer.style.background = `url(${img_url}) 0 0`; //๊ฐ์
$computer.style.backgroundSize = `auto 200px`;
//x์ขํ๋ฅผ ๋ณ์์ ์ ์ฅ. (์ฌ๋ฌ๊ฐ์ ๊ฐ์ฒด๋ค์ ๊ทธ๋ฅฉํ)
const rspX = {
scissors : '0', //๊ฐ์
rock : '-220px', //๋ฐ์
paper : '-440px', //๋ณด
};
let computerChoice = 'scissors'; //์ฒ์์ ์ปดํจํฐ๊ฐ ๊ฐ์๋ฅผ ๋ด๋๋ก ์ค์ .
//์ปดํจํฐ์ ์ ์ด๋ฏธ์ง๋ฅผ ๋ฐ๊พธ๋ ํจ์.
const changeComputerHand = () => {
//๋ฐ์ดํฐ๋ฅผ ์์ ํ๋ ๋ถ๋ถ.
if (computerChoice == 'rock'){
computerChoice = 'scissors';
} else if (computerChoice == 'scissors'){
computerChoice = 'paper';
} else if (computerChoice == 'paper'){
computerChoice = 'rock';
}
//ํ๋ฉด์ ์์ ํ๋ ๋ถ๋ถ.
$computer.style.background = `url(${img_url}) ${rspX[computerChoice]} 0`;
$computer.style.backgroundSize = `auto 200px`;
}
//setInterval(changeComputerHand, 50); //50๋ฐ๋ฆฌ์ด ์ฃผ๊ธฐ๋ก ์์
๊ณ์ ์ํ.
let intervalid = setInterval(changeComputerHand,50);//50๋ฐ๋ฆฌ์ด ์ฃผ๊ธฐ๋ก ์์
๊ณ์ ์ํ.
const clickButton = () => {
clearInterval(intervalid); //setInterval ํด๋ฆฌ์ด.
//์ ์ ๊ณ์ฐ ๋ฐ ํ๋ฉด ํ์
setTimeout(() => {
intervalid = setInterval(changeComputerHand,50);
},1000);
};
$rock.addEventListener('click',clickButton);
$scissors.addEventListener('click',clickButton);
$paper.addEventListener('click',clickButton);
</script>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
์ฌ๊ธฐ์ ๋ฒ๊ทธ๊ฐ ํ๋ ์๋ค.
๊ทธ๋ฆผ์ด ๋ฉ์ถ ๋์ ๋ฒํผ์ ์ฌ๋ฌ ๋ฒ ํด๋ฆญํ๋ฉด 1์ด ๋ค์ ๊ทธ๋ฆผ์ด ํ์๋ณด๋ค ๋ ๋นจ๋ฆฌ ๋์๊ฐ๋ค.
๊ทธ๋ฆฌ๊ณ ๊ทธ ๋ค์๋ถํฐ ๋ฒํผ์ ํด๋ฆญํด๋ ๊ทธ๋ฆผ์ด ๋ฉ์ถ์ง ์๋๋ค.
์ ์ด๋ฐ ํ์์ด ์ผ์ด๋๋ ๊ฒ์ผ๊น?
์ด๋ ๋ฒํผ์ ํด๋ฆญํ ๋๋ง๋ค ๊ฐ๊ฐ setTimeout ํ์ด๋จธ๊ฐ ์คํ๋๊ธฐ ๋๋ฌธ์ด๋ค.
๋ฒํผ์ ํด๋ฆญํ ๋ clearInterval ์ ์ํํ๋ฏ๋ก ๋ฌธ์ ์๋ค๊ณ ์๊ฐํ ์๋ ์๋ค.
ํ์ง๋ง ๋ฒํผ์ setInterval ์ ๋ฉ์ถ๋ clearInterval ์ ์ํํ ๋ฟ / setTimeout ์ ๋ฉ์ถ๋ clearTimeout ์ ์ํํ์ง๋ ์๋๋ค.
๋ฐ๋ผ์ ๋ฒํผ์ ๋๋ฅธ ํ์๋งํผ setTimeout ํ์ด๋จธ๊ฐ ์คํ๋๊ณ ๊ฐ๊ฐ 1์ด ๋ค์ setInterval ์ ํ๊ฒ ๋์ด ๋งค์ฐ ๋น ๋ฅธ ์๋๋ก ๊ทธ๋ฆผ์ด ๋์๊ฐ๋ค.
์ด ํ์์ ๋ง์ผ๋ ค๋ฉด ์ด๋ฏ๊ฒ ํด์ผํ ๊น?
๊ทธ๋ฆผ์ด ๋ฉ์ถฐ ์๋ ๋์ ๋ฒํผ์ ํด๋ฆญํด๋ clickButton ํจ์๊ฐ ํธ์ถ๋์ง ์๊ฒ ํด์ผ ํ๋ค.
๋๋ clickButton ํจ์๋ฅผ ํธ์ถํด๋ ์๋ฌด ์ผ๋ ์ผ์ด๋์ง ์๊ฒ ๋ง๋ค๋ฉด ๋๋ค.
๋๊ฐ์ง ๋ฐฉ๋ฒ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ตฌํํ ์ ์๋ค.
์ฒซ๋ฒ์งธ ๋ฐฉ๋ฒ
- removeEventListener ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ค.
function ํจ์() {}
ํ๊ทธ.addEventListener('์ด๋ฒคํธ', ํจ์);
ํ๊ทธ.removeEventListener('์ด๋ฒคํธ', ํจ์);
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์ฌ๊ธฐ์ ์ค์ํ ์ ์ ์ด๋ฒคํธ๋ฅผ ๋ฑ๋กํ ๋์ ํจ์์ ์ด๋ฒคํธ๋ฅผ ์ ๊ฑฐํ ๋์ ํจ์๊ฐ ๊ฐ์ ํจ์์ฌ์ผ ํ๋ค.
๋ ๋ฉ์๋์ ์ธ์๋ก ๋ฃ์ ํจ์๋ฅผ == ๋ก ๋น๊ตํ ๋ true ๊ฐ ๋์์ผ ํ๋ค.
๋ค๋ฅธ ํจ์๋ฅผ ๋ฃ๋๋ค๋ฉด ์ด๋ฒคํธ๊ฐ ์ ๊ฑฐ๋์ง ์๋๋ค.
<script>
const $computer = document.querySelector('#computer'); //html ์ computer id ์ ํ.
const $score = document.querySelector('#score'); //html ์ score id ์ ํ.
const $rock = document.querySelector('#rock'); //html ์ rock id ์ ํ.
const $scissors = document.querySelector('#scissors'); //html ์ scissors id ์ ํ.
const $paper = document.querySelector('#paper'); //html ์ paper id ์ ํ.
const img_url = './rsp.png'; //.์ ๋นผ๋ฉด c๋๋ผ์ด๋ธ์์ ์ถ๋ฐ (์ ๋๊ฒฝ๋ก) / .์ ๋ฃ์ผ๋ฉด ๋ด ์์น๋ก๋ถํฐ ํ์ผ์ ๊ฐ๋ฆฌํจ๋ค(์๋๊ฒฝ๋ก)
//์ด๋ฏธ์ง์ ๊ฐ๋ก,์ธ๋ก ์์น ์ง์ .
$computer.style.background = `url(${img_url}) 0 0`; //๊ฐ์
$computer.style.backgroundSize = `auto 200px`;
//x์ขํ๋ฅผ ๋ณ์์ ์ ์ฅ. (์ฌ๋ฌ๊ฐ์ ๊ฐ์ฒด๋ค์ ๊ทธ๋ฅฉํ)
const rspX = {
scissors : '0', //๊ฐ์
rock : '-220px', //๋ฐ์
paper : '-440px', //๋ณด
};
let computerChoice = 'scissors'; //์ฒ์์ ์ปดํจํฐ๊ฐ ๊ฐ์๋ฅผ ๋ด๋๋ก ์ค์ .
//์ปดํจํฐ์ ์ ์ด๋ฏธ์ง๋ฅผ ๋ฐ๊พธ๋ ํจ์.
const changeComputerHand = () => {
//๋ฐ์ดํฐ๋ฅผ ์์ ํ๋ ๋ถ๋ถ.
if (computerChoice == 'rock'){
computerChoice = 'scissors';
} else if (computerChoice == 'scissors'){
computerChoice = 'paper';
} else if (computerChoice == 'paper'){
computerChoice = 'rock';
}
//ํ๋ฉด์ ์์ ํ๋ ๋ถ๋ถ.
$computer.style.background = `url(${img_url}) ${rspX[computerChoice]} 0`;
$computer.style.backgroundSize = `auto 200px`;
}
//setInterval(changeComputerHand, 50); //50๋ฐ๋ฆฌ์ด ์ฃผ๊ธฐ๋ก ์์
๊ณ์ ์ํ.
let intervalid = setInterval(changeComputerHand,50);//50๋ฐ๋ฆฌ์ด ์ฃผ๊ธฐ๋ก ์์
๊ณ์ ์ํ.
const clickButton = () => {
clearInterval(intervalid); //setInterval ํด๋ฆฌ์ด.
//๊ทธ๋ฆผ์ด ๋ฉ์ถฐ ์๋ ๋์ ํ๊ทธ์ ๋ฑ๋กํ๋ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ์ ๊น ์ ๊ฑฐํ๋ค๊ฐ,
$rock.removeEventListener('click',clickButton);
$scissors.removeEventListener('click',clickButton);
$paper.removeEventListener('click',clickButton);
//์ ์ ๊ณ์ฐ ๋ฐ ํ๋ฉด ํ์
setTimeout(() => {
intervalid = setInterval(changeComputerHand,50);
//1์ด ๋ค์ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ๋ค์ ์ฐ๊ฒฐํ๋ค.
$rock.addEventListener('click',clickButton);
$scissors.addEventListener('click',clickButton);
$paper.addEventListener('click',clickButton);
},1000);
};
$rock.addEventListener('click',clickButton);
$scissors.addEventListener('click',clickButton);
$paper.addEventListener('click',clickButton);
</script>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
๋๋ฒ์งธ ๋ฐฉ๋ฒ
- ํจ์๊ฐ ์๋ฌด ์ผ๋ ํ์ง ์๊ฒ ๋ง๋ ๋ค.
<script>
const $computer = document.querySelector('#computer'); //html ์ computer id ์ ํ.
const $score = document.querySelector('#score'); //html ์ score id ์ ํ.
const $rock = document.querySelector('#rock'); //html ์ rock id ์ ํ.
const $scissors = document.querySelector('#scissors'); //html ์ scissors id ์ ํ.
const $paper = document.querySelector('#paper'); //html ์ paper id ์ ํ.
const img_url = './rsp.png'; //.์ ๋นผ๋ฉด c๋๋ผ์ด๋ธ์์ ์ถ๋ฐ (์ ๋๊ฒฝ๋ก) / .์ ๋ฃ์ผ๋ฉด ๋ด ์์น๋ก๋ถํฐ ํ์ผ์ ๊ฐ๋ฆฌํจ๋ค(์๋๊ฒฝ๋ก)
//์ด๋ฏธ์ง์ ๊ฐ๋ก,์ธ๋ก ์์น ์ง์ .
$computer.style.background = `url(${img_url}) 0 0`; //๊ฐ์
$computer.style.backgroundSize = `auto 200px`;
//x์ขํ๋ฅผ ๋ณ์์ ์ ์ฅ. (์ฌ๋ฌ๊ฐ์ ๊ฐ์ฒด๋ค์ ๊ทธ๋ฅฉํ)
const rspX = {
scissors : '0', //๊ฐ์
rock : '-220px', //๋ฐ์
paper : '-440px', //๋ณด
};
let computerChoice = 'scissors'; //์ฒ์์ ์ปดํจํฐ๊ฐ ๊ฐ์๋ฅผ ๋ด๋๋ก ์ค์ .
//์ปดํจํฐ์ ์ ์ด๋ฏธ์ง๋ฅผ ๋ฐ๊พธ๋ ํจ์.
const changeComputerHand = () => {
//๋ฐ์ดํฐ๋ฅผ ์์ ํ๋ ๋ถ๋ถ.
if (computerChoice == 'rock'){
computerChoice = 'scissors';
} else if (computerChoice == 'scissors'){
computerChoice = 'paper';
} else if (computerChoice == 'paper'){
computerChoice = 'rock';
}
//ํ๋ฉด์ ์์ ํ๋ ๋ถ๋ถ.
$computer.style.background = `url(${img_url}) ${rspX[computerChoice]} 0`;
$computer.style.backgroundSize = `auto 200px`;
}
//setInterval(changeComputerHand, 50); //50๋ฐ๋ฆฌ์ด ์ฃผ๊ธฐ๋ก ์์
๊ณ์ ์ํ.
let intervalid = setInterval(changeComputerHand,50);//50๋ฐ๋ฆฌ์ด ์ฃผ๊ธฐ๋ก ์์
๊ณ์ ์ํ.
//1๋ฒ์งธ ๋ฐฉ๋ฒ ( removeEventListener ๋ฉ์๋ ์ฌ์ฉ )
// const clickButton = () => {
// clearInterval(intervalid); //setInterval ํด๋ฆฌ์ด.
// //๊ทธ๋ฆผ์ด ๋ฉ์ถฐ ์๋ ๋์ ํ๊ทธ์ ๋ฑ๋กํ๋ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ์ ๊น ์ ๊ฑฐํ๋ค๊ฐ,
// $rock.removeEventListener('click',clickButton);
// $scissors.removeEventListener('click',clickButton);
// $paper.removeEventListener('click',clickButton);
// //์ ์ ๊ณ์ฐ ๋ฐ ํ๋ฉด ํ์
// setTimeout(() => {
// intervalid = setInterval(changeComputerHand,50);
// //1์ด ๋ค์ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ๋ค์ ์ฐ๊ฒฐํ๋ค.
// $rock.addEventListener('click',clickButton);
// $scissors.addEventListener('click',clickButton);
// $paper.addEventListener('click',clickButton);
// },1000);
// };
// $rock.addEventListener('click',clickButton);
// $scissors.addEventListener('click',clickButton);
// $paper.addEventListener('click',clickButton);
//2๋ฒ์งธ ๋ฐฉ๋ฒ ( ํจ์๊ฐ ์๋ฌด ์ผ๋ ํ์ง ์๊ฒ ๋ง๋ฌ )
let clickable = true; //๋ณ์๋ฅผ ๋ง๋ ๋ค.
const clickButton = () => {
if (clickable){
clearInterval(intervalid);
clickable = false; //๋ฒํผ์ ํด๋ฆญํ ๋์์๋ false๋ก ๋ง๋ ๋ค.
//์ ์ ๊ณ์ฐ ๋ฐ ํ๋ฉด ํ์
setTimeout(() => {
clickable = true; //1์ด ๋ค์ ์คํ๋ ๋ true๊ฐ ๋์ ๋ค์ if ๋ฌธ ๋ด๋ถ๊ฐ ์คํ๋๋ค.
intervalid = setInterval(changeComputerHand,50);
},1000);
}
};
$rock.addEventListener('click',clickButton);
$scissors.addEventListener('click',clickButton);
$paper.addEventListener('click',clickButton);
</script>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
clickable ๋ณ์๋ฅผ ๋ง๋ค์ด ๋ฒํผ์ ํด๋ฆญํ ๋์์๋ false ๋ก ๋ง๋ ๋ค.
์ด๋ if ๋ฌธ์ ์กฐ๊ฑด์์ด false๊ฐ ๋๋ฏ๋ก ๋ฒํผ์ ํด๋ฆญํด๋ ์ด๋ค ์ฝ๋๋ ์คํ๋์ง ์๋๋ค.
1์ด ๋ค์ ํ์ด๋จธ๋ฅผ ์ฌ๊ฐํ ๋ clickable ์ true๋ก ๋ง๋ค์ด ๋ค์ if ๋ฌธ์ด ์คํ๋๋ค.
์ฒซ๋ฒ์งธ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋ฉด ์ค์ํ๊ธฐ ์ฝ๊ธฐ ๋๋ฌธ์ ๋๋ฒ์งธ ๋ฐฉ๋ฒ์ด ๋ ์ข๋ค.
Quiz!
๋ค์ ์ด๋ฒคํธ ๋ฆฌ์คํฐ๋ฅผ removeEventListener ๋ฉ์๋๋ก ์ ๊ฑฐํด๋ด๋ผ.
const fun = (๊ฐ) => () => { console.log('๊ณ ์ฐจ ํจ์์ ๋๋ค', ๊ฐ); } ํ๊ทธ.addEventListener('click', fun(1)); //์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๋ต
ํํ ์ค๋ต์ ๋ค์๊ณผ ๊ฐ๋ค.
removeEventListener ๋ฅผ ์ค๋ช ํ ๋ addEventListener ์ ๋ฃ์ ํจ์์ == ์ฐ์ฐ์ ํ ๋ ๊ฒฐ๊ณผ๊ฐ true ๊ฐ ๋ผ์ผ ํ๋ค.ํ๊ทธ.removeEventListener('click', fun(1));โ
ํ์ง๋ง ์ฐ์ฐ์ ํด ๋ณด๋ฉด false ๊ฐ ๋์จ๋ค.
fun(1) === fun(1); // falseโ
๊ณ ์ฐจ ํจ์์ธ fun ์ ํญ์ ์๋ก์ด ํจ์๋ฅผ ๋ฐํํ๋ค. ๊ฐ์ ํจ์๊ฐ ์๋๋ฏ๋ก ์ด๋ฒคํธ๊ฐ ์ ๊ฑฐ๋์ง ์๋๋ค.
๋ฐ๋ผ์ ์ด๋ฒคํธ๋ฅผ ์ ๊ฑฐํ๊ณ ์ถ๋ค๋ฉด ๋ค์๊ณผ ๊ฐ์ด ํด์ผ ํ๋ค.
fun(1) ์ fun1 ๋ณ์์ ์ ์ฅํด์ ๊ฐ์ ํจ์๋ผ๋ ๊ฒ์ ๋ณด์ฅํด์ผ ํ๋ค.const fun = (๊ฐ) => () => { console.log('๊ณ ์ฐจ ํจ์์ ๋๋ค', ๊ฐ); } //์ด๋ ๊ฒ ๋ณ์๋ฅผ ๋ง๋ ๋ค. const fun1 = fun(1); ํ๊ทธ.addEventListener('click', fun1); ํ๊ทธ.removeEventListener('click', fun1);โ
-(๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๋๋ถ(TheBook): (์ฃผ)๋์์ถํ ๊ธธ๋ฒ์์ ์ ๊ณตํ๋ IT ๋์ ์ด๋ ์๋น์ค์ ๋๋ค.
thebook.io
-(๊ฐ์ข) ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ
https://www.inflearn.com/course
[๋ฌด๋ฃ] [๋ฆฌ๋ด์ผ] ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ - ์ธํ๋ฐ | ๊ฐ์
๋ณธ ๊ฐ์์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฉํด ํ๋ก๊ทธ๋๋ฐ ์ฌ๊ณ ๋ ฅ์ ๊ธฐ๋ฅด๋ ์ฐ์ต์ ํฉ๋๋ค. ์น ๊ฒ์์ธ ๊ตฌ๊ตฌ๋จ์ ์์์ผ๋ก ๋๋ง์๊ธฐ, ์ซ์ ์ผ๊ตฌ, ๋ฐ์ ์๋ ํ ์คํธ, ํฑํํ , ๋ก๋ ์ถ์ฒจ๊ธฐ, ๊ฐ์๋ฐ์๋ณด, ์นด
www.inflearn.com
- ๊ฐ์ฒด์ ๋ํ ์ค๋ช
JavaScript - ๊ฐ์ฒด(Object)์ ๋ํด ์์๋ณด์
๊ฐ์ฒด (Object) JavaScript๋ ๊ฐ์ฒด๊ธฐ๋ฐ์ ์คํฌ๋ฆฝํธ ์ธ์ด์ด๋ฉฐ JavaScript๋ฅผ ์ด๋ฃจ๊ณ ์๋ ๊ฑฐ์ ๋ชจ๋ ๊ฒ์ ๊ฐ์ฒด์ด๋ค. ๊ฐ์ฒด๋ ์ฌ๋ฌ ์์ฑ์ ํ๋์ ๋ณ์์ ์ ์ฅํ ์ ์๋๋ก ํด์ฃผ๋ ๋ฐ์ดํฐ ํ์ ์ผ๋ก Key / Value Pa
velog.io
