Next.js API에서 파일 업로드 시 bodyParser 비활성화 이유

저번 글 '그룹채팅 - Part4 사진 전송'에서 Multer를 사용하기 위해 bodyParser를 비활성화해야 한다고 언급했는데요, 이 글에서는 그 이유와 Multer를 사용한 이유에 대해 설명하겠습니다.

---

 

Next.js API 설정

export const config = {
  api: {
    bodyParser: false, // Next.js의 기본 bodyParser를 비활성화합니다.
  },
};

기본설명

Next.js API 설정에서 bodyParser를 비활성화하는 것은 매우 중요합니다. 이는 Next.js가 요청 본문을 자동으로 파싱하지 않도록 하기 위함입니다. 기본적으로 Next.js는 요청 본문을 JSON 등으로 자동 파싱하여 req.body에 담아줍니다. 하지만 파일 업로드와 같은 대용량의 멀티파트 데이터를 처리할 때는 이 기본 파싱 기능이 문제가 될 수 있습니다.

※ 파싱 : Next.js가 요청된 데이터를 자동으로 읽고 변환하는 기능

※ 멀티파트 데이터 : 여러 부분으로 구성된 데이터 (텍스트 데이터와 파일 데이터가 혼합된 형태)

 

 

 

왜 bodyParser를 비활성화해야 하나요?

1. 멀티파트 데이터 처리
   파일 업로드는 일반적인 텍스트 데이터와 달리 멀티파트 데이터로 전송됩니다.
   Next.js의 기본 bodyParser는 이 멀티파트 데이터를 적절히 처리하지 못합니다.
   따라서, 멀티파트 데이터를 처리하기 위해서는 formidable이나 Multer와 같은 전문적인 파일 업로드 라이브러리를 사용해야 합니다.
2. 성능 이슈
   bodyParser가 파일 데이터를 파싱하려고 하면, 메모리 사용량이 급증합니다.
   Multer와 같은 라이브러리는 스트리밍 방식으로 파일을 처리하여 메모리 사용량을 최소화합니다.

 

 

Multer와 formidable 비교

Multer

• 간단한 설정
  Multer는 설정과 사용법이 비교적 간단하며, Express와 같은 프레임워크와 쉽게 통합할 수 있습니다.
• 파일 필터링 및 저장
  Multer는 파일을 필터링하고 원하는 위치에 저장하는 기능을 제공합니다.

파일 필터링 예시

const fileFilter = (req, file, cb) => {
  if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
    cb(null, true);
  } else {
    cb(null, false); 
  }
};​

파일을 원하는 위치에 저장 예시

// 업로드 폴더 설정
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    const uploadDir = path.join(process.cwd(), "public/uploads");
    if (!fs.existsSync(uploadDir)) {
      fs.mkdirSync(uploadDir, { recursive: true });
    }
    cb(null, uploadDir);
  },
});​

• 스트리밍 방식
  Multer는 파일 데이터를 조각조각 읽어와서 서버에 저장합니다.
  이 방법은 파일 전체를 한 번에 메모리에 올리지 않기 때문에 메모리 줄일 수 있습니다.
  대용량 파일도 효율적으로 처리할 수 있습니다.

formidable

• 다양한 데이터 처리
  formidable은 HTTP 서버에서 멀티파트 폼 데이터를 분석하기 위한 라이브러리로, 파일 업로드와 일반 폼 데이터 처리를 모두 지원합니다.
• 복잡한 설정
  Multer에 비해 설정이 더 복잡합니다.