⏿ 실제 백엔드와 프론트엔드 통신 #5: Content-Type 다양화하기 (Using Axios Instance & Interceptor

프론트엔드와 백엔드의 통신에서 가장 중요한 부분 중 하나는 Content-Type입니다. 이 글에서는 **application/json**과 **multipart/form-data**의 차이, 실제 구현 방식, 그리고 프로젝트에서 Content-Type을 동적으로 처리하는 방법을 친절하게 설명합니다. 프론트엔드와 백엔드 통신에 처음 입문하신 분들도 이해할 수 있도록 쉽게 풀어보겠습니다.

---

1. Content-Type이란?

Content-Type은 서버와 클라이언트가 통신할 때 데이터의 형식을 정의하는 HTTP 헤더입니다. 이를 통해 서버는 클라이언트가 보내는 데이터가 어떤 형식인지 알고 올바르게 처리할 수 있습니다.

Content-Type의 역할

• 클라이언트에서 서버로 데이터 전송: 클라이언트는 서버에 데이터를 전송할 때, 데이터의 형식을 명시해야 합니다.
• 서버에서 클라이언트로 응답: 서버는 클라이언트가 데이터를 올바르게 이해하도록 데이터의 형식을 알려줍니다.

가장 많이 사용하는 Content-Type

• application/json: JSON 형식의 데이터를 전송할 때 사용.
• multipart/form-data: 파일 업로드와 같이 텍스트 데이터와 파일 데이터를 함께 전송할 때 사용.

---

2. Content-Type의 종류와 차이점

2.1 application/json

• 사용 목적: 구조화된 데이터를 전송할 때 사용합니다.
• 형식: JSON 문자열.
• 특징:
  • 서버와 클라이언트가 데이터를 이해하기 쉽습니다.
  • 구조화된 텍스트 데이터만 전송 가능합니다.
  • 파일 업로드는 지원하지 않습니다. 

예제: JSON 데이터 전송

{
  "name": "John",
  "age": 30,
  "isMember": true
}

실제 사용 코드 (React + Axios)

import axios from 'axios';

const sendJsonData = async () => {
  const data = { name: 'John', age: 30 };

  const response = await axios.post('/api/example', data, {
    headers: {
      'Content-Type': 'application/json',
    },
  });

  console.log('응답:', response.data);
};

---

2.2 multipart/form-data

• 사용 목적: 파일 업로드 또는 파일과 텍스트 데이터를 함께 전송할 때 사용합니다.
• 형식: 데이터를 여러 부분(Part)으로 나눠 전송하며, 각각은 이름과 값으로 구성됩니다.
• 특징:
  • 파일 데이터를 바이너리 형식으로 전송할 수 있습니다.
  • 텍스트 데이터와 파일 데이터를 함께 전송할 수 있습니다.
  • 서버에서 데이터를 파싱하려면 추가적인 처리(예: 미들웨어)가 필요합니다.

실제 사용 코드 (React + Axios)

import axios from 'axios';

const uploadFile = async (file) => {
  const formData = new FormData();
  formData.append('file', file);
  formData.append('description', 'Example file upload');

  const response = await axios.post('/api/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  });

  console.log('업로드 결과:', response.data);
};

---

3. Content-Type을 동적으로 처리하기

제가 진행중인 가계부 (wallet-Gurdianss) 프로젝트에서는 다양한 요청 유형이 존재합니다

• JSON 데이터 요청: 일반적인 API 요청. (Login, Signup)
• 파일 업로드 요청: 사용자 이미지, 영수증 등.

이 모든 것을 처리하려면 요청을 동적으로 처리하는 방법이 필요합니다. 아래는 이를 구현하는 일반적인 방식입니다.

Axios 인터셉터로 동적 Content-Type 처리

Axios의 인터셉터를 활용하여 FormData와 JSON 요청을 동적으로 처리할 수 있습니다.

import axios from 'axios';

const apiClient = axios.create({
  baseURL: '/api',
  headers: {
    'Content-Type': 'application/json', // 기본값은 JSON
  },
});

// 요청 인터셉터
apiClient.interceptors.request.use((config) => {
  // FormData 객체 감지
  if (config.data instanceof FormData) {
    config.headers['Content-Type'] = 'multipart/form-data';
  }

  // 토큰 추가 (예: 인증)
  const token = localStorage.getItem('token');
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }

  return config;
});

export default apiClient;

---

4. 서버와의 통신에서 주의할 점

1. Content-Type과 데이터 형식의 일치:
   • 서버에서 Content-Type에 따라 데이터를 파싱하므로, 올바른 형식을 사용하는 것이 중요합니다.
2. 보안:
   • 파일 업로드 요청에서는 악성 파일 업로드를 방지하기 위한 백엔드 검증이 필요합니다.
3. 멀티파트와 JSON 혼용:
   • 파일과 메타데이터를 함께 전송하려면, JSON 데이터를 FormData에 문자열로 추가하면 됩니다.

예제: 멀티파트와 JSON 혼용

const formData = new FormData();
formData.append('file', file);
formData.append('metadata', JSON.stringify({ description: 'Example' }));

await apiClient.post('/api/upload', formData);

---

5. 결론

• **application/json**은 현대 웹에서 기본 데이터 전송 방식으로 사용됩니다.
• **multipart/form-data**는 파일 업로드에 특화된 방식으로, 필요에 따라 동적으로 처리해야 합니다.
• Axios의 인터셉터를 활용하면 JSON과 멀티파트 요청을 효율적으로 관리할 수 있습니다.

---

함께 보면 좋은 자료

• MDN: Content-Type
• Tesseract.js로 OCR 구현하기
• Axios 공식 문서