[fetch] 번역

Author: Violet-Bora-Lee

5-network/01-fetch/article.md

@@ -1,158 +1,158 @@
 
-# Fetch
+# fetch
 
-JavaScript can send network requests to the server and load new information whenever it's needed.
+자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있습니다.
 
-For example, we can use a network request to:
+네트워크 요청은 다음과 같은 경우에 이뤄집니다.
 
-- Submit an order,
-- Load user information,
-- Receive latest updates from the server,
-- ...etc.
+- 주문 전송
+- 사용자 정보 읽기
+- 서버에서 최신 변경분 가져오기
+- 등등
 
-...And all of that without reloading the page!
+그런데 이 모든 것들은 페이지 새로고침 없이도 가능합니다.
 
-There's an umbrella term "AJAX" (abbreviated <b>A</b>synchronous <b>J</b>avaScript <b>A</b>nd <b>X</b>ML) for network requests from JavaScript. We don't have to use XML though: the term comes from old times, that's why that word is there. You may have heard that term already.
+AJAX(<b>A</b>synchronous <b>J</b>avaScript <b>A</b>nd <b>X</b>ML, 비동기적 JavaScript와 XML)라는 용어를 들어보신 분이 있으실 겁니다. AJAX는 서버에서 추가 정보를 비동기적으로 가져올 수 있게 해주는 포괄적인 기술을 나타내는 용어로, 만들어진 지 오래되었습니다. AJAX에 XML이 포함된 이유가 바로 이 때문이죠.
 
-There are multiple ways to send a network request and get information from the server.
+AJAX 이외에도 서버에 네트워크 요청을 보내고 정보를 받아올 수 있는 방법은 다양합니다.
 
-The `fetch()` method is modern and versatile, so we'll start with it. It's not supported by old browsers (can be polyfilled), but very well supported among the modern ones.
+그중 이번 챕터에선 모던하고 다재다능한 `fetch()` 메서드에 대해 소개해드리려 합니다. `fetch()`는 구식 브라우저에선 지원하진 않지만(폴리필을 쓰면 사용 가능) 대부분의 모던 브라우저가 지원합니다.
 
-The basic syntax is:
+`fetch()` 기본 문법은 다음과 같습니다.
 
 ```js
 let promise = fetch(url, [options])
 ```
 
-- **`url`** -- the URL to access.
-- **`options`** -- optional parameters: method, headers etc.
+- **`url`** -- 접근하고자 하는 URL
+- **`options`** -- 선택 매개변수, method나 header 등을 지정할 수 있음
 
-Without `options`, that is a simple GET request, downloading the contents of the `url`.
+`options`에 아무것도 넘기지 않으면 요청은 `GET` 메서드로 진행되어 `url`로부터 컨텐츠가 다운로드 됩니다.
 
-The browser starts the request right away and returns a promise that the calling code should use to get the result.
+`fetch()`를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스가 반환됩니다. 반환되는 프라미스는 `fetch()`를 호출하는 코드에서 사용됩니다.
 
-Getting a response is usually a two-stage process.
+응답은 대개 두 단계를 거쳐 진행됩니다.
 
