[문서번역] network/08-xmlhttprequest

Author: gusdn3477

5-network/08-xmlhttprequest/article.md

@@ -2,7 +2,7 @@
 
 `XMLHttpRequest`는 자바스크립트에서 HTTP 요청을 보낼 수 있게 해주는 브라우저 내장 객체입니다.
 
-이름에 "XML"이 들어가 있지만 XML 형식뿐만 아니라 어떤 데이터에도 사용할 수 있습니다. 파일을 업로드하거나 다운로드하고, 진행 상황을 추적하는 등 여러 작업을 할 수 있습니다.
+이름에 'XML'이 들어가 있지만 XML 형식뿐만 아니라 어떤 데이터든 다룰 수 있습니다. 파일을 업로드하거나 다운로드하고, 진행 상황을 추적하는 등 여러 작업을 할 수 있습니다.
 
 요즘은 `fetch`라는 더 모던한 방식이 있어 `XMLHttpRequest`를 어느 정도 대체합니다.
 
@@ -52,7 +52,7 @@
 
     `GET` 같은 일부 요청 메서드에는 본문이 없습니다. 반면 `POST` 같은 메서드는 `body`를 사용해 서버로 데이터를 보냅니다. 이에 대한 예시는 뒤에서 살펴보겠습니다.
 
-4. `xhr` 이벤트로 응답을 감지합니다.
+4. `xhr` 이벤트로 응답을 처리합니다.
 
     가장 널리 쓰이는 이벤트는 다음 세 가지입니다.
     - `load` -- 요청이 완료되고(HTTP 상태가 400이나 500이어도) 응답 전체가 다운로드되었을 때 발생합니다.
@@ -76,7 +76,7 @@
     };
     ```
 
-아래는 전체 예시입니다. 다음 코드는 서버에서 `/article/xmlhttprequest/example/load` URL을 불러오고 진행 상황을 출력합니다.
+아래는 전체 예시입니다. 이 코드는 서버에서 `/article/xmlhttprequest/example/load` URL을 불러오고 진행 상황을 출력합니다.
 
 ```js run
 // 1. 새 XMLHttpRequest 객체 생성
