jsstar522
40
2019-10-18 19:28:45
7
182

CKEditor에서 이미지를 올린 뒤, 글을 작성하지 않았을 때


nodeJs (back-end), react (front-end), mongoDB 풀스택으로 개발하고 있습니다.

게시판을 깔끔하고 편하게 사용하기 위해서 CKEditor5를 사용하는데요, 모듈을 붙인 뒤 글 작성까지 정상적으로 되는 것을 확인하였습니다.


문제는 이미지를 올리는 것부터 시작되었습니다.


이미지 올리기 버튼을 누른 뒤 완료버튼을 누르면, ckfinder 플러그인을 통해 서버로 formData를 POST 요청을 통해 보내게 됩니다. 


...
<CKEditor
  editor={ClassicEditor}
  config={{
    ckfinder: {
      uploadUrl: 'http://localhost:3000/api/reviews/imageUpload'  
    }
  }}
/>
...

이런식으로 말이죠. POST요청을 받는 서버의 reviews/imageUpload 라우터는 아래와 같이 데이터를 처리합니다.

router.post('/imageUpload', multipartMiddleware, async(req, res, next) => {
  filePath = path.join(__dirname, '../images/', req.files.upload.name)

  fs.writeFile(fileName, data, function(err) => {
    res.send(html 코드에 들어갈 이미지 path)
  })
});

이미지를 서버에 저장한 뒤, html img 태그에 들어갈 src 주소를 respond 합니다. 이렇게 한 뒤, CKEditor에서 이미지를 울리면 에디터에 무리없이 사진이 뜹니다.

이렇게 하는 방식이 맞는건가요??


그리고 두번째 질문은,

이렇게 하면 예를들어 작성자가 사진을 올려놓고 사진을 지운다던가, 사진을 올려놓고 글 등록 취소를 누르던가, 사진을 올려놓고 뒤로가기 버튼 (혹은 창 닫기)를 누르면 서버에 이미 저장되어버린 이미지가 쓸모 없어지는데 이는 어떻게 처리해야 하는건가요??


웹개발을 시작한지 얼마 되지 않았습니다.

모르는게 많습니다 ㅠ 도와주시면 정말 감사하겠습니다.



0
0
  • 답변 7

  • John Suhr
    1k
    2019-10-18 21:39:19 작성 2019-10-18 21:42:31 수정됨

    파일 업로드는 그런 것 등의 귀찮은 작업을 알아서 처리해주는 플러그인을 쓰는 것이 정신 건강에 이롭습니다만 회사에서 파일 업로드 과제 내줬을 때 그러한 처리를 직접 해 본적이 있습니다.

    파일 업로드시에 일단 임시 폴더에 저장을 합니다. 파일 업로드는 파일을 저장하고, 세션ID나, 유저 ID 등 고유 값을 Key로 하고, 저장 경로를 Value로 갖는 Map 객체를 Bean으로 등록하여 저장합니다(스프링이 아니라면 전역 객체로).

    만일 글쓰기를 성공하면 게시글 ID를 이용하여 폴더를 생성하고 이동 후 임시 폴더의 파일을 삭제합니다. 만약 글을 쓰다가 도중에 브라우저를 나가게 되면 api요청으로 해당 세션ID/유저ID로 등록된 파일을 모조리 지우게 합니다. 사수분은 이정도면 충분하다고 하셨네요.

    참고로 이 방법은 임시 폴더 -> 영구 폴더로 파일을 이동할 때, 파일의 경로가 변경되므로 WYSIWYG의 tag 경로도 함께 수정해 주어야 합니다. 트랜잭션에 실패하면 당연히 파일도 함께 삭제해야 하고... 여러모로 엄청나게 귀찮은 작업입니다.

    1
  • abilists.com
    1k
    2019-10-19 08:39:41
    라이센스 조심하세요. 저도 abilists tool에 넣고 싶은데, MIT라이센스 아니네요.
    1
  • jsstar522
    40
    2019-10-19 10:46:18 작성 2019-10-19 10:46:38 수정됨
    @John Suhr 그런 작업을 편하게 해주는 플러그인이 따로 있을까요? 어떤게 있나요??
    0
  • jsstar522
    40
    2019-10-19 10:48:21

    @abilists.com 그냥 에디터만 사용해도 상업용이 아닐시 라이센스 문제가 있나요??

    0
  • 더미
    13k
    2019-10-19 12:48:45

    이미지 등 업로드 파일은 임시폴더에 넣어두고

    일정기간마다 삭제하는게 일반적입니다.


    1
  • abilists.com
    1k
    2019-10-19 18:27:51

     사이트 가보았는데, 명학한 라이센스 명을 못 찾았고, 3~5명유저의 제한이 있는것 같은.. 사이트가서 확인 하시는게 좋은 것 같아요.

    저는 Abilists에는 모두 MIT라이센스만 사용했습니다. 

    1
  • jsstar522
    40
    2019-10-22 21:16:02

    @더미 만약에 사진을 올렸다가 에디터 상에서 삭제한 경우(delete 키로) 임시폴더에 계속 남아있는 쓸모없는 사진들은 어떻게 처리하나요??

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.