HTML/HTML 기본문법77 HTML SSE API SSE(Server-Sent Events)를 통해 웹 페이지가 서버에서 업데이트를 가져올 수 있다. Server-Sent Events - 단방향 메시징 서버에서 발송된 이벤트는 웹 페이지가 자동으로 서버에서 업데이트를 받는 경우이다. 이는 이전에도 가능했지만 웹 페이지에서 사용 가능한 업데이트가 있는지 문의해야 한다. 서버에서 보낸 이벤트의 경우 업데이트가 자동으로 수행된다. 예: Facebook/Twitter 업데이트, 주가 업데이트, 뉴스 피드, 스포츠 결과 등. Server-Sent 이벤트 알림 수신 EventSource 개체는 서버에서 보낸 이벤트 알림을 수신하는 데 사용된다: 서버 업데이트 가져오기 새 EventSource 개체를 만들고 업데이트를 보내는 페이지의 URL을 지정한다(이 예에서는 .. 2023. 6. 27. HTML Web Workers API 웹 작업자는 페이지 성능에 영향을 주지 않고 백그라운드에서 실행되는 JavaScript 이다. 웹워커란 무엇인가?(HTML Web Worker) HTML 페이지에서 스크립트를 실행하면 스크립트가 완료될 때까지 페이지가 응답하지 않는다. 웹 작업자는 페이지 성능에 영향을 주지 않고 다른 스크립트와 독립적으로 백그라운드에서 실행되는 JavaScript 이다. 웹 작업자가 백그라운드에서 실행되는 동안 클릭, 항목 선택 등 원하는 모든 작업을 계속할 수 있다. HTML 웹워커 예제 아래 예제에서는 백그라운드에서 숫자를 셀 수 있는 간단한 웹 작업자를 만든다: Count numbers: HTML 웹워커 시작 HTML 웹워커 중지 Note: Internet Explorer 9 및 이전 버전에서는 웹 작업자를 지원하.. 2023. 6. 26. HTML 웹 스토리지 API(HTML Web Storage API) HTML 웹 스토리지, 쿠키보다 더 좋다. HTML 웹 스토리지란 무엇인가? 웹 스토리지를 사용하면 웹 응용 프로그램이 사용자의 브라우저 내에 로컬로 데이터를 저장할 수 있다. HTML5 이전에는 애플리케이션 데이터가 모든 서버 요청에 포함된 쿠키에 저장되어야 했다. 웹 스토리지는 웹 사이트 성능에 영향을 미치지 않고 보다 안전하고 많은 양의 데이터를 로컬에 저장할 수 있다. 쿠키와 달리 저장소 제한은 훨씬 크고(최소 5MB) 정보는 서버로 전송되지 않는다. 웹 스토리지는 오리진별(도메인 및 프로토콜별)이다. 모든 페이지는 한 원본에서 동일한 데이터를 저장하고 액세스할 수 있다. HTML 웹 스토리지 오브젝트(Web Storage Objects) HTML 웹 저장소는 클라이언트에 데이터를 저장하기 위한 .. 2023. 6. 25. HTML Drage and Drop API HTML에서 모든 요소를 drag and drop을 할 수 있다. HTML Drag & Drop 드래그와 드롭은 매우 일반적인 기능입니다. 개체를 "잡아서" 다른 위치에 끌어서 놓는 기능이다. HTML Drag&Drop 예제 W3Schools 이미지를 직사각형으로 끌어서 놓는다 W3Schools 이미지를 직사각형으로 끕니다: 위의 코드를 실행하면 아래 그림과 같다. 아래 w3schools.com 이미지를 사각형에 드래그앤드롭을 한 결과가 아래 그림이다. 위의 예제에 대해 하나씩 설명해 나가보자. 요소를 드래그할 수 있게 만들기 첫째: 요소를 끌 수 있도록 하려면 draggable 특성을 true로 설정합니다: 드래그 대상 설정하기-dragrstart()와 setData() 그런 다음 요소를 끌 때 수행할.. 2023. 6. 24. 이전 1 2 3 4 ··· 20 다음
