From 7aba1b2cf47e2d6769c19da6aa4260a1208f18d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=ED=98=84=EC=9A=B0?= <gusdn3477@naver.com>
Date: Sun, 31 May 2026 20:13:15 +0900
Subject: [PATCH 1/4] =?UTF-8?q?docs:=20post.view/server.js=20=EB=B2=88?=
 =?UTF-8?q?=EC=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 5-network/08-xmlhttprequest/post.view/server.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/5-network/08-xmlhttprequest/post.view/server.js b/5-network/08-xmlhttprequest/post.view/server.js
index 50cfc5ae36..0e6d4fb6e4 100644
--- a/5-network/08-xmlhttprequest/post.view/server.js
+++ b/5-network/08-xmlhttprequest/post.view/server.js
@@ -17,7 +17,7 @@ function accept(req, res) {
       chunks.push(data);
       length += data.length;
 
-      // More than 10mb, kill the connection!
+      // 10mb를 넘으면 연결을 종료합니다!
       if (length > 1e8) {
         req.connection.destroy();
       }
@@ -28,16 +28,16 @@ function accept(req, res) {
 
       if (req.url == '/user') {
         res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ message: 'User saved' }));
+        res.end(JSON.stringify({ message: '사용자 정보 저장 성공' }));
       } else if (req.url == '/image') {
         res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ message: "Image saved", imageSize: length }));
+        res.end(JSON.stringify({ message: "이미지 저장 성공", imageSize: length }));
       } else if (req.url == '/upload') {
         res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ message: "Upload complete", size: length }));
+        res.end(JSON.stringify({ message: "업로드 완료", size: length }));
       } else {
         res.writeHead(404);
-        res.end("Not found");
+        res.end("찾을 수 없음");
       }
     });
 

From 654b7873b6d141d6c84adf55937e242360251513 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=ED=98=84=EC=9A=B0?= <gusdn3477@naver.com>
Date: Sun, 31 May 2026 20:13:27 +0900
Subject: [PATCH 2/4] =?UTF-8?q?docs:=20hello.txt=20=EB=B2=88=EC=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 5-network/08-xmlhttprequest/hello.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/5-network/08-xmlhttprequest/hello.txt b/5-network/08-xmlhttprequest/hello.txt
index e3a3d9d343..e7223a96f8 100644
--- a/5-network/08-xmlhttprequest/hello.txt
+++ b/5-network/08-xmlhttprequest/hello.txt
@@ -1 +1 @@
-Hello from the server!
+서버에서 보낸 인사입니다!

From 2331790bb3a2d17bc88178585ba39651c542cb21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=ED=98=84=EC=9A=B0?= <gusdn3477@naver.com>
Date: Sun, 31 May 2026 20:13:55 +0900
Subject: [PATCH 3/4] =?UTF-8?q?docs:=20html,=20server.js=20=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20=EB=B2=88=EC=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 5-network/08-xmlhttprequest/example.view/index.html    |  2 +-
 .../08-xmlhttprequest/phones-async.view/index.html     | 10 +++++-----
 5-network/08-xmlhttprequest/phones.view/index.html     |  8 ++++----
 5-network/08-xmlhttprequest/phones.view/server.js      |  2 +-
 5-network/08-xmlhttprequest/post.view/index.html       |  4 ++--
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/5-network/08-xmlhttprequest/example.view/index.html b/5-network/08-xmlhttprequest/example.view/index.html
index 7dbc3d9510..4ddde760b4 100644
--- a/5-network/08-xmlhttprequest/example.view/index.html
+++ b/5-network/08-xmlhttprequest/example.view/index.html
@@ -25,6 +25,6 @@
 }
 </script>
 
-<button onclick="run()">Load digits</button>
+<button onclick="run()">숫자 불러오기</button>
 
 <ul id="log"></ul>
diff --git a/5-network/08-xmlhttprequest/phones-async.view/index.html b/5-network/08-xmlhttprequest/phones-async.view/index.html
index dff72ba3dc..2946643a76 100644
--- a/5-network/08-xmlhttprequest/phones-async.view/index.html
+++ b/5-network/08-xmlhttprequest/phones-async.view/index.html
@@ -5,7 +5,7 @@
 </head>
 <body>
 
-  <button onclick="loadPhones()" id="button">Load phones.json!</button>
+  <button onclick="loadPhones()" id="button">phones.json 불러오기!</button>
 
   <script>
     function loadPhones() {
@@ -21,19 +21,19 @@
       xhr.onreadystatechange = function() {
         if (xhr.readyState != 4) return;
 
-        button.innerHTML = 'Complete!';
+        button.innerHTML = '완료!';
 
         if (xhr.status != 200) {
-          // handle error
+          // 에러 처리
           alert(xhr.status + ': ' + xhr.statusText);
         } else {
-          // show result
+          // 결과 표시
           alert(xhr.responseText);
         }
 
       }
 
-      button.innerHTML = 'Loading...';
+      button.innerHTML = '로딩 중...';
       button.disabled = true;
     }
   </script>
diff --git a/5-network/08-xmlhttprequest/phones.view/index.html b/5-network/08-xmlhttprequest/phones.view/index.html
index 02e1fb9674..2fcfedef9a 100644
--- a/5-network/08-xmlhttprequest/phones.view/index.html
+++ b/5-network/08-xmlhttprequest/phones.view/index.html
@@ -5,7 +5,7 @@
 </head>
 <body>
 
