아름다운 전진

HTML Sanitizer API는 개발자가 HTML 콘텐츠를 삭제하여 악성 코드 실행을 방지하고 웹 애플리케이션의 보안을 향상시킬 수 있는 JavaScript API입니다. 사용자 생성 콘텐츠가 웹 사이트에 표시되도록 허용하되 유해한 콘텐츠가 포함되지 않도록 하려는 경우에 유용합니다.

​

다음은 HTML Sanitizer API를 사용하여 HTML 문자열을 삭제하는 샘플 코드입니다.

​

const dirtyHtml = '<script>alert("Hello, world!")</script><p>This is some text</p>';

const cleanHtml = new DOMParser().parseFromString(dirtyHtml, 'text/html').body.innerHTML;

​

const sanitizedHtml = DOMPurify.sanitize(cleanHtml);

console.log(sanitizedHtml); // "<p>This is some text</p>"

​

위의 코드에서 먼저 악성 스크립트 태그가 있는 HTML 문자열을 포함하는 `dirtyHtml`이라는 변수를 만듭니다. 그런 다음 `DOMParser` API를 사용하여 HTML 문자열을 구문 분석하고 `body` 요소만 가져옵니다. 이렇게 하면 `body` 요소 외부의 스크립트 또는 기타 콘텐츠가 제거됩니다.

​

다음으로 `DOMPurify` 라이브러리를 사용하여 HTML 콘텐츠를 삭제합니다. 이 라이브러리는 인기 있고 널리 사용되는 HTML 새니타이저로, 새니타이즈된 HTML에서 허용되는 항목을 제어할 수 있는 많은 사용자 정의 옵션을 제공합니다.

​

마지막으로 삭제된 HTML을 콘솔에 기록합니다. 이 경우 `<p>` 요소만 포함하고 `<script>` 태그는 포함하지 않습니다.

​

다음은 HTML 요소와 함께 HTML Sanitizer API를 사용하는 방법을 보여주는 또 다른 예입니다.

​

<div id="dirty-html">

<script>alert("Hello, world!")</script>

<p>This is some text</p>

</div>

​

<div id="clean-html"></div>

​

<script>

const dirtyElement = document.getElementById('dirty-html');

const cleanElement = document.getElementById('clean-html');

​

const sanitizedHtml = DOMPurify.sanitize(dirtyElement.innerHTML);

cleanElement.innerHTML = sanitizedHtml;

</script>

​

이 예제에는 두 개의 HTML 요소가 있습니다. 하나는 이전 예제와 동일한 악성 스크립트 태그를 포함하는 `dirty-html` ID를 가지고 있고 다른 하나는 삭제된 HTML을 표시하는 데 사용되는 `clean-html` ID를 가지고 있습니다.

​

먼저 `getElementById` 메서드를 사용하여 더티 HTML 요소와 깨끗한 HTML 요소에 대한 참조를 얻습니다. 그런 다음 `innerHTML` 속성을 사용하여 더티 요소의 HTML 콘텐츠를 가져옵니다.

​

그런 다음 `DOMPurify` 라이브러리를 사용하여 HTML 콘텐츠를 삭제하고 삭제된 HTML을 clean 요소의 `innerHTML` 속성에 할당합니다. 이렇게 하면 `<script>` 태그가 아닌 `<p>` 요소만 포함하도록 clean 요소의 내용이 업데이트됩니다.

​

다음은 HTML Sanitizer API를 사용하여 웹 애플리케이션에서 HTML 콘텐츠를 삭제하는 방법에 대한 몇 가지 예입니다. HTML 삭제에 사용할 수 있는 다른 많은 라이브러리와 도구가 있으므로 조사를 수행하고 필요에 가장 적합한 것을 선택하십시오.

History API는 개발자가 실제로 전체 페이지를 요청하지 않고도 브라우저 기록을 조작하고 사용자를 다른 페이지로 이동할 수 있도록 하는 JavaScript의 기능입니다. 이것은 단일 페이지 응용 프로그램을 만들거나 더 복잡한 탐색 체계를 구현하는 데 유용할 수 있습니다.

​

다음은 History API를 사용하여 브라우저의 기록에 새 항목을 추가하고 전체 페이지 요청 없이 새 URL로 이동하는 방법의 예입니다.

