이미지가 포함된 게시글 작성하기(게시글 이미지 업로드 기능구현하기)

 

 

 

프로젝트 진행중 티스토리같이 게시글을 쓰는 공간에 유저들이 이미지까지 첨부하는 기능이 필요했다

 

게시글에 이미지를 업로드하는 기능을 구현해보았다.

 

 

이 기능은 일반적으로 프론트엔드로부터 html코드 자체를 넘겨받아 백엔드에서 통째로 저장한다.

 

이미지의 위치를 이미지 태그의 위치로 기억할 수 있기 때문이다. 

 

백엔드는 게시글 내용을 반환해줄때도 html코드를 통째로 넘겨주면된다.

 

 

 

그리고 이미지 업로드API를 별도로 만들어서 유저가 게시글 작성도중 이미지를 업로드하면, 백엔드는 바로

 

이미지를S3(혹은 서버)에 저장하고, 그 url을 프론트엔드에 반환해주면된다.

 

여기서 이미지는 게시글에 업로드하는 순간 바로 S3에 저장되기 때문에 유저가 게시글에 작성도중 이미지를

 

첨부하고 뒤로가기등을 하여 나가버릴경우, 의미없는 이미지가 계속해서 저장된 상태로 있게된다. 그리고

 

추후에 유저가 게시글을 삭제했을 때도 마찬가지로, 이미지는 삭제되지않고 계속해서 용량을 차지한

 

상태로 남아있는다. 

 

 

여기서 결정을 할 수있다.

 

1. 의미없는 이미지가 남아있어도 상관 없다 -> 이미지업로드API에서 FE에게 이미지경로만 반환해줄뿐, DB에는 어떤 경로도 저장하지 않는다. (이미지에 대한 정보는 html과 함께 저장되므로)
2. 의미없는 이미지를 제거해주고싶다 (게시글 작성도중 뒤로가거나, 게시글 삭제된 경우) -> 임시 게시글을 생성해둔뒤에,  별도 이미지 테이블에 외래키 생성, 이미지 경로 저장. 

 

 

 

 

 

  

 

2번에서 이미지가 포함된 게시글이 저장되는 과정)

 

<임시게시글 생성, idx반환 - 이미지업로드, S3저장, 이미지 경로 반환 ->  이미지 테이블에 외래키와 경로 DB저장

 

-> 찐 게시글 작성, idx로 html코드 저장>

 

 

찐 게시글 작성할때 idx를 전달받아 content와 created_at을 update 해주는 방식으로 처리해주었다.

 

 

2번의 경우 미리 임시 게시글을 저장해두기 때문에, 유저가 게시글 작성도중 뒤로가기를 눌렀을때,

 

created_at 속성에 null 값을 줘서 임시 저장된 게시글과 완성된 게시글을 구분하고, 임시저장된 게시글은

 

나중에 주기적으로 지울 수 있게 하였다.  그리고 이렇게하면  임시게시글을 저장해두기 때문에

 

추후에 임시 저장기능을 추가할때도 용이해진다.

 

 

 

임시저장된 게시글을 주기적으로 삭제하기 위해서는 cron과 DB의 TTL 속성등을 이용할 수 있다. 

 

이는 추후에 공부하여 올릴예정.