HTTP 요청 관련 개념 정리 (Axios, Content-Type, Binary 처리 등)

오늘은 웹 개발 중 자주 마주치는 HTTP 요청 관련 개념들을 정리했다.

Axios를 사용하면서 겪은 궁금증들을 하나씩 정리하며 개념을 명확히 했다.

 

HTTP 요청 헤더: Authorization과 쿠키 인증

• Access Token은 보통 Authorization: Bearer <token> 헤더에 넣어 전송.
• 하지만 토큰을 쿠키에 저장하는 경우, 별도로 Authorization 헤더는 비어있거나, 없어도 된다. 브라우저가 자동으로 쿠키를 보내주기 때문.  (withCredentials: true를 설정하면 쿠키가 자동 전송)
• Refresh Token은 보통 별도의 엔드포인트(/auth/refresh)를 호출해서 새로운 Access Token을 받아오는 방식으로 사용.

 

Referer를 활용한 뒤로 가기 처리

찾아보던 중에 Referer을 알게 되었다.

이건 현재 요청이 발생한 이전 페이지 URL 으로 이걸 사용해서 되돌아갈 페이지를 결정할 수 있을까 고민했는데, 

Referer 헤더는 단발성으로 새 요청이 없으면 기억되지 않는다. 

그래서 페이지 내에서 이동할 때는 갱신되지 않는다. (SPA 환경에서는 새 페이지를 불러오지 않기 때문에)

• 페이지 이동 시 이전 페이지를 기억해서 돌아가고 싶을 때 document.referrer를 사용할 수 있다. (단, 새 요청이 없는 상태에서는 Referer가 유지)
• SPA에서는 쿼리스트링을 사용하는 방법도 괜찮음 

 

Content-Type이란?

HTTP 요청/응답 본문 데이터 형식을 알려주는 헤더

브라우저가 서버 본문을 어떻게 해석해야하는 지 알려줌

application/json	JSON 형식의 데이터	대부분의 API 요청/응답
text/plain	일반 텍스트	로그, 간단한 메시지
text/html	HTML 문서	웹페이지 응답
multipart/form-data	폼 데이터 + 파일 포함 가능	이미지 업로드 등
application/x-www-form-urlencoded	URL 인코딩된 폼 데이터	로그인, 검색
application/octet-stream	이진 데이터 (범용)	파일 다운로드, 바이너리 전송
image/png, image/jpeg	이미지	브라우저에 바로 표시
application/pdf	PDF 문서	미리보기 또는 다운로드

 

FormData 사용 시 Content-Type은 설정하지 말 것

• 브라우저/라이브러리가 boundary를 포함해 자동 설정함.
• 직접 설정하면 서버가 데이터를 제대로 못 읽는 문제 발생.

const form = new FormData();
form.append('file', file);
axios.post('/upload', form); // ✔️ Content-Type 자동 설정됨

 

응답 데이터 타입 (responseType)

Axios에서 서버 응답을 어떤 형식으로 받을지를 설정할 수 있는데, 이때 사용하는 옵션이 responseType

json	JSON 자동 파싱 (기본값)
text	일반 문자열
arraybuffer	바이너리 버퍼 (ex: PDF, 이미지 등)
blob	브라우저에서 파일처럼 다룰 수 있는 데이터 (ex: 이미지 미리보기)
stream	Node.js에서 대용량 스트리밍 처리용 (파일 다운로드 등)

 

arraybuffer, blob, stream 차이점

바이너리 데이터를 다룰 때 사용하는 대표적인 타입

	arraybuffer	blob	stream
용도	데이터 가공, 분석, 변환	브라우저에서 파일 다운로드 / 미리보기	대용량 파일 다운로드 / 업로드 (Node.js)
데이터 형태	메모리상의 이진 데이터 버퍼	파일처럼 다룰 수 있는 객체	조각 단위로 처리되는 데이터 스트림
지원 환경	브라우저 / Node.js	브라우저 전용	Node.js 전용
주요 라이브러리	DataView, TypedArray, xlsx, pdf-lib 등	URL.createObjectURL(), <a download>, <img> 등	fs, stream, zlib, form-data 등
변환 가능성	Blob으로 변환 가능 (new Blob([arraybuffer]))	ArrayBuffer로 변환 가능 (blob.arrayBuffer())	일반적으로 Buffer 또는 파일로 저장
Axios 예시	responseType: 'arraybuffer'	responseType: 'blob'	responseType: 'stream'

 

arraybuffer

• 정의: 메모리에 저장된 고정 길이의 이진 데이터 버퍼
• 사용 환경: 브라우저, Node.js 범용
• 장점:
  • 다양한 형식의 바이너리 데이터를 조작 가능 (Uint8Array, DataView 등과 함께 사용)
• 사용 예: PDF, Excel 파일 다운로드, WebAssembly, 이미지 처리 등

 

blob

• 정의: 브라우저 전용의 "파일처럼" 다룰 수 있는 데이터 객체 (Binary Large Object)
• 사용 환경: 브라우저 전용
• 장점:
  • URL.createObjectURL()과 함께 사용해 미리보기 가능
  • 다운로드 링크 생성 가능
  • onDownloadProgress로 사용 가능
• 사용 예: 이미지, 동영상 미리보기, 사용자에게 다운로드 제공 

 

stream

• 정의: 데이터를 조각 단위로 전달받으며 처리하는 방식
• 사용 환경: Node.js 전용
• 장점:
  • 대용량 파일 처리에 적합 (메모리에 전부 올리지 않아도 됨)
  • 다운로드/업로드 성능 최적화
• 사용 예: 영상 스트리밍, 서버 사이드 파일 다운로드