Jun 개발노트

Page visibility, Geolocation, File, Web Timing

August 30, 2020

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 : 페이지 이벤트에 대한 타임스탬프가 나와있다.

Written by Junho You 배운것을 기록하자