react quill editor 이미지 업로드 문제

이번 포스팅은.. 한 이틀 필자를 너무 힘들게 했던 quill editor를 포스팅한다.

 

quill은 text editor중 참 많이 사용을 한다고 해서 회사 프로젝트에서도 적용하기로 하였다.

 

그런데 느낀점은 그냥 시간이 걸리더라도 editor하나 만들어 쓰는게 낫겠다 라는 생각이 들었다. ㅎㅎㅎㅎ

 

quill에 대한 설명은 패스하고 겪었던 문제인 이미지 업로드 방식에대해서 알아보자.

 

 

자 위 사진의 아래 테스트 창이 editor 부분이다. 그ㅡ리고 커스텀 툴바중 오른쪽에서 두번째! 저기가 이미지 업로드 인풋이다.

 

자 뭐가 문제인가! 하면

 

quill에서 이미지를 업로드하고 value를 얻어오면!

이렇게 html 형태로 나오게 된다. 뭐 다시 뿌려줄때 저 형태로 뿌려줄 수 있으니 상관없다 서버에 저렇게 저장하고

차후 뿌려줄때 dangerousSetInnerHTML을 이용해서 뿌려주면 된다.

 

문제는 base64형태의 이미지 이다. 파일 소스가 base64의 경우 위 이미지는 파일이 작아 매우 짧은 편이지만...

이미지사이즈가 조금 커지기라도 한다면... 어마어마하게 길게 변환된 텍스트가 보일 것이다. 이걸 스토리지에 저장한다? 패스!

 

그래서 quill을 이용하게되면 이미지핸들러를 하나 만들어주고

핸들러 안에서 파일소스를 받아서 백에 전달후 백에서는 미들웨어를 이용해 url로 변경후 다시 보내주게 되면 해당 url을 이용해

src를 설정하고 서버 클라우드에 저장하면 된다. 뭔가 복잡허다.

 

일단 필자의 회사는 파이어베이스 스토리지를 사용하고 있기에 

요렇게! 아 지웠었던 로직이라 insertEmbed에 baseData가 firebaseUrl로 바뀌면 된다.

아무튼 이렇게 해서 url을 받아 전송을 해주면된다.

 

문제는 ! 이렇게 이미지를 순간순간 업로드 할때마다 서버 스토리지에 저장하면 올리는 것 자체가 delay가 생기고 유저에게 매우 큰 불편함을 주게 된다. 또한 올리고 다시 삭제했을 때 이미 서버 스토리지에 올라간 이미지는 삭제처리를 따로 해줘야 한다는 것이다.

 

필자의 목표는 모든 과정을 생략하고 그냥 글쓰기 버튼을 클릭시 파이어베이스에 올리고 url을 받아온뒤 이것을 백으로 넘겨주고 싶었다.

 

그럼 어떻게 할까 고민을 하던중  filerReader 기능을 이용하기로 하였다.

 

file reader 기능은 mdn을 참고하자

https://developer.mozilla.org/ko/docs/Web/API/FileReader

FileReader - Web API | MDN

아무튼 해당 인풋의 result를 onload해서 quill의 insertEmbeded를 통해 img src를 지정해주고

컴포넌트에 file과 base64데이터를 setState해준다.

그럼 file source자체를 보내 줄 수 있다.

 

여기서 한가지 문제가 더 생기는데 만약 이미지를 지웠다면??! 어떻게 해결 해줄 것인가.

먼저 quill에서 얻어지는 value를 useMemo를 통해 img태그만 전부 뽑아서 base64형태만 뽑아 배열에 담아준다.

 

그리고서

filereader를 통해 보낸 file과 base64를 비교해서 변경된 array를 셋팅해주면 된다..

 

quill은 뭔가 다루기가 어렵다.. 계속 공부를 해야하는데 ㅠㅠ 어렵다..

차후 회사 프로젝트는 시간 여유가 된다면 직접 제작을 하는게 낫겠다 싶다.