Page visibility, Geolocation, File, Web Timing

Page visibility

1. 정의
   • 사용자가 현재 페이지를 보고 있는지? 조작하고 있는지 확인하는 api
2. 사용법
   • document.hidden
     • 페이지가 백그라운드 상태인지 확인
     • 브라우저가 최소화되있거나, 탭이 비활성인 경우 true
   • document.visibility
     • visible : 탭이 활성상태이며, 페이지가 부분적으로 보이는 상태
     • hidden : 브라우저가 최소화되거나, 탭이 비활성
     • prerender : 사전 렌더링 상태
   • visibilitychange : visibility 상태가 변화면 이벤트가 발생

Geolocation

1. 정의
   • 사용자의 위치정보를 받아 올 수 있는 api
   • 사용자에게 위치정보를 요청할 수 있는 알람이 보여지면 승인을 해야지 조회가능
2. 사용법
   • getCurrentPostion(position => console.log(position)
     • 매개변수로 위치(경도, 위도, 정확도 등)가 주어진다.
   • watchPosion
     • getCurrentPostion와 같이 매개변수로 위치정보가 주어지며, 위치가 변화면 계속해서 호출된다.
   • clearWatatch(watchPosion 식별자)
     • watchPosion을 해제할 수 있다.

File

1. 정의

   • 파일 입력요소에 접근가능하게 하는 api
   • <input type="file"/>에서 사용자 올린 파일에 대해서 정보(name, size, type, lastModified)를 알 수 있다.
   • File 인터페이스는 Blob 인터페이스를 확장한것이다.

2. 사용법

   • e.target.files : input에 사용자 올린 파일에 대해서 접근 할 수 있다.
   • reader = new FileReader(); << reader.result로 함수의 결과값을 들어간다.
     • readAsArrayBuffer(file) : 파일을 읽어 arrayBuffer를 result 프로퍼티에 저장
     • readAsBinaryString(file) : 바이너리 데이터로 변경하여 result 프로퍼티에 저장
     • readAsDataURL(file) : 데이터 URL을 result 프로퍼티에 저장
     • readAsText(file, encoding) : 덱스트로 읽고 result에 저장하며, 두번째 인자로 인코딩 타입을 받는다.

3. 예제

    <input type="file" id="fileInput"/>
    <img id="inputImg" width="300"/>
   
    // 파일을 읽는다.
    const sourceImageUrl = document.getElementById("fileInput").files;
   
    // 읽은 파일을 사진의 src로 적용한다.
    document.getElementById('merged-image').src = window.URL.createObjectURL(sourceImageUrl[0]);
   
    // FormData를 생성해서 file을 넣어줘 post로 요청한다.
    // FormData는 XML용으로 특수한 객체 형태라서 console.log로 볼수 없다.
    // for - of , ...으로 확인가능하
    const data = new FormData(t)
    data.append('file', sourceImageUrl[0])
    fetch("localhost", {
       headers: {
         enctype: "multipart/form-data",
       },
     method: 'POST',
     body : data
   })

Web Timing

1. 정의
   • 브라우저 내부의 측정 시스템에 접근하는 api
2. 사용법
   • performance.memory : 브라우저 메모리 확인
   • performance.navigator : 리다이렉트 횟수, 처음 접속이지, 새로고침인지, 앞/뒤로 갔는지 확인
   • performance.timing : 페이지 이벤트에 대한 타임스탬프가 나와있다.