====== 🟨 JavaScript ======

JavaScript는 웹 브라우저에서 실행되는 프로그래밍 언어로, 동적이고 인터랙티브한 웹 페이지를 만들 수 있게 해줍니다.

===== 📋 정의 =====

**JavaScript**는 웹 개발을 위한 고급 프로그래밍 언어입니다. 원래는 웹 브라우저에서만 실행되었지만, 현재는 서버 사이드(Node.js)에서도 사용되며, 모바일 앱과 데스크톱 애플리케이션 개발에도 활용됩니다.

===== 🎯 주요 특징 =====

**1. 동적 타입 언어**
- 변수의 타입이 런타임에 결정됩니다.
- 유연한 프로그래밍이 가능합니다.

**2. 이벤트 기반 프로그래밍**
- 사용자 상호작용에 반응하는 이벤트 핸들러를 지원합니다.
- 비동기 프로그래밍이 자연스럽습니다.

**3. 객체 지향 프로그래밍**
- 프로토타입 기반 상속을 지원합니다.
- ES6부터 클래스 문법도 지원합니다.

===== 🏗️ 기본 문법 =====

**변수 선언:**
<code javascript>
// var (구식, 사용 권장하지 않음)
var oldWay = "구식 방법";

// let (블록 스코프)
let modernWay = "현대적 방법";

// const (상수)
const constantValue = "변하지 않는 값";
</code>

**함수 정의:**
<code javascript>
// 함수 선언
function traditionalFunction() {
    return "전통적인 함수";
}

// 함수 표현식
const arrowFunction = () => {
    return "화살표 함수";
};

// 즉시 실행 함수
(function() {
    console.log("즉시 실행");
})();
</code>

**객체와 배열:**
<code javascript>
// 객체
const person = {
    name: "홍길동",
    age: 30,
    greet() {
        return `안녕하세요, ${this.name}입니다.`;
    }
};

// 배열
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
</code>

===== 🎮 DOM 조작 =====

**요소 선택:**
<code javascript>
// ID로 선택
const element = document.getElementById('myId');

// 클래스로 선택
const elements = document.getElementsByClassName('myClass');

// CSS 선택자로 선택
const element = document.querySelector('.myClass');
const elements = document.querySelectorAll('.myClass');
</code>

**이벤트 처리:**
<code javascript>
// 이벤트 리스너 추가
element.addEventListener('click', function(event) {
    console.log('클릭됨!');
});

// 화살표 함수 사용
element.addEventListener('mouseover', (event) => {
    element.style.backgroundColor = 'red';
});
</code>

**DOM 조작:**
<code javascript>
// 요소 생성
const newElement = document.createElement('div');
newElement.textContent = '새로운 요소';

// 요소 추가
document.body.appendChild(newElement);

// 요소 제거
element.remove();

// 속성 설정
element.setAttribute('class', 'newClass');
</code>

===== 🔄 비동기 프로그래밍 =====

**콜백 함수:**
<code javascript>
// 비동기 작업 예제
setTimeout(() => {
    console.log('3초 후 실행');
}, 3000);

// AJAX 요청
fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
</code>

**Promise:**
<code javascript>
const myPromise = new Promise((resolve, reject) => {
    // 비동기 작업
    setTimeout(() => {
        const success = Math.random() > 0.5;
        if (success) {
            resolve('성공!');
        } else {
            reject('실패!');
        }
    }, 1000);
});

myPromise
    .then(result => console.log(result))
    .catch(error => console.error(error));
</code>

**async/await:**
<code javascript>
async function fetchData() {
    try {
        const response = await fetch('/api/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('데이터 가져오기 실패:', error);
    }
}

// 사용
fetchData().then(data => console.log(data));
</code>

===== 🏗️ 모듈 시스템 =====

**ES6 모듈:**
<code javascript>
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

export default class Calculator {
    multiply(a, b) {
        return a * b;
    }
}

// main.js
import Calculator, { add, subtract } from './math.js';

console.log(add(5, 3)); // 8
console.log(subtract(10, 4)); // 6

const calc = new Calculator();
console.log(calc.multiply(6, 7)); // 42
</code>

**CommonJS (Node.js):**
<code javascript>
// math.js
module.exports = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b
};

// main.js
const math = require('./math.js');
console.log(math.add(5, 3)); // 8
</code>

===== 🎯 ES6+ 기능 =====

**구조 분해 할당:**
<code javascript>
// 배열 구조 분해
const [first, second, ...rest] = [1, 2, 3, 4, 5];

// 객체 구조 분해
const { name, age, ...otherProps } = person;
</code>

**템플릿 리터럴:**
<code javascript>
const name = "홍길동";
const greeting = `안녕하세요, ${name}님!`;
const multiLine = `
    여러 줄의
    텍스트를
    쉽게 작성할 수 있습니다.
`;
</code>

**클래스:**
<code javascript>
class Animal {
    constructor(name) {
        this.name = name;
    }
    
    speak() {
        return `${this.name}이(가) 소리를 냅니다.`;
    }
}

class Dog extends Animal {
    speak() {
        return `${this.name}이(가) 멍멍 짖습니다.`;
    }
}

const dog = new Dog('바둑이');
console.log(dog.speak()); // "바둑이가 멍멍 짖습니다."
</code>

===== 🛠️ 디버깅 =====

**콘솔 메서드:**
<file javascript>
console.log('일반 로그');
console.error('에러 메시지');
console.warn('경고 메시지');
console.info('정보 메시지');

// 객체 출력
console.table([
    { name: '홍길동', age: 30 },
    { name: '김철수', age: 25 }
]);

// 성능 측정
console.time('작업 시간');
// ... 작업 수행
console.timeEnd('작업 시간');
</code>

**브레이크포인트:**
<code javascript
function debugFunction() {
    debugger; // 브라우저에서 실행 시 여기서 멈춤
    console.log('디버깅 중...');
}
</file>

===== 📚 관련 용어 =====

  * [[wiki:glossary:web_technologies:html|HTML]] - 마크업 언어
  * [[wiki:glossary:web_technologies:css|CSS]] - 스타일시트
  * [[wiki:glossary:web_technologies:dom|DOM]] - 문서 객체 모델
  * [[wiki:glossary:web_technologies:ajax|AJAX]] - 비동기 통신
  * [[wiki:glossary:web_technologies:json|JSON]] - 데이터 형식
  * [[wiki:glossary:server_operations:nodejs|Node.js]] - JavaScript 런타임
  * [[wiki:glossary:game_development:phaser|Phaser.js]] - 게임 엔진
  * [[wiki:glossary:server_operations:socketio|Socket.IO]] - 실시간 통신

===== 🔗 관련 문서 =====

  * [[wiki:it:dream_of_enc:metaverse:phaser|Phaser.js 게임 엔진]]
  * [[wiki:it:dream_of_enc:metaverse:nodejs|Node.js 백엔드 설정]]
  * [[wiki:glossary:web_technologies:css|CSS]] - 스타일링
  * [[wiki:glossary:development_tools:git:github|GitHub]] - 코드 저장소

---
//이 페이지는 자동으로 생성되었습니다.//