๋ค์ด๊ฐ๊ธฐ
ํฑํํ ๊ฒ์์ ์ค๋ชฉ์ ์ถ์ํ์ธ ์ผ๋ชฉ์ด๋ค. ์ผ๋ชฉ์ ๋ฐ๋ํ์ด ์๋๋ผ 3 x 3 ํ ์์์ ์งํํ๋ค.
์ผ๋ชฉ ๋ฐ์ดํฐ๋ ์๋ฐ์คํฌ๋ฆฝํธ์์ ์ด์ฐจ์ ๋ฐฐ์ด๋ก ํํํ๋ค.
ํฑํํ ๋ฅผ ๋ง๋ค๋ฉด์ ์ด์ฐจ์ ๋ฐฐ์ด๋ก ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๊ณ , ๋ฐฐ์ด ๋ฐ์ดํฐ๋ฅผ HTML ํ๋ฉด์ ํ์ํ๋ ์์ ์ ๋ฐฐ์ ๋ณด์.
๐ ์์๋ ๊ทธ๋ฆฌ๊ธฐ
๋ฐ๋์ ๊ฒ์ ๋, ํฐ ๋์ด ์๋ฏ์ด ํฑํํ ์๋ O ์ X ๊ฐ ์๋ค.
๋จผ์ ํผ์ ๋ฒ๊ฐ์ ๊ฐ๋ฉด O ์ X ๋ฅผ ๋ฃ๊ณ ๋ง์ง๋ง์ ์ปดํจํฐ์ ๊ฒ์์ ํ๋ ๋ฐฉ๋ฒ์ ์ถ๊ฐํ๊ฒ ๋ค.
๐ ์ฒซ ์ฝ๋
<!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>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
width: 40px;
height: 40px;
text-align: center;
}
</style>
</head>
<body>
</body>
<script>
</script>
</html>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->์ด๋ฒ์๋ HTML ๊น์ง ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์์ฑํ๋ฏ๋ก body ํ๊ทธ ๋ด๋ถ์ script ํ๊ทธ๋ฅผ ์ ์ธํ ๋ค๋ฅธ ํ๊ทธ๋ฅผ ๋ฃ์ง ์๋๋ค.
๐ ์ด์ฐจ์ ๋ฐฐ์ด ๋ค๋ฃจ๊ธฐ
โจ ์ด์ฐจ์ ๋ฐฐ์ด
ํฑํํ ๋ ์ด์ฐจ์ ๋ฐฐ์ด์ ์ฌ์ฉํด์ผ ํ๋ค.
์ ํ๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ํ์ํด๋ณด์.
[
[null, 'X', null],
['O', null, 'O'],
[null, 'O', 'X'],
]
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ๋ชจ์์ด ํ์ ๋น์ทํ๊ฐ? ๋ฐฐ์ด ์์ ๋ฐฐ์ด์ด ๋ค์ด ์์ด์ ์ด๋ฅผ ์ด์ฐจ์ ๋ฐฐ์ด์ด๋ผ๊ณ ํ๋ค.
๋น์นธ์ null ๋ก ํํํ์ง๋ง, ์ด ๋ฐ์ดํฐ๋ ํ๋ฉด๊ณผ ์ฐ๊ฒฐ๋์ด ์์ง ์๋ค.
ํ๋ฉด๊ณผ ์ฐ๊ฒฐํ๋ ค๋ฉด ๊ฐ์ ์ ์ฅํ๊ธฐ๋ณด๋ค๋ ์นธ์ ๋ํ๋ด๋ td ํ๊ทธ๋ฅผ ๋ณ์์ ํ ๋นํด ๋ฐฐ์ด์ ์ ์ฅํ๋ ๊ฒ์ด ์ข๋ค.
๋จผ์ ํ๋ฅผ ๊ตฌ์ฑํ๋ ํ๊ทธ๋ฅผ ์์๋ณด์. HTML ๋ก ๋ณด๋ฉด ์์ ํ๋ ๋ค์๊ณผ ๊ฐ๋ค.
<table>
<tr>
<td id="td00"></td>
<td id="td01">X</td>
<td id="td02"></td>
</tr>
<tr>
<td id="td10">O</td>
<td id="td11"></td>
<td id="td12">O</td>
</tr>
<tr>
<td id="td20"></td>
<td id="td21">O</td>
<td id="td22">X</td>
</tr>
</table>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->| table | ์ ์ฒด ํ๋ฅผ ๋ด๋นํ๋ ํ๊ทธ |
| tr | ํ์ ๊ฐ๋ก์ค |
| td | ๊ฐ ์นธ์ ๋ด๋น |
์นธ์ ๊ตฌ๋ณํ๊ธฐ ์ํด ์นธ๋ณ๋ก id ๋ฅผ ๋ถ์๋ค.
3์ค 3์นธ์ผ๋ก ์ด๋ฃจ์ด์ง ํ์ด๋ฏ๋ก td ํ๊ทธ๋ค์ ์ด์ฐจ์ ๋ฐฐ์ด๋ก ๊ตฌ์ฑํ๋ฉด ๋ค์๊ณผ ๊ฐ๋ค.
[
[td00, td01, td02],
[td10, td11, td12],
[td20, td21, td22],
]
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์ ์ฝ๋๋ ์ค์ ์ฝ๋๊ฐ ์๋๋ผ ์ด๋ฌํ ํ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๊ตฌ์ฑํ๋ฉด ๋๋ค๋ ๊ฒ์ ๋ณด์ฌ ์ฃผ๊ธฐ ์ํ ์์ ์ฝ๋์ด๋ค.
td90 ๋ถํฐ td22 ๊น์ง์ ๋ณ์๋ document.querySelector( '์์ด๋' ) ์ ๊ฒฐ๊ณผ๋ฌผ์ด๋ผ๊ณ ๋ณด๋ฉด ๋๋ค.
์ด๋ ๊ฒ ํ๊ทธ๋ค์ ์ ์ฅํ๊ณ ํ๊ทธ ์์ ๊ฐ์ textContent ๋ก ๊ฐ์ ธ์จ๋ค.
๐ ํ ์ง์ ๊ทธ๋ฆฌ๊ธฐ
์ด์ ํ๋ฅผ ์ง์ ๊ทธ๋ ค๋ณด์. ํ๋ฅผ ๊ทธ๋ฆฌ๋ฉด์ ๊ฐ ์นธ ( td ํ๊ทธ ) ์ ์ด์ฐจ์ ๋ฐฐ์ด์ ๋ด์์ผ ํ๋ค.
script ํ๊ทธ ์์ ๋ค์๊ณผ ๊ฐ์ด ์์ฑํ๋ค.
<script>
const { body } = document;
const $table = document.createElement('table');
const $result = document.createElement('div'); //๊ฒฐ๊ณผ์ฐฝ
</script>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->์ฒซ ์ค ์ฝ๋๋ ๋ญ์ง?
์ด ์ฝ๋๋ ๊ตฌ์กฐ๋ถํด ํ ๋น ( destructuring assignment ) ์ด๋ผ๋ ๋ฌธ๋ฒ์ ์ฌ์ฉํ๋ค.
๊ฐ์ฒด ๋ด๋ถ์ ์์ฑ๊ณผ ํ ๋นํ๋ ๋ณ์๋ช ์ด ๊ฐ์ ๋ ์ด๋ ๊ฒ ์ฝ๋๋ฅผ ์ค์ฌ ์ธ ์ ์๋ค. ์๋ ์ฝ๋๋ ๋ค์๊ณผ ๊ฐ๋ค.
//1.์๋ ์ฝ๋
const body = document.body;
//2.๊ตฌ์กฐ๋ถํด ํ ๋น ์ฝ๋
const { body } = document;
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐํ๋์ ์์ฑ๋ง ๊ตฌ์กฐ๋ถํด ํ ๋นํ๋ฉด ์ ๋ชจ๋ฅด๊ฒ ์ผ๋, ์ฌ๋ฌ ๊ฐ์ ์์ฑ์ ๋ณ์์ ๋ฃ๋ ๊ฒฝ์ฐ๋ฅผ ์ดํด๋ณด๊ฒ ๋ค.
const obj = { a: 1, b: 2 };
const { a, b } = obj; // ๋ค์ ๋ ์ค์ ์ด๋ ๊ฒ ํ ์ค๋ก ํํ ๊ฐ๋ฅ
const a = obj.a;
const b = obj.b;
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์ฌ๋ฌ ์ค์ ๊ฑธ์ณ ํ ๋นํ๋ ์ฝ๋๋ฅผ ํ ์ค๋ก ์ค์ผ ์ ์์ด์ ํธ๋ฆฌํ๋ค.
Quiz!
๋ค์ ๊ฐ์ฒด์์ a, c, e ์์ฑ์ ๊ตฌ์กฐ๋ถํด ํ ๋น ๋ฌธ๋ฒ์ผ๋ก ๋ณ์์ ํ ๋นํ๋ผ.
const obj = { a: 'hello', b: { c: 'hi', d: { e: 'wow'}, }, }; //์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ๋ต
const a = obj; const c = obj.b.c; const e = obj.b.d.e; //์ 3์ค์ ํ ์ค๋ก ํํํ๋ค. const { a, b: {c, d: { e } } } = obj; //์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
์ด์ ๋ฐฐ์ด์ ๋ง๋ค๊ณ ํ๊ทธ๋ฅผ ๋ฐฐ์ด์ ์ถ๊ฐํ์.
<script>
const { body } = document;
const $table = document.createElement('table');
const $result = document.createElement('div'); //๊ฒฐ๊ณผ์ฐฝ
const rows = []; //์ค ๋ด๋นํ๋ ๋ฐฐ์ด ์์ฑ.
for ( let i = 1; i <= 3; i++ ){
const $tr = document.createElement('tr');
const cells = []; //๋ฐฐ์ด ์์ฑ.
for ( let j = 1; j <= 3; j++ ){
const $td = document.createElement('td');
cells.push($td);
$tr.appendChild($td); //trํ๊ทธ ์์ tdํ๊ทธ๋ฅผ ๋ฃ๊ณ ,
}
rows.push(cells);
$table.appendChild($tr); //tableํ๊ทธ ์์ trํ๊ทธ๋ฅผ ๋ฃ๋๋ค.
}
body.appendChild($table); //bodyํ๊ทธ์ tableํ๊ทธ,divํ๊ทธ๋ฅผ ๋ฃ๋๋ค.
body.appendChild($result);
</script>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
Quiz!
5 ( ์ค ) x 4 ( ์นธ ) ์ด์ฐจ์ ๋ฐฐ์ด์ ๋ง๋ค์ด๋ผ. ๋ฐฐ์ด์ ์์๋ ๋ชจ๋ 1๋ก ๋ง๋ ๋ค.
๋ต
const array = []; for (let i = 0; i < 5; i++) { const innerArray = []; for (let j = 0; j < 4; j++) { innerArray.push(1); } array.push(innerArray); } //์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์ด์ฐจ์ ๋ฐฐ์ด์ ๋ฐฐ์ด ์์ ๋ฐฐ์ด์ด ๋ค์ด ์๋ ํํ์ด๋ค.
๋ฐ๋ผ์ ๋ฐฐ์ด ์์ ๋ฐ๋ณต๋ฌธ์ผ๋ก ์ํ๋ ๊ฐ์๋งํผ ๋ฐฐ์ด์ ์ถ๊ฐํด์ผ ํ๋ค.
์ด๋ ์์ ์๋ ๋ฐฐ์ด๋ถํฐ ์์๋ฅผ ์ฑ์ฐ๋ ๊ฒ ์ข๋ค.์คํ ๊ฒฐ๊ณผ
-(๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๋๋ถ(TheBook): (์ฃผ)๋์์ถํ ๊ธธ๋ฒ์์ ์ ๊ณตํ๋ IT ๋์ ์ด๋ ์๋น์ค์ ๋๋ค.
thebook.io
-(๊ฐ์ข) ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ
https://www.inflearn.com/course/
[๋ฌด๋ฃ] [๋ฆฌ๋ด์ผ] ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ - ์ธํ๋ฐ | ๊ฐ์
๋ณธ ๊ฐ์์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฉํด ํ๋ก๊ทธ๋๋ฐ ์ฌ๊ณ ๋ ฅ์ ๊ธฐ๋ฅด๋ ์ฐ์ต์ ํฉ๋๋ค. ์น ๊ฒ์์ธ ๊ตฌ๊ตฌ๋จ์ ์์์ผ๋ก ๋๋ง์๊ธฐ, ์ซ์ ์ผ๊ตฌ, ๋ฐ์ ์๋ ํ ์คํธ, ํฑํํ , ๋ก๋ ์ถ์ฒจ๊ธฐ, ๊ฐ์๋ฐ์๋ณด, ์นด
www.inflearn.com
