본문 바로가기

전체 글

(41)
4. File API HTML5의 DOM으로 추가된 File API를 사용해서 웹 컨텐츠가 사용자에게 로컬 파일을 선택한 후 파일의 컨텐츠를 읽도록 요청가능. 태그나 드래긍 앤 드랍으로도 사용 선택한 파일에 접근 하나의 파일만 선택한 경우, 리스트의 첫 번째 파일만 고려하면됨 const selectedFile = document.getElementById('input').files[0]; change 이벤트를 통해 FileList에 접근할수있다. 단, 아래와같이 EventTarget.addEventListner()를 사용해야한다. const inputElement = document.getElementById("input"); inputElement.addEventListener("change", handleFiles, fa..
3. WHATWG 클라이언트 측 세션 및 영구 저장소 Web Storage API는 서버가 아닌 클라이언트 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다. 이는 key/value 쌍을 저장할 수 있는 브라우저. 쿠키보다 직관적인 매커니즘을 제공하며 4KB밖에 이용못하는 쿠키에 반해 5MB까지 이용가능하다. Web Storage의 두가지 메커니즘 - 세션 스토리지 (sessionStorage) : 페이지 세션이 유지되는 동안 사용할 수 있는 별도의 저장공간을 유지 (브라우저가 열려있는한에서 데이터를 유지) window.sessionStorage속성을 통해 사용 - 로컬 스토리지 (localStorage) : 브라우저가 닫히고 다시 열려도 데이터를 유지 window.localStorage속성을 통해 사용
2. 온라인/오프라인 이벤트 - navigator.onLine : true(온라인), false(오프라인) 값을 보관하는 속성 사용자가 해당 메뉴항목을 '오프라인 모드'로 전환할때마다 갱신된다 "online" "offline" 이벤트 이 두가지 이벤트는 브라우저가 온라인과 오프라인 모드를 전환할 때 마다 각 페이지의 에서 발생함. document.body -> document로 전달되고 window에서 종료됨. 두가지 모두 취소가 불가능한 이벤트임. 아래와 같이 몇 가지 방법으로 해당 이벤트에 대한 리스너를 등록 할 수있다. window, document, document.body에서 addEventListner를 사용. JS의 Function에서 document나 document.body에 .ononline, .onoffline ..
1. 애플리케이션 캐시 웹기반의 애플리케이션들이 오프라인에서도 실행되도록 해주는 매커니즘. 캐시된 애플리케이션은 사용자가 오프라인 상태에서 새로고침을 클릭할 때 올바르게 불러와 작동하며 다음과같은 장점이 있다. 오프라인 브라우징 : 오프라인에서의 사이트 탐색 속도 : 로컬에 리소르를 캐싱하여 로딩속도를 향상 서버 부하 감소 : 브라우저는 서버에서 변경된 리소스만 다운받음 애플리케이션 캐시 활성화 ... 태그에 manifest속성을 추가하여 애플리케이션 캐시를 활성화한다.
2. WebRTC (Real Time Communication) WebRTC (Real Time Communication)란 웹 어플리케이션 및 사이트들이 별도의 소프트웨어 없이 음성, 영상 미디어, 텍스트 파일같은 데이터를 브라우저끼리 주고 받을 수 있게 만든 기술이다. 별도의 플러그인 없이 화상회의 및 데이터공유가 가능하다. 3가지 대표 API 1. MediaStream 사용자의 카메라와 마이크 같은 곳의 데이터 스트림에 접근합니다. 우리의 애플리케이션이 사용자의 음성, 영상 데이터를 채집해 올 때 자주 사용하게 됩니다. 2. RTCPeerConnection 암호화 및 대역폭 관리를 하는 기능을 가지고 있고, 오디오 또는 비디오 연결을 담당합니다. 애플리케이션이 채집한 음성 및 영상 데이터를 서로 주고 받는 채널을 추상화하였다고 생각하면 됩니다. 3. RTCDat..
1. Web Sockets / 서버에서의 이벤트 수신 Web Sockets 웹 소켓은 사용자의 브라우저와 서버 사이의 통신세션을 설정 할 수 있게 하는 고급기술. 개발자는 웹 소켓 API를 통해 서버로 메세지를 보내고, 폴링없이 서버의 응답을 받는것이 가능하다. *폴링(polling) : 동기화와 충돌 회피를 목적으로 하나의 장치가 다른 장치의 상태를 주기적으로 검사하는 행위. 서버에서의 이벤트 수신(클라이언트 측) - EventSource : 서버가 보낸 이벤트 API를 내포. const evtSource = new EventSource("ssedemo.php"); - message : 이벤트 소스를 인스터화 한 후 서버에서 메시지를 전달받음. evtSource.onmessage = function(event) { const newElement = doc..
4. text-overflow / 웹폰트 / text-decoration text-overflow 박스 안에 내용이 넘칠 때 텍스트를 어떻게 처리할지 지정하는 속성. 아래 2가지 조건을 충족할 경우에만 적용됨. 더보기 1. overflow속성값이 hidden, scroll, auto일때 2. white-space : nowrap 또는 텍스트가 다음 줄로 이동하지 않는 경우 overflow : hidden; white-space : nowrap; - text-overflow : clip / ellipsis / "-" 1. clip(기본값) : 텍스트를 자름 2. ellipsis : 잘린 텍스트를 생략 부호로 표시. 3. string : 잘린 텍스트를 지정한 문자열로 표시. (브라우저 지원 확인 필요) hyphens fdw @font-face 웹 브라우저에게 다운받을 서체의 이름..
3. animation CSS로 자바스크립트없이 간단한 애니메이션 구현. 1. animation-delay = 요소가 로드되고나서 딜레이 되는 시간 2. animation-direction = 애니메이션이 종료되고 정방향으로 시작할건지 역방향으로 시작할건지 3. animation-name = @keyframe을 사용하여 애니메이션의 중간상태를 지정 4. animation-iteration-count = 애니메이션이 몇번 반복될지 설정. infinite를 지정하여 무한반복 5. animation-play-state : 애니메이션을 멈추거나 다시 시작 6. animation-timing-function : 중간 상태전환을 어떤 시간간격으로 진행할지 지정 7. animation-fill-mode : 애니메이션이 시작되기 전이나 끝나..