@@ -122,7 +122,7 @@ xhr.onerror = function() {
 `response`(오래된 스크립트에서는 `responseText`를 사용할 수도 있음)
 : 서버 응답 본문입니다.
 
-해당 프로퍼티로 타임아웃도 지정할 수 있습니다.
+`timeout` 프로퍼티로 타임아웃도 지정할 수 있습니다.
 
 ```js
 xhr.timeout = 10000; // ms 단위 타임아웃, 10초
@@ -177,12 +177,12 @@ xhr.onload = function() {
 ```smart header="참고"
 오래된 스크립트에서는 `xhr.responseText`, 심지어 `xhr.responseXML` 프로퍼티를 볼 수도 있습니다.
 
-이 프로퍼티들은 문자열이나 XML 문서를 받기 위한 것으로 역사적인 이유로 남아 있습니다. 요즘은 위 예시처럼 `xhr.responseType`으로 형식을 지정하고 `xhr.response`에서 값을 가져오는 편이 좋습니다.
+이 두 프로퍼티는 문자열이나 XML 문서를 받기 위한 것으로, 역사적인 이유로 남아 있습니다. 요즘은 위 예시처럼 `xhr.responseType`으로 형식을 지정하고 `xhr.response`에서 값을 가져오는 편이 좋습니다.
 ```
 
 ## `readyState` 상태
 
-`XMLHttpRequest`는 진행 단계에 따라 상태가 바뀝니다. 현재 상태는 `xhr.readyState`로 확인할 수 있습니다.
+`XMLHttpRequest`는 진행 단계에 따라 상태가 바뀝니다. 현재 상태는 `xhr.readyState`로 확인합니다.
 
 [명세](https://xhr.spec.whatwg.org/#states)에 따른 모든 상태는 다음과 같습니다.
 
@@ -196,7 +196,7 @@ DONE = 4; // 요청 완료
 
 `XMLHttpRequest` 객체는 `0` -> `1` -> `2` -> `3` -> ... -> `3` -> `4` 순서로 상태를 거칩니다. 네트워크로 데이터 패킷을 받을 때마다 상태 `3`이 반복됩니다.
 
-`readystatechange` 이벤트를 사용해 상태 변화를 추적할 수 있습니다.
+`readystatechange` 이벤트로 상태 변화를 추적할 수 있습니다.
 
 ```js
 xhr.onreadystatechange = function() {
@@ -246,9 +246,9 @@ try {
 }
 ```
 
-겉보기엔 괜찮아 보일 수 있지만, 동기 호출은 로딩이 완료될 때까지 페이지 안의 자바스크립트 실행을 막기 때문에 거의 쓰지 않습니다. 어떤 브라우저에서는 스크롤조차 할 수 없게 됩니다. 동기 호출이 너무 오래 걸리면 브라우저가 "멈춘" 웹페이지를 닫으라고 제안할 수도 있습니다.
+겉보기엔 괜찮아 보일 수 있지만, 동기 호출은 로딩이 완료될 때까지 페이지 안의 자바스크립트 실행을 막기 때문에 거의 쓰지 않습니다. 어떤 브라우저에서는 스크롤조차 할 수 없게 됩니다. 동기 호출이 너무 오래 걸리면 브라우저가 '멈춘' 웹페이지를 닫으라고 제안할 수도 있습니다.
 
-다른 도메인으로 요청하거나 타임아웃을 지정하는 등 `XMLHttpRequest`의 많은 고급 기능은 동기 요청에서 사용할 수 없습니다. 또한 보시다시피 진행 상황 표시도 없습니다.
+다른 도메인으로 요청하거나 타임아웃을 지정하는 등 `XMLHttpRequest`의 많은 고급 기능은 동기 요청에서 사용할 수 없습니다. 위 예시에서 보듯 진행 상황 표시도 없습니다.
 
 이런 이유로 동기 요청은 아주 드물게, 거의 쓰지 않습니다. 더 이상 다루지 않겠습니다.
 
@@ -261,7 +261,7 @@ HTTP 헤더를 다루는 메서드는 세 가지입니다.
 `setRequestHeader(name, value)`
 : 주어진 `name`과 `value`로 요청 헤더를 설정합니다.
 
-    예를 들어 다음과 같습니다.
+    예시는 다음과 같습니다.
 
     ```js
     xhr.setRequestHeader('Content-Type', 'application/json');
@@ -279,7 +279,7 @@ HTTP 헤더를 다루는 메서드는 세 가지입니다.
 
     헤더는 한 번 설정하면 그대로 유지됩니다. 같은 헤더를 추가로 설정하면 기존 값을 덮어쓰지 않고 헤더 정보에 더해집니다.
 
-    예를 들어 다음과 같습니다.
+    예시는 다음과 같습니다.
 
     ```js
     xhr.setRequestHeader('X-Auth', '123');
@@ -293,7 +293,7 @@ HTTP 헤더를 다루는 메서드는 세 가지입니다.
 `getResponseHeader(name)`
 : 주어진 `name`의 응답 헤더를 가져옵니다(`Set-Cookie`와 `Set-Cookie2` 제외).
 
-    예를 들어 다음과 같습니다.
+    예시는 다음과 같습니다.
 
     ```js
     xhr.getResponseHeader('Content-Type')
@@ -311,9 +311,9 @@ HTTP 헤더를 다루는 메서드는 세 가지입니다.
     Date: Sat, 08 Sep 2012 16:53:16 GMT
     ```
 
-    헤더 사이의 줄 바꿈은 항상 `"\r\n"`입니다(OS와 무관). 따라서 개별 헤더로 쉽게 나눌 수 있습니다. 이름과 값 사이의 구분자는 항상 콜론 뒤에 공백이 붙은 `": "`입니다. 이는 명세에 고정되어 있습니다.
+    헤더 사이의 줄 바꿈은 항상 `"\r\n"`입니다(OS와 무관). 그래서 개별 헤더로 쉽게 나눌 수 있습니다. 이름과 값 사이의 구분자는 항상 콜론 뒤에 공백이 붙은 `": "`입니다. 이는 명세에 고정되어 있습니다.
 
-    따라서 이름/값 쌍을 가진 객체를 얻으려면 자바스크립트를 조금 사용해야 합니다.
+    이름/값 쌍을 가진 객체를 얻으려면 자바스크립트를 조금 사용해야 합니다.
 
     예를 들어 다음처럼 만들 수 있습니다(이름이 같은 헤더가 두 개 있으면 나중 헤더가 앞선 헤더를 덮어쓴다고 가정합니다).
 
@@ -374,7 +374,7 @@ formData.append(name, value); // 필드 추가
 
 또는 JSON이 더 좋다면 `JSON.stringify`로 문자열을 만들어 전송하면 됩니다.
 
-다만 `Content-Type: application/json` 헤더를 설정하는 것을 잊지 마세요. 많은 서버 사이드 프레임워크가 이 헤더를 보고 JSON을 자동으로 디코딩합니다.
+다만 `Content-Type: application/json` 헤더를 설정하는 것을 잊지 마세요. 많은 서버 사이드 프레임워크는 이 헤더를 보고 JSON을 자동으로 디코딩합니다.
 
 ```js
 let xhr = new XMLHttpRequest();
@@ -398,7 +398,7 @@ xhr.send(json);
 
 즉, `POST`로 무언가를 보내면 `XMLHttpRequest`는 먼저 데이터(요청 본문)를 업로드하고, 그다음 응답을 다운로드합니다.
 
-큰 데이터를 업로드하는 경우엔 업로드 진행률을 추적하는 데 더 관심이 있을 것입니다. 하지만 이때 `xhr.onprogress`는 도움이 되지 않습니다.
+큰 데이터를 업로드할 때는 업로드 진행률을 추적하는 데 관심이 더 큽니다. 하지만 이때 `xhr.onprogress`는 도움이 되지 않습니다.
 
 업로드 이벤트 추적 전용 객체인 `xhr.upload`가 따로 있습니다. 이 객체에는 메서드가 없습니다.