Node.js 이미지 업로드 시스템: 파일 처리, 저장소 및 데이터베이스 통합

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- Node.js 및 Express 기반 백엔드 개발자

- React 기반 프론트엔드 개발자

- 이미지 업로드 기능을 구현하는 웹 애플리케이션 개발 팀

- 중급 이상의 파일 처리 및 데이터베이스 통합 경험자

핵심 요약

• Multer 모듈을 사용하여 파일 업로드 처리 (multer.diskStorage 및 multer({ storage }) 사용)
• 이미지 삭제 기능 구현 (fs.unlink(filePath, (err) => { ... }) 활용)
• 프론트엔드와의 통합 (FormData 객체를 통해 이미지 업로드 API 호출)

섹션별 세부 요약

1. 백엔드 이미지 업로드 기능 구현

• multer 모듈 설치 및 multer.diskStorage 설정으로 파일 저장 경로 정의
• fs.existsSync 및 fs.mkdirSync를 사용해 업로드 디렉토리 생성
• uploadPostImage 컨트롤러에서 파일 업로드 로직 정의 (req.file.path를 통해 이미지 URL 반환)
• 예시 코드:

const storage = multer.diskStorage({
  destination: (req, file, cb) => cb(null, uploadDir),
  filename: (req, file, cb) => cb(null, file.originalname)
});

2. 이미지 삭제 기능 구현

• deletePostImage 컨트롤러에서 fs.unlink 사용해 파일 삭제
• req.body.imageName을 기반으로 파일 경로 생성 및 삭제 처리
• 예시 코드:

fs.unlink(filePath, (err) => {
  if (err) console.error('Error deleting file:', err);
  else res.status(200).json({ status: 200, message: 'Post image deleted successfully' });
});

3. 프론트엔드 이미지 업로드 로직 구현

• uploadPostImage 및 removePostImage 서비스 함수 추가
• PostForm.jsx에서 handleSubmit 함수 수정:

- mainImage 필수 체크 및 File 객체 생성

- FormData를 통해 /post-image 엔드포인트 호출

- 이미지 URL을 postForm 상태에 반영

• 예시 코드:

const newFile = new File([postForm.mainImage.fileData], newImageName, { type: postForm.mainImage.fileData.type });
const formData = new FormData();
formData.append('file', newFile);
const response = await uploadPostImage(formData);

4. 데이터베이스 통합 고려사항

• posts.mongo.js에서 Post 스키마 업데이트 필요
• 이미지 메타데이터(이름, URL, 생성 시간 등)를 데이터베이스에 저장
• 예시 필드:

mainImage: { url: 'string', name: 'string', created: { date: 'YYYY-MM-DD', time: 'HH:MM:SS' } }

결론

• Multer와 fs 모듈을 활용한 파일 처리 로직은 이미지 업로드/삭제 기능 구현의 핵심
• 프론트엔드와 백엔드의 동기화를 위해 FormData를 사용해 이미지 URL을 상태에 반영
• 데이터베이스 스키마 업데이트를 통해 이미지 정보를 효과적으로 저장 및 조회 가능
• 실무에서는 파일 처리 로직을 별도 모듈로 분리해 가독성과 재사용성을 높이는 것이 권장됨