2022-03-23(수)

16.1 파일 업로드 : jQuery 빌트인 객체 사용하기

프로토콜이 중요함

HTTP 요청과 응답

Web Browser ----------- Web Server

중간에 proxy 대행자를 둬서 들어오는 데이터를 감시해서
중간에 훔쳐보자

charles proxy 검색

웹 서버가 웹 브라우저에 어떤 데이터를 보내는지 알 수 있음

HTTP 문서가 있어서 어떤 식으로 주고 받는지는 명확하게 알 수 있지만
체험해보자

요청의 끝을 나타내는 엔터

헤더도 종류가 나뉘어져 있다

요청의 끝을 표시하는 빈 줄

HTTP 요청 프로토콜 : 헤더 (부가 정보)

https://www.w3.org/Protocols/rfc2616/rfc2616-sec5.html#sec5.3

① general geader : 요청과 응답 모두에 사용

Cache-Control <- 임시 보관 제어
Connection <- 연결 유지 제어
Data <- 콘텐트 생성일

② request header : 요청하는 쪽에서 서버에 보내는 부가 정보
Accept <- 수용 가능한 콘텐트 유형 정보
Accept-Encoding <- 수용 가능한 콘텐트의 인코딩 정보
Accept-Language <- 수용 가능한 콘텐트의 언어
User-Agetn <- 요청하는 클라이언트 정보

③ entity header : 보내고/받는 콘텐트의 부가정보
Content-Encoding <- 콘텐트의 인코딩 형식
Content-Type <- 콘텐트의 MIME 타입
Content-Language <- 언어
Content-Length <- 길이

요청할 때 파일을 업로드 했다거나 json 데이터를 보내면

④ response header : 응답하는 쪽에서 클라이언트에게 보내는 부가정보
Server <- 응답하는 서버의 정보
Location <- 다른 URL로 이동하는 정보

요청할 때 => general + request + entity
응답할 때 => general + response + entity

package com.eomcs.web.html;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class FormController {

  @RequestMapping("/html/form/exam01")
  @ResponseBody
  public String exam01() {
    return "Hello!";
  }

}

주소창에 입력하고 엔터

GET 요청 / POST 요청

① GET 요청

② POST 요청
POST에는 Content-Length가 있다
Content-Length: 보내는 데이터의 바이트 수
Content-Type: application/x-www-form-urlencoded

http://localhost:8080/html/form/exam-02.html

GET 요청에서 Data 보내는 방법

특징
UR에 데이터가 포함됨 -> 웹 브라우저의 캐시 메모리에 보관됨 -> 쉽게 외부에 노출 -> 보안에 매우 취약

URL과 데이터를 묶어 전달하기 쉽다
-> 조회 페이지의 URL을 저장할 때 주로 사용

binary 데이터 전송불가! (파일 업로드 불가!
URL 크기의 제약 -> 대량의 콘텐트 전송 불가

POST 요청에서 Data 보내는 방법

특징
messge-body 부분에 보낼 데이터를 둔다
-> 주소창에 데이터가 노출되지 않는다
-> 웹 브라우저 캐시에 보관이 안 된다
-> 보안에 덜 취약하다 (보안에 완벽하다는 뜻이 아님)
-> 보내는 데이터의 크기에 제약이 없다
-> "multipart/form-data" MIME 타입으로 인코딩을 하면 바이너리 데이터를 전송(파일 업로드)할 수 있다.

message body 부분에 데이터를 붙여서 보낸다
보내는 데이터의 크기에 제약이 없을 뿐만 아니라
"multipart/form-data" MIME 인코딩으로 바이너리 데이터도 전송할 수 있다

url에 캐시된 데이터가 노출되기 때문에 아이디 비밀번호 같은 걸 GET으로 보내면 안 된다

파일 이름만 서버에 보낸 거
파일 자체는 안 보냄

Content-Length: 4046

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryEp7cUw4FxFnyMlTE

구분선

  @RequestMapping("/html/form/exam11")
  public Object exam02(String name, int age, MultipartFile photo) {
    System.out.println(name);
    System.out.println(age);
    System.out.println(photo.getOriginalFilename());

    return "ok!";
  }