# HTML5에서 새로 추가된 요소들
- <article>: 독립적이고 재사용 가능한 콘텐츠를 나타내는 엘리먼트입니다.
- <aside>: 본문과 관련되어있지만, 본문의 흐름에서 분리된 콘텐츠를 나타냅니다.
- <audio>: 오디오 콘텐츠를 제공하는 엘리먼트입니다.
- <canvas>: 동적인 그래픽을 그릴 수 있는 태그입니다.
- <datalist>: 드롭다운 목록을 만들 때 사용되는 엘리먼트입니다.
- <details>: 사용자가 펼칠 수 있는 세부적인 정보를 표시하는 엘리먼트입니다.
- <dialog>: 대화상자 형식의 모달 창을 구현할 때 사용하는 엘리먼트입니다.
- <figcaption>: <figure> 엘리먼트에 대한 캡션을 제공하는 엘리먼트입니다.
- <figure>: 일련의 연관된 이미지, 그래픽, 캡션 등을 그룹핑할 때 사용
# 폼 유효성 검사
HTML5에서는 폼 유효성 검사를 통해 폼 제출 전에 사용자가 입력한 데이터가 유효한지 확인할 수 있습니다.
- required 속성: 입력 항목이 필수인지를 나타냅니다.
- pattern 속성: 정규 표현식을 사용하여 유효한 패턴을 정의할 수 있습니다.
- min 속성: 최소 값을 지정할 수 있습니다.
- max 속성: 최대 값을 지정할 수 있습니다.
- minlength 속성: 최소 길이를 지정할 수 있습니다.
- maxlength 속성: 최대 길이를 지정할 수 있습니다.
- type 속성: 입력 항목의 유형 (예: email, number 등)을 지정할 수 있습니다.
이와 같은 속성을 사용하여 폼 유효성 검사를 구현할 수 있습니다.
브라우저가 유효성 검사를 수행하면, 유효하지 않은 값이 검사되면 오류 메시지가 표시됩니다.
# 로컬 스토리지(Local Storage)
HTML5의 local storage는 웹 브라우저에서 데이터를 저장하고 관리할 수 있는 기술입니다.
local storage는 쿠키와 비슷하지만, 더 큰 용량의 데이터를 저장할 수 있고, 저장된 데이터는 브라우저가 종료되어도 유지됩니다.
local storage에 데이터를 저장하는 방법:
- localStorage.setItem(key, value): 키-값 쌍을 local storage에 저장합니다.
- localStorage.getItem(key): 저장된 키에 대한 값을 가져옵니다.
- localStorage.removeItem(key): 특정 키-값 쌍을 local storage에서 제거합니다.
- localStorage.clear(): 모든 키-값 쌍을 local storage에서 제거합니다.
local storage는 데이터 공유, 사용자 세션, 폼 데이터 저장 등 다양한 용도로 사용될 수 있습니다.
# Drag and Drop
HTML5의 Drag and Drop 기능은 사용자가 HTML 요소를 드래그하여 다른 위치에 드롭하는 기능을 제공합니다.
이 기능은 JavaScript를 이용하여 구현할 수 있습니다.
Drag and Drop 기능을 사용하려면, HTML 요소에 draggable 속성을 추가해야 합니다.
Drag and Drop 기능에서 중요한 이벤트는 다음과 같습니다:
- dragstart: 사용자가 요소를 드래그 시작할 때 발생합니다.
- drag: 사용자가 요소를 드래그하는 동안 발생합니다.
- dragend: 사용자가 요소의 드래그를 종료할 때 발생합니다.
- drop: 사용자가 요소를 드롭할 때 발생합니다.
- dragenter: 드래그된 요소가 드롭 가능한 영역에 들어갈 때 발생합니다.
- dragleave: 드래그된 요소가 드롭 가능한 영역에서 벗어날 때 발생합니다.
- dragover: 드래그된 요소가 드롭 가능한 영역에 있을 때 발생합니다.
위의 이벤트를 이용하여 Drag and Drop 기능을 구현할 수 있습니다.
예를 들어, 다음 예제는 사용자가 드래그한 요소를 드롭할 수 있는 영역을 정의하고, dragstart 이벤트를 사용하여 드래그를 시작할 때 해당 요소의 데이터를 정의합니다.
<div id="drop-zone">Drop Zone</div>
<div id="drag-element" draggable="true">Drag Element</div>
<script>
// dropZone과 dragElement 요소를 지정
const dropZone = document.getElementById("drop-zone");
const dragElement = document.getElementById("drag-element");
// dragElement에 dragstart 이벤트를 리스너로 등록
dragElement.addEventListener("dragstart", function(event) {
// event.dataTransfer 객체에 드래그할 데이터(이 경우 id)를 설정
event.dataTransfer.setData("text/plain", event.target.id);
});
// dropZone에 dragover 이벤트를 리스너로 등록
dropZone.addEventListener("dragover", function(event) {
// 드롭 액션을 기본 동작으로 방지
event.preventDefault();
});
// dropZone에 drop 이벤트를 리스너로 등록
dropZone.addEventListener("drop", function(event) {
// 드롭 액션을 기본 동작으로 방지
event.preventDefault();
// event.dataTransfer 객체에서 데이터(id)를 가져옴
const id = event.dataTransfer.getData("text/plain");
// dropZone 요소에 dragElement 요소를 추가
event.target.appendChild(document.getElementById(id));
});
</script>이처럼 HTML5 Drag and Drop 기능은 JavaScript를 이용하여 구현할 수 있으며, 사용자 정의 데이터를 포함하여 다양한 방식으로 사용할 수 있습니다.
# geolocation
HTML5 Geolocation API는 브라우저에서 사용자의 위치 정보를 제공할 수 있도록 해주는 기술입니다.
사용자의 허가를 받아야만 위치 정보를 가져올 수 있습니다.
JavaScript 코드를 사용하여 Geolocation API를 사용할 수 있습니다.
예를 들어, 다음과 같은 코드를 사용하여 사용자의 현재 위치를 얻을 수 있습니다:
navigator.geolocation.getCurrentPosition(function(position) {
let latitude = position.coords.latitude;
let longitude = position.coords.longitude;
console.log("현재 위치 = 위도 : " + latitude + ", 경도: " + longitude);
});
# Web Worker
Web Workers는 웹 브라우저에서 JavaScript 코드를 별도의 스레드에서 실행할 수 있는 기술입니다.
일반적으로 JavaScript는 브라우저 UI와 동시에 실행되어, UI 블로킹이 발생할 수 있는 작업(예를 들어, 데이터베이스 작업, 미디어 처리 등)이 있을 때 Web Workers를 사용하면 좋습니다.
Web Workers는 별도의 스레드에서 실행되기 때문에, UI 스레드와 별개로 작업을 수행할 수 있습니다.
따라서, 사용자에게 빠른 반응을 제공하면서도 복잡한 작업을 수행할 수 있습니다.
예를 들어, 대용량의 데이터를 다운로드하고 처리하는 애플리케이션을 개발할 때 Web Workers를 사용하면 좋습니다.
이 경우, 데이터를 다운로드하는 작업은 Web Worker에서 수행하고, UI 스레드에서는 사용자에게 빠른 반응을 제공할 수 있습니다.
Web Workers API를 사용하려면, 먼저 웹 워커 파일을 작성해야 합니다.
웹 워커 파일은 JavaScript 파일이며, 백그라운드에서 처리할 작업을 정의하는 코드를 포함합니다.
그런 다음, 웹 워커를 사용하려는 HTML 페이지에서 Web Workers API를 사용하여 웹 워커를 생성할 수 있습니다.
예를 들어, 다음과 같은 코드를 사용하여 웹 워커를 생성할 수 있습니다:
let worker = new Worker("worker.js");웹 워커가 생성된 후, 웹 페이지에서 웹 워커와 통신할 수 있습니다.
아래의 코드는 Web Worker를 사용한 간단한 예제입니다.
// worker.js
self.onmessage = function(e) {
console.log('메인 스크립트에서 메시지를 받았습니다.');
var workerResult = '결과: ' + (e.data[0] * e.data[1]);
console.log('메인 스크립트에 메시지를 보냅니다.');
self.postMessage(workerResult);
}
// main.js
var worker = new Worker('worker.js');
worker.postMessage([10, 20]);
worker.onmessage = function(e) {
console.log('워커 스크립트에서 메시지를 받았습니다.');
console.log(e.data);
};
위의 코드에서, worker.js 파일은 Web Worker 스크립트입니다.
self.onmessage 핸들러는 메인 스크립트에서 Worker에 메시지를 보낼 때 호출됩니다.
Worker는 메인 스크립트에서 받은 데이터를 처리하고 결과를 메인 스크립트에 postMessage를 통해 보냅니다.
main.js 파일은 메인 스크립트입니다.
이 파일에서는 Worker를 생성하고 postMessage 메서드를 호출하여 Worker에 데이터를 보냅니다.
Worker에서 보낸 결과는 onmessage 핸들러에서 받아서 처리할 수 있습니다.
# Web Sockets
HTML5 Web Sockets API는 웹 브라우저와 웹 서버 간에 지속적인, 양방향 통신을 가능하게 하는 기술입니다.
일반적으로, 웹 페이지에서 서버로 데이터를 전송하려면 HTTP 프로토콜을 사용해야 하는데, Web Sockets API를 사용하면 간단한 API 호출만으로 지속적인, 양방향 통신을 가능하게 할 수 있습니다.
let socket = new WebSocket("ws://example.com");웹 소켓이 생성된 후, 웹 페이지에서 서버와 통신할 수 있습니다.
Web Sockets API는 웹 소켓에 대한 여러 이벤트를 제공하며, 이 이벤트를 사용하여 웹 소켓이 연결되거나 데이터가 수신되거나 끊어지는 것 등을 감지할 수 있습니다.
예를 들어, 다음과 같은 코드를 사용하여 웹 소켓이 연결되었을 때 처리할 것을 지정할 수 있습니다:
socket.onopen = function() {
console.log("Web Socket opened");
};
웹 소켓이 연결되면, 웹 페이지와 서버 간에 양방향 통신이 가능해집니다.
예를 들어, 다음과 같은 코드를 사용하여 웹 페이지에서 서버로 데이터를 전송할 수 있습니다:
socket.send("Hello Server");
또한, 웹 페이지는 서버로부터 수신된 데이터를 처리할 수 있습니다.
예를 들어, 다음과 같은 코드를 사용하여 서버로부터 수신된 데이터를 처리할 것을 지정할 수 있습니다:
socket.onmessage = function(event) {
console.log("Data received: " + event.data);
};
HTML5 Web Sockets API는 웹 애플리케이션의 반응성을 향상시키며, 실시간 데이터 전송과 수신을 위한 효율적인 통신 방식을 제공합니다. 또한, 웹 소켓을 사용하면 웹 페이지와 서버의 HTTP 통신을 최소화할 수 있어 네트워크 트래픽을 줄이고, 페이지 로딩 속도를 향상시킬 수 있습니다.
하지만, 웹 소켓을 사용하면서도 보안 취약점을 피할 수 있는 것은 아닙니다.
웹 소켓을 사용할 때는 반드시 보안 적절한 방법으로 웹 소켓을 구성하고, 적절한 보안 적용 방법을 적용해야 합니다.