​

// Push a new state to the browser's history

history.pushState({page: 'home'}, 'Home', '/home');

​

// Update the page content

document.querySelector('h1').textContent = 'Welcome to the Home page';

​

// Add an event listener to handle navigation using the back button

window.addEventListener('popstate', function(event) {

if (event.state.page === 'home') {

document.querySelector('h1').textContent = 'Welcome to the Home page';

} else if (event.state.page === 'about') {

document.querySelector('h1').textContent = 'Learn more About Us';

}

});

​

// Navigate to a new URL without making a full page request

history.pushState({page: 'about'}, 'About Us', '/about');

document.querySelector('h1').textContent = 'Learn more About Us';

​

이 예제에서는 먼저 `history.pushState()`를 사용하여 상태 개체 `{page: 'home'}` 및 제목 'Home'으로 브라우저의 기록에 새 항목을 추가하고 URL '/home'으로 이동합니다. 그런 다음 환영 메시지를 표시하도록 페이지 콘텐츠를 업데이트합니다.

​

또한 뒤로 버튼을 사용하여 탐색을 처리하는 이벤트 리스너를 추가합니다. 사용자가 뒤로 버튼을 클릭하면 `popstate` 이벤트가 발생하고 `event.state` 객체를 확인하여 사용자가 이전에 어느 페이지에 있었는지 확인할 수 있습니다. 이에 따라 페이지 콘텐츠를 업데이트합니다.

​

마지막으로 `history.pushState()`를 다시 사용하여 상태 개체 `{page: 'about'}` 및 제목 'About Us'로 브라우저 기록에 새 항목을 추가하고 URL '/about'으로 이동합니다. 우리 회사에 대한 정보를 표시하기 위해 페이지 콘텐츠를 다시 업데이트합니다.

​

History API는 대부분의 최신 브라우저에서 지원되지만 다른 브라우저에서 구현되는 방식에는 약간의 차이가 있습니다. 호환성을 보장하기 위해 여러 브라우저에서 코드를 테스트하는 것이 중요합니다.

Idle Detection API는 비교적 최근에 JavaScript 언어에 추가되었으며 웹 개발자가 사용자가 유휴 상태일 때 이를 감지하고 해당 상태에 따라 적절한 조치를 취할 수 있도록 설계되었습니다. 이는 온라인 게임, 채팅 애플리케이션 및 기타 실시간 애플리케이션을 포함한 광범위한 애플리케이션에 유용할 수 있습니다.

​

다음은 JavaScript에서 Idle Detection API를 사용하는 방법의 예입니다.

​

// Check if the browser supports the Idle Detection API

if ("Idle" in window) {

// Create a new instance of the IdleDetection interface

let idle = new IdleDetector();

​

// Set a callback function to be executed when the user becomes idle

idle.addEventListener("idle", () => {

console.log("User is idle");

});

​

// Set a callback function to be executed when the user is no longer idle

idle.addEventListener("active", () => {

console.log("User is active");

});

​

// Start detecting idle state

idle.start();

}

​

이 예제에서는 먼저 window 개체에서 "Idle" 속성을 사용할 수 있는지 확인하여 브라우저가 Idle Detection API를 지원하는지 확인합니다. API를 사용할 수 있는 경우 IdleDetector 인터페이스의 새 인스턴스를 만들고 두 개의 콜백 함수를 설정합니다. 하나는 사용자가 유휴 상태가 될 때를 위한 것이고 다른 하나는 사용자가 다시 활성화될 때를 위한 것입니다.

​

마지막으로 유휴 개체에서 start() 메서드를 호출하여 유휴 상태 감지를 시작합니다.

​

Idle Detection API는 아직 실험 단계에 있으며 모든 브라우저에서 지원되지 않을 수 있습니다. 또한 "유휴"의 정의는 플랫폼과 장치마다 다르므로 다른 장치 및 플랫폼에서 구현을 테스트하여 예상대로 작동하는지 확인하는 것이 중요합니다.

Image Capture API는 웹 개발자가 장치의 카메라 또는 스캐너와 같은 다른 이미지 캡처 장치에 액세스하고 브라우저에서 직접 스틸 이미지를 캡처할 수 있도록 하는 JavaScript API입니다. API는 이미지를 캡처하고 다양한 카메라 설정을 조정하는 간단하고 표준화된 방법을 제공합니다.

