이미지가 포함된 게시글 관련 API 설계

서론

과거에 '맞춤 케이크 중개 플랫폼' 프로젝트를 진행했을 때는 아래와 같이 게시글 관련 API 에 이미지 처리를 결합하여 구현하였다. 즉, 게시글 생성, 삭제, 조회하는 API 안에서 연관된 이미지도 함께 처리해줬다는 의미이다. (아래의 코드에서 Order 를 게시글이라고 생각하면 된다.)

@Component
@RequiredArgsConstructor
public class OrderFacade {

	private final OrderService orderService;
	private final ImageService imageService;

	@Transactional
	public Long createOrder(OrderCreateRequest orderCreateRequest) {
		Long orderId = orderService.createOrder(orderCreateRequest);

		orderCreateRequest.cakeImages()
				.forEach(cakeImage -> imageService.createAndUploadImage(cakeImage, ORDER_IMAGE_SUB_PATH, orderId, ORDER));
	
 	   return orderId;
	}
}

 

이번에 새롭게' 야구장 좌석 후기 서비스' 프로젝트를 진행하면서 게시판 API 방식을 수정해보려고 한다.

 

수정 사항

1. 게시글 관련 API 와 이미지 처리 로직이 결합되어 있는 것을 분리한다.

• 이미지는 게시글에서만 쓰이는 것이 아니다. 댓글, 경기장, 회원 등 여러가지 도메인에서 첨부될 수 있다. 그런데, 이렇게 게시글 관련 API 와 이미지 처리 로직이 결합되어 있으면 이미지 처리 로직이 계속 중복되게 된다. 예를 들자면, 게시글 생성 API 에도, 댓글 생성 API 에도 똑같은 이미지 처리 로직이 중복될 것이다.
• 유지보수에 있어서도 좋지 않다. 이미지 관련 변경 사항이 생겨도 게시글 API 를 변경해줘야한다.
• 이와 관련된 자세한 내용은 https://jun-codinghistory.tistory.com/754 를 참고하자.

2. 게시판 내에서 이미지의 위치를 식별할 수 있도록 한다.

• 이전 프로젝트 '맞춤 케이크 중개 플랫폼' 프로젝트는 일반적인 게시판과는 달리 게시글 내부에서 이미지의 순서가 필요하지 않았다. 아래 화면처럼 케이크 이미지를 위한 공간이 따로 있었기 때문이다. 이번 '야구장 좌석 후기 서비스' 는 이전과는 다르다. 티스토리 블로그처럼 게시글 내에서 이미지의 위치를 식별할 수 있어야한다.

 

해결 과정

각각의 수정사항을 어떻게 해결했는지 알아보자.

1. 게시글 관련 API 와 이미지 처리 로직이 결합되어 있는 것을 분리한다. -> 이미지 관련 API 를 만들어 분리한다.

• 이 경우 어떻게 동작하는 것이냐면, 사용자가 게시글 작성 에디터 내에서 이미지를 첨부했을 때 이미지 생성 API 가 호출되는 것이다.
• 근데 문제가 있다. 연관된 게시글 id 를 이미지와 매핑해주어야하는데 현 시점에서는 게시글이 발행되지 않았으므로 게시글 id 가 없다. 게시글은 사용자가 게시글 발행 버튼을 눌러 게시글 생성 API 를 호출해야 생성되기 때문이다. (auto_increment 를 사용하여서 게시글이 저장되어야 id 가 생긴다.) 
• 임시 게시글을 생성하는 방식으로 해결하였다. 기존에 게시글 생성 API 하나로 게시글을 생성했다면, 임시 게시글 생성 API + 게시글 발행 API 방식으로 바꾼 것이다. 우리가 평소에 게시글을 작성할 때의 프로세스를 생각해보자. 게시글 작성 버튼을 눌러서 게시글을 작성하는 에디터로 이동하고, 다 작성하였으면 게시글을 발행하는 버튼을 눌러 저장한다. 이 프로세스 중 사용자가 맨 처음 게시글 작성 버튼을 눌렀을 때, 제목과 내용이 null 인 임시 게시글을 만들어서 id 를 반환하도록 한다. 그러면, 게시글 작성 에디터 내부에서 이미지 API 를 호출 할 수 있고, 사용자가 게시글 발행 버튼을 눌렀을 때, 에디터에서 작성된 내용들을 바탕으로 게시글 발행 API 를 호출하는 것이다.
• 이렇게 임시 게시글을 중간에 두는 방식은 장단점이 있다.
  • 일단 장점부터 보자면, 임시 게시글의 존재로 인해 추후에 다양한 기능을 제공할 수 있다. 예를 들면, 자동 임시 저장 기능이나 작성 중이었던 글 불러오기 등이 있다.
  • 단점은 사용자가 게시글을 작성하다가 뒤로가기를 둘러서 발행을 안하면 어떻게 처리할 것인가? 이미지의 경우도 그렇다. 게시글에 첨부를 했는데 뒤로가기를 해서 게시글이 발행이 안되었으면 그 이미지는 발행은 안되었지만 이미지 서버에는 올라가서 용량을 차지하게 된다.
  • 이 문제는 주기적으로 배치 처리로 삭제를 해주면 될 것 같다. 임시 게시글은 제목과 내용이 null 이다. 이것을 바탕으로 주기적으로 게시글 제목과 내용이 null 인 게시글과 그와 연관된 이미지를 제거해주면 된다.

2. 게시판 내에서 이미지의 위치를 식별할 수 있도록 한다. -> 게시글 내용으로 html 을 저장한다.

• 티스토리 게시글의 방식과 깃허브 이슈의 방식에서 해결의 힌트를 얻었다. 티스토리의 경우 이미지를 첨부하면 게시글 에디터 내에서 이미지 링크가 생긴다. 깃허브도 마찬가지다. 아래의 그림은 깃허브 이슈에 이미지를 올렸을 때 생기는 태그이다.

• 아래와 같은 프로세스 진행하도록 하여 게시글에서 이미지 위치를 식별할 수 있도록 하였다.
  1. 사용자가 게시글 작성 중 이미지를 첨부하면 서버로 이미지 생성 API 를 호출
  2. 서버에서 이미지를 저장하고 이미지 경로를 프론트에 반환
  3. 프론트에서 <img src="이미지 경로"> 형식으로 처리하여 사용자 커서 위치에 태그를 추가
  4. 작성된 게시글 내용 html 을 하나의 문자열로 서버에 저장