๐ ๋ณธ ํฌ์คํธ๋ '๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive' ๋์๋ฅผ ๋ฐํ์ผ๋ก ํต์ฌ ๊ฐ๋ ๋ฐ ๋ด์ฉ์ ์์ฝํ ํฌ์คํธ์ ๋๋ค.
03์ฅ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ ํ๊ฒฝ๊ณผ ์คํ ๋ฐฉ๋ฒ
3.1 ์๋ฐ์คํฌ๋ฆฝํธ ์คํ ํ๊ฒฝ
์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ธ๋ผ์ฐ์ ํ๊ฒฝ ๋๋ Node.js ํ๊ฒฝ์์ ์คํ์ด ๊ฐ๋ฅํฉ๋๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก ๋ธ๋ผ์ฐ์ ์์ ๋์ํ๋ ์ฝ๋๋ Node.js ํ๊ฒฝ์์๋ ๋์ผํ๊ฒ ๋์ํ์ง๋ง ๋ธ๋ผ์ฐ์ ์ Node.js๋ ์ฉ๋๊ฐ ๋ค๋ฅด๋ค๋ ์ ์ ์ฃผ์ํด์ผ ํฉ๋๋ค.
๋ธ๋ผ์ฐ์ - HTML, CSS, JS๋ฅผ ์คํํ์ฌ ์น ํ์ด์ง๋ฅผ ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ๋ ๋๋งํ๋ ๊ฒ์ด ๋ชฉ์
Node.js - ๋ธ๋ผ์ฐ์ ์ธ๋ถ์์ ์๋ฐ์คํฌ๋ฆฝํธ ์คํ ํ๊ฒฝ์ ์ ๊ณตํ๋ ๊ฒ์ด ๋ชฉ์
๋ฐ๋ผ์, ๋ธ๋ผ์ฐ์ ์ Node.js๋ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ฝ์ด์ธ ECMAScript๋ฅผ ์คํํ ์ ์์ง๋ง ๊ฐ ํ๊ฒฝ์์์ ์ถ๊ฐ ๊ธฐ๋ฅ์ ์๋ก ์ง์ํ์ง ์์ต๋๋ค.
์๋ฅผ ๋ค์ด, ๋ธ๋ผ์ฐ์ ์ DOM API(ํ์ฑ๋ HTML ์์๋ฅผ ์ ํํ๊ณ ์กฐ์ํ๋ ๊ธฐ๋ฅ)๋ Node.js์์ ์ง์๋์ง ์์ผ๋ฉฐ ๋ฐ๋๋ก Node.js์์ ๊ธฐ๋ณธ ์ ๊ณต๋๋ ํ์ผ ์์คํ ์ ๋ธ๋ผ์ฐ์ ์์๋ ์ง์๋์ง ์์ต๋๋ค.
3.2 ์น ๋ธ๋ผ์ฐ์
๋ณธ ํฌ์คํ ์์์ ๋ธ๋ผ์ฐ์ ๋ ๊ตฌ๊ธ ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ๋ฅผ ์๋ฏธํฉ๋๋ค. ํฌ๋กฌ์ ECMAScript ์ฌ์์ ์ค์ํ๋ฉฐ ์์ฅ ์ ์ ์จ๋ ๊ฐ์ฅ ๋๋ค๋ ํน์ง์ ๊ฐ์ง๊ณ ์์ต๋๋ค.
3.2.1. ๊ฐ๋ฐ์ ๋๊ตฌ
ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ๊ฐ ์ ๊ณตํ๋ ๊ฐ๋ฐ์ ๋๊ตฌ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ์์ด ํ์์ ์ด๊ณ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค. ๊ธฐ๋ณธ ๋ด์ฅ๋์ด ์์ด ๋ณ๋๋ก ์ค์นํ ํ์๊ฐ ์์ผ๋ฉฐ ์๋ ๋จ์ถํค๋ก ์ด ์ ์์ต๋๋ค.
Windows - F12 or Ctrl + Shift + I
macOS - command + option + I
์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ๋๊ตฌ์ ๊ธฐ๋ฅ์ ์๋ ํ์ ๊ฐ์ต๋๋ค.
| ํจ๋ | ์ค๋ช |
| ์์ (Elements) |
๋ก๋ฉ๋ ์น ํ์ด์ง์ DOM๊ณผ CSS๋ฅผ ํธ์งํ์ฌ ๋ ๋๋ง๋ ๋ทฐ๋ฅผ ํ์ธํ ์ ์์ต๋๋ค. ํธ์ง๋ ๋ด์ฉ์ ์ ์ฅ๋์ง ์์ผ๋ฉฐ ์น ํ์ด์ง๊ฐ ์๋๋ ๋๋ก ๋ ๋๋ง๋์ง ์์ ๊ฒฝ์ฐ์ ์ ์ฉํ๊ฒ ์ฌ์ฉ์ด ๊ฐ๋ฅํฉ๋๋ค. |
| ์ฝ์ (Console) |
๋ก๋ฉ๋ ์น ํ์ด์ง์ ์๋ฌ๋ฅผ ํ์ธํ๊ฑฐ๋ JS ์์ค ์ฝ๋์ ์์ฑํ console.log ๋ฉ์๋์ ์คํ ๊ฒฐ๊ณผ๋ฅผ ํ์ธํ ์ ์์ต๋๋ค. |
| ์์ค (Sources) |
๋ก๋ฉ๋ ์น ํ์ด์ง์ JS ์ฝ๋๋ฅผ ๋๋ฒ๊น ํ ์ ์์ต๋๋ค. |
| ๋คํธ์ํฌ (Network) |
๋ก๋ฉ๋ ์น ํ์ด์ง์ ๊ด๋ จ๋ ๋คํธ์ํฌ ์์ฒญ ์ ๋ณด์ ์ฑ๋ฅ์ ํ์ธํ ์ ์์ต๋๋ค. |
| ์ ํ๋ฆฌ์ผ์ด์
(Application) |
์น ์คํ ๋ฆฌ์ง, ์ธ์ , ์ฟ ํค๋ฅผ ํ์ธํ๊ณ ๊ด๋ฆฌํ ์ ์์ต๋๋ค. |
3.2.2. ์ฝ์
์์์๋ ๊ฐ๋จํ ์ค๋ช ํ ๊ฒ์ฒ๋ผ ์ฝ์์ ๋ก๋ฉ๋ ์น ํ์ด์ง์ ์๋ฌ, console.log ๋ฉ์๋์ ์คํ ๊ฒฐ๊ณผ๋ฅผ ํ์ธํ๋ ์ฉ๋๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค.
์ถ๊ฐ๋ก ์ฝ์ ๋ด์์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์ง์ ์ ๋ ฅํ์ฌ ๊ฒฐ๊ณผ๋ฅผ ํ์ธํ๋ REPL(Read Eval Print Loop: ์ ๋ ฅ ์ํ ์ถ๋ ฅ ๋ฐ๋ณต) ํ๊ฒฝ์ผ๋ก๋ ์ฌ์ฉ ๊ฐ๋ฅํฉ๋๋ค.
3.2.3. ๋ธ๋ผ์ฐ์ ์์ JS ์คํ / ๋๋ฒ๊น
๋ธ๋ผ์ฐ์ ๋ HTML์ ๋ก๋ํ๋ฉด script ํ๊ทธ์ ํฌํจ๋ JS ์ฝ๋๋ฅผ ์คํํฉ๋๋ค. ๋ง์ผ JS ์ฝ๋์ console.log ๋ฉ์๋๊ฐ ํธ์ถ๋์๋ค๋ฉด ์ฝ์์ ์คํ ๊ฒฐ๊ณผ๊ฐ ์ถ๋ ฅ๋ฉ๋๋ค.
์๋์ ๊ฐ์ JS๊ฐ ํฌํจ๋ HTML ํ์ผ์ ์์ฑํ๊ณ ๋ธ๋ผ์ฐ์ ๋ฅผ ์คํํ๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํฉ๋๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>๋ฒํผ ํด๋ฆญ</title>
</head>
<body>
<button id="btn">๋ฒํผ</button>
<script>
const $button = document.getElementById('button');
$button.onclick = function () {
console.log('๋ฒํผ ํด๋ฆญ');
}
</script>
</body>
</html>
๋ง์ผ ๊ฐ๋ฐ์ ๋๊ตฌ์ ์ฝ์์ ์ด์ด๋ ์ํ๊ฐ ์๋๋ผ๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํ ์ฌ์ค์ ์์์ฐจ๋ฆฌ๊ธฐ ์ด๋ ต๊ธฐ ๋๋ฌธ์ ์ฝ์์ ์ผ๋๊ณ ๊ฐ๋ฐ์ ํ๋ ๊ฒ์ด ์์ฐ์ฑ ํฅ์์ ํฐ ๋์์ ์ค๋๋ค.
์ฐ์ธก ํ๋ฉด ์ค ๋ถํ ๋ ์๋ ํ๋ฉด(์ฝ์)์ ํ์ธํด๋ณธ ๊ฒฐ๊ณผ, ์๋ฌ๊ฐ ๋ฐ์ํ ์ฌ์ค์ ์ ์ ์์ต๋๋ค.
์ฐ์ธก ํ๋ฉด ์ค ๋ถํ ๋ ์ ํ๋ฉด(์์ค)๋ฅผ ํ์ธํ๋ฉด ์๋ฌ ์ ๋ณด์ ์๋ฌ๊ฐ ๋ฐ์ํ ์์น๋ฅผ ์ ์ ์์ต๋๋ค.
์ด ๊ฒฝ์ฐ์๋ $button ๋ณ์์ ๊ฐ์ด null์ด๊ธฐ ๋๋ฌธ์ ๋ฐ์ํ ์๋ฌ๋ก script ํ๊ทธ ๋ด๋ถ์์ ์๋ชป๋ id ๊ฐ์ ํตํ์ฌ getElementById ๋ฉ์๋๋ฅผ ์คํํ๋ค๋ ๊ฒ์ ์ ์ ์์ต๋๋ค.
3.3 Node.js
์ถํ ๋ง์ ์์ฑํ๋๋ก ํ๊ฒ ์ต๋๋ค.
