HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🏠
2차 팀 프로젝트: 오늘의 집/
이미지 CRUD

이미지 CRUD

태그

해결책 제안 1

사진

집들이 id(FK) (ManyToOne)
이미지 URL
순서(index)
 
집들이 post 양식
받은 content를 파싱해서 사진 엔티티에 사진 URL과 index로 보관. 브라우저는 출력할 때 각 이미지들을 index에 맞게 배치해서 렌더링 해야 함.
사용자가 수정할 때에는 기존의 모든 사진들을 지우고, 프론트엔드가 보낸 사진들로 다시 저장해야 할 것 같음. (만약에 사진 중복 확인 알고리즘을 구현하면 괜찮을지도?)
 

고려해야 할 점

이미지 전송받는 형식
  1. json 방식으로 이미지 전송받음
      2. binary image → String 변환(base64 encoding)
  1. multi-part/form-data 타입으로 전송
      2. MultipartFile 클래스 사용
 
이미지 저장 방식
  1. 서버 디렉토리에 저장(file) → multi server 일 경우
  1. DB에 저장
  1. 실제 파일은 서버 경로에 저장, DB에는 파일 정보(저장 경로, 파일 이름) 저장
 
API 구성 방식
  1. 게시글 내용, 이미지를 하나의 API로 처리하는 방식(한 번에 등록) → 업로드 시간 문제 있음
  1. 이미지 처리 관련 API 분리(slack에서 사진 업로드하는 경우처럼 미리 업로드하는 경우 같음)
 
참고 자료(이미지 게시글의 수정 처리에 대하여)
  • 다중 이미지를 갖고 있는 게시글의 수정, 조회 등의 처리에 대해
 
김훈기
저도 이거 민성님이랑 똑같은 글 봤습니다! 수정은 고려할게 많은것 같습니다.
 

// 아마도 multipart-formdata 요청
--- html body ---

message : "내용1{{이미지1}}내용2{{이미지2}}내용3{{이미지3}}"

이미지1

이미지2

이미지3