๋ค์ด๊ฐ๊ธฐ
ํ ์คํธ RPG ๋ฅผ ๋ง๋ค๋ฉด์ ํด๋์ค ๋ฌธ๋ฒ์ ๋ฐฐ์ฐ์.
ํ ์คํธ๋ก๋ง ์งํํ๋ RPG์ด๋ค. ์ฃผ์ธ๊ณต,๋ชฌ์คํฐ,๋ณด์ค๊ฐ ์๋ ธ๊ณ ๋ ๋ฒจ์ ๋ ํ๋ค.
๐ ์์๋
๊ฒ์์๋ ํฌ๊ฒ 2๊ฐ์ง ๋ชจ๋๊ฐ ์๋ค.
1. ์ผ๋ฐ ๋ชจ๋ : ๋ชจํ, ํด์, ์ข ๋ฃ ์ค์์ ์ ํํ๋ ์ผ๋ฐ ๋ชจ๋
2. ์ ํฌ ๋ชจ๋ : ์ ์ ๊ณต๊ฒฉ or ์ฒด๋ ฅ์ ํ๋ณต or ๋๋ง
๋ด์ฉ์ ๋ง์ถฐ์ ์์๋๋ฅผ ๊ทธ๋ ค๋ณด์.
๐ ์ฒซ ํ๋ฉด ๋ง๋ค๊ธฐ
์ฃผ์ธ๊ณต ์ด๋ฆ์ ์ ๋ ฅ๋ฐ๋ ์ฒซ ํ๋ฉด์ ๋ง๋ค์.
<!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>ํ
์คํธ RPG</title>
</head>
<body>
<form id="start-screen">
<input id="name-input" placeholder="์ฃผ์ธ๊ณต ์ด๋ฆ์ ์
๋ ฅํ์ธ์">
<button id="start">์์</button>
</form>
<div id="screen">
<div id="hero-stat">
<span id="hero-name"></span>
<span id="hero-level"></span>
<span id="hero-hp"></span>
<span id="hero-xp"></span>
<span id="hero-att"></span>
</div>
<form id="game-menu" style="display: none;">
<div id="menu-1">1.๋ชจํ</div>
<div id="menu-2">2.ํด์</div>
<div id="menu-3">3.์ข
๋ฃ</div>
<input id="menu-input">
<button id="menu-button">์
๋ ฅ</button>
</form>
<form id="battle-menu" style="display: none;">
<div id="battle-1">1.๊ณต๊ฒฉ</div>
<div id="battle-2">2.ํ๋ณต</div>
<div id="battle-3">3.๋๋ง</div>
<input id="battle-input">
<button id="battle-button">์
๋ ฅ</button>
</form>
<div id="message"></div>
<div id="monster-stat">
<span id="monster-name"></span>
<span id="monster-hp"></span>
<span id="monster-att"></span>
</div>
</div>
<script>
</script>
</body>
</html>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
์ฌ์ฉ์๊ฐ ์ฃผ์ธ๊ณต ์ด๋ฆ์ ์ ๋ ฅํ๊ณ ์์ ๋ฒํผ์ ํด๋ฆญํ๋ฉด ์ด๊ธฐ ํ๋ฉด์ ์ผ๋ฐ ๋ฉ๋ด๋ก ํ๋ฉด ์ ํํ๋ค.
<script>
const $startScreen = document.querySelector('#start-screen');
const $gameMenu = document.querySelector('#game-menu');
const $battleMenu = document.querySelector('#battle-menu');
const $heroName = document.querySelector('#hero-name');
$startScreen.addEventListener('submit',(event) => {
event.preventDefault(); //์ด๋ฒคํธ ๊ธฐ๋ณธ๋์ ์คํ ๋ง๊ธฐ.
const name = event.target['name-input'].value;
$startScreen.style.display = 'none'; //์ด๊ธฐ ํ๋ฉด ์จ๊ธฐ๊ธฐ.
$gameMenu.style.display = 'block'; //๋ฉ๋ด ํ๋ฉด ๋ณด์ด๊ธฐ.
$heroName.textContent = name;
});
</script>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
๐ ์ฃผ์ธ๊ณต๊ณผ ๋ชฌ์คํฐ ๋ง๋ค๊ธฐ
์์ง ์ฃผ์ธ๊ณต์ ์ด๋ฆ๋ง ์ ๋ ฅํ๋ค.
์ด์ ์ฃผ์ธ๊ณต์ ์ ๋ณด, ๋ชฌ์คํฐ๋ค์ ์ ๋ณด๋ฅผ ์ ๋ ฅํ์.
<script>
const $startScreen = document.querySelector('#start-screen');
const $gameMenu = document.querySelector('#game-menu');
const $battleMenu = document.querySelector('#battle-menu');
const $heroName = document.querySelector('#hero-name');
const $heroLevel = document.querySelector('#hero-level');
const $heroHp = document.querySelector('#hero-hp');
const $heroXp = document.querySelector('#hero-xp');
const $heroAtt = document.querySelector('#hero-att');
const $monsterName = document.querySelector('#monster-name');
const $monsterHp = document.querySelector('#monster-hp');
const $monsterAtt = document.querySelector('#monster-att');
const $message = document.querySelector('#message');
//๊ฐ์ฒด ๋ฆฌํฐ๋ด๋ก ์ฃผ์ธ๊ณต ๋ง๋ค๊ธฐ.
const hero = {
name:'',
lev:1,
maxHp:100,
hp:100,
xp:0,
att:10,
};
let monster = null;
const monsterList = [
{name:'์ฌ๋ผ์',hp:25,att:10,xp:10},
{name:'์ค์ผ๋ ํค',hp:50,att:15,xp:20},
{name:'๋ง์',hp:150,att:35,xp:40},
];
$startScreen.addEventListener('submit',(event) => {
event.preventDefault(); //์ด๋ฒคํธ ๊ธฐ๋ณธ๋์ ์คํ ๋ง๊ธฐ.
const name = event.target['name-input'].value;
$startScreen.style.display = 'none'; //์ด๊ธฐ ํ๋ฉด ์จ๊ธฐ๊ธฐ.
$gameMenu.style.display = 'block'; //๋ฉ๋ด ํ๋ฉด ๋ณด์ด๊ธฐ.
$heroName.textContent = name;
//์ฃผ์ธ๊ณต,๋ชฌ์คํฐ ์ ๋ณด ์ถ๊ฐ.
$heroLevel.textContent = '${hero.lev}๋ ๋ฒจ';
$heroHp.textContent = 'HP: ${hero.hp}/${hero.maxHp}';
$heroXp.textContent = 'XP: ${hero.xp}/${15*hero.lev}';
$heroAtt.textContent = 'ATT: ${hero.att}';
hero.name = name;
});
</script>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->๊ฐ์ฒด ๋ฆฌํฐ๋ด๋ก ์ฃผ์ธ๊ณต์ ๋ง๋ค์๋ค.
lev : ๋ ๋ฒจ / maxHp : ์ต๋ ์ฒด๋ ฅ / hp : ํ์ฌ ์ฒด๋ ฅ / xp : ๊ฒฝํ์น / att : ๊ณต๊ฒฉ๋ ฅ
hp ๊ฐ 0 ์ด ๋๋ฉด ๊ฒ์ ์ค๋ฒ๋๋ค.
xp ๊ฐ ์ผ์ ์์ค์ ๋๋ฌํ๋ฉด ๋ ๋ฒจ์ ๋์ด ์ฒด๋ ฅ๊ณผ ๊ณต๊ฒฉ๋ ฅ์ด ์ฌ๋ผ๊ฐ๋ค.
๋ชฌ์คํฐ ์ ๋ณด๋ monsterList์ ์ ์ฅํ๋ค.
์ผ๋ฐ ๋ฉ๋ด์์ 1๋ฒ์ ๋๋ฌ ๋ชจํ์ ์ ํํ๋ฉด ํ๋ฉด์ด ์ ํฌ ๋ฉ๋ด๋ก ๋ฐ๋๊ณ ์๋ํ ๋ชฌ์คํฐ๋ฅผ ๋ฌด์์๋ก ์ ํํ๋ค.
//๊ฒ์๋ฉ๋ด
$gameMenu.addEventListener('submit',(event) => {
event.preventDefault();
const input = event.target['menu-input'].value;
if (input === '1'){
$gameMenu.style.display = 'none';
$battleMenu.style.display = 'block';
//์๋ํ ๋ชฌ์คํฐ๋ฅผ ๋ฌด์์๋ก ์ ํ.
//JSON.parse / JSON.stringify ๋ฉ์๋ ์ฌ์ฉ.
monster = JSON.parse(
JSON.stringify(monsterList[Math.floor(Math.random()*monsterList.length)])
);
monster.maxHp = monster.hp;
$monsterName.textContent = monster.name;
$monsterHp.textContent = `HP: ${monster.hp}/${monster.maxHp}`;
$monsterAtt.textContent = `ATT: ${monster.att}`;
} else if (input === '2'){
} else if (input === '3'){
}
});
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๐ซ JSON.parse / JSON.stringify ๋ฉ์๋
๋ชฌ์คํฐ๋ฅผ ์์ฑํ๋ ์ฝ๋์์ JSON.parse / JSON.stringify ๋ผ๋ ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ค.
| parse ๋ฉ์๋ | ๋ฌธ์์ด์ ๊ฐ์ฒด๋ก ๋ณํ. |
| stringify ๋ฉ์๋ | ๊ฐ์ฒด๋ฅผ ๋ฌธ์์ด๋ก ๋ณํ. |
๋ ๋ฉ์๋๋ฅผ ์กฐํฉํด ์ฌ์ฉํ๋ฉด ๋์ ๊ฐ์ฒด๋ฅผ ๊น์ ๋ณต์ฌ ( deep copy ) ํ ์ ์๋ค.
const monster1 = JSON.parse(JSON.stringify(monsterList[0]));
const monster2 = monsterList[0];
monster1.name = '์ ๋ชฌ์คํฐ';
console.log(monsterList[0].name); // ์ฌ๋ผ์
monster2.name = '์ ๋ชฌ์คํฐ';
console.log(monsterList[0].name); // ์ ๋ชฌ์คํฐ
console.log(monsterList[0] === monster1); // false, ๊น์ ๋ณต์ฌ
console.log(monsterList[0] === monster2); // true, ์ฐธ์กฐ ๊ด๊ณ
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐmonster1 ๋ณ์์๋ monsterList[0] (์ฌ๋ผ์) ์ ๊น์ ๋ณต์ฌํด์ ๋ฃ๊ณ ,
monster2 ๋ณ์์๋ monsetList[0] ์ ๋ฐ๋ก ๋์ ํ๋ค.
์ฌ๊ธฐ์ monster1.name ์ ๋ณ๊ฒฝํ๋ฉด monsterList[0] ์๋ ์๋ฌด๋ฐ ์ํฅ์ด ๊ฐ์ง ์์ง๋ง,
monster2.name ์ ๋ณ๊ฒฝํ๋ฉด monsterList[0] ๋ ๊ฐ์ด ๋ณ๊ฒฝ๋๋ค.
monster1 ์ monsterList[0] ์ ๊น์ ๋ณต์ฌํ์ผ๋ฏ๋ก ์๋ก ๋ค๋ฅธ ๊ฐ์ฒด๊ฐ ๋์ง๋ง,
monster2 ์ monsterList[0] ์ ๊ทธ๋๋ก ๋์ ํ์ผ๋ฏ๋ก ์ฐธ์กฐ ๊ด๊ณ๊ฐ ํ์ฑ๋์ด ์๋ก ๊ฐ์ ๊ฐ์ฒด๊ฐ ๋๋ค. ๋ฐ๋ผ์ monster2 ๋ฅผ ๋ฐ๊พธ๋ฉด monsterList[0] ์๋ ์ํฅ์ด ๊ฐ๋ค.
๋ฐ๋ผ์ ๊น์ ๋ณต์ฌํ๋ ๊ฒฝ์ฐ / ์ฐธ์กฐํ๋ ๊ฒฝ์ฐ๋ฅผ ๊ตฌ๋ณํด์ ์ฌ์ฉํด์ผ ํ๋ค.
์ด ์ฝ๋์์๋ monsterList ๋ฅผ ๊ณ์ ์ฌ์ฌ์ฉํ๋ฏ๋ก ๊น์ ๋ณต์ฌ๋ฅผ ํด์ผ ํ๋ค.
Note!
์ ๋ก์ด๋์ ์กฐ์ธ
๊ฐ๋จํ ๊ฐ์ฒด๋ JSON.parse( JSON.stringify(๊ฐ์ฒด) ) ๋ฅผ ์ฌ์ฉํด๋ ๋ฌธ์ ๊ฐ ์๋ค.
๋ค๋ง, ์ฑ๋ฅ์ด ๋๋ฆฌ๊ณ ํจ์๋ Math, Date ๊ฐ์ ๊ฐ์ฒด๋ฅผ ๋ณต์ฌํ ์ ์๋ค.
๋ฐ๋ผ์ ์ค๋ฌด์์๋ lodash ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ( ๋ค๋ฅธ ์ฌ๋์ด ๋ง๋ค์ด๋ ์ฝ๋ ) ๋ฅผ ์ฌ์ฉํ๋ค.
๐ซ ์์ ๋ณต์ฌ
์์ ๋ณต์ฌ ( shallow copy ) ๋ ์ค์ฒฉ๋ ๊ฐ์ฒด๊ฐ ์์ ๋ ๊ฐ์ฅ ๋ฐ๊นฅ ๊ฐ์ฒด๋ง ๋ณต์ฌ๋๊ณ , ๋ด๋ถ ๊ฐ์ฒด๋ ์ฐธ์กฐ ๊ด๊ณ๋ฅผ ์ ์งํ๋ ๋ณต์ฌ๋ฅผ ์๋ฏธํ๋ค.
const array = [{ j: 'k' }, { l: 'm' }];
const shallowCopy = [...array]; // ์์ ๋ณต์ฌ
console.log(array === shallowCopy); // false
console.log(array[0] === shallowCopy[0]); // true
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์์ ๋ณต์ฌ๋ฅผ ํ ๋๋ ... ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ๋ค.
... ์ฐ์ฐ์?? ์ด๊ฒ์ ์คํ๋ ๋ ( spread ) ๋ฌธ๋ฒ์ด๋ผ๊ณ ํ๋ค.
| ์คํ๋ ๋ ๋ฌธ๋ฒ | ๊ธฐ์กด ๊ฐ์ฒด์ ์์ฑ์ ์ ๊ฐ์ฒด์ ํ ๋นํ๋ค. |
๋ฐฐ์ด์ด๋ผ๋ฉด [...๋ฐฐ์ด] ์ ํ๋ฉด ๋๊ณ , ๊ฐ์ฒด๋ผ๋ฉด {...๊ฐ์ฒด} ๋ฅผ ํ๋ฉด ๋๋ค.
์ ์ฝ๋๋ฅผ ๋ณด๋ฉด...
array ์ shallowCopy ๋ณ์๋ ์๋ก ๋ค๋ฅธ๋ฐ, array[0] ์ shallowCopy[0] ๋ ๊ฐ๋ค.
๊ฐ์ฅ ๋ฐ๊นฅ ๊ฐ์ฒด๋ ๋ณต์ฌ๋์ด ์ฐธ์กฐ ๊ด๊ณ๊ฐ ๋์ด์ง๋ฏ๋ก ๋ค๋ฅธ ๊ฐ์ด ๋๋ค.
โ ๊น์ ๋ณต์ฌ ๋ฐ ์ฐธ์กฐ์์ ์ฐจ์ด์
const reference = array; // ์ฐธ์กฐ
const deepCopy = JSON.parse(JSON.stringify(array)); // ๊น์ ๋ณต์ฌ
console.log(array === reference); // true
console.log(array[0] === reference[0]); // true
console.log(array === deepCopy); // false
console.log(array[0] === deepCopy[0]); // false
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์์ ๋ณต์ฌ๋ ๊น์ ๋ณต์ฌ์ ์ฐธ์กฐ์ ์ค๊ฐ์ ์์นํ ๋ณต์ฌ ๋ฐฉ๋ฒ์์ ์ ์ ์๋ค.
๐ ์๋ก ๊ณต๊ฒฉํ๊ธฐ
์ ํฌ ๋ชจ๋์์ ๊ณต๊ฒฉ์ ์ฃผ๊ณ ๋ฐ๊ณ , ํ๋ณตํ๊ฑฐ๋ ๋๋ง๊ฐ๋ ๊ฒ์ ๊ตฌํํด๋ณด์.
์ด๋ ์ฃผ์ธ๊ณต ๊ฐ์ฒด์ ๋ชฌ์คํฐ ๊ฐ์ฒด ๊ฐ์ ์ํธ ์์ฉ์ด ์ผ์ด๋๊ฒ ๋๋ค. ์ด๋ฐ ์ํธ ์์ฉ์ ์ด๋ค ๊ฐ์ฒด๊ฐ ๋ค๋ฅธ ๊ฐ์ฒด์ ํน์ ํ ๊ธฐ๋ฅ์ ํ๋ ๊ฒ์ด๋ฏ๋ก ํจ์๋ก ๊ตฌํํ๋ฉด ๋๋ค.
๊ฐ์ฒด ์์ ์ฐ์ธ ํจ์๋ ๋ฉ์๋๋ผ๊ณ ํ๋ค.
//๊ฐ์ฒด ๋ฆฌํฐ๋ด๋ก ์ฃผ์ธ๊ณต ๋ง๋ค๊ธฐ.
const hero = {
name:'',
lev:1,
maxHp:100,
hp:100,
xp:0,
att:10,
//๊ฐ์ฒด์ ๋ฉ์๋์์๋ function ์์ฝ์ด ์๋ต๊ฐ๋ฅ.ex) attack : function(monster)
attack(monster){ //๋ชฌ์คํฐ ๊ณต๊ฒฉ.
monster.hp -= this.att;
this.hp -= monster.att;
},
heal(monster){ //์ฒด๋ ฅ ํ๋ณต.
this.hp += 20;
this.hp -= monster.att;
},
};
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์ฝ๋์ ์ฒ์ ๋ณด๋ ์์ฝ์ด์ธ this๊ฐ ์๋ค. ์ง๊ธ ์ํฉ์์ this ๋ ๊ฐ์ฒด ์์ ์ ๊ฐ๋ฆฌํจ๋ค.
์ฆ, hero ์ด๋ค.
this ๊ฐ ๊ฐ๋ฆฌํค๋ ๊ฒ์ ์ํฉ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก this ๋ window ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํจ๋ค.
function a() {
console.log(this);
};
a(); // window ๊ฐ์ฒด
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐwindow ๊ฐ์ฒด๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ๊ฐ๋ฆฌํค๋ ๊ฐ์ฒด๋ก, ๋ธ๋ผ์ฐ์ ๊ฐ ์ ๊ณตํ๋ ๊ธฐ๋ณธ ๊ฐ์ฒด์ ํจ์๋ค์ ๋๋ถ๋ถ window ๊ฐ์ฒด ์์ ๋ค์ด์๋ค.
document ๋ console ๊ฐ์ฒด๋ ์ค์ ๋ก๋ window.document, window.console ์ด๋ค.
window๋ ์๋ตํ ์ ์์ด์ document ์ console ๋ก๋ง ์ ๋ ๊ฒ์ด๋ค.
this ๋ ๊ธฐ๋ณธ์ผ๋ก window ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํค์ง๋ง, ๊ฐ์ฒด์์ this ๋ฅผ ์ฌ์ฉํ ๋๋ ํด๋น ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํค๊ฒ ๋๋ค.
const b = {
name: '์ด๋ก',
sayName() {
console.log(this === b);
}
};
b.sayName(); // true
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ๋ฐ๋ผ์ hero.attack(monster) ๋ฅผ ํ ๋ attack ์์ this ๋ hero ๊ฐ ๋๋ค.
๐ค ์ ํฌ ๋ฉ๋ด ๊ตฌํํ๊ธฐ
์์์์ ๋ด์ฉ์ ๊ธฐ๋ฐ์ผ๋ก ์ ํฌ ๋ฉ๋ด๋ฅผ ๊ตฌํํ ์ฝ๋์ด๋ค.
//์ ํฌ๋ฉ๋ด
$battleMenu.addEventListener('submit',(event)=>{
event.preventDefault();
const input = event.target['battle-input'].value;
if(input === '1'){
hero.attack(monster);
monster.attack(hero);
$heroHp.textContent = `HP: ${hero.hp}/${hero.maxHp}`;
$monsterHp.textContent = `HP: ${monster.hp}/${monster.maxHp}`;
$message.textContent = `${hero.att}์ ๋ฐ๋ฏธ์ง๋ฅผ ์ฃผ๊ณ , ${monster.att}์ ๋ฐ๋ฏธ์ง๋ฅผ ๋ฐ์๋ค.`;
} else if (input === '2'){
} else if (input === '3'){
}
});
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์ฝ๋๊ฐ ํฉ์ด์ ธ ์์ด์ ์ด๋ค ๋ถ๋ถ์ ์ด๋ค ์ฝ๋๋ฅผ ์จ์ผ ํ ์ง ํท๊ฐ๋ฆฐ๋ค.
์ด์ ํด๋์ค๋ฅผ ๋์ ํด์ ์ด๋ป๊ฒ ์ฝ๋๋ฅผ ๊น๋ํ๊ฒ ๋ง๋ค ์ ์๋์ง ๋ฐฐ์๋ณด์.
๐ ํด๋์ค๋ก ์ฌ๊ตฌ์ฑํ๊ธฐ
ํด๋์ค (class) ๋ ๊ฐ์ฒด๋ฅผ ์์ฑํ๊ธฐ ์ํ ํ ํ๋ฆฟ (์์) ์ด๋ค.
ํด๋์ค๋ 2015๋ ์ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ถ๊ฐ๋ ๋ฌธ๋ฒ์ผ๋ก, ์ด์ ์๋ ํจ์๋ก ๊ฐ์ฒด๋ฅผ ๋ง๋ค์๋ค.
ํจ์๋ก๋ ์ด๋ป๊ฒ ๊ฐ์ฒด๋ฅผ ์์ฑํ์๊น?
function createMonster(name, hp, att, xp) {
return { name, hp, att, xp };
}
const monster1 = createMonster('์ฌ๋ผ์', 25, 10, 11);
const monster2 = createMonster('์ฌ๋ผ์', 26, 10, 10);
const monster3 = createMonster('์ฌ๋ผ์', 25, 11, 10);
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ ํจ์๋ฅผ ๋ง๋๋ ๊ฒ์ด๋ค. ์ด์ ๊ฐ์ด ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ ํจ์๋ฅผ ๊ณต์ฅ (factory) ํจ์ ๋ผ๊ณ ํ๋ค.
๊ณต์ฅ์ฒ๋ผ ๊ฐ์ฒด๋ฅผ ์ฐ์ด๋ธ๋ค๊ณ ํด์ ๋ถ์ ์ด๋ฆ์ด๋ค.
createMonster ๋ฅผ 3๋ฒ ํธ์ถํ์ผ๋ ์ฌ๋ผ์ 3 ๋ง๋ฆฌ๋ฅผ ์์ฑํ ๊ฒ์ด๋ค.
๊ฐ๊ฐ์ ์ฒด๋ ฅ,๊ณต๊ฒฉ๋ ฅ,๊ฒฝํ์น๊ฐ ์กฐ๊ธ์ฉ ๋ค๋ฅธ๋ฐ ์ด๋ ๊ฒ ๋ฌ๋ผ์ง๋ ๋ถ๋ถ์ ํจ์์ ์ธ์๋ก ๋๊ธฐ๋ฉด ๋๋ค.
์ฌ๊ธฐ์ ์ค์ํ ์ .
์์ฑํ 3๊ฐ์ ๊ฐ์ฒด๊ฐ ์๋ก ์ฐธ์กฐ ๊ด๊ณ๊ฐ ์๋ ๋ค๋ฅธ ๊ฐ์ฒด์ฌ์ผ ํ๋ค๋ ์ ์ด๋ค.
๊ฐ์ ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ฉด ํ๋์ ๋ชฌ์คํฐ๋ฅผ ์ก์๋๋ฐ๋ ๋ค๋ฅธ 2๋ง๋ฆฌ๊ฐ ๊ฐ์ด ์ฃฝ๊ฒ ๋๋ ๊ฒ์ด๋ค.
๋ฐ๋ผ์ ๋งค๋ฒ ์๋ก์ด ๊ฐ์ฒด๋ฅผ ๋ฐํํ๊ฒ ๊ฐ์ฒด ๋ฆฌํฐ๋ด๋ก ์์ฑํ๋ค.
์ด๋ฒ์๋ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ผ๋ก ๊ฐ์ฒด๋ฅผ ์์ฑํ๊ฒ ๋ค.
function Monster(name, hp, att, xp) {
this.name = name;
this.hp = hp;
this.att = att;
this.xp = xp;
}
const monster1 = new Monster('์ฌ๋ผ์', 25, 10, 11);
const monster2 = new Monster('์ฌ๋ผ์', 26, 10, 10);
const monster3 = new Monster('์ฌ๋ผ์', 25, 11, 10);
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์ด๊ฑด ๊ฐ์ฒด์ ์์ฑ์ this ์ ๋์ ํ๋ค. ๊ทธ๋ฆฌ๊ณ ํจ์๋ฅผ ํธ์ถ ํ ๋๋ ํจ์ ์ด๋ฆ ์์ new ๋ฅผ ๋ถ์ธ๋ค.
new ๋ฅผ ๋ถ์ฌ ํธ์ถํด๋ this ๋ ๊ฐ์ฒด ์์ ์ ๊ฐ๋ฆฌํจ๋ค. ์ด๋ ๊ฒ Monster ์ new ๋ฅผ ๋ถ์ฌ ํธ์ถํ๋ ํจ์๋ฅผ ์์ฑ์ (constructor) ํจ์๋ผ๊ณ ํ๋ค.
์ค์๋ก new ๋ฅผ ๋ถ์ด์ง ์๊ณ ํธ์ถํ๋ฉด this ๋ window ๊ฐ ๋์ด window.name ์ ๊ฐ์ ๋ฐ๊พธ๊ฒ ๋๋ ๋ฐ๋์ new ๋ฅผ ๋ถ์ฌ ํธ์ถํด์ผ ํ๋ค.
์์ฑ์ ํจ์์ ์ด๋ฆ์ ๋ณดํต ๋๋ฌธ์๋ก ์์ํ๋ค.
ํ์๋ ์๋์ง๋ง, ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ์๋ค์ด ๋ง์ด ์ฌ์ฉํ๋ ๊ท์น์ด๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ ์์ฑ์ ํจ์๋ฅผ ๋ ํธํ๊ฒ ์ธ ์ ์๋๋ก ํด๋์ค ๋ฌธ๋ฒ์ ๋์ ํ๋ค.
class Monster {
constructor(name, hp, att, xp) {
this.name = name;
this.hp = hp;
this.att = att;
this.xp = xp;
}
}
const monster1 = new Monster('์ฌ๋ผ์', 25, 10, 11);
const monster2 = new Monster('์ฌ๋ผ์', 26, 10, 10);
const monster3 = new Monster('์ฌ๋ผ์', 25, 11, 10);
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐclass ์์ฝ์ด๋ก ํด๋์ค๋ฅผ ์ ์ธํ๊ณ , constructor ๋ฉ์๋ ์์ ๊ธฐ์กด ์ฝ๋๋ฅผ ๋ฃ๋๋ค.
ํด๋์ค์ new ๋ฅผ ๋ถ์ฌ ํธ์ถํ๋ฉด constructor ํจ์๊ฐ ์คํ๋๊ณ ๊ฐ์ฒด๊ฐ ๋ฐํ๋๋ค.
์ฌ๊ธฐ์ this ๋ ์์ฑ๋ ๊ฐ์ฒด ์์ ์ ๊ฐ๋ฆฌํจ๋ค.
๊ทผ๋ฐ ํด๋์ค ๋ฌธ๋ฒ์ ์ฅ์ ์ด ๋ฌด์์ธ๊ฐ?
ํด๋์ค ๋ฌธ๋ฒ์ ์ฅ์ ์ ๊ฐ์ฒด์ ๋ฉ์๋๋ฅผ ๊ฐ์ด ๋ฌถ์ ์ ์๋ค๋ ์ ์ด๋ค.
class Monster {
constructor(name, hp, att, xp) {
this.name = name;
this.hp = hp;
this.att = att;
this.xp = xp;
}
attack(monster) {
monster.hp -= this.att;
this.hp -= monster.att;
}
heal(monster) {
this.hp += 20;
this.hp -= monster.att;
}
}
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ๊ณต์ฅ ํจ์๋ ์์ฑ์ ํจ์๋ฅผ ์ฌ์ฉํ ๋์ ๋น๊ตํด๋ณด์
โ ๊ณต์ฅ ํจ์์ ๋ฉ์๋ ์ถ๊ฐํ ๋ฐฉ์
function createMonster(name, hp, att, xp) {
return {
name, hp, att, xp,
attack(monster) {
monster.hp -= this.att;
this.hp -= monster.att;
},
heal(monster) {
this.hp += 20;
this.hp -= monster.att;
},
};
}
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
โ๊ณต์ฅ ํจ์ ๋ฐฉ์์ ๋ฉ์๋๋ฅผ ์ถ๊ฐํ๋ค. ํด๋์ค ๋ฌธ๋ฒ๊ณผ ๋๊ฐ์ ๋ณด์ด์ง๋ง, ์ฐจ์ด์ ์ด ํ๋ ์๋ค.
๊ณต์ฅ ํจ์์์ ๊ฐ์ฒด๋ฅผ ์์ฑํ ๋๋ง๋ค attack ์ heal ๋ฉ์๋๋ ๊ฐ์ด ์์ฑ๋๋ค.
ํด๋์ค ๋ฌธ๋ฒ์์๋ ํ๋ฒ ๋ง๋ attack ์ heal ๋ฉ์๋๋ ๊ณ์ ์ฌ์ฌ์ฉํ๋ค.
๊ณต์ฅ ํจ์ ๊ฒฝ์ฐ ์ฌ์ฌ์ฉํด๋ ๋๋ ๋ฉ์๋๋ฅผ ์๋ก ๋ง๋ค์ด ๋ด์ ๋งค์ฐ ๋นํจ์จ์ ์ด๋ค.
โ ์์ฑ์ ํจ์์ ๋ฉ์๋ ์ถ๊ฐํ ๋ฐฉ์
function Monster(name, hp, att, xp) {
this.name = name;
this.hp = hp;
this.att = att;
this.xp = xp;
}
Monster.prototype.attack = function(monster) {
monster.hp -= this.att;
this.hp -= monster.att;
};
Monster.prototype.heal = function(monster) {
this.hp += 20;
this.hp -= monster.att;
};
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์์ฑ์ ํจ์์ ๋ฉ์๋๋ฅผ ์ถ๊ฐํ ๋๋ prototype ์ด๋ผ๋ ์์ฑ ์์ ์ถ๊ฐํด์ผ ํ๋ค.
prototype ์์ฑ ์์ ์ถ๊ฐํ ๋ฉ์๋๋ฅผ ํ๋กํ ํ์ ๋ฉ์๋๋ผ๊ณ ํ๋ค.
์ด๋ ๊ฒ ํ๋ฉด ๊ณต์ฅ ํจ์์๋ ๋ฌ๋ฆฌ attack ์ heal ๋ฉ์๋๋ฅผ ์ฌ์ฌ์ฉํ๋ค.
๋ค๋ง, ์์ฑ์ ํจ์์ ํ๋กํ ํ์ ๋ฉ์๋๊ฐ ํ๋๋ก ๋ฌถ์ฌ ์์ง ์๋๋ค.
์ด๋ฐ ๋ฌธ์ ์ ์ ํด๊ฒฐํ ๊ฒ์ด ํด๋์ค ๋ฌธ๋ฒ์ด๋ค.
์์ฑ์ ํจ์์ ๋ฉ์๋๊ฐ ๋ฌถ์ฌ ์์ด์ ๋ณด๊ธฐ ํธํ๊ณ , ๋ฉ์๋ ํจ์๋ฅผ ์ฌ์์ฑํด์ผ ํ๋ ๋ฌธ์ ๋ ๋ฐ์ํ์ง ์๋๋ค.
๐ค ํด๋์ค ๋ฌธ๋ฒ ํ์ฉํด ํ ์คํธ RPG ์ฌ๊ตฌ์ฑํ๊ธฐ
์ด๋ค ๊ฒ์ ํด๋์ค๋ก ๋ง๋ค ์ ์์๊น?
์ผ๋จ ์ฃผ์ธ๊ณต, ๋ชฌ์คํฐ๊ฐ ์๋ค.
์ฃผ์ธ๊ณต๊ณผ ๋ชฌ์คํฐ๋ ์ด๋ฆ, ์ฒด๋ ฅ, ๊ณต๊ฒฉ๋ ฅ, ๊ฒฝํ์น ๊ฐ์ ์์ฑ์ด ์๊ณ ๋ค๋ฅธ ๊ฐ์ฒด๋ฅผ ๊ณต๊ฒฉํ๋ ์ํธ ์์ฉ์ด ์๋ค.
๊ฒ์ ์์ฒด๋ฅผ ํด๋์ค๋ก ๋ง๋ค์ด์ ์ฃผ์ธ๊ณต,๋ชฌ์คํฐ๋ ํด๋์ค์ ์์ฑ / ๊ฒ์์ ์์ํ๋ ๊ฒ, ๋ฉ๋ด ๋ฐ๊พธ๋ ๊ฒ, ๊ฒ์ ์ข ๋ฃํ๋ ๊ฒ ๋ชจ๋ ๊ฒ์ ํด๋์ค์ ๋ฉ์๋๋ก ๋ง๋ค์.
<script>
const $startScreen = document.querySelector('#start-screen');
const $gameMenu = document.querySelector('#game-menu');
const $battleMenu = document.querySelector('#battle-menu');
const $heroName = document.querySelector('#hero-name');
const $heroLevel = document.querySelector('#hero-level');
const $heroHp = document.querySelector('#hero-hp');
const $heroXp = document.querySelector('#hero-xp');
const $heroAtt = document.querySelector('#hero-att');
const $monsterName = document.querySelector('#monster-name');
const $monsterHp = document.querySelector('#monster-hp');
const $monsterAtt = document.querySelector('#monster-att');
const $message = document.querySelector('#message');
//๊ฒ์ ์์ฒด ํด๋์ค ๋ง๋ค๊ธฐ.
//Game,Hero,Monster 3๊ฐ์ ํด๋์ค ๋ง๋ค๊ณ ์ฃผ์ธ๊ณต ์ด๋ฆ ์
๋ ฅ ๋ฐ๊ธฐ.
class Game {
constructor (name){
this.monster = null;
this.hero = null;
this.monsterList = [
{name: '์ฌ๋ผ์',hp:25,att:10,xp:10},
{name: '์ค์ผ๋ ํค',hp:50,att:15,xp:20},
{name: '๋ง์',hp:150,att:35,xp:50},
];
this.start();
}
start(){
$gameMenu.addEventListener('submit',this.onGameMenuInput);
$battleMenu.addEventListener('submit',this.onBattleMenuInput);
this.changeScreen('game');
}
changeScreen(screen){
if(screen === 'start'){
$startScreen.start.display = 'block';
$gameMenu.style.display = 'none';
$battleMenu.style.display = 'none';
} else if (screen === 'game'){
$startScreen.style.display = 'none';
$gameMenu.style.display = 'block';
$battleMenu.style.display = 'none';
} else if (screen === 'battle'){
$startScreen.style.display = 'none';
$gameMenu.style.display = 'none';
$battleMenu.style.display = 'block';
}
}
onGameMenuInput = (event)=>{
event.preventDefault();
const input = event.target['menu-input'].value;
if(input === '1'){ //๋ชจํ
this.changeScreen('battle');
} else if (input === '2'){ //ํด์
} else if (input === '3'){ //์ข
๋ฃ
}
}
onBattleMenuInput = (event)=>{
event.preventDefault();
const input = event.target['battle-input'].value;
if(input === '1'){ //๊ณต๊ฒฉ
} else if (input === '2'){ //ํ๋ณต
} else if (input === '3'){ //๋๋ง
}
}
};//class game
class Hero{
constructor(game,name){
this.game = game;
this.name = name;
this.lev = 1;
this.maxHp = 100;
this.hp = 100;
this.xp = 0;
this.att =10;
}
attack(target){
target.hp -= this.att;
}
attack(monster){
this.hp += 20;
this.hp -= monster.att;
}
}//class hero
class Monster{
constructor(game,name,hp,att,xp){
this.game = game;
this.name = name;
this.maxHp = hp;
this.hp = hp;
this.xp = xp;
this.att = att;
}
attack(target){
target.hp -= this.att;
}
}//class monster
let game = null;
$startScreen.addEventListener('submit',(event)=>{
event.preventDefault();
const name = event.target['name-input'].value;
game = new Game(name);
});
</script>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->Game, Hero, Monster ์ด 3๊ฐ์ ํด๋์ค๋ฅผ ๋ง๋ค๊ณ ์ฃผ์ธ๊ณต ์ด๋ฆ์ ์ ๋ ฅ๋ฐ๋๋ค.
๊ฒ์์ ์ฃผ์ธ๊ณต ์ด๋ฆ์ ์ ๋ ฅํ ๋ค ์์ํ๋ค.
์ฃผ์ธ๊ณต ์ด๋ฆ์ ์ ๋ ฅ๋ฐ์ ๋ new Gme (name) ์ผ๋ก ๊ฒ์ ํด๋์ค๋ฅผ ํธ์ถํด์ ๊ฒ์ ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ค.
new Game ์ ํ๋ฉด Game ํด๋์ค์ constructor ๋ฉ์๋๊ฐ ์คํ๋๊ณ monster, hero, monsterList ์์ฑ์ ๋ง๋ ๋ค.
Game ํด๋์ค ์์ ๊ธฐ๋ณธ ๋ฉ์๋๋ฅผ ๋ง๋ค์ด๋ณด์.
๊ฒ์์ ์์ํ๋ start ๋ฉ์๋, ๊ฒ์์ ์ข ๋ฃํ๋ quit ๋ฉ์๋, ํ๋ฉด์ ์ ํํ๋ changeScreen ๋ฉ์๋, ์ผ๋ฐ ๋ฉ๋ด๋ฅผ ๋ด๋นํ๋ onGameMenuInput ๋ฉ์๋, ์ ํฌ ๋ฉ๋ด๋ฅผ ๋ด๋นํ๋ onBattleMenuInput ๋ฉ์๋๋ฅผ ๋ง๋ ๋ค.
๊ฐ์ฒด์ ๋ฉ์๋๋ this ๋ฅผ ํตํด ํธ์ถํ ์ ์๋ค.
#start-screen ์ submit ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ Game ํด๋์ค ๋ฐ์์ ์ฐ๊ฒฐํ๋๋ฐ ์ #game-menu ์ #battle-menu ์ submit ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ Game ํด๋์ค ์์์ ์ฐ๊ฒฐํ ๊น?
์ด๋ ๊ฐ๊ฐ์ ์ฝ๋ฐฑ ํจ์์ธ onGameMenuInput ๊ณผ onBattleMenuInput ์ด Game ํด๋์ค์ ๋ฉ์๋์ด๊ธฐ ๋๋ฌธ์ด๋ค.
๐ค ํน์ดํ ์
โจ ํจ์ ์ ์ธ๋ฌธ & ํ์ดํ ํจ์ ์ this
๋ ํน์ดํ ์ ์ onGameMenuInput ๊ณผ onBattleMenuInput ๋ง ํ์ดํ ํจ์๋ก ๋์ด ์๋ค.
์ด๋ this ๋ฐ ์ฝ๋ฐฑ ํจ์์ ํน์ฑ๊ณผ ๊ด๋ จ์๋ค.
//ํจ์ ์ ์ธ๋ฌธ.
document.addEventListener('click', function() {
console.log(this); // document => this๊ฐ document๋ก ์ถ๋ ฅ๋๋ค.
});
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐthis๋ ๊ธฐ๋ณธ์ ์ผ๋ก window์ธ๋ฐ, ์ document ๊ฐ ๋์์๊น?
//ํ์ดํ ํจ์.
document.addEventListener('click', () => {
console.log(this); // window => this๊ฐ window๋ก ์ถ๋ ฅ๋๋ค.
});
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐํจ์ ์ ์ธ๋ฌธ์ผ ๋๋ง document๊ฐ ๋์ค๋ ์ด์
click ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด addEventListener ๋ฉ์๋๊ฐ ์ฝ๋ฐฑ ํจ์์ this ๋ฅผ event.target ์ผ๋ก ๋ฐ๊ฟ์ ํธ์ถํ๊ธฐ ๋๋ฌธ์ด๋ค.
ํจ์ ์ ์ธ๋ฌธ์ this ๋ ๋ค์๊ณผ ๊ฐ์ด bind ๋ฉ์๋๋ฅผ ์ฌ์ฉํด์ ์ง์ ๋ฐ๊ฟ ์ ์๋ค.
function a() {
console.log(this);
}
a.bind(document)(); // document
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐํ์ดํ ํจ์๋ bind ๋ฅผ ํ ์ ์๋ค. ๋ฐ๋ผ์ this ๊ฐ ๋ฐ๋์ง ์์ window๊ฐ ๊ทธ๋๋ก ๋์จ๋ค.
const b = () => {
console.log(this);
}
b.bind(document)(); // window
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์ด๋ฐ ์ด์ ๋ก addEventListener ์์์ ํจ์ ์ ์ธ๋ฌธ์ ์ฌ์ฉํ๋ฉด document ๊ฐ ์ถ๋ ฅ๋๊ณ , ํ์ดํ ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด window ๊ฐ ์ถ๋ ฅ๋๋ค.
onGameMenuInput ๊ณผ onBattleMenuInput ์ด ํ์ดํ ํจ์์ฌ์ผ ํ๋ ์ด์ ๋ ๊ฐ๋ค.
๋ ์ฝ๋ฐฑ ํจ์๊ฐ ํจ์ ์ ์ธ๋ฌธ์ด๋ผ๋ฉด this๋ addEventListener ์ ์ํด ๊ฐ๊ฐ $gameMenu ์ $battleMenu๋ก ๋ฐ๋๊ฒ ๋๋ค.
์ด๋ฅผ ๋ง์ผ๋ ค๋ฉด ํ์ดํ ํจ์๋ฅผ ์ฌ์ฉํด ๊ธฐ์กด this๋ฅผ ์ ์งํด์ผ ํ๋ค.
ํ์ดํ ํจ์์ this๋ ๋ฌด์กฐ๊ฑด window์ธ๊ฐ?
ํ์ดํ ํจ์๋ ๊ธฐ์กด this๋ฅผ ์ ์งํ ๋ฟ this๋ฅผ ์ด๋ค ๊ฐ์ผ๋ก ๋ฐ๊พธ์ง๋ ์๋๋ค.
๋ฐ๋ผ์ ์์ ์ฝ๋์์๋ ๊ธฐ์กด this (Game ๊ฐ์ฒด) ๋ฅผ ์ ์งํด onGameMenuInput ๋ฉ์๋ ์์์๋ this ๊ฐ Game ๊ฐ์ฒด๊ฐ ๋๊ฒ ํ๋ค.
๋ชจ๋ ์ฝ๋ฐฑ ํจ์์ this๊ฐ ๋ค๋ฅธ ๊ฐ์ผ๋ก ๋ฐ๋๋๊ฐ?
์๋๋ค. ๋ฐ๋ผ์ this๋ฅผ ๋ฐ๊พธ๋ ํจ์๋ ๋ฉ์๋๋ฅผ ๋ณผ ๋๋ง๋ค ๋ฐ๋ก ์ธ์ฐ๊ณ ์์ด์ผ ํ๋ค.
-(๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๋๋ถ(TheBook): (์ฃผ)๋์์ถํ ๊ธธ๋ฒ์์ ์ ๊ณตํ๋ IT ๋์ ์ด๋ ์๋น์ค์ ๋๋ค.
thebook.io
-(๊ฐ์ข) ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ
https://www.inflearn.com/course/
[๋ฌด๋ฃ] [๋ฆฌ๋ด์ผ] ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ - ์ธํ๋ฐ | ๊ฐ์
๋ณธ ๊ฐ์์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฉํด ํ๋ก๊ทธ๋๋ฐ ์ฌ๊ณ ๋ ฅ์ ๊ธฐ๋ฅด๋ ์ฐ์ต์ ํฉ๋๋ค. ์น ๊ฒ์์ธ ๊ตฌ๊ตฌ๋จ์ ์์์ผ๋ก ๋๋ง์๊ธฐ, ์ซ์ ์ผ๊ตฌ, ๋ฐ์ ์๋ ํ ์คํธ, ํฑํํ , ๋ก๋ ์ถ์ฒจ๊ธฐ, ๊ฐ์๋ฐ์๋ณด, ์นด
www.inflearn.com
- event.preventDefault() ์ค๋ช
https://velog.io/@hang_kem_0531/
[JS] event.preventDefault() ์์๋ณด๊ธฐ
<a>์ <submit> ์ ๊ฐ์ ๋ช๋ช ํ๊ทธ๋ค์ ํน์ํ ๊ธฐ๋ฅ์ ๊ฐ์ง๊ณ ์๋ค.<a> ํ๊ทธ๋ href์ ์ฐ๊ฒฐ๋ ๋งํฌ๋ฅผ ํตํด, ํด๋น ํ์ด์ง๋ก ์ด๋ํ๋ ๊ธฐ๋ฅ์ ๊ฐ์ง๊ณ ์์ผ๋ฉฐ, <submit> ํ๊ทธ๋ ๊ทธ ํ๊ทธ์ ๊ฐ์ ์ ์กํ๋ฉด์
velog.io