​

다음은 Image Capture API를 사용하여 사용자의 카메라에서 이미지를 캡처하는 방법에 대한 간단한 예입니다.

​

// Get the user's camera

navigator.mediaDevices.getUserMedia({ video: true })

.then(stream => {

// Create an ImageCapture object from the camera stream

const imageCapture = new ImageCapture(stream.getVideoTracks()[0]);

​

// Capture an image from the camera

imageCapture.takePhoto()

.then(blob => {

// Create an <img> element and display the captured image

const img = document.createElement('img');

img.src = URL.createObjectURL(blob);

document.body.appendChild(img);

})

.catch(error => console.log('takePhoto() error:', error));

})

.catch(error => console.log('getUserMedia() error:', error));

​

이 예제에서는 먼저 `navigator.mediaDevices.getUserMedia()`를 호출하여 사용자의 카메라에 대한 액세스를 요청합니다. 카메라에 액세스하면 스트림의 첫 번째 비디오 트랙을 사용하여 `ImageCapture` 개체를 만듭니다. 그런 다음 `imageCapture.takePhoto()`를 호출하여 이미지를 캡처하고 `Blob` 객체로 반환합니다. 마지막으로 `<img>` 요소를 생성하고 해당 `src` 속성을 페이지에 캡처된 이미지를 표시하는 `Blob` 객체에서 생성된 URL로 설정합니다.

​

Image Capture API는 밝기, 대비 및 확대/축소와 같은 카메라 설정을 조정하기 위한 다양한 옵션도 제공합니다. 다음은 카메라 밝기를 설정하는 방법의 예입니다.

​

// Get the user's camera

navigator.mediaDevices.getUserMedia({ video: true })

.then(stream => {

// Create an ImageCapture object from the camera stream

const imageCapture = new ImageCapture(stream.getVideoTracks()[0]);

​

// Set the camera's brightness to 50%

imageCapture.setOptions({ exposureCompensation: 0.5 });

​

// Capture an image from the camera

imageCapture.takePhoto()

.then(blob => {

// Create an <img> element and display the captured image

const img = document.createElement('img');

img.src = URL.createObjectURL(blob);

document.body.appendChild(img);

})

.catch(error => console.log('takePhoto() error:', error));

})

.catch(error => console.log('getUserMedia() error:', error));

​

이 예제에서는 `imageCapture.setOptions()`를 호출하여 카메라의 노출 보정(밝기)을 50%로 설정합니다. 그런 다음 카메라에서 이미지를 캡처하여 이전 예제와 같이 페이지에 표시합니다.

​

Image Capture API는 사용자의 카메라 또는 기타 이미지 캡처 장치에서 이미지를 캡처하기 위한 강력하고 유연한 도구입니다. 이 API를 사용하여 웹 개발자는 최신 장치의 전체 기능을 활용하는 대화형의 매력적인 웹 응용 프로그램을 만들 수 있습니다.

IndexedDB는 클라이언트 측 데이터베이스에 대량의 구조화된 데이터를 저장하기 위한 웹 API입니다. 이것은 웹 애플리케이션이 사용자의 브라우저에 로컬로 데이터를 저장하고 해당 데이터에 오프라인으로 또는 사용자가 인터넷에 연결되어 있지 않을 때 액세스할 수 있는 방법을 제공합니다.

​

IndexedDB API는 다음을 포함하여 클라이언트 측 데이터베이스를 만들고 관리하기 위한 일련의 비동기 메서드를 제공합니다.

​

1. 데이터베이스 열기: `indexedDB.open()` 메서드는 데이터베이스를 여는 데 사용됩니다. 지정된 데이터베이스가 없으면 생성됩니다.

​

예:

​

let request = indexedDB.open("myDatabase", 1);

​

request.onerror = function(event) {

// Handle errors opening the database

};

​

request.onsuccess = function(event) {

let db = event.target.result;

// Do something with the database

};

​

2. 객체 저장소 만들기: 객체 저장소는 데이터를 저장하기 위한 컨테이너입니다. 관계형 데이터베이스의 테이블과 유사합니다. `createObjectStore()` 메서드는 개체 저장소를 만드는 데 사용됩니다.

