Web APIs

Web APIs

Web APIs

설명

웹 애플리케이션 개발을 할 때 사용할 수 있는 다양한 WEB API에 대한 레퍼런스이다. 일반적으로 JavaScript와 함께 사용되지만 항상 그런 것은 아님을 참고하길 바란다.

계층 탐색

  • Asynchronous Works

    비동기적인 작업 처리 API
    • Body

      response(응답), request(요청)의 본문을 나타내는 믹스인(mixin) 오브젝트이다.
      • Methods

        • arrayBuffer()

          Response 스트림이 완료될 때까지 읽어 들인다. ArrayBuffer로 처리되는 Promise 객체를 반환한다.
        • blob()

          Response 스트림을 가져와서 완료할 때 까지 읽어 들인다. Blob으로 처리되는 Promise 객체를 반환한다.
        • formData()

          Response 스트림을 가져와서 완료할 때 까지 읽어 들인다. FormData 객체로 처리되는 Promise 객체를 반환한다.
        • json()

          Response 스트림을 가져와서 완료할 때까지 읽어 들인다. body 텍스트를 JSON으로 파싱하여 처리된 Promise 객체를 반환한다.
        • text()

          Response 스트림을 가져와서 완료할 때 까지 읽어 들인다. USV 문자열(text)로 처리되는 Promise 객체를 반환한다. 응 답은 항상 UTF-8로 디코딩된다.
      • Properties

        • body

          본문(body) 내용의 ReadableStream 객체를 참조(Getter)하는데 사용되는 프로퍼티이다.
        • bodyUsed

          본문(body)을 읽었는지의 여부를 나타내는 boolean이다.
    • FormData

      form 필드와 그 값을 나타내는 일련의 key/value 쌍을 쉽게 생성할 수 있는 방법을 제공한다.
      • Constructor

        • FormData()

          새로운 FormData를 인스턴스를 생성한다.
      • [[Prototype]]

        • Methods

          메소드
          • append()

            기존 필드 키에 새 값을 추가하거나 키가 없다면 추가한다.
          • delete()

            키와 그 값을 제거한다.
          • entries()

            객체에 포함된 모든 key/value 쌍을 허용하는 반복가능한 iterator 객체를 반환한다.
          • get()

            지정된 키와 연관된 첫 번째 값을 반환한다. 값이 여러개인 경우 모든 값을 원한다면 getAll() 메소드를 이용한다.
          • getAll()

            지정된 키와 연관된 모든 값을 반환한다.
          • has()

            지정된 특정 키가 존재하는지를 boolean으로 반환한다.
          • keys()

            객체의 모든 키를 갖는 iterator 객체를 반환한다.
          • set()

            기존 키에 새로운 값을 설정하거나 존재하지 않을 경우 key/value 값을 추가한다.
          • values()

             객체에 포함된 모든 value를 갖는 iterator 객체를 반환한다.
    • Request

      요청 리소스를 표현해 주는 인터페이스이다.
    • Response

      Fetch() 메소드에서 응답을 받을 경우를 나타내는 객체이다.
      • Constructor

        • Response()

          새로운 Response 객체를 생성한다.
      • [[Prototype]]

        • Methods

        • Properties

          • Body Interface Properties

          • headers

            응답에 대한 Headers 객체를 참조한다.
          • ok

            응답이 성공했는지를 나타내는 논리(boolean) 값이다. 200에서 299 범위가 성공한 상태이며 true를 갖는다.
          • redirected

            응답이 리디렉션의 결과인지 여부를 나타낸다.
          • status

            응답 상태 코드이다.
          • statusText

            상태 코드에 해당하는 상태 메시지이다. 예를 들어서 200의 경우 'OK' 값을 갖는다.
          • trailers

            HTTP Trailer 헤더의 값에 대한 Response.headers가 있는 응답과 연관된 Headers 오브젝트로 해석되는 Promise 객체를 참조한다.
          • type

            응답 유형을 조회한다.
          • url

            응답 URL을 조회한다.
          • useFinalURL

            응답의 최종 URL인지 여부를 나타내는 boolean 이다.
  • Canvas

    • CanvasRenderingContext2D

      <canvas> 요소의 드로잉 표면에 2D 렌더링 컨텍스트를 제공한다. 도형, 텍스트, 이미지 및 기타 객체를 그리는데 사용된다.
      • [[Prototype]]

        • Methods

          • clearRect()

            시작점(x, y) 및 크기(width, height)로 정의된 사각형의 모든 픽셀을 투명한 검정으로 설정하여 이전에 그린 개체를 지운다.
          • drawImage()

            캔버스에 이미지를 그리는 다양한 방법을 제공한다.
          • fillRect()

            width와 height에 따라 크기가 결정되는 x, y에 위치에 채워진 사각형을 그린다.
        • Properties

    • RenderingContext

      요소 내에서 그래픽 렌더링 컨텍스트를 나타내는 인터페이스 중 하나인 CanvasRenderingContext2D, WebGLRenderingContext 또는 WebGL2RenderingContext를 참조할 수 있는 WebDL typedef이다.
  • File

    파일 처리와 관련된 API
    • Blob

      파일류의 불변하는 미가공 데이터를 나타내는 객체이다. 텍스트와 이진 데이터 형태로 읽을 수 있으며 ReadableStream 으로 변환한 후 메소드를 사용해 데이터를 처리할 수 있다.
  • Media

  • URL

    • URL

      URL을 분석, 생성, 정규화, 인코딩할 때 사용하며 URL의 각 구성 요소를 쉽게 읽고 쓸수 있는 속성을 제공한다.
      • Constructor

        생성자
        • URL()

          절대 URL 문자열 또는 상대 URL 문자열과 기본 URL 문자열을 사용하여 지정된 URL을 참조하는 새 URL 객체를 생성한다.
      • Static

        • Methods

          • createObjectURL()

            고유한 blob URL을 포함하는 DOMString을 반환한다.
          • revokeObjectURL()

            URL.createObjectURL()을 사용하여 이전에 생성된 객체를 취소한다.
      • [[Prototype]]

        • Methods

          • toJSON()

            전체 URL을 포함하는 USVString을 조회한다. URL.prototype.href 속성과 동일한 문자열을 조회한다.
          • toString()

            전체 URL을 포함하는 USVString 값을 조회한다. URL.prototype.href와 동일하지만 값을 수정하는데는 사용할 수 없다.
        • Properties

          • hash

            URL의 조각 식별자 뒤에 오는 '#'을 포함하는 USVString 이다.
          • host

            도메인과 포트가 지정된 경우 ':' 이 포함된 USVString 이다.
          • hostname

            URL 도메인을 포함하는 USVString이다.
          • href

            전체 URL을 포함하는 USVString을 조회한다.
          • origin

            URL의 출처, 즉 스키마, 도메인 및 포트를 포함하는 USVString이다.
          • password

            도메인 이름 앞에 지정된 암호를 포함하는 USVString 이다.
          • pathname

            URL의 경로가 뒤따르는 초기 '/'를 포함하는 USVString이다.
          • port

            URL의 포트 번호를 포함하는 USVString 이다.
          • protocol

            마지막 ':'을 포함하여 URL의 프로토콜 체계를 포함하는 USVString 이다.
          • search

            URL의 매개 변수 문자열을 나타내는 USVString이다. 매개 변수가 지정되면 문자열에 '?'로 시작하는 모든 매개 변수가 포함되는 문자열을 조회한다.
          • searchParams

            검색에서 찾은 개별 쿼리 매개 변수에 액세스하는데 사용할 수 있는 URLSearchParams 객체를 참조한다.
          • username

            도메인 이름 앞에 지정된 사용자 이름을 포함하는 USVString 이다.
    • URLSearchParams

      URL의 쿼리 문자열에 대한 유틸리티 메소드들이 구성되어 있다.
      • Constructor

        생성자
      • [[Prototype]]

        • Methods

          • append()

            인수로 지정된 키 / 값 쌍을 새 검색 매개 변수(쿼리)로 추가한다.
          • delete()

            모든 검색 매개변수(쿼리스트링:querystring) 목록에서 인수로 지정된 매개 변수 및 관련 값을 제거한다.
          • entries()

            인스턴스에 포함된 모든 키 / 값 쌍을 반복할 수 있는 반복자를 반환한다. 각 쌍의 키와 값은 USVString이다.
          • forEach()

            콜백 함수를 지정해 인스턴스에 포함된 모든 값에 대해 대응 처리를 할 수 있다.
          • get()

            인수로 주어진 검색 매개 변수와 관련된 첫 번째 값을 반환한다.
          • getAll()

            인수로 주어진 검색 매개 변수와 관련된 모든 값들을 배열로 반환한다.
          • has()

            인스턴스에 인수로 지정된 매개 변수가 있는지의 여부를 논리(Boolean) 값으로 반환한다.
          • keys()

            인스턴스에 포함된 모든 키를 반복할 수 있는 반복자를 반환한다. 키는 USVString 이다.
          • set()

            인수로 주어진 검색 매개 변수와 연관된 값을 인수로 지정된 값으로 설정한다. 일치하는 값이 여러 개인 경우에는 다른 값을 삭제한다. 존재하지 않는 경우에는 새로 생성한다.
          • sort()

            인스턴스에 포함된 모든 키 / 값 쌍을 정렬하고 undefined를 반환한다. 정렬 순서는 키의 유니코드 코드 포인트를 따른다.
          • toString()

            모든 검색 매개변수의 키와 값을 URL에서 사용하기에 적합한 쿼리스트링(querystring)으로 반환한다.
          • values()

            인스턴스에 포함된 모든 값을 반복할 수 있는 반복자로 반환한다.
  • Web Animation

    • Animation

      Animation 인터페이스는 자바스크립트에 의해 구현되는 단일 애니메이션 플레이어를 나타내며 애니메이션 컨트롤 또는 애니메이션 타임라인(timeline)을 제공한다.
      • Constructor

        생성자
        • Animation()

          새로운 Animation 인스턴스 생성자 함수
      • Events

        • oncancel

          애니메이션이 취소되었을 때 발생한다.
        • onfinish

          애니메이션이 종료될 때 실행한다.
        • onremove

          애니메이션이 제거될 때(즉, 활성 바꾸기 상태) 실행한다.
      • [[Prototype]]

        • Methods

          • cancel()

            모든 키프레임 효과를 지우고 재생을 중단한다.
          • commitStyles()

            애니메이션이 제거된 후에도 애니메이션의 끝 스타일링 상태를 애니메이션 중인 요소에 적용한다.
          • finish()

            애니메이션이 재생 중인지 또는 반전 중인지에 따라 애니메이션의 끝을 찾는다.
          • pause()

            애니메이션 재생을 일시 중지한다.
          • persist()

            웹브라우저의 채우기 애니메이션 자동 제거 동작으로 인해 애니메이션이 제거될 때 애니메이션이 명시적으로 유지된다.
          • play()

            애니메이션 재생을 시작 또는 일시 정지후 재개하거나 이전에 애니메이션을 완료한 경우 애니메이션을 다시 시작한다.
          • reverse()

            애니메이션이 재생중인 경우 재생 방향을 반대로 한다. 애니메이션이 완료되거나 재생 전이면 처음부터 끝까지 재생된다.
          • updatePlaybackRate()

            재생 위치를 먼저 동기화한 후 애니메이션의 속도를 설정한다.
        • Properties

          • currentTime

            실행 또는 일시 중지 여부와 관계없이 애니메이션의 현재 시간(밀리초:milliseconds)을 조회한다. 타임라인이 없거나 아직 실행되기 전이라면 null 값을 갖는다.
          • effect

            KeyframeEffect 객체를 참조한다.
          • finished

            애니메이션에 대해 현재 완료된 Promise를 반환한다.
          • id

            애니메이션을 식별할 수 있는 id를 설정하거나 조회할 수 있다.
          • pending

            애니메이션이 현재 재생 시작 또는 실행중인 애니메이션 일시 중지와 같은 비동기 작업을 기다리고 있는지 여부를 조회한다.
          • playbackRate

            애니메이션의 재생 속도를 조회하거나 설정할 수 있다.
          • playState

            애니메이션의 재생 상태를 설명하는 열거된 값을 조회한다.
          • ready

            애니메이션에 대한 준비된 Promise를 조회한다.
          • replaceState

            애니메이션의 교체 상태를 조회한다.
          • startTime

            애니메이션이 재생 되어야 하는 시간을 예약하거나 예약된 시간을 조회할 수 있다.
          • timeline

            애니메이션과 관련된 타임라인을 조회하거나 설정한다.
  • Web Storage

    웹 스토리지 API는 웹브라우저에서 쿠키를 사용하는 것 보다 훨씬 직관적으로 key/value 데이터를 안정하게 저장할 수 있는 메커니즘을 제공한다.
    • CacheStorage

      캐시(cache)를 다루를 인터페이스이다.
    • Storage

      특정 도메인을 위한 세션 저장소 또는 로컬 저장소의 접근 경로로서 데이터를 추가하고 수정하거나 삭제할 수 있는 기능을 제공한다.
      • Constructor

        생성자 함수가 없고 window.sessionStorage나 window.localStorage 프로퍼티로 사용이 가능하다.
      • [[Prototype]]

        • Methods

          • clear()

            저장소의 모든 키를 저장소에서 제거한다.
          • getItem()

            인수로 주어진 키에 연결된 값을 반환한다.
          • key()

            인수로 주어진 n에 대하여 저장소의 n 번째 항목의 키를 반환한다.
          • removeItem()

            인수로 주어진 키를 저장소에서 제거한다.
          • setItem()

            인수로 주어진 키와 값을 새로 저장하거나 재설정한다.
        • Properties

          • length

            Storage 객체에 저장된 데이터 항목의 개수를 조회한다.
  • Web Worker

    • WindowOrWorkerGlobalScope

      Window 및 WorkerGlobalScope 에서 구현 가능한 인터페이스를 제공한다.
      • Methods

        • clearInterval()

          setInterval() 메소드로 등록되어 주기적으로 호출되는 동작을 취소할 수 있다.
        • clearTimeout()

          setTimeout() 메소드로 등록된 함수 실행 예약을 취소할 수 있다.
        • fetch()

          네트워크에서 리소스를 가져오는 프로세스를 응답을 사용할 수 있게 되면 Promise 객체를 반환한다. Promise의 Response은 요청에 대한 응답을 나타내는 객체로 해석된다.
        • setInterval()

          설정된 시간 단위로 주기적으로 함수를 실행한다.
        • setTimeout()

          함수 실행을 지정된 시간에 예약하여 한번 실행한다. 예약이 완료되면 타이머 ID를 반환한다.
      • Properties

    • Worker

      웹브라우저의 기본 메인 쓰레드(Thread)와는 별개의 쓰레드(Thread)를 생성하여 스크립트를 실행할 수 있도록 해주는 인터페이스이다.
      • Constructor

        • Worker()

          지정된 URL에서 스크립트를 실행하는 전용 Web Worker를 생성한다.
      • [[Prototype]]

        • Event handlers

        • Events

        • Methods

          • postMessage()

            JavaScript 객체로 구성된 메시지를 Worker 내부 Scope로 보낸다.
    • WorkerGlobalScope

      모든 Worker의 스코프를 나타내는 인터페이스이다.
  • Etc

    웹브라우저 개발 도구
    • Console

      console 객체는 브라우저의 디버깅 콘솔(Firefox 웹 콘솔 등)에 접근할 수 있는 메서드를 제공한다.
      • Constructor

        창이 열릴 때 마다 생성되어 window 전역 객체의 console 프로퍼티에 참조된다.
      • [[Prototype]]

        Console API는 개발자가 코드의 설정 지점에서 메시지 또는 변수 값 로깅, 디버깅 작업을 수행할 수 있는 기능을 제공한다.
        • Methods

          메소드
          • dir()

            인수로 지정된 객체의 특성에 대한 트리 구조로 탐색할 수 있다.
          • log()

            인수로 지정된 객체 또는 변수를 콘솔에 출력한다.