[WEB] HTTP multipart/form-data

hyun0820·2021년 9월 6일
0

Computer Science

목록 보기
2/5
post-thumbnail

서버에서 REST API를 만들면서, 클라이언트에서 서버로 파일을 업로드하는 과정을 알아보았습니다.

HTTP 란?

인터넷 상에서 클라이언트와 서버가 자원을 주고 받을 때 쓰는 통신 규약입니다.
TCP, UDP를 사용하며, 80번 포트를 사용합니다.

📁 클라이언트 → 서버 파일 업로드하는 과정

파일 업로드를 구현할 때, 클라이언트가 웹 브라우저라면 form을 통해서 파일을 등록하여 전송하게 됩니다. 이때 웹 브라우저가 보내는 HTTP 메시지는 Content-Type 속성이 [multipart/form-data]로 지정되며, 정해진 형식에 따라 메시지를 인코딩하여 전송합니다. 이를 처리하기 위한 서버는 멀티 파트 메시지에 대해서 각 파트별로 분리하여 개별 파일의 정보를 얻게 됩니다.

  • 프론트에서 서버로 파일을 직접 전송하나요?

    • NO ❗️❗️

      이미지, 텍스트 파일을 전송한다고 해서 .png/.jpg 등 확장자를 가진 파일 자체가 전송되는 것이 아닙니다.

      → 이미지 파일도 문자로 이뤄져 있기 때문에 이미지 파일을 스펙에 맞게 문자로 생성하여 HTTP request body에 담아 서버로 전송하는 것입니다.

HTTP 메세지

  • HTTP 메세지 란?

    • 메시지 타입

      • 요청 메시지(Request Message) : 클라이언트가 서버로 전달해서 서버의 액션이 발생
      • 응답 메시지(Response Message) : 서버가 액션 후 클라이언트에게 답변
    • 메시지 구성

      • Start Line : 실행해야 할 요청 및 요청 수행에 대한 결과가 기록됩니다.
      • Header : 요청, 본문에 대한 설명이 기록됩니다.
      • Blank Line : 요청에 대한 모든 메타 정보가 전송되었음을 알립니다.
      • Body : 요청과 관련된 내용 혹은 문서가 포함됩니다.

  • Request Message 📤

    Method, Path, Version of the Protocol, Headers

    ✔️ Method : HTTP 메서드는 보통 클라이언트가 수행하고자 하는 동작을 정의한 GET, POST, OPTIONS, HEAD를 지칭. 클라이언트는 리소스를 가져오거나 (GET사용) HTML 폼의 데이터를 전송(POST 사용)한다.
    ✔️ Path : 가져오려는 리소스의 경로는 프로토콜 http://, 도메인, 또는 TCP 포트 여기서는 80인 요소들을 제거한 리소스의 URL이다.
    ✔️ Version of the Protocol : HTTP 프로토콜의 버전.
    ✔️ Headers : 서버에 대한 추가 정보를 전달하는 선택적 헤더들.

  • Response Message 📥

    Version of the Protocol, Status Code, Status Message, Headers

    ✔️ Version of the Protocol : HTTP 프로토콜의 버전.
    ✔️ Status Code : 요청의 성공 여부와, 그 이유를 나타내는 상태 코드.
    ✔️ Status Message : 아무런 영향력이 없는, 상태 코드의 짧은 설명을 나타내는 상태 메시지.
    ✔️ Headers : 요청 헤더와 비슷한, HTTP 헤더들.

✔️ 파일 업로드할 때 알아야하는 HTTP 규약

Content-Typemultipart/form-data로 지정이 되어 있어야 서버에서 정상적으로 데이터를 처리할 수 있으며, boundary에 지정되어 있는 문자열을 이용하여 전송되는 파일 데이터의 구분자로 사용됩니다.

아래의 예시 사진을 보면 boundary의 문자열 중 마지막의 ------WebKitFormBoundaryNEesLHNz4NvHFzAA-- 값은 마지막에 --가 붙은 것을 확인할 수 있는데, 이는 body의 끝을 의미 합니다. 서버는 이러한 HTTP 규약에 따라 데이터를 파싱한 후 처리하게 됩니다.
▪️ 사진 출처 : https://lng1982.tistory.com/209

  • Content-Type : multipart/form-data
  • 전송되는 파일 데이터의 구분자로 boundary에 지정되어 있는 문자열을 이용합니다.

📚 Reference

https://velog.io/@gparkkii/HTTPMessage

0개의 댓글