​

예:

​

let objectStore = db.createObjectStore("customers", { keyPath: "id" });

​

이 예제에서는 "id" 속성에 대한 인덱스를 사용하여 "customers"라는 개체 저장소를 만듭니다.

​

3. 데이터 추가: `add()` 메서드는 개체 저장소에 데이터를 추가하는 데 사용됩니다.

​

예:

​

let transaction = db.transaction(["customers"], "readwrite");

let objectStore = transaction.objectStore("customers");

​

let customer = { id: 1, name: "John Doe", email: "johndoe@example.com" };

let request = objectStore.add(customer);

​

request.onerror = function(event) {

// Handle errors adding data to the object store

};

​

request.onsuccess = function(event) {

// Data added successfully to the object store

};

​

이 예제에서는 "customers" 개체 저장소를 읽고 쓰기 위해 트랜잭션이 생성됩니다. ID, 이름 및 이메일로 고객 개체가 생성되고 `add()` 메서드를 사용하여 개체 저장소에 추가됩니다.

​

4. 데이터 검색: `get()` 메서드는 개체 저장소에서 데이터를 검색하는 데 사용됩니다.

​

예:

​

let transaction = db.transaction(["customers"], "readonly");

let objectStore = transaction.objectStore("customers");

​

let request = objectStore.get(1);

​

request.onerror = function(event) {

// Handle errors retrieving data from the object store

};

​

request.onsuccess = function(event) {

let customer = event.target.result;

// Do something with the customer data

};

​

이 예제에서는 "customers" 개체 저장소에서 데이터를 읽기 위해 트랜잭션이 생성됩니다. `get()` 메서드는 ID가 1인 고객을 검색하는 데 사용됩니다.

​

5. 데이터 업데이트: `put()` 메서드는 객체 저장소의 데이터를 업데이트하는 데 사용됩니다.

​

예:

​

let transaction = db.transaction(["customers"], "readwrite");

let objectStore = transaction.objectStore("customers");

​

let customer = { id: 1, name: "John Doe", email: "johndoe@example.com", phone: "555-1234" };

let request = objectStore.put(customer);

​

request.onerror = function(event) {

// Handle errors updating data in the object store

};

​

request.onsuccess = function(event) {

// Data updated successfully in the object store

};

​

이 예제에서는 "customers" 개체 저장소를 읽고 쓰기 위해 트랜잭션이 생성됩니다. 고객 개체는 전화 번호로 업데이트되고 `put()` 메서드는 개체 저장소의 데이터를 업데이트하는 데 사용됩니다.

"Ink API"는 디지털 잉크 작업을 위한 기능을 제공하는 JavaScript API입니다. 이를 통해 개발자는 펜 또는 스타일러스 입력을 지원하는 응용 프로그램을 만들고 결과 잉크 스트로크를 조작 및 처리할 수 있습니다.

​

Ink API는 웹에서 디지털 잉크로 작업하기 위한 표준 개발에 중점을 둔 W3C(World Wide Web Consortium) 내의 그룹인 WIT(Web Ink and Text) 작업 그룹의 일부입니다.

​

다음은 잉크 API를 사용하여 잉크 스트로크를 캡처하고 표시하는 방법의 예입니다.

​

// Get a reference to the canvas element

var canvas = document.getElementById('canvas');

​

// Create a new InkCanvas object

var inkCanvas = new InkCanvas(canvas);

​

// Register an event handler for when the user starts drawing

inkCanvas.onBeginStroke = function (stroke) {

console.log('Begin stroke: ' + stroke.id);

};

​

// Register an event handler for when the user is actively drawing

inkCanvas.onMoveStroke = function (stroke) {

console.log('Move stroke: ' + stroke.id);

};

​

// Register an event handler for when the user finishes drawing

inkCanvas.onEndStroke = function (stroke) {

console.log('End stroke: ' + stroke.id);

};

​

// Register an event handler for when ink strokes are added to the canvas

inkCanvas.onAddStroke = function (stroke) {

console.log('Add stroke: ' + stroke.id);

};

​

// Register an event handler for when ink strokes are removed from the canvas

inkCanvas.onRemoveStroke = function (stroke) {

console.log('Remove stroke: ' + stroke.id);

};