-  <button onclick="loadPhones()">Load phones.json!</button>
+  <button onclick="loadPhones()">phones.json 불러오기!</button>
 
   <script>
     function loadPhones() {
@@ -15,10 +15,10 @@
       xhr.send();
 
       if (xhr.status != 200) {
-        // handle error
-        alert('Error ' + xhr.status + ': ' + xhr.statusText);
+        // 에러 처리
+        alert('에러 ' + xhr.status + ': ' + xhr.statusText);
       } else {
-        // show result
+        // 결과 표시
         alert(xhr.responseText);
       }
     }
diff --git a/5-network/08-xmlhttprequest/phones.view/server.js b/5-network/08-xmlhttprequest/phones.view/server.js
index d8bf907853..b219e747f4 100644
--- a/5-network/08-xmlhttprequest/phones.view/server.js
+++ b/5-network/08-xmlhttprequest/phones.view/server.js
@@ -10,7 +10,7 @@ let file = new static.Server('.', {
 function accept(req, res) {
 
   if (req.url == '/phones.json') {
-    // stall a bit to let "loading" message show up
+    // "로딩 중" 메시지가 보이도록 잠시 지연
     setTimeout(function() {
       file.serve(req, res);
     }, 2000);
diff --git a/5-network/08-xmlhttprequest/post.view/index.html b/5-network/08-xmlhttprequest/post.view/index.html
index ba7f76065e..f6881207ed 100644
--- a/5-network/08-xmlhttprequest/post.view/index.html
+++ b/5-network/08-xmlhttprequest/post.view/index.html
@@ -12,13 +12,13 @@
 		const chunk = await reader.read();
 
 		if (chunk.done) {
-			console.log("done!");
+			console.log("완료!");
 			break;
 		}
 
 		chunks.push(chunk.value);
 		receivedLength += chunk.value.length;
-		console.log(`${receivedLength}/${contentLength} received`)
+		console.log(`${receivedLength}/${contentLength} 수신`)
 	}
 
 

From 6185a1523a4e5405236f50b583222ff967ec5a5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=ED=98=84=EC=9A=B0?= <gusdn3477@naver.com>
Date: Sun, 31 May 2026 20:14:16 +0900
Subject: [PATCH 4/4] =?UTF-8?q?docs:=20xmlhttprequest=20article=20?=
 =?UTF-8?q?=EB=B2=88=EC=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 5-network/08-xmlhttprequest/article.md | 368 ++++++++++++-------------
 1 file changed, 184 insertions(+), 184 deletions(-)

diff --git a/5-network/08-xmlhttprequest/article.md b/5-network/08-xmlhttprequest/article.md
index 43d816cab5..421231c515 100644
--- a/5-network/08-xmlhttprequest/article.md
+++ b/5-network/08-xmlhttprequest/article.md
@@ -1,160 +1,160 @@
 # XMLHttpRequest
 
-`XMLHttpRequest` is a built-in browser object that allows to make HTTP requests in JavaScript.
+`XMLHttpRequest`는 자바스크립트에서 HTTP 요청을 보낼 수 있게 해주는 브라우저 내장 객체입니다.
 
-Despite having the word "XML" in its name, it can operate on any data, not only in XML format. We can upload/download files, track progress and much more.
+이름에 "XML"이 들어가 있지만 XML 형식뿐만 아니라 어떤 데이터에도 사용할 수 있습니다. 파일을 업로드하거나 다운로드하고, 진행 상황을 추적하는 등 여러 작업을 할 수 있습니다.
 
-Right now, there's another, more modern method `fetch`, that somewhat deprecates `XMLHttpRequest`.
+요즘은 `fetch`라는 더 모던한 방식이 있어 `XMLHttpRequest`를 어느 정도 대체합니다.
 
-In modern web-development `XMLHttpRequest` is used for three reasons:
+모던 웹 개발에서 `XMLHttpRequest`가 쓰이는 이유는 세 가지입니다.
 
-1. Historical reasons: we need to support existing scripts with `XMLHttpRequest`.
-2. We need to support old browsers, and don't want polyfills (e.g. to keep scripts tiny).
-3. We need something that `fetch` can't do yet, e.g. to track upload progress.
+1. 역사적인 이유로 `XMLHttpRequest`를 사용하는 기존 스크립트를 지원해야 하는 경우
+2. 구형 브라우저를 지원해야 하고, 폴리필은 쓰고 싶지 않은 경우(예: 스크립트 크기를 작게 유지하기 위해)
+3. 업로드 진행률 추적처럼 아직 `fetch`로 할 수 없는 기능이 필요한 경우
 
-Does that sound familiar? If yes, then all right, go on with `XMLHttpRequest`. Otherwise, please head on to <info:fetch>.
+이런 상황에 해당하나요? 그렇다면 `XMLHttpRequest`를 계속 살펴봅시다. 그렇지 않다면 <info:fetch>로 넘어가세요.
 
-## The basics
+## 기본
 
-XMLHttpRequest has two modes of operation: synchronous and asynchronous.
+`XMLHttpRequest`에는 동기와 비동기 두 가지 동작 모드가 있습니다.
 
-Let's see the asynchronous first, as it's used in the majority of cases.
+대부분의 경우 비동기 방식을 사용하므로, 먼저 비동기 요청을 살펴봅시다.
 
-To do the request, we need 3 steps:
+요청을 보내려면 다음 단계를 거칩니다.
 
-1. Create `XMLHttpRequest`:
+1. `XMLHttpRequest`를 생성합니다.
     ```js
     let xhr = new XMLHttpRequest();
     ```
-    The constructor has no arguments.
+    생성자는 인수를 받지 않습니다.
 
-2. Initialize it, usually right after `new XMLHttpRequest`:
+2. 보통 `new XMLHttpRequest` 직후 초기화합니다.
     ```js
     xhr.open(method, URL, [async, user, password])
     ```
 
-    This method specifies the main parameters of the request:
+    이 메서드는 요청의 주요 매개변수를 지정합니다.
 
-    - `method` -- HTTP-method. Usually `"GET"` or `"POST"`.
-    - `URL` -- the URL to request, a string, can be [URL](info:url) object.
-    - `async` -- if explicitly set to `false`, then the request is synchronous, we'll cover that a bit later.
-    - `user`, `password` -- login and password for basic HTTP auth (if required).
+    - `method` -- HTTP 메서드입니다. 보통 `"GET"`이나 `"POST"`를 사용합니다.
+    - `URL` -- 요청할 URL입니다. 문자열이거나 [URL](info:url) 객체일 수 있습니다.
+    - `async` -- 명시적으로 `false`로 설정하면 요청이 동기 방식으로 이루어집니다. 이 부분은 조금 후에 다룹니다.
+    - `user`, `password` -- 기본 HTTP 인증에 사용할 로그인과 비밀번호입니다(필요한 경우).
 
-    Please note that `open` call, contrary to its name, does not open the connection. It only configures the request, but the network activity only starts with the call of `send`.
+    이름과 달리 `open` 호출은 연결을 열지 않는다는 점에 주의하세요. `open`은 요청을 설정할 뿐이고, 실제 네트워크 동작은 `send`를 호출해야 시작됩니다.
 
-3. Send it out.
+3. 요청을 전송합니다.
 
     ```js
     xhr.send([body])
     ```
 
-    This method opens the connection and sends the request to server. The optional `body` parameter contains the request body.
+    이 메서드는 연결을 열고 서버로 요청을 보냅니다. 선택 사항인 `body` 매개변수에는 요청 본문이 들어갑니다.
 
-    Some request methods like `GET` do not have a body. And some of them like `POST` use `body` to send the data to the server. We'll see examples of that later.
+    `GET` 같은 일부 요청 메서드에는 본문이 없습니다. 반면 `POST` 같은 메서드는 `body`를 사용해 서버로 데이터를 보냅니다. 이에 대한 예시는 뒤에서 살펴보겠습니다.
 
-4. Listen to `xhr` events for response.
+4. `xhr` 이벤트로 응답을 감지합니다.
 
-    These three events are the most widely used:
-    - `load` -- when the request is complete (even if HTTP status is like 400 or 500), and the response is fully downloaded.
-    - `error` -- when the request couldn't be made, e.g. network down or invalid URL.
-    - `progress` -- triggers periodically while the response is being downloaded, reports how much has been downloaded.
+    가장 널리 쓰이는 이벤트는 다음 세 가지입니다.
+    - `load` -- 요청이 완료되고(HTTP 상태가 400이나 500이어도) 응답 전체가 다운로드되었을 때 발생합니다.
+    - `error` -- 요청을 보낼 수 없을 때 발생합니다. 예를 들어 네트워크가 끊겼거나 URL이 잘못된 경우입니다.
+    - `progress` -- 응답을 다운로드하는 동안 주기적으로 발생하며, 얼마나 다운로드되었는지 알려줍니다.
 
     ```js
     xhr.onload = function() {
-      alert(`Loaded: ${xhr.status} ${xhr.response}`);
+      alert(`로드됨: ${xhr.status} ${xhr.response}`);
     };
 
-    xhr.onerror = function() { // only triggers if the request couldn't be made at all
-      alert(`Network Error`);
+    xhr.onerror = function() { // 요청을 전혀 보낼 수 없을 때만 발생
+      alert(`네트워크 에러`);
     };
 
-    xhr.onprogress = function(event) { // triggers periodically
-      // event.loaded - how many bytes downloaded
-      // event.lengthComputable = true if the server sent Content-Length header
-      // event.total - total number of bytes (if lengthComputable)
-      alert(`Received ${event.loaded} of ${event.total}`);
+    xhr.onprogress = function(event) { // 주기적으로 발생
+      // event.loaded - 다운로드한 바이트 수
+      // event.lengthComputable = 서버가 Content-Length 헤더를 보낸 경우 true
+      // event.total - 전체 바이트 수(lengthComputable인 경우)
+      alert(`${event.total} 바이트 중 ${event.loaded} 바이트 수신`);
     };
     ```
 
-Here's a full example. The code below loads the URL at `/article/xmlhttprequest/example/load` from the server and prints the progress:
+아래는 전체 예시입니다. 다음 코드는 서버에서 `/article/xmlhttprequest/example/load` URL을 불러오고 진행 상황을 출력합니다.
 
 ```js run
-// 1. Create a new XMLHttpRequest object
+// 1. 새 XMLHttpRequest 객체 생성
 let xhr = new XMLHttpRequest();
 
-// 2. Configure it: GET-request for the URL /article/.../load
+// 2. 설정: /article/.../load URL에 GET 요청
 xhr.open('GET', '/article/xmlhttprequest/example/load');
 
-// 3. Send the request over the network
+// 3. 네트워크로 요청 전송
 xhr.send();
 
-// 4. This will be called after the response is received
+// 4. 응답을 받으면 호출됩니다
 xhr.onload = function() {
-  if (xhr.status != 200) { // analyze HTTP status of the response
-    alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
-  } else { // show the result
-    alert(`Done, got ${xhr.response.length} bytes`); // response is the server response
+  if (xhr.status != 200) { // 응답의 HTTP 상태 분석
+    alert(`에러 ${xhr.status}: ${xhr.statusText}`); // 예: 404: Not Found
+  } else { // 결과 표시
+    alert(`완료, ${xhr.response.length} 바이트를 받았습니다`); // xhr.response는 서버 응답입니다
   }
 };
 
 xhr.onprogress = function(event) {
   if (event.lengthComputable) {
-    alert(`Received ${event.loaded} of ${event.total} bytes`);
+    alert(`${event.total} 바이트 중 ${event.loaded} 바이트 수신`);
   } else {
-    alert(`Received ${event.loaded} bytes`); // no Content-Length
+    alert(`${event.loaded} 바이트 수신`); // Content-Length 없음
   }
 
 };
 
 xhr.onerror = function() {
-  alert("Request failed");
+  alert("요청 실패");
 };
 ```
 
-Once the server has responded, we can receive the result in the following `xhr` properties:
+서버가 응답하면 다음 `xhr` 프로퍼티에서 결과를 받을 수 있습니다.
 
 `status`
-: HTTP status code (a number): `200`, `404`, `403` and so on, can be `0` in case of a non-HTTP failure.
+: HTTP 상태 코드(숫자)입니다. `200`, `404`, `403` 등이 있으며, HTTP와 무관한 실패가 발생하면 `0`일 수 있습니다.
 
 `statusText`
-: HTTP status message (a string): usually `OK` for `200`, `Not Found` for `404`, `Forbidden` for `403` and so on.
+: HTTP 상태 메시지(문자열)입니다. 보통 `200`에는 `OK`, `404`에는 `Not Found`, `403`에는 `Forbidden` 등이 대응됩니다.
 
-`response` (old scripts may use `responseText`)
-: The server response body.
+`response`(오래된 스크립트에서는 `responseText`를 사용할 수도 있음)
+: 서버 응답 본문입니다.
 
-We can also specify a timeout using the corresponding property:
+해당 프로퍼티로 타임아웃도 지정할 수 있습니다.
 
 ```js
-xhr.timeout = 10000; // timeout in ms, 10 seconds
+xhr.timeout = 10000; // ms 단위 타임아웃, 10초
 ```
 
-If the request does not succeed within the given time, it gets canceled and `timeout` event triggers.
+지정한 시간 안에 요청이 성공하지 못하면 요청이 취소되고 `timeout` 이벤트가 발생합니다.
 
-````smart header="URL search parameters"
-To add parameters to URL, like `?name=value`, and ensure the proper encoding, we can use [URL](info:url) object:
+````smart header="URL 검색 매개변수"
+URL에 `?name=value` 같은 매개변수를 추가하고 올바르게 인코딩하려면 [URL](info:url) 객체를 사용할 수 있습니다.
 
 ```js
 let url = new URL('https://google.com/search');
 url.searchParams.set('q', 'test me!');
 
-// the parameter 'q' is encoded
+// 매개변수 'q'가 인코딩됩니다
 xhr.open('GET', url); // https://google.com/search?q=test+me%21
 ```
 
 ````
 
-## Response Type
+## 응답 타입
 
-We can use `xhr.responseType` property to set the response format:
+`xhr.responseType` 프로퍼티를 사용해 응답 형식을 지정할 수 있습니다.
 
-- `""` (default) -- get as string,
-- `"text"` -- get as string,
-- `"arraybuffer"` -- get as `ArrayBuffer` (for binary data, see chapter <info:arraybuffer-binary-arrays>),
-- `"blob"` -- get as `Blob` (for binary data, see chapter <info:blob>),
-- `"document"` -- get as XML document (can use XPath and other XML methods) or HTML document (based on the MIME type of the received data),
-- `"json"` -- get as JSON (parsed automatically).
+- `""`(기본값) -- 문자열로 받습니다.
+- `"text"` -- 문자열로 받습니다.
+- `"arraybuffer"` -- `ArrayBuffer`로 받습니다(이진 데이터는 [ArrayBuffer와 이진 배열](info:arraybuffer-binary-arrays) 챕터 참고).
+- `"blob"` -- `Blob`으로 받습니다(이진 데이터는 <info:blob> 챕터 참고).
+- `"document"` -- XML 문서(XPath와 기타 XML 메서드 사용 가능)나 HTML 문서(받은 데이터의 MIME 타입 기준)로 받습니다.
+- `"json"` -- JSON으로 받습니다(자동으로 파싱됩니다).
 
-For example, let's get the response as JSON:
+예를 들어 응답을 JSON으로 받아봅시다.
 
 ```js run
 let xhr = new XMLHttpRequest();
@@ -167,67 +167,67 @@ xhr.responseType = 'json';
 
 xhr.send();
 
-// the response is {"message": "Hello, world!"}
+// 응답은 {"message": "Hello, world!"}입니다
 xhr.onload = function() {
   let responseObj = xhr.response;
   alert(responseObj.message); // Hello, world!
 };
 ```
 
-```smart
-In the old scripts you may also find `xhr.responseText` and even `xhr.responseXML` properties.
+```smart header="참고"
+오래된 스크립트에서는 `xhr.responseText`, 심지어 `xhr.responseXML` 프로퍼티를 볼 수도 있습니다.
 
-They exist for historical reasons, to get either a string or XML document. Nowadays, we should set the format in `xhr.responseType` and get `xhr.response` as demonstrated above.
+이 프로퍼티들은 문자열이나 XML 문서를 받기 위한 것으로 역사적인 이유로 남아 있습니다. 요즘은 위 예시처럼 `xhr.responseType`으로 형식을 지정하고 `xhr.response`에서 값을 가져오는 편이 좋습니다.
 ```
 
-## Ready states
+## `readyState` 상태
 
-`XMLHttpRequest` changes between states as it progresses. The current state is accessible as  `xhr.readyState`.
+`XMLHttpRequest`는 진행 단계에 따라 상태가 바뀝니다. 현재 상태는 `xhr.readyState`로 확인할 수 있습니다.
 
-All states, as in [the specification](https://xhr.spec.whatwg.org/#states):
+[명세](https://xhr.spec.whatwg.org/#states)에 따른 모든 상태는 다음과 같습니다.
 
 ```js
-UNSENT = 0; // initial state
-OPENED = 1; // open called
-HEADERS_RECEIVED = 2; // response headers received
-LOADING = 3; // response is loading (a data packet is received)
-DONE = 4; // request complete
+UNSENT = 0; // 초기 상태
+OPENED = 1; // open 호출됨
+HEADERS_RECEIVED = 2; // 응답 헤더를 받음
+LOADING = 3; // 응답을 불러오는 중(데이터 패킷을 받음)
+DONE = 4; // 요청 완료
 ```
 
-An `XMLHttpRequest` object travels them in the order `0` -> `1` -> `2` -> `3` -> ... -> `3` -> `4`. State `3` repeats every time a data packet is received over the network.
+`XMLHttpRequest` 객체는 `0` -> `1` -> `2` -> `3` -> ... -> `3` -> `4` 순서로 상태를 거칩니다. 네트워크로 데이터 패킷을 받을 때마다 상태 `3`이 반복됩니다.
 
-We can track them using `readystatechange` event:
+`readystatechange` 이벤트를 사용해 상태 변화를 추적할 수 있습니다.
 
 ```js
 xhr.onreadystatechange = function() {
   if (xhr.readyState == 3) {
-    // loading
+    // 로딩 중
   }
   if (xhr.readyState == 4) {
-    // request finished
+    // 요청 완료
   }
 };
 ```
 
-You can find `readystatechange` listeners in really old code, it's there for historical reasons, as there was a time when there were no `load` and other events. Nowadays, `load/error/progress` handlers deprecate it.
+아주 오래된 코드에서는 `readystatechange` 리스너를 찾을 수 있습니다. 이는 역사적인 이유로 남아 있는 것으로, `load`와 그 밖의 이벤트가 없던 시절에 쓰였습니다. 요즘은 `load/error/progress` 핸들러가 이를 대체합니다.
 
-## Aborting request
+## 요청 중단하기
 
-We can terminate the request at any time. The call to `xhr.abort()` does that:
+언제든 요청을 중단할 수 있습니다. `xhr.abort()`를 호출하면 됩니다.
 
 ```js
-xhr.abort(); // terminate the request
+xhr.abort(); // 요청 중단
 ```
 
-That triggers `abort` event, and `xhr.status` becomes `0`.
+그러면 `abort` 이벤트가 발생하고 `xhr.status`는 `0`이 됩니다.
 
-## Synchronous requests
+## 동기 요청
 
-If in the `open` method the third parameter `async` is set to `false`, the request is made synchronously.
+`open` 메서드의 세 번째 매개변수 `async`가 `false`로 설정되면 요청은 동기 방식으로 수행됩니다.
 
-In other words, JavaScript execution pauses at `send()` and resumes when the response is received. Somewhat like `alert` or `prompt` commands.
+다시 말해 자바스크립트 실행은 `send()`에서 멈추고 응답을 받으면 다시 이어집니다. `alert`나 `prompt` 명령과 비슷합니다.
 
-Here's the rewritten example, the 3rd parameter of `open` is `false`:
+다음은 `open`의 세 번째 매개변수를 `false`로 바꾼 예시입니다.
 
 ```js
 let xhr = new XMLHttpRequest();
@@ -237,72 +237,72 @@ xhr.open('GET', '/article/xmlhttprequest/hello.txt', *!*false*/!*);
 try {
   xhr.send();
   if (xhr.status != 200) {
-    alert(`Error ${xhr.status}: ${xhr.statusText}`);
+    alert(`에러 ${xhr.status}: ${xhr.statusText}`);
   } else {
     alert(xhr.response);
   }
-} catch(err) { // instead of onerror
-  alert("Request failed");
+} catch(err) { // onerror 대신
+  alert("요청 실패");
 }
 ```
 
-It might look good, but synchronous calls are used rarely, because they block in-page JavaScript till the loading is complete. In some browsers it becomes impossible to scroll. If a synchronous call takes too much time, the browser may suggest to close the "hanging" webpage.
+겉보기엔 괜찮아 보일 수 있지만, 동기 호출은 로딩이 완료될 때까지 페이지 안의 자바스크립트 실행을 막기 때문에 거의 쓰지 않습니다. 어떤 브라우저에서는 스크롤조차 할 수 없게 됩니다. 동기 호출이 너무 오래 걸리면 브라우저가 "멈춘" 웹페이지를 닫으라고 제안할 수도 있습니다.
 
-Many advanced capabilities of `XMLHttpRequest`, like requesting from another domain or specifying a timeout, are unavailable for synchronous requests. Also, as you can see, no progress indication.
+다른 도메인으로 요청하거나 타임아웃을 지정하는 등 `XMLHttpRequest`의 많은 고급 기능은 동기 요청에서 사용할 수 없습니다. 또한 보시다시피 진행 상황 표시도 없습니다.
 
-Because of all that, synchronous requests are used very sparingly, almost never. We won't talk about them any more.
+이런 이유로 동기 요청은 아주 드물게, 거의 쓰지 않습니다. 더 이상 다루지 않겠습니다.
 
-## HTTP-headers
+## HTTP 헤더
 
-`XMLHttpRequest` allows both to send custom headers and read headers from the response.
+`XMLHttpRequest`로 커스텀 헤더를 보내고 응답 헤더를 읽을 수 있습니다.
 
-There are 3 methods for HTTP-headers:
+HTTP 헤더를 다루는 메서드는 세 가지입니다.
 
 `setRequestHeader(name, value)`
-: Sets the request header with the given `name` and `value`.
+: 주어진 `name`과 `value`로 요청 헤더를 설정합니다.
 
-    For instance:
+    예를 들어 다음과 같습니다.
 
     ```js
     xhr.setRequestHeader('Content-Type', 'application/json');
     ```
 
-    ```warn header="Headers limitations"
-    Several headers are managed exclusively by the browser, e.g. `Referer` and `Host`.
-    The full list is [in the specification](https://xhr.spec.whatwg.org/#the-setrequestheader()-method).
+    ```warn header="헤더 제한"
+    브라우저가 독점적으로 관리하는 헤더도 있습니다. 예를 들어 `Referer`, `Host`가 그렇습니다.
+    전체 목록은 [명세](https://xhr.spec.whatwg.org/#the-setrequestheader()-method)에서 확인할 수 있습니다.
 
-    `XMLHttpRequest` is not allowed to change them, for the sake of user safety and correctness of the request.
+    사용자 안전과 요청의 정확성을 위해 `XMLHttpRequest`는 이런 헤더를 변경할 수 없습니다.
     ```
 
-    ````warn header="Can't remove a header"
-    Another peculiarity of `XMLHttpRequest` is that one can't undo `setRequestHeader`.
+    ````warn header="헤더를 제거할 수 없습니다"
+    `XMLHttpRequest`의 또 다른 특이점은 `setRequestHeader`를 되돌릴 수 없다는 것입니다.
 
-    Once the header is set, it's set. Additional calls add information to the header, don't overwrite it.
+    헤더는 한 번 설정하면 그대로 유지됩니다. 같은 헤더를 추가로 설정하면 기존 값을 덮어쓰지 않고 헤더 정보에 더해집니다.
 
-    For instance:
+    예를 들어 다음과 같습니다.
 
     ```js
     xhr.setRequestHeader('X-Auth', '123');
     xhr.setRequestHeader('X-Auth', '456');
 
-    // the header will be:
+    // 헤더는 다음처럼 됩니다.
     // X-Auth: 123, 456
     ```
     ````
 
 `getResponseHeader(name)`
-: Gets the response header with the given `name` (except `Set-Cookie` and `Set-Cookie2`).
+: 주어진 `name`의 응답 헤더를 가져옵니다(`Set-Cookie`와 `Set-Cookie2` 제외).
 
-    For instance:
+    예를 들어 다음과 같습니다.
 
     ```js
     xhr.getResponseHeader('Content-Type')
     ```
 
 `getAllResponseHeaders()`
-: Returns all response headers, except `Set-Cookie` and `Set-Cookie2`.
+: `Set-Cookie`와 `Set-Cookie2`를 제외한 모든 응답 헤더를 반환합니다.
 
-    Headers are returned as a single line, e.g.:
+    헤더는 하나의 문자열로 반환됩니다. 예시는 다음과 같습니다.
 
     ```http
     Cache-Control: max-age=31536000
@@ -311,11 +311,11 @@ There are 3 methods for HTTP-headers:
     Date: Sat, 08 Sep 2012 16:53:16 GMT
     ```
 
-    The line break between headers is always `"\r\n"` (doesn't depend on OS), so we can easily split it into individual headers. The separator between the name and the value is always a colon followed by a space `": "`. That's fixed in the specification.
+    헤더 사이의 줄 바꿈은 항상 `"\r\n"`입니다(OS와 무관). 따라서 개별 헤더로 쉽게 나눌 수 있습니다. 이름과 값 사이의 구분자는 항상 콜론 뒤에 공백이 붙은 `": "`입니다. 이는 명세에 고정되어 있습니다.
 
-    So, if we want to get an object with name/value pairs, we need to throw in a bit JS.
+    따라서 이름/값 쌍을 가진 객체를 얻으려면 자바스크립트를 조금 사용해야 합니다.
 
-    Like this (assuming that if two headers have the same name, then the latter one overwrites the former one):
+    예를 들어 다음처럼 만들 수 있습니다(이름이 같은 헤더가 두 개 있으면 나중 헤더가 앞선 헤더를 덮어쓴다고 가정합니다).
 
     ```js
     let headers = xhr
@@ -332,21 +332,21 @@ There are 3 methods for HTTP-headers:
 
 ## POST, FormData
 
-To make a POST request, we can use the built-in [FormData](mdn:api/FormData) object.
+POST 요청을 보내려면 내장 [FormData](mdn:api/FormData) 객체를 사용할 수 있습니다.
 
-The syntax:
+문법은 다음과 같습니다.
 
 ```js
-let formData = new FormData([form]); // creates an object, optionally fill from <form>
-formData.append(name, value); // appends a field
+let formData = new FormData([form]); // 객체 생성, 선택적으로 <form>에서 채움
+formData.append(name, value); // 필드 추가
 ```
 
-We create it, optionally fill from a form, `append` more fields if needed, and then:
+객체를 만들고 선택적으로 폼에서 값을 채운 뒤, 필요하면 `append`로 필드를 더 추가합니다. 그런 다음 아래처럼 보냅니다.
 
-1. `xhr.open('POST', ...)` – use `POST` method.
-2. `xhr.send(formData)` to submit the form to the server.
+1. `xhr.open('POST', ...)` – `POST` 메서드를 사용합니다.
+2. `xhr.send(formData)`로 폼을 서버에 제출합니다.
 
-For instance:
+예시는 다음과 같습니다.
 
 ```html run refresh
 <form name="person">
@@ -355,13 +355,13 @@ For instance:
 </form>
 
 <script>
-  // pre-fill FormData from the form
+  // 폼에서 FormData를 미리 채웁니다
   let formData = new FormData(document.forms.person);
 
-  // add one more field
+  // 필드 하나 더 추가
   formData.append("middle", "Lee");
 
-  // send it out
+  // 전송
   let xhr = new XMLHttpRequest();
   xhr.open("POST", "/article/xmlhttprequest/post/user");
   xhr.send(formData);
@@ -370,11 +370,11 @@ For instance:
 </script>
 ```
 
-The form is sent with `multipart/form-data` encoding.
+폼은 `multipart/form-data` 인코딩으로 전송됩니다.
 
-Or, if we like JSON more, then `JSON.stringify` and send as a string.
+또는 JSON이 더 좋다면 `JSON.stringify`로 문자열을 만들어 전송하면 됩니다.
 
-Just don't forget to set the header `Content-Type: application/json`, many server-side frameworks automatically decode JSON with it:
+다만 `Content-Type: application/json` 헤더를 설정하는 것을 잊지 마세요. 많은 서버 사이드 프레임워크가 이 헤더를 보고 JSON을 자동으로 디코딩합니다.
 
 ```js
 let xhr = new XMLHttpRequest();
@@ -390,45 +390,45 @@ xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
 xhr.send(json);
 ```
 
-The `.send(body)` method is pretty omnivore. It can send almost any `body`, including `Blob` and `BufferSource` objects.
+`.send(body)` 메서드는 꽤 범용적입니다. `Blob`과 `BufferSource` 객체를 포함해 거의 모든 `body`를 보낼 수 있습니다.
 
-## Upload progress
+## 업로드 진행률
 
-The `progress` event triggers only on the downloading stage.
+`progress` 이벤트는 다운로드 단계에서만 발생합니다.
 
-That is: if we `POST` something, `XMLHttpRequest` first uploads our data (the request body), then downloads the response.
+즉, `POST`로 무언가를 보내면 `XMLHttpRequest`는 먼저 데이터(요청 본문)를 업로드하고, 그다음 응답을 다운로드합니다.
 
-If we're uploading something big, then we're surely more interested in tracking the upload progress. But `xhr.onprogress` doesn't help here.
+큰 데이터를 업로드하는 경우엔 업로드 진행률을 추적하는 데 더 관심이 있을 것입니다. 하지만 이때 `xhr.onprogress`는 도움이 되지 않습니다.
 
-There's another object, without methods, exclusively to track upload events: `xhr.upload`.
+업로드 이벤트 추적 전용 객체인 `xhr.upload`가 따로 있습니다. 이 객체에는 메서드가 없습니다.
 
-It generates events, similar to `xhr`, but `xhr.upload` triggers them solely on uploading:
+`xhr.upload`는 `xhr`과 비슷하게 이벤트를 생성하지만, 오직 업로드 중에만 이벤트를 발생시킵니다.
 
-- `loadstart` -- upload started.
-- `progress` -- triggers periodically during the upload.
-- `abort` -- upload aborted.
-- `error` -- non-HTTP error.
-- `load` -- upload finished successfully.
-- `timeout` -- upload timed out (if `timeout` property is set).
-- `loadend` -- upload finished with either success or error.
+- `loadstart` -- 업로드가 시작됨.
+- `progress` -- 업로드 중 주기적으로 발생함.
+- `abort` -- 업로드가 중단됨.
+- `error` -- HTTP와 무관한 에러.
+- `load` -- 업로드가 성공적으로 완료됨.
+- `timeout` -- 업로드 타임아웃(`timeout` 프로퍼티가 설정된 경우).
+- `loadend` -- 성공이나 에러 여부와 관계없이 업로드가 끝남.
 
-Example of handlers:
+핸들러 예시는 다음과 같습니다.
 
 ```js
 xhr.upload.onprogress = function(event) {
-  alert(`Uploaded ${event.loaded} of ${event.total} bytes`);
+  alert(`${event.total} 바이트 중 ${event.loaded} 바이트 업로드됨`);
 };
 
 xhr.upload.onload = function() {
-  alert(`Upload finished successfully.`);
+  alert(`업로드가 성공적으로 완료되었습니다.`);
 };
 
 xhr.upload.onerror = function() {
-  alert(`Error during the upload: ${xhr.status}`);
+  alert(`업로드 중 에러 발생: ${xhr.status}`);
 };
 ```
 
-Here's a real-life example: file upload with progress indication:
+다음은 실제 예시입니다. 진행률 표시가 있는 파일 업로드입니다.
 
 ```html run
 <input type="file" onchange="upload(this.files[0])">
@@ -437,19 +437,19 @@ Here's a real-life example: file upload with progress indication:
 function upload(file) {
   let xhr = new XMLHttpRequest();
 
-  // track upload progress
+  // 업로드 진행률 추적
 *!*
   xhr.upload.onprogress = function(event) {
-    console.log(`Uploaded ${event.loaded} of ${event.total}`);
+    console.log(`${event.total} 바이트 중 ${event.loaded} 바이트 업로드됨`);
   };
 */!*
 
-  // track completion: both successful or not
+  // 성공 여부와 관계없이 완료 추적
   xhr.onloadend = function() {
     if (xhr.status == 200) {
-      console.log("success");
+      console.log("성공");
     } else {
-      console.log("error " + this.status);
+      console.log("에러 " + this.status);
     }
   };
 
@@ -459,11 +459,11 @@ function upload(file) {
 </script>
 ```
 
-## Cross-origin requests
+## 크로스 오리진 요청
 
-`XMLHttpRequest` can make cross-origin requests, using the same CORS policy as [fetch](info:fetch-crossorigin).
+`XMLHttpRequest`는 [fetch](info:fetch-crossorigin)와 같은 CORS 정책을 사용해 크로스 오리진 요청을 보낼 수 있습니다.
 
-Just like `fetch`, it doesn't send cookies and HTTP-authorization to another origin by default. To enable them, set `xhr.withCredentials` to `true`:
+`fetch`와 마찬가지로 기본적으로 다른 오리진에 쿠키와 HTTP 인증 정보를 보내지 않습니다. 이를 활성화하려면 `xhr.withCredentials`를 `true`로 설정하세요.
 
 ```js
 let xhr = new XMLHttpRequest();
@@ -475,12 +475,12 @@ xhr.open('POST', 'http://anywhere.com/request');
 ...
 ```
 
-See the chapter <info:fetch-crossorigin> for details about cross-origin headers.
+크로스 오리진 헤더에 대한 자세한 내용은 <info:fetch-crossorigin> 챕터를 참고하세요.
 
 
-## Summary
+## 요약
 
-Typical code of the GET-request with `XMLHttpRequest`:
+`XMLHttpRequest`로 GET 요청을 보내는 일반적인 코드는 다음과 같습니다.
 
 ```js
 let xhr = new XMLHttpRequest();
@@ -490,39 +490,39 @@ xhr.open('GET', '/my/url');
 xhr.send();
 
 xhr.onload = function() {
-  if (xhr.status != 200) { // HTTP error?
-    // handle error
-    alert( 'Error: ' + xhr.status);
+  if (xhr.status != 200) { // HTTP 에러?
+    // 에러 처리
+    alert( '에러: ' + xhr.status);
     return;
   }
 
-  // get the response from xhr.response
+  // xhr.response에서 응답 가져오기
 };
 
 xhr.onprogress = function(event) {
-  // report progress
-  alert(`Loaded ${event.loaded} of ${event.total}`);
+  // 진행 상황 보고
+  alert(`${event.total} 바이트 중 ${event.loaded} 바이트 로드됨`);
 };
 
 xhr.onerror = function() {
-  // handle non-HTTP error (e.g. network down)
+  // HTTP와 무관한 에러 처리(예: 네트워크 끊김)
 };
 ```
 
-There are actually more events, the [modern specification](https://xhr.spec.whatwg.org/#events) lists them (in the lifecycle order):
+실제로는 이벤트가 더 많습니다. [최신 명세](https://xhr.spec.whatwg.org/#events)에는 수명 주기 순서대로 다음 이벤트가 나열되어 있습니다.
 
-- `loadstart` -- the request has started.
-- `progress` -- a data packet of the response has arrived, the whole response body at the moment is in `response`.
-- `abort` -- the request was canceled by the call `xhr.abort()`.
-- `error` -- connection error has occurred, e.g. wrong domain name. Doesn't happen for HTTP-errors like 404.
-- `load` -- the request has finished successfully.
-- `timeout` -- the request was canceled due to timeout (only happens if it was set).
-- `loadend` -- triggers after `load`, `error`, `timeout` or `abort`.
+- `loadstart` -- 요청이 시작됨.
+- `progress` -- 응답의 데이터 패킷이 도착함. 이 시점까지 받은 응답 본문 전체는 `response`에 들어 있음.
+- `abort` -- `xhr.abort()` 호출로 요청이 취소됨.
+- `error` -- 연결 에러가 발생함. 예: 잘못된 도메인 이름. 404 같은 HTTP 에러에서는 발생하지 않음.
+- `load` -- 요청이 성공적으로 완료됨.
+- `timeout` -- 타임아웃으로 요청이 취소됨(설정된 경우에만 발생).
+- `loadend` -- `load`, `error`, `timeout`, `abort` 후 발생함.
 
-The `error`, `abort`, `timeout`, and `load` events are mutually exclusive. Only one of them may happen.
+`error`, `abort`, `timeout`, `load` 이벤트는 상호 배타적입니다. 이들 중 하나만 발생할 수 있습니다.
 
-The most used events are load completion (`load`), load failure (`error`), or we can use a single `loadend` handler and check the properties of the request object `xhr` to see what happened.
+가장 자주 쓰는 이벤트는 로드 완료(`load`)와 로드 실패(`error`)입니다. 또는 단일 `loadend` 핸들러를 사용하고 요청 객체 `xhr`의 프로퍼티를 확인해 무슨 일이 일어났는지 판단할 수 있습니다.
 
-We've already seen another event: `readystatechange`. Historically, it appeared long ago, before the specification settled. Nowadays, there's no need to use it, we can replace it with newer events, but it can often be found in older scripts.
+`readystatechange`라는 이벤트도 이미 살펴봤습니다. 역사적으로 이 이벤트는 명세가 자리 잡기 전 오래전에 등장했습니다. 요즘은 사용할 필요가 없고, 더 새로운 이벤트로 대체할 수 있지만 오래된 스크립트에서는 자주 볼 수 있습니다.
 
-If we need to track uploading specifically, then we should listen to same events on `xhr.upload` object.
+업로드만 따로 추적해야 한다면 `xhr.upload` 객체에서 같은 이벤트를 감지하면 됩니다.