summernote 이미지를 firebase storage에 업로드하기

요즘 웹개발을 하면서 많은 라이브러리를 사용하고 있다. 사용하는 라이브러리가 모두 잘 연동되면 좋겠지만 처음 사용하는 것들은 연동하는데 많은 오류가 발생하고 이를 해결하는데 많은 시간이 걸리는 것 같다. 요즘 웹개발을 할때 특별한 경우가 아니면 무조건 firebase를 통해 개발한다. firebase는 로컬 호스팅 및 DB, auth 모듈과 연동성이 좋다. 이번에 포럼 사이트를 만들면서 게시글 작성 페이지를 만들었는데 한국 사람들이 만들고 손쉽게 글작성 탬플릿을 적용할 수 있는 "summernote" 라이브러리를 사용하였다. 

사실 firebase와 summernote 연동에는 큰 문제는 없다. 이는 단순히 텍스트를 db에 저장했을때 이야기이다. 

먼저 summernote 동작 구조는 삽입한 곳에 글작성 탬플릿을 적용시키는데 (보통 form 태그 안에 사용한다) submit을 통해 data를 전달하면 string으로 전달되는 것이 아니라 html 파일 자체로 전송된다. 

필자같은 경우 node.js를 사용하고 있는데 route를 통해 데이터를 받고 ejs 뷰 엔진을 통해 해당 데이터를 전송하면("<%-[데이터] %>"로 작성하면 html로 파싱된다) 자동으로 게시글로 볼 수 있다. 

이는 텍스트일때 정말 간편한 시스템일수 있지만 이미지를 삽입할 때 문제가 생긴다. 물론 summernote 문제는 아니고 firebase의 DB인 firestore와의 연동 문제다

---

먼저 summernote에 img를 삽입하면 html 문서와 분리되는 것이 아니라 html 문서 자체에 이미지에 대한 정보를 저장한다. 이 때문에 서버에 전송되는 데이터 자체가 커지고 firestore는 데이터 용량 제한이 있기 때문에 DB 삽입을 거절한다. 

따라서 이미지는 firesbase 대용량 저장소인 storage에 저장해야 하며 html내 img태그는 src를 통해 storage와 연동시켜준뒤에 서버에 전송해서 firestore에 저장해야 한다.

다행히 img 분리 및 재삽입에 대한 메소드를 summernote에서 제공하고 있다. 

 $('#summernote').summernote({
                              tabsize: 2,
                              height: 400,
                              minHeight: 400,             
                              maxHeight: 400,
                              lang: "ko-KR",
                              callbacks: {    //여기 부분이 이미지를 첨부하는 부분
                                onImageUpload : function(files, editor, welEditable) {
                                  uploadSummernoteImageFile(files[0],this);
                                }
                              }
                           });

위 코드는 summernote의 템플릿 삽입 코드이다. script 태그 안의 부분으로 위의 내용은 생략했지만 id가 'summernote'인 태그 안에 summernote 탬플릿을 삽입하겠다는 것이다. 

전달해주는 매개변수는 탬플릿의 기본 설정이다. 여기서 이미지 업로드 시 DB 분리 및 연동을 시킬려면 callback 옵션을 넣야한다. 위와 같이 넣어주면

( 갑자기 color scripter가 작동이 멈춰서 다른 css로 작성하였습니다.)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

function uploadSummernoteImageFile(file, editor) { console.log('upload image 호출됨'); var upfile = file; console.log('upload file : ',upfile.name); var storageUrl = 'images/'+upfile.name; var storageUpRef = firebase.storage().ref(storageUrl); var task = storageUpRef.put(file); task.on('state_changed', function(snapshot){ console.log('업로드 진행중'); }, function(error){ }, function(){ console.log('업로드 완료'); var storageRef = storage.ref(); storageRef.child(storageUrl).getDownloadURL().then(function(url) { console.log('url은 이겁니다 : ',url); $('#summernote').summernote('insertImage',url,'test'); }).catch(function(error) { // Handle any errors }); } ) }

위 코드가 전체적인 코드이다.

먼저 firebase와 연동을 했다고 가정한 뒤에 아까 callback 함수로 넣어준 uploadSummernoteImageFile를 구현하였다. 먼저 file은 업로드한 이미지를 매개변수로 가지고 오는데 이것과 저장하려는 경로를 설정한 뒤에 put 메소드를 통해 파일을 넣어준다. task.on 메소드는 파일 업로드의 진행에 따라 다른 구문을 실행할 수 있다.

파일 업로드가 완료되면 해당 파일의 url을 가져와 다시 summernote 탬플릿에 이미지 태그를 삽입하는데 여기서 src(경로)를 웹 상의 경로로 지정하는 것이다. 이러면 ajax 방식으로 업로드가 되면서 summernote에 다시 삽입이 된다. 여기서 경로는 이제 입맛에 맞게 바꾸어주면된다. 

계속되는 테스트와 실험으로 거의 4시간이 걸린것 같다. 그래도 해결되서 다행이다. 만약 같은 어려움이 있으신 분들이 있다면 포스팅 참고하여 해결하면 좋겠다.