From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/api/request/credentials/index.html | 70 ++++++ files/ko/web/api/request/index.html | 293 ++++++++++++++++++++++++ files/ko/web/api/request/request/index.html | 214 +++++++++++++++++ 3 files changed, 577 insertions(+) create mode 100644 files/ko/web/api/request/credentials/index.html create mode 100644 files/ko/web/api/request/index.html create mode 100644 files/ko/web/api/request/request/index.html (limited to 'files/ko/web/api/request') diff --git a/files/ko/web/api/request/credentials/index.html b/files/ko/web/api/request/credentials/index.html new file mode 100644 index 0000000000..ed7186a6d9 --- /dev/null +++ b/files/ko/web/api/request/credentials/index.html @@ -0,0 +1,70 @@ +--- +title: Request.credentials +slug: Web/API/Request/credentials +tags: + - API + - Cookies + - Fetch + - Networking + - Property + - Reference + - Security + - credentials + - request +translation_of: Web/API/Request/credentials +--- +
{{APIRef("Fetch")}}
+ +

{{domxref("Request")}} 인터페이스의 credentials 읽기 전용 속성은 cross-origin 요청의 경우, user agent가 다른 도메인으로부터 cookie 들을 전달해야만 하는가 아닌가를 나타낸다. 이것은 XHR 의 withCredentials flag 과 비슷하지만, (2개가 아니라) 3가지 값이 사용 가능하다 :

+ + + +

Syntax

+ +
var myCred = request.credentials;
+ +

Value

+ +

이 transaction에 사용할 credentials 를 나타내는 {{domxref("RequestCredentials")}} 값

+ +

Example

+ +

다음의 snippet 에서, 우리는 {{domxref("Request.Request()")}} constructor 를 사용하여 (스크립트와 동일한 디렉토리의 이미지 파일을 위한) 새로운 요청(request)를 생성하고, 변수에 요청(request) credentials 을 저장한다.

+ +
var myRequest = new Request('flowers.jpg');
+var myCred = myRequest.credentials; // returns "same-origin" by default
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-request-credentials','credentials')}}{{Spec2('Fetch')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Request.credentials")}}

+ +

See also

+ + diff --git a/files/ko/web/api/request/index.html b/files/ko/web/api/request/index.html new file mode 100644 index 0000000000..73eae676e6 --- /dev/null +++ b/files/ko/web/api/request/index.html @@ -0,0 +1,293 @@ +--- +title: Request +slug: Web/API/Request +translation_of: Web/API/Request +--- +
{{APIRef("Fetch")}}
+ +

Fetch API의 Request는 리퀘스트 리소스를 표현해주는 인터페이스입니다. 

+ +

{{domxref("Request.Request()")}} 생성자 메서드를 사용하는 것으로, 새로운 Request오브젝트를 생성할 수 있습니다. 이 인터페이스는 그리 자주 사용되지 않는 것으로 service worker의 {{domxref("FetchEvent.request")}}와 같은 별개의 API와 만나는 경우가 더 잦을 것입니다.

+ +

생성자

+ +
+
{{domxref("Request.Request()")}}
+
새로운 Request 객체를 생성합니다.
+
+ +

프로퍼티

+ +
+
{{domxref("Request.method")}} {{readonlyInline}}
+
Request 메서드 (GET, POST 같은것들)을 포함합니다.
+
{{domxref("Request.url")}} {{readonlyInline}}
+
Request의 URL을 포함합니다.
+
{{domxref("Request.headers")}} {{readonlyInline}}
+
Request의 {{domxref("Headers")}}와 관련된 정보를 포함하고 있습니다.
+
{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}
+
리퀘스트의 컨텍스트 (예: audio, image, iframe)을 포함하고 잇습니다.
+
{{domxref("Request.referrer")}} {{readonlyInline}}
+
리퀘스트의 referrer 정보 (예:client)을 포함하고 있습니다.
+
{{domxref("Request.referrerPolicy")}} {{readonlyInline}}
+
Request의 referrer policy 정보 (예: no-referrer)를 포함하고 있습니다.
+
{{domxref("Request.mode")}} {{readonlyInline}}
+
Request의 모드를 (예: cors, no-cors, same-origin, navigate) 포함하고 있습니다.
+
{{domxref("Request.credentials")}} {{readonlyInline}}
+
Request의 자격 증명서(credentials)  (예: omit, same-origin)를 포함하고 있습니다.
+
{{domxref("Request.redirect")}} {{readonlyinline}}
+
Request의 처리 방법을 위한 모드 (예: follow, error, or manual)를 포함합니다.
+
{{domxref("Request.integrity")}} {{readonlyInline}}
+
리퀘스트의 subresource integrity 해쉬값(예:sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)을 포함합니다.
+
{{domxref("Request.cache")}} {{readonlyInline}}
+
Request의 캐시모드를 (예: default, reload, no-cache) 포함합니다.
+
+ +

