한 권으로 끝내는 Node & Express(2판): 모던 웹을 위한 서버 사이드 자바스크립트의 모든 것

155

8

장

폼 처리

8.8

파일 업로드

UI

개선

브라우저에 내장된 파일 업로드용

<

input

>

컨트롤이 그다지 좋지는 않습니다. 그동안 인터넷

에서 본 드래그 앤 드롭 인터페이스와 파일 업로드 버튼에 비하면 실망스럽습니다.

하지만 이번 장에서 배운 테크닉을 멋진 파일 업로드 컨트롤에도 대부분 적용할 수 있으니 걱

정하지 마세요. 그런 멋진 컨트롤도 결국은 똑같은 폼 업로드 메커니즘에서 동작하는 것이니

까요.

프런트엔드에서 가장 널리 쓰이는 파일 업로드 컨트롤은 다음과 같습니다.

●

제이쿼리 파일 업로드

9

●

어피

Uppy

:

10

드롭박스나 인스타그램 같은 외부 서비스를 폭넓게 지원합니다.

●

파일 업로드 윗 프리뷰 :

11

컨트롤을 상세히 설정할 수 있습니다. 파일 객체 배열로

fetch

에서 사용할

FormData

객체를 만듭니다.

8.9

마치며

이번 장에서는 폼을 처리하는 다양한 기법을 배웠습니다. 브라우저가

POST

요청을 통해 폼 콘

텐츠를 서버에 보내고(보통 리디렉트를 통해 ) 서버 응답을 렌더링하는 전통적인 폼 처리 방법

을 배웠고, 최근 유행하는 방법인 브라우저의 개입을 막고

fetch

를 통해 폼을 직접 전송하는

방법도 배웠습니다.

폼을 인코드할 때 널리 쓰이는 방법은 다음과 같습니다.

application

/

x

-

www

-

form

-

urlencoded ...