-**First, the `promise`, returned by `fetch`, resolves with an object of the built-in [Response](https://fetch.spec.whatwg.org/#response-class) class as soon as the server responds with headers.**
+**먼저, 서버에서 응답 헤더를 받자마자 `fetch` 호출 시 반환받은 `promise`가 내장 클래스 [Response](https://fetch.spec.whatwg.org/#response-class)의 인스턴스와 함께 이행 상태가 됩니다.**
 
-At this stage we can check HTTP status, to see whether it is successful or not, check headers, but don't have the body yet.
+이 단계는 아직 본문(body)이 도착하기 전이지만, 개발자는 응답 헤더를 보고 요청이 성공적으로 처리되었는지 아닌지를 확인할 수 있습니다.
 
-The promise rejects if the `fetch` was unable to make HTTP-request, e.g. network problems, or there's no such site. Abnormal HTTP-statuses, such as 404 or 500 do not cause an error.
+네트워크 문제나 존재하지 않는 사이트에 접속하려는 경우같이 HTTP 요청을 보낼 수 없는 상태에선 프라미스는 거부상태가 됩니다.  
 
-We can see HTTP-status in response properties:
+HTTP 상태는 응답 프로퍼티를 사용해 확인할 수 있습니다.
 
-- **`status`** -- HTTP status code, e.g. 200.
-- **`ok`** -- boolean, `true` if the HTTP status code is 200-299.
+- **`status`** -- HTTP 상태 코드(예: 200)
+- **`ok`** -- 불린 값. HTTP 상태 코드가 200과 299 사이일 경우 `true`
 
-For example:
+예시:
 
 ```js
 let response = await fetch(url);
 
-if (response.ok) { // if HTTP-status is 200-299
-  // get the response body (the method explained below)
+if (response.ok) { // HTTP 상태 코드가 200~299일 경우
+  // 응답 몬문을 받습니다(관련 메서드는 아래에서 설명).
   let json = await response.json();
 } else {
   alert("HTTP-Error: " + response.status);
 }
 ```
 
-**Second, to get the response body, we need to use an additional method call.**
+**두 번째 단계에선 추가 메서드를 호출해 응답 본문을 받습니다.**
 
-`Response` provides multiple promise-based methods to access the body in various formats:
+`response` 에는 프라미스를 기반으로 하는 다양한 메서드가 있습니다. 이 메서드들을 사용하면 다양한 형태의 응답 본문을 처리할 수 있습니다. 
 
-- **`response.text()`** -- read the response and return as text,
-- **`response.json()`** -- parse the response as JSON,
-- **`response.formData()`** -- return the response as `FormData` object (explained in the [next chapter](info:formdata)),
-- **`response.blob()`** -- return the response as [Blob](info:blob) (binary data with type),
-- **`response.arrayBuffer()`** -- return the response as [ArrayBuffer](info:arraybuffer-binary-arrays) (low-level representaion of binary data),
-- additionally, `response.body` is a [ReadableStream](https://streams.spec.whatwg.org/#rs-class) object, it allows you to read the body chunk-by-chunk, we'll see an example later.
+- **`response.text()`** -- 응답을 읽고 텍스트를 반환합니다,
+- **`response.json()`** -- 응답을 JSON 형태로 파싱합니다,
+- **`response.formData()`** -- 응답을 `FormData` 객체 형태로 반환합니다. `FormData`에 대한 자세한 내용은 [다음 챕터](info:formdata)에서 다루겠습니다.
+- **`response.blob()`** -- 응답을 [Blob](info:blob)(타입이 있는 바이너리 데이터) 형태로 반환합니다.
+- **`response.arrayBuffer()`** -- 응답을 [ArrayBuffer](info:arraybuffer-binary-arrays)(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태로 반환합니다.
+- 이 외에도 `response.body`가 있는데, [ReadableStream](https://streams.spec.whatwg.org/#rs-class) 객체인 `response.body`를 사용하면 응답 본문을 청크 단위로 읽을 수 있습니다. 자세한 용례는 곧 살펴보겠습니다.
 
-For instance, let's get a JSON-object with latest commits from GitHub:
+지금까지 배운 내용을 토대로 GitHub에서 마지막 커밋을 JSON 객체 형태로 받아봅시다.
 
 ```js run async
-let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
+let url = 'https://api.github.com/repos/javascript-tutorial/ko.javascript.info/commits';
 let response = await fetch(url);
 
 *!*
-let commits = await response.json(); // read response body and parse as JSON
+let commits = await response.json(); // 응답 본문을 읽고 JSON 형태로 파싱함
 */!*
 
 alert(commits[0].author.login);
 ```
 
-Or, the same without `await`, using pure promises syntax:
+위 예시를 `await` 없이 프라미스만 사용하면 다음과 같이 바꿀 수 있습니다.
 
 ```js run
 fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
   .then(response => response.json())
   .then(commits => alert(commits[0].author.login));
 ```
 
-To get the response text, `await response.text()` instead of `.json()`:
+응답을 텍스트 형태로 얻으려면 `.json()` 대신 `await response.text()`를 사용하면 됩니다.
 
 ```js run async
 let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
 
-let text = await response.text(); // read response body as text
+let text = await response.text(); // 응답 본문을 텍스트 형태로 읽습니다.
 
 alert(text.slice(0, 80) + '...');
 ```
 
-As a show-case for reading in binary format, let's fetch and show a logo image of ["fetch" specification](https://fetch.spec.whatwg.org) (see chapter [Blob](info:blob) for details about operations on `Blob`):
+이번엔 `fetch`를 사용해 [fetch 명세서](https://fetch.spec.whatwg.org) 우측 상단에 있는 로고(바이너리 데이터)를 가져와 보겠습니다. 참고로 `Blob`에 대한 자세한 내용은 [링크](info:blob)에서 살펴볼 수 있습니다.
 
 ```js async run
 let response = await fetch('/article/fetch/logo-fetch.svg');
 
 *!*
-let blob = await response.blob(); // download as Blob object
+let blob = await response.blob(); // 응답을 Blob 객체 형태로 다운로드받습니다.
 */!*
 
-// create <img> for it
+// 다운로드받은 Blob을 담을 <img>를 만듭니다.
 let img = document.createElement('img');
 img.style = 'position:fixed;top:10px;left:10px;width:100px';
 document.body.append(img);
 
-// show it
+// 이미지를 화면에 보여줍니다.
 img.src = URL.createObjectURL(blob);
 
-setTimeout(() => { // hide after three seconds
+setTimeout(() => { // 3초 후 이미지를 숨깁니다.
   img.remove();
   URL.revokeObjectURL(img.src);
 }, 3000);
 ```
 
 ````warn
-We can choose only one body-reading method.
+본문을 읽을 때 사용되는 메서드는 딱 하나만 사용할 수 있습니다.
 
-If we've already got the response with `response.text()`, then `response.json()` won't work, as the body content has already been processed.
+`response.text()`를 사용해 응답을 얻었다면 본문의 콘텐츠는 모두 처리 된 상태이기 때문에 `response.json()`은 동작하지 않습니다.
 
 ```js
-let text = await response.text(); // response body consumed
-let parsed = await response.json(); // fails (already consumed)
+let text = await response.text(); // 응답 본문이 소비됩니다.
+let parsed = await response.json(); // 실패
 ````
 
-## Response headers
+## 응답 헤더
 
-The response headers are available in a Map-like headers object in `response.headers`.
+응답 헤더는 `response.headers`에 맵과 유사한 형태로 저장됩니다.
 
-It's not exactly a Map, but it has similar methods to get individual headers by name or iterate over them:
+맵은 아닙니다. 하지만 맵과 유사한 메서드를 지원하죠. 이 메서드들을 사용하면 헤더 일부만 추출하거나 헤더 전체를 순회할 수 있습니다.
 
 ```js run async
 let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
 
-// get one header
+// 헤더 일부를 추출
 alert(response.headers.get('Content-Type')); // application/json; charset=utf-8
 
-// iterate over all headers
+// 헤더 전체를 순회
 for (let [key, value] of response.headers) {
   alert(`${key} = ${value}`);
 }
 ```
 
-## Request headers
+## 요청 헤더
 
-To set a request header in `fetch`, we can use the `headers` option. It has an object with outgoing headers, like this:
+`headers` 옵션을 사용하면 `fetch`에 요청 헤더를 설정할 수 있습니다. `headers`엔 아래와 같이 다양한 헤더 정보가 담긴 객체를 넘기게 됩니다.
 
 ```js
 let response = fetch(protectedUrl, {
@@ -162,7 +162,7 @@ let response = fetch(protectedUrl, {
 });
 ```
 
-...But there's a list of [forbidden HTTP headers](https://fetch.spec.whatwg.org/#forbidden-header-name) that we can't set:
+그런데 `headers`를 사용해 설정할 수 없는 헤더도 있습니다. 금지된 헤더 전체 목록은 [링크](https://fetch.spec.whatwg.org/#forbidden-header-name)에서 확인할 수 있습니다.
 
 - `Accept-Charset`, `Accept-Encoding`
 - `Access-Control-Request-Headers`
@@ -185,22 +185,22 @@ let response = fetch(protectedUrl, {
 - `Proxy-*`
 - `Sec-*`
 
-These headers ensure proper and safe HTTP, so they are controlled exclusively by the browser.
+이런 제약은 HTTP를 목적에 맞고 안전하게 사용할 수 있도록 하려고 만들어졌습니다. 금지 목록에 있는 헤더는 브라우저만 배타적으로 설정, 관리할 수 있습니다.
 
-## POST requests
+## POST 요청
 
-To make a `POST` request, or a request with another method, we need to use `fetch` options:
+`GET` 이외의 요청을 보내려면 추가 옵션을 사용해야 합니다.
 
-- **`method`** -- HTTP-method, e.g. `POST`,
-- **`body`** -- the request body, one of:
-  - a string (e.g. JSON-encoded),
-  - `FormData` object, to submit the data as `form/multipart`,
-  - `Blob`/`BufferSource` to send binary data,
-  - [URLSearchParams](info:url), to submit the data in `x-www-form-urlencoded` encoding, rarely used.
+- **`method`** -- HTTP 메서드(예: `POST`)
+- **`body`** -- 요청 본문으로 다음 항목 중 하나이어야 합니다.
+  - 문자열(예: JSON 문자열)
+  - `FormData`객체 -- `form/multipart` 형태로 데이터를 전송하기 위해 쓰입니다.
+  - `Blob`나 `BufferSource` -- 바이너리 데이터 전송을 위해 쓰입니다.
+  - [URLSearchParams](info:url) -- 데이터를 `x-www-form-urlencoded` 형태로 보내기 위해 쓰이는데, 요즘엔 잘 사용하지 않습니다.
 
-The JSON format is used most of the time.
+대부분은 JSON을 요청 본문에 실어 보내게 됩니다.
 
-For example, this code submits `user` object as JSON:
+`user` 객체를 본문에 실어 보내는 예시를 살펴봅시다.
 
 ```js run async
 let user = {
@@ -222,21 +222,21 @@ let result = await response.json();
 alert(result.message);
 ```
 
-Please note, if the request `body` is a string, then `Content-Type` header is set to `text/plain;charset=UTF-8` by default.
+`POST` 요청을 보낼 때 주의할 점은 요청 `본문`이 문자열일 때 `Content-Type` 헤더가 `text/plain;charset=UTF-8`로 기본 설정된다는 점입니다.
 
-But, as we're going to send JSON, we use `headers` option to send `application/json` instead, the correct `Content-Type` for JSON-encoded data.
+하지만 위 예시에선 JSON을 전송하고 있기 때문에 `headers`에 제대로 된 `Content-Type`인 `application/json`을 설정해 주었습니다.
 
-## Sending an image
+## 이미지 전송하기
 
-We can also submit binary data with `fetch` using `Blob` or `BufferSource` objects.
+`Blob`이나 `BufferSource` 객체를 사용하면 `fetch`로 바이너리 데이터를 전송할 수 있습니다.
 
-In this example, there's a `<canvas>` where we can draw by moving a mouse over it. A click on the "submit" button sends the image to the server:
+예시를 살펴봅시다. `<canvas>`에 마우스를 움직여 이미지를 만들고 '전송' 버튼을 눌러 이미지를 서버에 전송해보겠습니다.
 
 ```html run autorun height="90"
 <body style="margin:0">
   <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas>
 
-  <input type="button" value="Submit" onclick="submit()">
+  <input type="button" value="전송" onclick="submit()">
 
   <script>
     canvasElem.onmousemove = function(e) {
@@ -252,7 +252,7 @@ In this example, there's a `<canvas>` where we can draw by moving a mouse over i
         body: blob
       });
 
-      // the server responds with confirmation and the image size
+      // 전송이 잘 되었다는 응답이 오고 이미지 사이즈가 얼럿창에 출력됩니다.
       let result = await response.json();
       alert(result.message);
     }
@@ -261,9 +261,9 @@ In this example, there's a `<canvas>` where we can draw by moving a mouse over i
 </body>
 ```
 
-Please note, here we don't set `Content-Type` header manually, because a `Blob` object has a built-in type (here `image/png`, as generated by `toBlob`). For `Blob` objects that type becomes the value of `Content-Type`.
+이번엔 `Content-Type` 헤더를 명시적으로 설정하지 않은 점에 주목해주시기 바랍니다. `Blob` 객체는 내장 타입을 갖기 때문에 특별히  `Content-Type`를 설정하지 않아도 됩니다. 예시는 이미지를 전송하기 때문에 `toBlob`에 의해 `image/png`가 자동으로 설정되었습니다. 이렇게 `Blob` 객체의 경우 해당 객체의 타입이 `Content-Type` 헤더의 값이 됩니다.
 
-The `submit()` function can be rewritten without `async/await` like this:
+위 예시의 함수 `submit()`을 `async/await` 없이 작성하면 아래와 같습니다.
 
 ```js
 function submit() {
@@ -278,38 +278,38 @@ function submit() {
 }
 ```
 
-## Summary
+## 요약
 
-A typical fetch request consists of two `await` calls:
+일반적인 `fetch` 요청은 두 개의 `await` 호출로 구성됩니다.
 
 ```js
-let response = await fetch(url, options); // resolves with response headers
-let result = await response.json(); // read body as json
+let response = await fetch(url, options); // 응답 헤더와 함께 이행됨
+let result = await response.json(); // json 본문을 읽음
 ```
 
-Or, without `await`:
+물론 `await` 없이도 요청을 보낼 수 있습니다.
 
 ```js
 fetch(url, options)
   .then(response => response.json())
-  .then(result => /* process result */)
+  .then(result => /* 결과 처리 */)
 ```
 
-Response properties:
-- `response.status` -- HTTP code of the response,
-- `response.ok` -- `true` is the status is 200-299.
-- `response.headers` -- Map-like object with HTTP headers.
+응답 객체의 프로퍼티는 다음과 같습니다.
+- `response.status` -- 응답의 HTTP 코드
+- `response.ok` -- 응답 상태가 200과 299 사이에 있는 경우 `true`
+- `response.headers` -- 맵과 유사한 형태의 HTTP 헤더
 
-Methods to get response body:
-- **`response.text()`** -- return the response as text,
-- **`response.json()`** -- parse the response as JSON object,
-- **`response.formData()`** -- return the response as `FormData` object (form/multipart encoding, see the next chapter),
-- **`response.blob()`** -- return the response as [Blob](info:blob) (binary data with type),
-- **`response.arrayBuffer()`** -- return the response as [ArrayBuffer](info:arraybuffer-binary-arrays) (low-level binary data),
+응답 본문을 얻으려면 다음과 같은 메서드를 사용하면 됩니다.
+- **`response.text()`** -- 응답을 텍스트 형태로 반환함
+- **`response.json()`** -- 응답을 파싱해 JSON 객체로 변경함
+- **`response.formData()`** -- 응답을 `FormData` 객체 형태로 반환(form/multipart 인코딩에 대한 내용은 다음 챕터에서 다룸)
+- **`response.blob()`** -- 응답을 [Blob](info:blob)(타입이 있는 바이너리 데이터) 형태로 반환
+- **`response.arrayBuffer()`** --  응답을 [ArrayBuffer](info:arraybuffer-binary-arrays)(바이너리 데이터를 로우 레벨로 표현한 것) 형태로 반환
 
-Fetch options so far:
-- `method` -- HTTP-method,
-- `headers` -- an object with request headers (not any header is allowed),
-- `body` -- the data to send (request body) as `string`, `FormData`, `BufferSource`, `Blob` or `UrlSearchParams` object.
+지금까지 배운 `fetch` 옵션은 다음과 같습니다.
+- `method` -- HTTP 메서드
+- `headers` -- 요청 헤드가 담긴 객체(제약 사항이 있음)
+- `body` -- 보내려는 데이터(요청 본문)로 `string`이나 `FormData`, `BufferSource`, `Blob`, `UrlSearchParams` 객체 형태
 
-In the next chapters we'll see more options and use cases of `fetch`.
+이어지는 챕터에선 이 외의 옵션과 다양한 `fetch` 유스 케이스를 살펴보겠습니다.