aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/api/request
diff options
context:
space:
mode:
Diffstat (limited to 'files/ko/web/api/request')
-rw-r--r--files/ko/web/api/request/credentials/index.html70
-rw-r--r--files/ko/web/api/request/index.html293
-rw-r--r--files/ko/web/api/request/request/index.html214
3 files changed, 577 insertions, 0 deletions
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
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>{{domxref("Request")}} 인터페이스의 <strong><code>credentials</code></strong> 읽기 전용 속성은 cross-origin 요청의 경우, user agent가 다른 도메인으로부터 cookie 들을 전달해야만 하는가 아닌가를 나타낸다. 이것은 XHR 의 withCredentials flag 과 비슷하지만, (2개가 아니라) 3가지 값이 사용 가능하다 :</p>
+
+<ul>
+ <li><code>omit</code>: 절대로 cookie 들을 전송하거나 받지 않는다.</li>
+ <li><code>same-origin</code>: URL이 호출 script 와 동일 출처(same origin)에 있다면, user credentials (cookies, basic http auth 등..)을 전송한다. <strong>이것은 default 값이다.</strong></li>
+ <li><code>include</code>: cross-origin 호출이라 할지라도 언제나 user credentials (cookies, basic http auth 등..)을 전송한다.</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var myCred = request.credentials;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>이 transaction에 사용할 credentials 를 나타내는 {{domxref("RequestCredentials")}} 값</p>
+
+<h2 id="Example">Example</h2>
+
+<p>다음의 snippet 에서, 우리는 {{domxref("Request.Request()")}} constructor 를 사용하여 (스크립트와 동일한 디렉토리의 이미지 파일을 위한) 새로운 요청(request)를 생성하고, 변수에 요청(request) credentials 을 저장한다.</p>
+
+<pre class="brush: js">var myRequest = new Request('flowers.jpg');
+var myCred = myRequest.credentials; // returns "same-origin" by default</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('Fetch','#dom-request-credentials','credentials')}}</td>
+ <td>{{Spec2('Fetch')}}</td>
+ <td>Initial definition</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Request.credentials")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
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
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>의 <strong><code>Request</code></strong>는 리퀘스트 리소스를 표현해주는 인터페이스입니다. </p>
+
+<p>{{domxref("Request.Request()")}} 생성자 메서드를 사용하는 것으로, 새로운 <code>Request</code>오브젝트를 생성할 수 있습니다. 이 인터페이스는 그리 자주 사용되지 않는 것으로 service worker의 {{domxref("FetchEvent.request")}}와 같은 별개의 API와 만나는 경우가 더 잦을 것입니다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("Request.Request()")}}</dt>
+ <dd>새로운 <code>Request</code> 객체를 생성합니다.</dd>
+</dl>
+
+<h2 id="프로퍼티">프로퍼티</h2>
+
+<dl>
+ <dt>{{domxref("Request.method")}} {{readonlyInline}}</dt>
+ <dd>Request 메서드 (<code>GET</code>, <code>POST</code> 같은것들)을 포함합니다.</dd>
+ <dt>{{domxref("Request.url")}} {{readonlyInline}}</dt>
+ <dd>Request의 URL을 포함합니다.</dd>
+ <dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt>
+ <dd>Request의 {{domxref("Headers")}}와 관련된 정보를 포함하고 있습니다.</dd>
+ <dt>{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}</dt>
+ <dd>리퀘스트의 컨텍스트 (예: <code>audio</code>, <code>image</code>, <code>iframe</code>)을 포함하고 잇습니다.</dd>
+ <dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt>
+ <dd>리퀘스트의 referrer 정보 (예:<code>client</code>)을 포함하고 있습니다.</dd>
+ <dt>{{domxref("Request.referrerPolicy")}} {{readonlyInline}}</dt>
+ <dd>Request의 referrer policy 정보 (예: <code>no-referrer</code>)를 포함하고 있습니다.</dd>
+ <dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt>
+ <dd>Request의 모드를 (예: <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code>) 포함하고 있습니다.</dd>
+ <dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt>
+ <dd>Request의 자격 증명서(credentials)  (예: <code>omit</code>, <code>same-origin</code>)를 포함하고 있습니다.</dd>
+ <dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt>
+ <dd>Request의 처리 방법을 위한 모드 (예: <code>follow</code>, <code>error</code>, or <code>manual</code>)를 포함합니다.</dd>
+ <dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt>
+ <dd>리퀘스트의 <a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a> 해쉬값(예:<code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>)을 포함합니다.</dd>
+ <dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt>
+ <dd>Request의 캐시모드를 (예: <code>default</code>, <code>reload</code>, <code>no-cache</code>) 포함합니다.</dd>
+</dl>
+
+<p><code>Request</code>는 {{domxref("Body")}}를 구현하고 있으므로 다음 프로퍼티 또한 사용 가능합니다.</p>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("ReadableStream")}}을 바디 컨텐츠로 가져올 수 있는 간단한 게터 프로퍼티입니다.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Response에서 바디가 사용되었는가의 여부를 {{domxref("Boolean")}} 형태로 표시합니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{domxref("Request.clone()")}}</dt>
+ <dd><code>Request</code>의 복사본을 생성합니다.</dd>
+</dl>
+
+<p><code>Request</code>는 {{domxref("Body")}}를 구현하고 있으므로 다음 프로퍼티 또한 사용 가능합니다.</p>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>{{domxref("ArrayBuffer")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>{{domxref("Blob")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>{{domxref("FormData")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>{{domxref("JSON")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>{{domxref("USVString")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: {{domxref("Body")}} 함수는 한번밖에 실행할 수 없습니다. 두번째부터는 빈 문자열, 혹은 ArrayBuffer이 반환됩니다.</p>
+</div>
+
+<h2 id="예시">예시</h2>
+
+<p>다음의 예시들은 Request를 이용해 스크립트와 같은 디렉터리에 존재하는 사진의 여러가지 정보를 불러오는 방법입니다. <code>Request()</code> 생성자를 사용하여 새로운 Request를 생성하여 몇몇 몇 프로퍼티를 반환합니다.</p>
+
+<pre class="brush: js">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
+</pre>
+
+<p>{{domxref("GlobalFetch.fetch()")}}의 매개변수에 Request 객체를 전달하는것으로 then 파라미터를 이끌어낼 수 있습니다. 아래는 그에대한 예시입니다.</p>
+
+<pre class="brush: js">fetch(myRequest)
+  .then(response =&gt; response.blob())
+ .then(blob =&gt; {
+ myImage.src = URL.createObjectURL(blob);
+ });</pre>
+
+<p>아래는 Body Payload가 필요한 API 요청을 다루는 예시입니다.  Request() 생성자를 사용하여 초기 데이터 및 본문 내용이 포함 된새 요청을 만듭니다.</p>
+
+<p> </p>
+
+<p>아래는 Body Payload가 필요한 API 요청을 다루는 예시입니다.  Request() 생성자를 사용하여 초기 데이터와 Body의 컨텐츠를 읽어올 수 있습니다.</p>
+
+<pre class="brush: js">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
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Body의 타입은 {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} 혹은 {{domxref("ReadableStream")}}로만 올 수 있습니다.  따라서 payload에 JSON객체를 추가하려면 해당 객체를 문자열로 지정할 수 있습니다.</p>
+</div>
+
+<p>그런 다음 Request 객체를 매개 변수로 {{domxref("GlobalFetch.fetch()")}} 호출에 전달하여 api 요청을 가져와 응답을 얻을 수 있습니다. 아래는 예시입니다.</p>
+
+<pre class="brush: js">fetch(myRequest)
+ .then(response =&gt; {
+ if (response.status === 200) {
+  return response.json();
+ } else {
+  throw new Error('Something went wrong on api server!');
+ }
+ })
+ .then(response =&gt; {
+ console.debug(response);
+  // ...
+ }).catch(error =&gt; {
+  console.error(error);
+ });</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">명세</th>
+ <th scope="col">상태</th>
+ <th scope="col">코멘트</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('Fetch','#request-class','Request')}}</td>
+ <td>{{Spec2('Fetch')}}</td>
+ <td>Initial definition</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_지원">브라우저 지원</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>기능</th>
+ <th>Chrome</th>
+ <th>Edge</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari (WebKit)</th>
+ </tr>
+ <tr>
+ <td>기본 지원</td>
+ <td>{{CompatChrome(42)}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop(39)}}<br>
+ 34</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatOpera(28)}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td><code>Request.body.formData</code></td>
+ <td>{{CompatChrome(60)}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatOpera(47)}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td><code>Request.integrity</code></td>
+ <td>{{CompatChrome(46)}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatOpera(33)}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td><code>Request.redirect</code></td>
+ <td>{{CompatChrome(46)}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatOpera(33)}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>Constructor <code>init</code> can accept <code>ReadableStream</code> <code>body</code></td>
+ <td>{{CompatChrome(43)}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}<sup>[1]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatOpera(33)}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>기능</th>
+ <th>Android Webview</th>
+ <th>Chrome for Android</th>
+ <th>Edge</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>기본 지원</td>
+ <td>{{CompatChrome(42)}}</td>
+ <td>{{CompatChrome(42)}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatOperaMobile(28)}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td><code>Request.body.formData</code></td>
+ <td>{{CompatChrome(60)}}</td>
+ <td>{{CompatChrome(60)}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatOperaMobile(47)}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td><code>Request.integrity</code></td>
+ <td>{{CompatChrome(46)}}</td>
+ <td>{{CompatChrome(46)}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatOperaMobile(33)}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td><code>Request.redirect</code></td>
+ <td>{{CompatChrome(46)}}</td>
+ <td>{{CompatChrome(46)}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatOperaMobile(33)}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>Constructor <code>init</code> can accept <code>ReadableStream</code> <code>body</code></td>
+ <td>{{CompatChrome(43)}}</td>
+ <td>{{CompatChrome(43)}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}<sup>[1]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatOperaMobile(33)}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 읽기전용 스트림은 파이어폭스에서 사용 가능하며, <code>dom.streams.enabled</code>와 <code>javascript.options.streams</code> 설정에 숨어있습니다.</p>
+
+<h2 id="관련항목">관련항목</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
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
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p><code><strong>Request()</strong></code> 생성자는 새로운  {{domxref("Request")}} 객체를 생성하도록 도와줍니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">var myRequest = new Request(input, init);</pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><em>input</em></dt>
+ <dd>취득한 리소스를 정의합니다. 이하의 값을 파라미터로 넣을 수 있습니다.
+ <ul>
+ <li>취득하고 싶은 리소스의 URL을 담은 {domxref("USVString")}}.</li>
+ <li>Request 객체의 클론 생성을 위해 입력할 {{domxref("Request")}} 객체. 기존의 request 객체로 새로운 동일한 객체를 생성할때, 다음과 같은 보안에 관련된 예외가 검출될 수 있습니다.</li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>리퀘스트를 적용할 커스텀 설정을 포함한 옵션오브젝트. 설정 가능한 옵션은 다음과 같습니다.
+ <ul>
+ <li><code>method</code>: <code>GET</code>, <code>POST</code>과 같은 리퀘스트 메소드.</li>
+ <li><code>headers</code>: {{domxref("Headers")}}객체 또는 {{domxref("ByteString")}}를 포함하는 리퀘스트에 추가하는 헤더.</li>
+ <li><code>body</code>: 리퀘스트에 추가할 바디.  {{domxref("Blob")}}이나, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}}, 또한 {{domxref("ReadableStream")}} 객체를 사용할 수 있습니다.Request객체가 GET이나 HEAD메서드를 사용하는 경우, 바디를 포함하지 않습니다.</li>
+ <li><code>mode</code>: Request에서 사용할 모드. <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, 또한 <code>navigate</code>이 사용 가능하며, 기본값은 <code>cors</code>입니다. 47버전 이전의 크롬에서는 기본값이 <code>no-cors</code> 이며 크롬 47버전 이후로 <code>same-origin</code>가 사용 가능하게 되었습니다.</li>
+ <li><code>credentials</code>: Request에서 사용할 자격 증명서(Request Credential)입니다.<code>omit</code>, <code>same-origin</code>, 또는 <code>include</code>를 사용할 수 있습니다.기본값은 <code>omit</code>.이며, 크롬 47 이전의 기본값은 <code>same-origin</code> 입니다. 크롬 47 이후로부터<code>include</code>가 사용 가능하게 되었습니다.</li>
+ <li><code>cache</code>: Request에서 사용할 <a href="/en-US/docs/Web/API/Request/cache">cache mode</a> 입니다.</li>
+ <li><code>redirect</code>: Request에서 사용할 리다이렉트 모드입니다. <code>follow</code>, <code>error</code>, <code>manual</code>.이 사용 가능합니다. 크롬 47 이전 버전에서의 기본값은 <code>manual</code> 이며, 47 이후로부터 <code>follow</code> 가 사용 가능하게 되었습니다.</li>
+ <li><code>referrer</code>: <code>no-referrer</code>나 <code>client</code>, URL을 지정하는 {{domxref("USVString")}}입니다.. 기본값은 <code>client</code>입니다.</li>
+ <li><code>integrity</code>: <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>같은 Request의 하위 리소스 무결성(<a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a>) 값을 포함합니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="에러">에러</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col"><strong>타입</strong></th>
+ <th scope="col"><strong>내용</strong></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>TypeError</code></td>
+ <td><a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>부터, http://user:password@example.com와 같인 credential을 포함하는 경우 <code>Request()</code> 는 타입 에러를 반환합니다.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="예시">예시</h2>
+
+<p> </p>
+
+<p><a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">Fetch Request example</a>에서는, 생성자를 사용해 새로운 Requst 객체를 생성하고 나서 {{domxref("GlobalFetch.fetch")}}인터페이스를 이용해 Request로 읽어온 결과를 취득하고 있습니다. 특정 사진을 가져와서 사용할 수 있게 만들기 위해서  MIME타입을 설정하고, Response의 {{domxref("Body.blob")}}를 반환합니다. 그 후로 오브젝트 URL을 생성해 {{htmlelement("img")}}요소를 표시하도록 합니다. <a href="http://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>를 참고해주시기 바랍니다.</p>
+
+<pre>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;
+});</pre>
+
+<p><a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request-with-init">Fetch Request with init example</a>에서는 <font face="Courier New">fetch()를 실행할 때 마다, </font>init객체를 전달하는 것 이외에는 거의 동일한 기능을 수행합니다. <a href="http://mdn.github.io/fetch-examples/fetch-request-with-init/">Fetch Request init live </a>를 참조해주시기 바랍니다.</p>
+
+<pre>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) {
+ ...
+});</pre>
+
+<p>동일한 효과를 얻기 위해 fetch 호출자에 init객체를 전달하는 것에 주목해주시기 바랍니다. 예를 들면...</p>
+
+<pre>fetch(myRequest,myInit).then(function(response) {
+  ...
+});</pre>
+
+<p>Request 객체ㅡ이 클론을 생성하기 위해서 <code>Request()</code> 생성자에 {{domxref("Request")}} 를 전달하고 있습니다.（이것은  {{domxref("Request.clone","clone()")}} 메서드의 호출자와 같습니다.）</p>
+
+<pre>var copy = new Request(myRequest);
+</pre>
+
+<p><strong>노트</strong>：마지막의 예시는 <a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorkers</a>안에서만 사용 가능합니다。</p>
+
+<h2 id="사용">사용</h2>
+
+<table>
+ <tbody>
+ <tr>
+ <th scope="col">사용</th>
+ <th scope="col">상태</th>
+ <th scope="col">꼬릿말</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('Fetch','#dom-request','Request()')}}</td>
+ <td>{{Spec2('Fetch')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_지원현황">브라우저 지원현황</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<table>
+ <tbody>
+ <tr>
+ <th>기능</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari (WebKit)</th>
+ </tr>
+ <tr>
+ <td>기본 서포트</td>
+ <td>{{ CompatChrome(42.0) }} [1]<br>
+  </td>
+ <td>{{ CompatGeckoDesktop(39)}} [2]</td>
+ <td>{{ CompatNo }}</td>
+ <td>
+ <p>29 [3]</p>
+ </td>
+ <td>{{ CompatNo }}</td>
+ </tr>
+ <tr>
+ <td>스트리밍 리스폰스 바디</td>
+ <td>{{CompatChrome(43.0)}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+ <tr>
+ <th>기능</th>
+ <th>Android</th>
+ <th>Android Webview</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>Firefox OS (Gecko)</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ <th>Chrome for Android</th>
+ </tr>
+ <tr>
+ <td>기본 지원</td>
+ <td>{{ CompatNo }}</td>
+ <td>{{ CompatChrome(42) }} [1]</td>
+ <td>{{ CompatNo }}</td>
+ <td>{{ CompatNo }}</td>
+ <td>{{ CompatNo }}</td>
+ <td>{{ CompatNo }}</td>
+ <td>{{ CompatNo }}</td>
+ <td>{{ CompatChrome(42.0) }} [1]</td>
+ </tr>
+ <tr>
+ <td>스트리밍 리스폰시브 바디</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatChrome(43.0)}} </td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatChrome(43.0)}} </td>
+ </tr>
+ </tbody>
+</table>
+
+<p>[1] 초기 파라미터의 기본값의 일부는 Chrome 47부터 변경되었스빈다. 상세한 내용은 프로퍼티 섹션을 참고해주시기 바랍니다.</p>
+
+<p>[2] 34는 설정에서 변경할 수 있습니다.</p>
+
+<p>[3] 28는 설정에서 변경할 수 있습니다.</p>
+
+<h2 id="관련항목">관련항목</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/ja/docs/Web/HTTP">HTTP</a></li>
+</ul>
+
+<p> </p>
+
+<ul>
+ <li> </li>
+</ul>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-10 07:26:04 +0000