부트캠프 팀 프로젝트 진행 중 에디터를 이용하여 게시물 작성 페이지를 개발했다.
그에 관한 기록을 남겨보려한다.
React-Quill 을 사용한 이유
게시물의 내용을 작성하려면 form, input, button의 구조로 개발을 진행할 것이다.
하지만 이번 팀 프로젝트에서는 고도화를 하고싶었고, 실제로 운영되는 사이트들의 대부분은 에디터를 사용하여 게시물 작성을한다.
에디터를 사용해본적이 없는 나는 적용이 간편하고 사용횟수를 참고하여 React-Quill을 선택했다.
(Q) React-Quill 을 사용하여 DB에 과부화를 주지않고 이미지 업로드 하는 문제
Quill에서 이미지를 표현하는 방식은 base64 형태로 DB에 넣을 수 없는 형태이다.
아래와 같은 값을 DB에 저장할 수 없는 문제가 생겼다[이미지를 에디터에서 base64 로 표현한 예시]
(A) React-Quill 을 사용하여 DB에 과부화를 주지않고 이미지 업로드 하는 문제
위와 같이 base64 형태로 나온 값을 DB로 넣는 행위는 할 수 없다.
이를 해결하기 위해 AWS S3 Presigned URL 을 사용한다.
우리가 현재 이미지를 저장하는 장소는 AWS S3 Bucket 이다.
이미지를 버킷에 저장한 후, 저장된 URL을 받아 브라우저에 표시하는 형태이다.
우린 받아온 URL을 DB에 저장하기 때문에 에디터에 미리보기와 DB에 저장되는 문제 모두 해결했다.
(Q) 사용하지 않는 이미지에 대한 처리
에디터를 적용하는것은 크게 어렵지않았다.
하지만 이미지 처리가 가장큰 문제였고 개발하며 부딪힌 문제점들을 적어보고자한다.이미지 upload 처리
- 에디터를 이용하여 이미지를 업로드하면 일단 에디터에 있는 이미지등록 버튼을 클릭했을때의 이벤트가 일어난다.
- input type file 인 경우 에디터의 처리와는 다르다. 에디터의 경우 파일을 선택하면 에디터에 이미지가 보여진다.
- 게시물을 등록하기 전 이미지를 업로드 하는 현상이 발생되는데, 사용자가 게시물 등록을 하지 않거나 다른 사진을 등록하는 경우 사용하지 않는 쓰레기 이미지가 이미지 저장소에 축적되는 문제가 발생한다.
// react-quill modules에 전달되는 handlers 함수
const imageHandler = () => {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/jpg');
input.setAttribute('name', 'image');
input.click();
input.onchange = async () => {
setFinalLo(undefined);
setFinalLa(undefined);
setFinalTakenAt(undefined);
setCalValue(new Date());
const [file]: any = input.files;
const { url: imgUrl, id: imgId } = await getPresignedURL(file);
// 파일을 선택하는 순간 getPresignedURL 함수를 통하여 저장된 이미지의 url 을 받는다.
setImgUrl(imgId);
const quill = quillRef.current.getEditor();
const range = quillRef.current.getEditorSelection();
quill.insertEmbed(range.index, 'image', imgUrl);
quill.setSelection(range.index + 1);
if (file) {...}; // 파일 처리 부분
};
};(A) 사용하지 않는 이미지에 대한 처리
많은 사이트들을 둘러봐도 에디터에서 파일을 선택하면 에디터 내부 사진의 미리보기가 지원된다.
이는 서버에 일단 이미지를 저장 후 해당 이미지 url을 불러오는 형태이다.
실제로 서비스되는 사이트들의 경우 CI/CD 를 통한 사용되지 않는 이미지의 삭제처리를 사용해야한다.
프로젝트를 진행하며 이 문제까진 해결하지 못했지만, 해결하는 flow 는 이해했다.
