카테고리 없음

자바

설화님 2024. 10. 3. 13:18 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>모던 자바스크립트 (ES6 이후)</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
            background-color: #f4f4f4;
        }
        h1 {
            color: #333;
        }
        h2 {
            color: #666;
        }
        code {
            background-color: #eaeaea;
            padding: 5px;
            border-radius: 5px;
            display: block;
            margin: 10px 0;
        }
        pre {
            background-color: #f8f8f8;
            padding: 10px;
            border: 1px solid #ccc;
            overflow-x: auto;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

    <h1>모던 자바스크립트 (ES6 이후)</h1>

    <h2>1. <code>let</code>과 <code>const</code></h2>
    <p>변수를 선언할 때 <code>var</code> 대신 <code>let</code>과 <code>const</code>를 사용하여 블록 스코프를 가지게 할 수 있습니다.</p>
    <pre><code>let x = 10;  // 재할당 가능
const y = 20;  // 재할당 불가능</code></pre>

    <h2>2. 화살표 함수 (Arrow Functions)</h2>
    <p>기존 함수 선언 방식 대신 더 짧고 간결한 화살표 함수를 사용할 수 있습니다.</p>
    <pre><code>const add = (a, b) => a + b;</code></pre>

    <h2>3. 템플릿 리터럴 (Template Literals)</h2>
    <p>백틱(<code>`</code>)을 사용하여 변수를 쉽게 문자열에 포함할 수 있습니다.</p>
    <pre><code>const name = "John";
console.log(`Hello, ${name}!`);  // Hello, John!</code></pre>

    <h2>4. 구조 분해 할당 (Destructuring)</h2>
    <p>배열이나 객체에서 값을 간편하게 추출할 수 있습니다.</p>
    <pre><code>// 배열 구조 분해
const [a, b] = [10, 20];

// 객체 구조 분해
const person = { name: "Alice", age: 25 };
const { name, age } = person;</code></pre>

    <h2>5. 기본 매개변수 (Default Parameters)</h2>
    <p>함수의 매개변수에 기본값을 설정할 수 있습니다.</p>
    <pre><code>function greet(name = "Guest") {
    console.log(`Hello, ${name}`);
}

greet();  // Hello, Guest</code></pre>

    <h2>6. 스프레드 연산자 (Spread Operator)</h2>
    <p>배열이나 객체를 쉽게 복사하거나 병합할 수 있습니다.</p>
    <pre><code>const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];  // [1, 2, 3, 4, 5]</code></pre>

    <h2>7. <code>class</code>와 객체지향 프로그래밍</h2>
    <p>ES6부터 <code>class</code> 키워드로 객체지향 프로그래밍이 더 명확하게 구현됩니다.</p>
    <pre><code>class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog('Rex');
dog.speak();  // Rex barks.</code></pre>

    <h2>8. 모듈 (Modules)</h2>
    <p>모듈 시스템을 통해 코드 재사용성을 높일 수 있습니다.</p>
    <pre><code>// math.js
export function add(a, b) {
    return a + b;
}

// main.js
import { add } from './math.js';
console.log(add(2, 3));  // 5</code></pre>

    <h2>9. Promise</h2>
    <p>비동기 작업을 처리하는 새로운 방법으로, 콜백 지옥을 피할 수 있습니다.</p>
    <pre><code>const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Success!'), 1000);
});

myPromise.then(result => {
    console.log(result);  // 1초 후에 "Success!" 출력
});</code></pre>

    <h2>10. <code>async</code>와 <code>await</code></h2>
    <p>비동기 코드를 동기식처럼 작성할 수 있는 <code>async</code>/<code>await</code> 문법입니다.</p>
    <pre><code>async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
}</code></pre>

</body>
</html>