​

이 예에서는 먼저 페이지의 캔버스 요소에 대한 참조를 얻습니다. 그런 다음 새 InkCanvas 개체를 만들고 사용자가 그림을 그리는 동안 발생할 수 있는 다양한 이벤트에 대한 이벤트 처리기를 등록합니다.

​

`onBeginStroke` 이벤트 핸들러는 사용자가 스트로크 그리기를 시작할 때 호출됩니다. `onMoveStroke` 이벤트 핸들러는 사용자가 캔버스에서 펜이나 스타일러스를 움직일 때 반복적으로 호출됩니다. `onEndStroke` 이벤트 핸들러는 사용자가 스트로크 그리기를 마치면 호출됩니다. `onAddStroke` 이벤트 핸들러는 새 스트로크가 캔버스에 추가될 때 호출되고 `onRemoveStroke` 이벤트 핸들러는 스트로크가 캔버스에서 제거될 때 호출됩니다.

​

다음은 Ink API를 사용하여 잉크 스트로크를 조작하는 방법의 예입니다.

​

// Get a reference to the canvas element

var canvas = document.getElementById('canvas');

​

// Create a new InkCanvas object

var inkCanvas = new InkCanvas(canvas);

​

// Create a new stroke with two points

var stroke = new InkStroke();

stroke.addPoint(100, 100);

stroke.addPoint(200, 200);

​

// Add the stroke to the canvas

inkCanvas.addStroke(stroke);

​

// Get all strokes on the canvas

var strokes = inkCanvas.getStrokes();

​

// Remove the first stroke

inkCanvas.removeStroke(strokes[0]);

​

이 예에서는 새 InkCanvas 개체를 다시 만들지만 이번에는 두 점이 있는 새 InkStroke 개체도 만듭니다. `addStroke` 메서드를 사용하여 이 스트로크를 캔버스에 추가합니다.

​

그런 다음 `getStrokes` 메서드를 사용하여 캔버스의 모든 스트로크를 검색하고 `removeStroke` 메서드를 사용하여 첫 번째 스트로크를 제거합니다.

​

이러한 예제는 Ink API의 기본 기능 중 일부를 보여줍니다. API는 잉크 데이터를 내보내고 가져오는 방법뿐만 아니라 다양한 색상 및 선 너비에 대한 지원을 포함하여 잉크 스트로크 작업을 위한 추가 메서드 및 속성을 제공합니다.

Intersection Observer API는 요소가 뷰포트에 들어오고 나가는 시기 또는 다른 요소와 교차하는 시기를 효율적으로 감지할 수 있는 JavaScript API입니다. 이는 이미지 또는 비디오 지연 로드, 무한 스크롤 또는 요소가 표시될 때 애니메이션 트리거에 특히 유용합니다.

​

다음은 Intersection Observer API를 사용하여 뷰포트에 있을 때만 이미지를 로드하는 방법을 보여주는 샘플 코드 스니펫입니다.

​

const images = document.querySelectorAll('img[data-src]');

​

const options = {

rootMargin: '0px',

threshold: 0.5

};

​

const observer = new IntersectionObserver((entries, observer) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

const img = entry.target;

img.src = img.dataset.src;

observer.unobserve(img);

}

});

}, options);

​

images.forEach(img => {

observer.observe(img);

});

​

이 예제에서는 먼저 로드하려는 이미지의 URL을 포함하는 `data-src` 속성이 있는 모든 `img` 요소를 선택합니다. 그런 다음 관찰된 요소가 뷰포트에 들어오거나 나올 때마다 호출되는 콜백 함수가 있는 `IntersectionObserver` 개체를 만듭니다.

​

`options` 객체는 뷰포트로 사용할 루트 요소(`root`), 뷰포트 주변 여백(`rootMargin`), 콜백이 트리거되기 전에 표시되어야 하는 요소 영역의 비율(`threshold`)을 지정합니다.

​

콜백 함수에서 관찰된 요소를 나타내는 각 `entry` 개체를 반복하고 `isIntersecting` 속성을 사용하여 현재 뷰포트와 교차하는지 여부를 확인합니다. 그렇다면 `img` 요소의 `src` 속성을 `data-src` 속성 값으로 설정하여 이미지를 로드한 다음 관찰자 개체에서 `unobserve` 메서드를 호출하여 관찰을 중지합니다.

