[HTML + JavaScript] HTML5, JavaScript ES6에서 추가된 문법

JavaScript ES6 (ECMAScript 2015)에서 새로 추가된 주요 문법

1. let과 const:
   • let: 블록 스코프를 가진 변수 선언 (기존 var는 함수 스코프).
   • const: 상수 선언, 한 번 값이 할당되면 재할당할 수 없음.

let x = 10;
const y = 20;

 

2. 화살표 함수 (Arrow Functions):

• function 키워드를 사용하지 않고 간결하게 함수를 작성할 수 있게 해줍니다.
• this 바인딩을 다르게 처리하므로, 다른 함수 내에서 사용시 유용합니다.

const sum = (a, b) => a + b;

 

3.템플릿 리터럴 (Template Literals):

• 문자열을 만들 때 ${}를 사용하여 변수나 표현식을 삽입할 수 있습니다.
• 멀티라인 문자열도 쉽게 다룰 수 있습니다.

const name = "John";
const message = `Hello, ${name}!`;

 

4.디스트럭처링 할당 (Destructuring Assignment):

• 객체나 배열의 값을 변수로 쉽게 추출할 수 있습니다.

const person = { name: "John", age: 30 };
const { name, age } = person;  // name과 age 변수에 값 할당

 

5. 클래스 (Classes):

• 객체 지향 프로그래밍에서 클래스를 사용할 수 있는 문법을 제공합니다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

 

6. 모듈 (Modules):

• import와 export를 사용하여 코드의 모듈화를 할 수 있게 해줍니다.

// 파일 A.js
export const greet = () => "Hello";

// 파일 B.js
import { greet } from './A.js';

 

7. Promise:

• 비동기 작업을 처리하는 새로운 방식으로, then(), catch(), finally() 등을 사용하여 콜백 지옥을 피할 수 있습니다.

let promise = new Promise((resolve, reject) => {
  let success = true;
  if(success) {
    resolve("Success!");
  } else {
    reject("Error!");
  }
});

promise.then(response => console.log(response))
       .catch(error => console.log(error));

 

 

---

 

HTML5에서 새로 추가된 주요 기능

1. 새로운 도큐먼트 구조 요소:
   • <header>, <footer>, <article>, <section>, <nav>, <aside>, <figure>, <figcaption> 등의 새로운 시맨틱 태그가 추가되었습니다.
   • 웹 페이지의 구조를 더 의미 있게 표현할 수 있게 도와줍니다.

<header>
  <h1>Welcome to My Website</h1>
</header>

 

2. 폼 요소 개선:

• <input>에 type="email", type="date", type="number" 등 다양한 타입이 추가되어 입력 유효성 검사를 HTML만으로 처리할 수 있게 됐습니다.
• <input>에 placeholder, required, pattern 속성을 사용하여 사용자의 입력을 쉽게 검증할 수 있습니다.

<input type="email" placeholder="Enter your email" required>

 

3. 비디오 및 오디오 지원:

• <video>와 <audio> 태그가 추가되어, 별도의 플러그인 없이 HTML만으로 멀티미디어 콘텐츠를 삽입하고 제어할 수 있게 되었습니다.

<video controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

 

4. 로컬 저장소 (Local Storage):

• localStorage와 sessionStorage API가 추가되어 클라이언트 측에 데이터를 저장할 수 있습니다. localStorage는 영구적인 저장소이고, sessionStorage는 세션 단위로 데이터를 저장합니다.

localStorage.setItem('username', 'John');
const username = localStorage.getItem('username');

 

5. Canvas API:

• <canvas> 태그를 사용하여 그래픽을 그릴 수 있습니다. JavaScript로 동적으로 그림을 그리거나 애니메이션을 생성할 수 있습니다.

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(20, 20, 150, 100);
</script>

 

6. Geolocation API:

• 사용자의 위치 정보를 가져오는 API가 추가되었습니다.

navigator.geolocation.getCurrentPosition(function(position) {
  console.log(position.coords.latitude, position.coords.longitude);
});

 

7. Web Workers:

• 백그라운드 스레드를 이용하여 JavaScript 코드의 성능을 최적화할 수 있게 도와줍니다.

const worker = new Worker('worker.js');
worker.postMessage('Hello');
worker.onmessage = function(e) {
  console.log(e.data);
};

 

8. WebSockets:

• 실시간 양방향 통신을 위한 WebSocket API가 추가되었습니다. 서버와 클라이언트 간에 실시간으로 데이터를 주고받을 수 있습니다.

const socket = new WebSocket('ws://example.com/socket');
socket.onopen = function() {
  socket.send('Hello Server');
};
socket.onmessage = function(event) {
  console.log('Message from server: ', event.data);
};