JavaScript๋ ์น ๋ธ๋ผ์ฐ์ ์์ ๋์ํ๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ค.
ํ์ฌ๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ๋์ด ์๋ฒ(Node.js), ๋ชจ๋ฐ์ผ, ๋ฐ์คํฌํ๊น์ง ํ์ฅ๋ ๋ฒ์ฉ ์ธ์ด๋ก ์ฌ์ฉ๋๋ค.
์ฒ์์๋ ๋จ์ํ ์น ํ์ด์ง ๋์ ์ ์ด์ฉ ์คํฌ๋ฆฝํธ ์ธ์ด์์ง๋ง,
์ง๊ธ์ ํ๋ก ํธ์๋ ์ํ๊ณ์ ์ค์ฌ ์ธ์ด๋ค.
1. JavaScript์ ์ ์
JavaScript๋ ๋์ ์ธ ์น ํ์ด์ง๋ฅผ ๋ง๋ค๊ธฐ ์ํ ์คํฌ๋ฆฝํธ ์ธ์ด๋ค.
- HTML → ๊ตฌ์กฐ
- CSS → ์คํ์ผ
- JavaScript → ๋์
ex.
- ๋ฒํผ ํด๋ฆญ ์ด๋ฒคํธ ์ฒ๋ฆฌ
- ์ ๋ ฅ ๊ฐ ๊ฒ์ฆ
- ํ๋ฉด ๋์ ๋ณ๊ฒฝ
- ๋น๋๊ธฐ ์๋ฒ ํต์ (AJAX)
2. Java์์ ์ฐจ์ด
์ด๋ฆ์ ๋น์ทํ์ง๋ง ์์ ํ ๋ค๋ฅธ ์ธ์ด๋ค.
| ๊ตฌ๋ถ | Java | JavaScript |
| ํ์ | ์ ์ ํ์ | ๋์ ํ์ |
| ์คํ ํ๊ฒฝ | JVM | ๋ธ๋ผ์ฐ์ /Node |
| ์ปดํ์ผ | ํ์ | ์ธํฐํ๋ฆฌํฐ ๊ธฐ๋ฐ |
| ํด๋์ค ๊ตฌ์กฐ | ํด๋์ค ๊ธฐ๋ฐ | ํ๋กํ ํ์ ๊ธฐ๋ฐ |
JavaScript๋ ์คํ ์์ ์ ํ์ ์ด ๊ฒฐ์ ๋๋ ๋์ ํ์ ์ธ์ด๋ค.
3. ์คํ ๋ฐฉ์
- Chrome → V8 ์์ง
- Firefox → SpiderMonkey
- Edge → Chakra
HTML ์์ ์ง์ ์์ฑํ๊ฑฐ๋, ์ธ๋ถ ํ์ผ๋ก ๋ถ๋ฆฌํ ์ ์๋ค.
<script>
console.log("Hello, World");
</script>
4. JavaScript์ ํน์ง
1) ๋์ ํ์
let x = 10;
x = "๋ฌธ์์ด";
ํ์ ์ ๋ช ์ํ์ง ์์๋ ๋๋ค.
2) ํจ์ํ ํ๋ก๊ทธ๋๋ฐ ์ง์
ํจ์๋ฅผ ๋ณ์์ฒ๋ผ ์ฌ์ฉํ ์ ์๋ค.
functionh add(a, b) {
return a + b;
}
๋๋
const add = (a, b) => a + b;
3) ๋น๋๊ธฐ ์ฒ๋ฆฌ
JavaScript๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ด๋ฒคํธ ์ฒ๋ฆฌ + ๋น๋๊ธฐ ์ฒ๋ฆฌ ๊ตฌ์กฐ๋ค.
- setTimeout
- Promise
- async/await
4) DOM ์ ์ด
JavaScript๋ HTML ์์๋ฅผ ์ง์ ์ ์ดํ ์ ์๋ค.
document.getElementById("title").innerText = "๋ณ๊ฒฝ";
5. ์ ์ค์ํ๊ฐ?
- ๋ชจ๋ ์น ๋ธ๋ผ์ฐ์ ๊ฐ ์ง์
- ํ๋ก ํธ์๋ ํ์ค ์ธ์ด
- React, Vue, Angular ๋ฑ ํ๋ ์์ํฌ ๊ธฐ๋ฐ
- Node.js๋ก ์๋ฒ ๊ฐ๋ฐ ๊ฐ๋ฅ
์น ๊ฐ๋ฐ์ ํ๋ค๋ฉด ๋ฐ๋์ ๋ค๋ฃจ๊ฒ ๋๋ ์ธ์ด๋ค.
'Front-End > JavaScript | jQuery | AJAX' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| 06. ์ ์ด์ฟผ๋ฆฌ(jQuery) ๋ฌธ์ ๊ฐ์ฒด ์ ํ์์ ์กฐ์๋ฒ (0) | 2026.02.17 |
|---|---|
| 05. ํจ์(Function) (0) | 2026.02.16 |
| 04. ๊ฐ์ฒด(Object) (0) | 2026.02.16 |
| 03. ์ ์ด๋ฌธ(Control Statement) (0) | 2026.02.16 |
| 02. JavaScript ๊ธฐ์ด ๋ฌธ๋ฒ (0) | 2026.02.16 |