​

마지막으로 각 img 요소에 대한 관찰자 개체의 `observe` 메서드를 호출하여 관찰을 시작합니다.

​

다음은 Intersection Observer API를 사용하여 요소가 표시될 때 애니메이션을 트리거하는 예입니다.

​

const targets = document.querySelectorAll('.animate-on-scroll');

​

const options = {

rootMargin: '0px',

threshold: 0.5

};

​

const observer = new IntersectionObserver((entries, observer) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('animate');

observer.unobserve(entry.target);

}

});

}, options);

​

targets.forEach(target => {

observer.observe(target);

});

​

이 예에서는 먼저 표시될 때 애니메이션을 적용하려는 `animate-on-scroll` 클래스가 있는 모든 요소를 선택합니다. 그런 다음 이전과 동일한 옵션으로 `IntersectionObserver` 개체를 만듭니다.

​

콜백 함수에서 `entry` 개체의 `isIntersecting` 속성을 확인하여 `target` 요소가 표시될 때 대상 요소에 `animate` 클래스를 추가합니다. 그런 다음 관찰자 개체에서 `unobserve` 메서드를 호출하여 `target` 요소 관찰을 중지합니다.

​

마지막으로 각 `target` 요소에 대한 관찰자 개체의 `observe` 메서드를 호출하여 관찰을 시작합니다. 요소가 뷰포트와 교차하면 `animate` 클래스가 추가되어 애니메이션이 트리거됩니다.

JavaScript Keyboard API는 웹 개발자가 키보드 이벤트 및 사용자 입력과 상호 작용할 수 있는 방법을 제공합니다. 이를 통해 개발자는 키보드 이벤트를 수신하고, 어떤 키가 눌렸는지 감지하고, 키 누름에 따라 특정 코드를 실행할 수 있습니다. 이러한 방식으로 Keyboard API를 사용하여 대화형 반응형 웹 애플리케이션을 만들 수 있습니다.

​

다음은 JavaScript Keyboard API를 사용하는 방법에 대한 몇 가지 예입니다.

​

1. 키 누름 감지

​

document.addEventListener('keydown', function(event) {

console.log('Key pressed: ' + event.key);

});

​

이 예제에서는 'keydown' 이벤트를 수신하는 문서 객체에 이벤트 리스너를 추가합니다. 키를 누르면 이벤트 객체가 매개변수로 함수에 전달되며, 어떤 키가 눌렸는지 확인하기 위해 'key' 속성에 액세스하는 데 사용됩니다.

​

2. 기본 조치 방지

​

document.addEventListener('keydown', function(event) {

if (event.key === 'Enter') {

event.preventDefault();

}

});

​

이 예제에서는 'keydown' 이벤트를 수신하는 문서 객체에 이벤트 리스너를 추가합니다. 'Enter' 키를 누르면 'preventDefault()' 메서드를 사용하여 기본 작업(이 경우 양식 제출)이 발생하지 않도록 합니다.

​

3. CSS 스타일 수정

​

document.addEventListener('keydown', function(event) {

if (event.key === 'ArrowUp') {

document.querySelector('body').style.backgroundColor = 'red';

} else if (event.key === 'ArrowDown') {

document.querySelector('body').style.backgroundColor = 'blue';

}

});

​

이 예제에서는 'keydown' 이벤트를 수신하는 문서 객체에 이벤트 리스너를 추가합니다. '위쪽 화살표' 키를 누르면 본문 요소의 배경색을 빨간색으로 수정하고 '아래쪽 화살표' 키를 누르면 배경색을 파란색으로 수정합니다.

​

4. 키 코드 사용

​

document.addEventListener('keydown', function(event) {

if (event.keyCode === 32) {

console.log('Space bar pressed');

}

});

​

이 예제에서는 'keydown' 이벤트를 수신하는 문서 객체에 이벤트 리스너를 추가합니다. 스페이스바(키 코드 32)를 누르면 메시지가 콘솔에 기록됩니다.

​

전반적으로 JavaScript Keyboard API는 웹 개발자가 반응형 및 대화형 웹 응용 프로그램을 만들 수 있는 강력한 도구입니다.