Merge pull request #1292 from javascript-tutorial/cbnu2022-formdata

 [FormData] 번역

Author: Violet-Bora-Lee

5-network/02-formdata/article.md

@@ -1,20 +1,20 @@
-
-# FormData
+
+# FormData 객체
 
 이번 챕터에선 파일 여부나 추가 필드 여부 등과 상관없이 통용되는 HTML 폼(form) 전송 방법에 대해 알아보겠습니다.
 
-[FormData](https://xhr.spec.whatwg.org/#interface-formdata) objects can help with that. As you might have guessed, it's the object to represent HTML form data.
+[FormData](https://xhr.spec.whatwg.org/#interface-formdata)는 폼을 쉽게 보내도록 도와주는 객체입니다. 이름을 보고 유추하셨듯이 `FormData` 객체는 HTML 폼 데이터를 나타냅니다.
 
-The constructor is:
+생성자는 다음과 같습니다.
 ```js
 let formData = new FormData([form]);
 ```
 
 HTML에 `form` 요소가 있는 경우, 위와 같은 코드를 작성하면 해당 폼 요소의 필드 전체가 자동 반영됩니다.
 
-The special thing about `FormData` is that network methods, such as `fetch`, can accept a `FormData` object as a body. It's encoded and sent out with `Content-Type: multipart/form-data`.
+`fetch` 등의 네트워크 메서드가 `FormData` 객체를 바디로 받는다는 건 `FormData`의 특징입니다. 이때 브라우저가 보내는 HTTP 메시지는 인코딩되고 `Content-Type` 속성은 `multipart/form-data`로 지정된 후 전송됩니다.
 
-From the server point of view, that looks like a usual form submission.
+서버 관점에선 `FormData`를 사용한 방식과 일반 폼 전송 방식에 차이가 없습니다
 
 ## 간단한 폼 전송하기
 
@@ -24,7 +24,7 @@ From the server point of view, that looks like a usual form submission.
 
 ```html run autorun
 <form id="formElem">
-  <input type="text" name="name" value="John">
+  <input type="text" name="name" value="Bora">
   <input type="text" name="surname" value="Lee">
   <input type="submit">
 </form>
@@ -53,20 +53,20 @@ From the server point of view, that looks like a usual form submission.
 
 `FormData`에 속하는 필드는 아래와 같은 메서드로 수정할 수 있습니다.
 
-- `formData.append(name, value)` - add a form field with the given `name` and `value`,
+- `formData.append(name, value)` - `name`과 `value`를 가진 폼 필드를 추가
 - `formData.append(name, blob, fileName)` - `<input type="file">`형태의 필드를 추가. 세 번째 인수 `fileName`은 (필드 이름이 아니고) 사용자가 해당 이름을 가진 파일을 폼에 추가한 것처럼 설정해줌
-- `formData.delete(name)` - remove the field with the given `name`,
+- `formData.delete(name)` - `name`에 해당하는 필드를 삭제
 - `formData.get(name)` - `name`에 해당하는 필드의 값을 가져옴
-- `formData.has(name)` - if there exists a field with the given `name`, returns `true`, otherwise `false`
+- `formData.has(name)` - `name`에 해당하는 필드가 있으면 `true`를, 그렇지 않으면 `false`를 반환
 
-A form is technically allowed to have many fields with the same `name`, so multiple calls to `append` add more same-named fields.
+폼은 이름(`name`)이 같은 필드 여러 개를 허용하기 때문에 `append` 메서드를 여러 번 호출해 이름이 같은 필드를 계속 추가해도 문제가 없습니다.
 
 `append` 메서드 이외에 필드 추가 시 사용할 수 있는 메서드로 `set`도 있습니다. `set`이 `append` 메서드와 다른 점은 `set`은 `name`과 동일한 이름을 가진 필드를 모두 제거하고 새로운 필드 하나를 추가한다는 데 있습니다. 따라서 `set` 메서드를 쓰면 `name`을 가진 필드가 단 한 개만 있게끔 보장할 수 있습니다. 이 외에 다른 기능은 `append` 메서드와 동일합니다.
 
-- `formData.set(name, value)`,
-- `formData.set(name, blob, fileName)`.
+- `formData.set(name, value)`
+- `formData.set(name, blob, fileName)`
 
-Also we can iterate over formData fields using `for..of` loop:
+참고로 폼 데이터 필드에 반복 작업을 할땐 `for..of` 루프를 사용할 수 있습니다.
 
 ```js run
 let formData = new FormData();
@@ -75,19 +75,19 @@ formData.append('key2', 'value2');
 
 // key/value 쌍이 담긴 리스트
 for(let [name, value] of formData) {
-  alert(`${name} = ${value}`); // key1=value1, then key2=value2
+  alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
 }
 ```
 
-## Sending a form with a file
+## 파일이 있는 폼 전송하기
 
-The form is always sent as `Content-Type: multipart/form-data`, this encoding allows to send files. So, `<input type="file">` fields are sent also, similar to a usual form submission.
+폼을 전송할 때 HTTP 메시지의 `Content-Type` 속성은 항상 `multipart/form-data`이고 메시지는 인코딩되어 전송됩니다. 파일이 있는 폼도 당연히 이 규칙을 따르기 때문에 `<input type="file">`로 지정한 필드 역시 일반 폼을 전송할 때와 유사하게 전송됩니다.
 
 파일이 있는 폼 예시를 살펴봅시다.
 
 ```html run autorun
 <form id="formElem">
-  <input type="text" name="firstName" value="John">
+  <input type="text" name="firstName" value="Bora">
   Picture: <input type="file" name="picture" accept="image/*">
   <input type="submit">
 </form>
@@ -112,11 +112,11 @@ The form is always sent as `Content-Type: multipart/form-data`, this encoding al
 
 ## Blob 데이터가 있는 폼 전송하기
 
-<info:fetch> 챕터에서 살펴본 바와 같이 이미지 같은 동적으로 생성된 바이너리 파일은 `Blob` 객체를 사용해 쉽게 전송할 수 있습니다. 이때 `Blob` 객체는 `fetch` 메서드의 `body` 매개변수에 바로 넘겨줄 수 있죠.
+<info:fetch> 챕터에서 살펴본 바와 같이 이미지 같은 동적으로 생성된 바이너리 파일은 `Blob` 객체를 사용해 쉽게 전송할 수 있습니다. 이때 `Blob` 객체는 `fetch` 메서드의 `body` 매개변수에 바로 넘겨줄 수 있죠. 
 
-In practice though, it's often convenient to send an image not separately, but as a part of the form, with additional fields, such as "name" and other metadata.
+그런데 실제 코딩을 하다 보면 이미지를 별도로 넘겨주는 것보다 폼에 필드를 추가하고 여기에 이미지 '이름' 등의 메타데이터를 같이 실어 넘겨주는 게 좀 더 편리합니다.
 
-서버 입장에서도 원시 바이너리 데이터를 받는 것보다 multipart-encoded 폼을 받는게 좀 더 적합하죠.
+서버 입장에서도 원시 바이너리 데이터를 받는 것보다 multipart-encoded 폼을 받는 게 좀 더 적합하죠.
 
 아래는 `<canvas>`를 사용해 만든 이미지를 `FormData`를 사용해 폼 형태로 다른 추가 필드와 함께 전송하는 예시입니다.
 
@@ -154,17 +154,17 @@ In practice though, it's often convenient to send an image not separately, but a
 </body>
 ```
 
-Please note how the image `Blob` is added:
+예시에서 이미지 `Blob`을 추가한 코드를 다시 봅시다.
 
 ```js
 formData.append("image", imageBlob, "image.png");
 ```
 
 이 코드는 폼에 `<input type="file" name="image">` 태그가 있고, 사용자 기기의 파일 시스템에서 파일명이 `"image.png"`(3번째 인수 참고)인 `imageBlob` 데이터(2번째 인수 참고)를 추가한 것과 동일한 효과를 줍니다.
 
-The server reads form data and the file, as if it were a regular form submission.
+요청을 받은 서버는 일반 폼과 동일하게 폼 데이터와 파일을 읽고 처리합니다.
 
-## Summary
+## 요약
 
 [FormData](https://xhr.spec.whatwg.org/#interface-formdata) 객체는 `fetch` 등의 네트워크 메서드를 통해 HTML 폼을 보내는데 사용됩니다.
 
@@ -177,9 +177,10 @@ The server reads form data and the file, as if it were a regular form submission
 
 메서드를 사용할 때 주의할 점 2가지가 있습니다.
 
-1. The `set` method removes fields with the same name, `append` doesn't. That's the only difference between them.
+1. `set` 메서드는 `name`이 같은 필드 모두를 지우고 `append`는 그렇지 않습니다. 다른 차이는 없습니다.
 2. 파일을 보낼 땐 세 번째 인수가 필요한데 이 인수는 사용자 파일 시스템에서 지정한 파일명과 동일하게 지정됩니다.
-Other methods are:
+
+이외에도 다음과 같은 메서드가 있습니다
 
 - `formData.delete(name)`
 - `formData.get(name)`

5-network/02-formdata/post.view/server.js

@@ -9,7 +9,7 @@ let router = new Router();
 
 router.post('/user', async (ctx) => {
   ctx.body = {
-    message: "User saved"
+    message: "사용자 저장을 성공하였습니다."
   };
 });
 
@@ -34,7 +34,7 @@ router.post('/image-form', async (ctx) => {
   });
 
   ctx.body = {
-    message: `Image saved, firstName: ${fields.firstName}, Image size:${files[0].length}, fileName: ${files[0].filename}`
+    message: `이미지 저장에 성공하였습니다. 이름: ${fields.firstName}, 이미지 크기: ${files[0].length}, 파일명: ${files[0].filename}`
   };
 });
 
@@ -61,7 +61,7 @@ router.post('/user-avatar', async (ctx) => {
   });
 
   ctx.body = {
-    message: `User with picture, firstName: ${fields.firstName}, picture size:${files[0].length}`
+    message: `사용자 이미지 전송이 성공하였습니다. 이름: ${fields.firstName}, 이미지 크기: ${files[0].length}`
   };
 });