최초 게시글 작성 시
이미지 업로드 시
이미지 삭제 시
위와 같이 게시글을 최초 작성 시 이미지가 summernote에 업로드 되는 순간 이미지를 외부 디렉터리에 저장하고, 이미지가 summnernote에서 제거되는 순간 이미지를 외부 디렉터리에서 삭제한다.
기존 게시글 수정 시
최초로 게시글을 작성할 때와 딜리 기존 게시글을 수정하는 작업은 좀 더 복잡했다.
먼저 기존 작업을 작성할 때는 summernote 본문에 이미 저장되어 있는 본문을 DB에서 불러와야 한다.
다음과 같이 DB에서 이미 저장되어 있는 본문을 불러왔다. 현재 텍스트 에디터에서 보이는 이미지 역시 현재 다른 외부 디렉터리에 저장되어 있는 이미지 파일을 url을 통해 읽어온 것이다.
여기서 게시글 수정이 게시글 최초 작성과 다른 점은 이미지 파일을 즉시적으로 삭제할 수 없다는 것이었다.
앞서 게시글 최초 작성 시 이미지 파일을 즉각적으로 외부 디렉터리에 저장하고 삭제한다고 하였다.
하지만 게시글 수정 시 이미지 파일을 즉각적으로 '삭제'하게 된다면, 만약 게시글 수정을 취소하게 되었을 때 이 이미지 파일을 되돌릴 수가 없게 된다.
다음과 같이 '게시글 수정하기'에서 이미지 파일을 삭제했다고 해보자.
이 상태에서는 이미 외부 디렉터리에서 이미지 파일이 삭제된 상태이다.
하지만 사용자가 도중에 수정 작업을 취소하고 작업을 되돌리고 싶을 수도 있다. 사용자는 '수정하기' 버튼을 통해 현재 수정한 작업을 저장하지 않고, 이 작업을 끝낼 수도 있다.
하지만 이미 이미지 파일이 외부 디렉터리에서 삭제되었기 때문에, 더 이상 이미지 파일을 불러올 수 없게 되고 더 이상 이미지 파일을 확인할 수 없게 된다.
이러한 문제를 해결하기 위해 게시글 수정 작업에서 이미지 파일을 직접 삭제하는 것이 아니라 일종의 버퍼를 만들어 삭제될 이미지와 저장될 이미지를 구별하는 작업이 필요하다.
이후 모든 수정 작업이 끝나고 사용자가 '등록하기' 버튼을 눌러 수정한 작업을 저장하기로 결정하였을 때 이 버퍼의 내용을 바탕으로 실제 변경 작업이 이루어진다.
직접 구현한 버퍼의 원리
게시글 수정 시, 수정 작업이 정상적으로 저장되지 않는다면 '수정된 내용'과 '현재 저장되어 있는 내용' 간에 불일치가 생겨 에러가 발생할 수 있다. 따라서 수정된 내용을 즉각적으로 반영하지 않고 일종의 버퍼를 만들어 변경 내용을 기록해두는 방법을 사용하고자 하였다.
직접 구현한 버퍼 내용은 다음과 같다
-
맨 처음 수정 작업에 들어가게 될 때 현재 수정할 게시글에 존재하는 사진들 리스트를 DB에서 불러와 자바스크립트 배열에 담는다.
-
기존 사진 중 일부 사진을 제거하면 버퍼에서 그 사진 정보가 제외된다.
반면 일부 사진을 추가하면 버퍼에 그 사진 정보가 추가된다
-
사용자가 정상적으로 수정 작업을 완료한다면(수정하기로 최종적인 결정을 내렸다면) 버퍼의 내용의 서버에서 전달되고, 서버는 DB에 저장되어 있는 기존 이미지 리스트와 버퍼에서 전달받은 이미지 리스트들을 비교해 삭제된 이미지들은 삭제하고, 추가된 이미지들을 새롭게 추가한다
이와 같은 비교 작업이 이루어지기 위해서는 결과적으로 각 게시글에 대한 이미지 리스트들을 별도로 DB에 저장해 관리해야 할 필요가 생긴다. 이렇게 각 게시글에 대한 이미지 파일들을 관리할 목적으로 PostImage라는 새로운 엔티티를 생성했다.
그리고 최초 게시글 작성 시 단순히 이미지 파일을 외부 디렉토리에 저장만 하는 것이 아니라 해당 이미지들에 대한 정보를 PostImage에 저장할 필요가 생겼다.
이후 포스트 수정 작업이 시작될 때 DB에 저장되어 있는 PostImage 레코드를 조회해옴으로써 버퍼를 초기화할 수 있다.
