- 처음에는 이미지를 서버로 업로드하는 과정에 대해 이해하지 못해서, 단순히 우리가 frontend에서 파일을 업로드할때, data.url 의 string 형식으로 db에 보관해야하는 줄…
- 하지만 이게 생각해보면 엄청 비효율적인 방법이라는갈 알 수 있다. 이미지 파일을 data URL 형식으로 문자열로 저장하면, 문자열의 크기는 이미지 파일의 크기와 거의 같아짐. 예를 들어, 1MB의 이미지 파일을 data URL로 변환하면 약 1MB의 문자열이 생성. 이러한 문자열을 서버에 저장하면, 매우 많은 저장 공간을 차지하게 되어 서버에 무리가 갈 수 있을듯...
- 그렇게 http 규약에 따른 효율적인 파일 전송폼인 form data를 알게됨
formData를 사용하여 이미지 파일을 서버에 전송하는 경우에는 이미지 파일 자체를 전송하기 때문에, 문자열을 저장하는 것보다 훨씬 효율적이라고 한다. formData는 서버에 데이터를 보낼 때 사용하는 객체로, 파일 업로드 등에 사용. 이 방법을 사용하면, 이미지 파일의 크기와 무관하게 효율적으로 서버에 저장할 수 있음. 서버 측에서도 이미지 파일을 쉽게 처리 가능하다고 함.
- 폼데이터로 전송하기 위해서는 객체 형식의 텍스트 정보는 JSON 형식의 문자열로 변환하여
blob 객체로 만든다. blob 객체를 **FormData**에 append 메서드를 이용하여 **createPostRequest**라는 이름으로 추가.
- **
FormData**는 Blob객체와 File 객체를 모두 지원하지만, 일반 객체는 직접 전송할 수 없다. 따라서, 일반 객체를 전송하려면 먼저 JSON 형식의 문자열로 변환하여 Blob 객체로 만든 후, 이를FormData
에 추가해야 한다
- HTTP 프로토콜에서는 클라이언트와 서버 간의 통신에서 전송되는 데이터가 일반 객체일 경우, 해당 객체를 직접 전송할 수 없습니다. 이는 HTTP 프로토콜이 텍스트 기반 프로토콜이기 때문.
- 따라서, 일반 객체를 서버에 전송하려면 객체를 문자열(JSON 형식 등)로 변환하고, 이를 HTTP 요청 메시지에 포함시켜 보내면 서버 측에서도 해당 문자열을 다시 객체로 변환하여 사용한다.
- 이미지 형식의 정보는
File 객체로 전송. Blob 객체와 비슷하지만, File 객체는 추가적으로 파일 이름과 파일 타입 정보를 함께 가지고 접근 가능하다. 따라서, 이미지 파일을 File 객체로 변환할 때, 이미지 파일의 이름과 타입 정보도 함께 지정해서 보내야 함..