Request는 {{domxref("Body")}}를 구현하고 있으므로 다음 프로퍼티 또한 사용 가능합니다.

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
{{domxref("ReadableStream")}}을 바디 컨텐츠로 가져올 수 있는 간단한 게터 프로퍼티입니다.
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
Response에서 바디가 사용되었는가의 여부를 {{domxref("Boolean")}} 형태로 표시합니다.
+
+ +

메서드

+ +
+
{{domxref("Request.clone()")}}
+
Request의 복사본을 생성합니다.
+
+ +

Request는 {{domxref("Body")}}를 구현하고 있으므로 다음 프로퍼티 또한 사용 가능합니다.

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
{{domxref("ArrayBuffer")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.
+
{{domxref("Body.blob()")}}
+
{{domxref("Blob")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.
+
{{domxref("Body.formData()")}}
+
{{domxref("FormData")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.
+
{{domxref("Body.json()")}}
+
{{domxref("JSON")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.
+
{{domxref("Body.text()")}}
+
{{domxref("USVString")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.
+
+ +
+

Note: {{domxref("Body")}} 함수는 한번밖에 실행할 수 없습니다. 두번째부터는 빈 문자열, 혹은 ArrayBuffer이 반환됩니다.

+
+ +

예시

+ +

다음의 예시들은 Request를 이용해 스크립트와 같은 디렉터리에 존재하는 사진의 여러가지 정보를 불러오는 방법입니다. Request() 생성자를 사용하여 새로운 Request를 생성하여 몇몇 몇 프로퍼티를 반환합니다.

+ +
const myRequest = new Request('http://localhost/flowers.jpg');
+
+const myURL = myRequest.url; // http://localhost/flowers.jpg
+const myMethod = myRequest.method; // GET
+const myCred = myRequest.credentials; // omit
+
+ +

{{domxref("GlobalFetch.fetch()")}}의 매개변수에 Request 객체를 전달하는것으로 then 파라미터를 이끌어낼 수 있습니다. 아래는 그에대한 예시입니다.

+ +
fetch(myRequest)
+  .then(response => response.blob())
+  .then(blob => {
+    myImage.src = URL.createObjectURL(blob);
+  });
+ +

아래는 Body Payload가 필요한 API 요청을 다루는 예시입니다.  Request() 생성자를 사용하여 초기 데이터 및 본문 내용이 포함 된새 요청을 만듭니다.

+ +

 

+ +

아래는 Body Payload가 필요한 API 요청을 다루는 예시입니다.  Request() 생성자를 사용하여 초기 데이터와 Body의 컨텐츠를 읽어올 수 있습니다.

+ +
const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'});
+
+const myURL = myRequest.url; // http://localhost/api
+const myMethod = myRequest.method; // POST
+const myCred = myRequest.credentials; // omit
+const bodyUsed = myRequest.bodyUsed; // true
+
+ +
+

Note: Body의 타입은 {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} 혹은 {{domxref("ReadableStream")}}로만 올 수 있습니다.  따라서 payload에 JSON객체를 추가하려면 해당 객체를 문자열로 지정할 수 있습니다.

+
+ +

그런 다음 Request 객체를 매개 변수로 {{domxref("GlobalFetch.fetch()")}} 호출에 전달하여 api 요청을 가져와 응답을 얻을 수 있습니다. 아래는 예시입니다.

+ +
fetch(myRequest)
+  .then(response => {
+    if (response.status === 200) {
+      return response.json();
+    } else {
+      throw new Error('Something went wrong on api server!');
+    }
+  })
+  .then(response => {
+    console.debug(response);
+    // ...
+  }).catch(error => {
+    console.error(error);
+  });
+ +

명세

+ + + + + + + + + + + + + + +
명세상태코멘트
{{SpecName('Fetch','#request-class','Request')}}{{Spec2('Fetch')}}Initial definition
+ +

브라우저 지원

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
기본 지원{{CompatChrome(42)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(39)}}
+ 34		{{CompatNo}}{{CompatOpera(28)}}{{CompatNo}}
Request.body.formData{{CompatChrome(60)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatOpera(47)}}{{CompatNo}}
Request.integrity{{CompatChrome(46)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatOpera(33)}}{{CompatNo}}
Request.redirect{{CompatChrome(46)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatOpera(33)}}{{CompatNo}}
Constructor init can accept ReadableStream body{{CompatChrome(43)}}{{CompatVersionUnknown}}{{CompatNo}}[1]{{CompatNo}}{{CompatOpera(33)}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
기능Android WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
기본 지원{{CompatChrome(42)}}{{CompatChrome(42)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatOperaMobile(28)}}{{CompatNo}}
Request.body.formData{{CompatChrome(60)}}{{CompatChrome(60)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatOperaMobile(47)}}{{CompatNo}}
Request.integrity{{CompatChrome(46)}}{{CompatChrome(46)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatOperaMobile(33)}}{{CompatNo}}
Request.redirect{{CompatChrome(46)}}{{CompatChrome(46)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatOperaMobile(33)}}{{CompatNo}}
Constructor init can accept ReadableStream body{{CompatChrome(43)}}{{CompatChrome(43)}}{{CompatVersionUnknown}}{{CompatNo}}[1]{{CompatNo}}{{CompatOperaMobile(33)}}{{CompatNo}}
+
+ +

[1] 읽기전용 스트림은 파이어폭스에서 사용 가능하며, dom.streams.enabled와 javascript.options.streams 설정에 숨어있습니다.

+ +

관련항목

+ + diff --git a/files/ko/web/api/request/request/index.html b/files/ko/web/api/request/request/index.html new file mode 100644 index 0000000000..0eab065ff9 --- /dev/null +++ b/files/ko/web/api/request/request/index.html @@ -0,0 +1,214 @@ +--- +title: Request() +slug: Web/API/Request/Request +translation_of: Web/API/Request/Request +--- +
{{APIRef("Fetch")}}
+ +

Request() 생성자는 새로운  {{domxref("Request")}} 객체를 생성하도록 도와줍니다.

+ +

문법

+ +
var myRequest = new Request(input, init);
+ +

파라미터

+ +
+
input
+
취득한 리소스를 정의합니다. 이하의 값을 파라미터로 넣을 수 있습니다. +
    +
  • 취득하고 싶은 리소스의 URL을 담은 {domxref("USVString")}}.
    • +
  • Request 객체의 클론 생성을 위해 입력할 {{domxref("Request")}} 객체. 기존의 request 객체로 새로운 동일한 객체를 생성할때, 다음과 같은 보안에 관련된 예외가 검출될 수 있습니다.
    • +
+
+
init {{optional_inline}}
+
리퀘스트를 적용할 커스텀 설정을 포함한 옵션오브젝트. 설정 가능한 옵션은 다음과 같습니다. +
    +
  • method: GET, POST과 같은 리퀘스트 메소드.
    • +
  • headers: {{domxref("Headers")}}객체 또는 {{domxref("ByteString")}}를 포함하는 리퀘스트에 추가하는 헤더.
    • +
  • body: 리퀘스트에 추가할 바디.  {{domxref("Blob")}}이나, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}}, 또한 {{domxref("ReadableStream")}} 객체를 사용할 수 있습니다.Request객체가 GET이나 HEAD메서드를 사용하는 경우, 바디를 포함하지 않습니다.
    • +
  • mode: Request에서 사용할 모드. cors, no-cors, same-origin, 또한 navigate이 사용 가능하며, 기본값은 cors입니다. 47버전 이전의 크롬에서는 기본값이 no-cors 이며 크롬 47버전 이후로 same-origin가 사용 가능하게 되었습니다.
    • +
  • credentials: Request에서 사용할 자격 증명서(Request Credential)입니다.omit, same-origin, 또는 include를 사용할 수 있습니다.기본값은 omit.이며, 크롬 47 이전의 기본값은 same-origin 입니다. 크롬 47 이후로부터include가 사용 가능하게 되었습니다.
    • +
  • cache: Request에서 사용할 cache mode 입니다.
    • +
  • redirect: Request에서 사용할 리다이렉트 모드입니다. follow, error, manual.이 사용 가능합니다. 크롬 47 이전 버전에서의 기본값은 manual 이며, 47 이후로부터 follow 가 사용 가능하게 되었습니다.
    • +
  • referrer: no-referrer나 client, URL을 지정하는 {{domxref("USVString")}}입니다.. 기본값은 client입니다.
    • +
  • integrity: sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=같은 Request의 하위 리소스 무결성(subresource integrity) 값을 포함합니다.
    • +
+
+
+ +

에러

+ + + + + + + + + + + + + + +
타입내용
TypeErrorFirefox 43부터, http://user:password@example.com와 같인 credential을 포함하는 경우 Request() 는 타입 에러를 반환합니다.
+ +

예시

+ +

 

+ +

Fetch Request example에서는, 생성자를 사용해 새로운 Requst 객체를 생성하고 나서 {{domxref("GlobalFetch.fetch")}}인터페이스를 이용해 Request로 읽어온 결과를 취득하고 있습니다. 특정 사진을 가져와서 사용할 수 있게 만들기 위해서  MIME타입을 설정하고, Response의 {{domxref("Body.blob")}}를 반환합니다. 그 후로 오브젝트 URL을 생성해 {{htmlelement("img")}}요소를 표시하도록 합니다. Fetch Request live를 참고해주시기 바랍니다.

+ +
var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(response) {
+  var objectURL = URL.createObjectURL(response);
+  myImage.src = objectURL;
+});
+ +

Fetch Request with init example에서는 fetch()를 실행할 때 마다, init객체를 전달하는 것 이외에는 거의 동일한 기능을 수행합니다. Fetch Request init live 를 참조해주시기 바랍니다.

+ +
var myImage = document.querySelector('img');
+
+var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg',myInit);
+
+fetch(myRequest).then(function(response) {
+  ...
+});
+ +

동일한 효과를 얻기 위해 fetch 호출자에 init객체를 전달하는 것에 주목해주시기 바랍니다. 예를 들면...

+ +
fetch(myRequest,myInit).then(function(response) {
+  ...
+});
+ +

Request 객체ㅡ이 클론을 생성하기 위해서 Request() 생성자에 {{domxref("Request")}} 를 전달하고 있습니다.（이것은  {{domxref("Request.clone","clone()")}} 메서드의 호출자와 같습니다.）

+ +
var copy = new Request(myRequest);
+
+ +

노트：마지막의 예시는 ServiceWorkers안에서만 사용 가능합니다。

+ +

사용

+ + + + + + + + + + + + + + +
사용상태꼬릿말
{{SpecName('Fetch','#dom-request','Request()')}}{{Spec2('Fetch')}} 
+ +

브라우저 지원현황

+ +

{{ CompatibilityTable() }}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
기능ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
기본 서포트{{ CompatChrome(42.0) }} [1]
+  		{{ CompatGeckoDesktop(39)}} [2]{{ CompatNo }} +

29 [3]

+ 		{{ CompatNo }}
스트리밍 리스폰스 바디{{CompatChrome(43.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
기능AndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
기본 지원{{ CompatNo }}{{ CompatChrome(42) }} [1]{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatChrome(42.0) }} [1]
스트리밍 리스폰시브 바디{{CompatNo}}{{CompatChrome(43.0)}} {{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}} 
+ +

[1] 초기 파라미터의 기본값의 일부는 Chrome 47부터 변경되었스빈다. 상세한 내용은 프로퍼티 섹션을 참고해주시기 바랍니다.

+ +

[2] 34는 설정에서 변경할 수 있습니다.

+ +

[3] 28는 설정에서 변경할 수 있습니다.

+ +

관련항목

+ + + +

 

+ + -- cgit v1.2.3-54-g00ecf