CKEditor5 + 파일 업로드(React + Django) (1)

목적

 

• 웹 에디터에 이미지 첨부
• 별도의 파일 첨부

인턴십을 진행하며 노션에 정리했던 첨부파일 관리법을 블로그로 옮기면서 좀 더 다듬어 보았다.

(1)편에서는 케이스에 따른 구현 방법의 차이가 없기 때문에 웹 에디터에 이미지를 첨부하는 경우를 집중적으로 작성했다.

---

1. 에디터 선정 -  CKEditor 5

 

에디터는 CKEditor5를 선택했다.

다양한 버전이 있어 공식 문서(https://ckeditor.com/docs/ckeditor5/latest/index.html)를 살펴보고 필요한 기능에 따라 선택하면 된다.  아래는 Document editor이다.

 

---

2. 구현과정

 

웹 에디터에 첨부한 이미지는 게시물 저장 버튼을 클릭할 때 저장되는 것이 아니다. 

왜 그런지 생각해보면, CKEditor5의 글은 html 형태(ex. <p>안녕하세요</p>)의 데이터로 저장된다.  이미지도 마찬가지로 <img src=’URL’>로 변환된다. 이렇게 이미지 태그에는 src라는 속성이 존재하는데, src 속성은 이미지 소스의 URL을 명시한다. 브라우저는 명시된 URL 위치에서 해당 이미지를 가져온다.

즉, URL은 실제 파일이 저장되어 있는 위치를 의미한다.

 

블로그에서 글을 쓸 때 이미지를 첨부하는 즉시 에디터 상에 첨부한 이미지가 보이는 이유도, 그 파일과 파일의 정보가 이미 데이터베이스에 저장되어 있기 때문이다.

 

 

 

결론: 이미지를 첨부하는 즉시 서버에 파일과 파일 정보를 저장하고, 응답으로 파일이 저장된 위치를 받아와 img 태그의 src에 삽입하는 코드를 작성했다.

 

 

 

※참고한 블로그 (리액트)

https://velog.io/@ohjinseo/ReactJS-Express-CKeditor5-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C-%EA%B5%AC%ED%98%84%ED%95%B4%EB%B3%B4%EA%B8%B0

[ReactJS] Express + CKeditor5 이미지 업로드 구현해보기 (1)

 

 

결과:

<img src="http://localhost:8000/media/년/월/일/파일이름.png">

하지만 이 방식엔 문제가 있는데, src에 파일의 물리적 위치를 드러내고 있다는 점이다. 파일이 저장된 위치뿐만 아니라 폴더를 어떻게 관리하고 있는지까지 노출이 되어 별로 좋지 않은 방법이라고 한다.

 

 

---

3. 문제 해결

 

guid와 같은 유니크한 키 값을 생성한 뒤 이를 이용해 엔드포인트( 리소스에 접근할 수 있게 해 주는 URI )를 생성하면 파일의 물리적인 위치를 노출하지 않고도 파일을 불러올 수 있다.

 

정확히 어떤 엔드포인트를 생성해야 할지 구체적으로 알아보기 위해 타사이트에 접속해서 관리자 개발 도구로 이미지 태그를 살펴보았다.

<img src="http://도메인주소/files?guid='guid값'">

이후 수정 사항은 다음과 같다.

 

1. File 모델 수정

class Files(models.Model):
    id = models.AutoField(primary_key=True)
    f_origin = models.FileField(null=True,upload_to=date_upload_to,blank=True)
    f_name = models.CharField(max_length=40)
    # uuid 생성
    f_uuid = models.UUIDField(default=uuid.uuid4, unique=True,auto_created=True)
    regdate = models.DateTimeField(auto_now_add=True)
    
    class Meta:
        db_table= 'files'

 

2. url이 직접적으로 노출되지 않도록 Serializer 수정

 

class FileInfoSerializer(serializers.ModelSerializer):
    url =serializers.SerializerMethodField() 
    class Meta:
        model =Files
        fields = ['f_name','url']

    def get_url(self,obj):
        url="http://localhost:8000/files?uuid="+str(obj.f_uuid)
        return url

 

 

수정 후 이미지 태그의 변화👇

이렇게 고유한 URI를 생성하여 이미지 파일을 불러올 수 있도록 완성하였다.

 

 

이상으로 간단한 첨부파일 저장 및 관리법을 공부해 보았다.

(2) 편에서는 작성중 페이지 이동이 발생하거나 취소했을 때, 저장된 파일들을 관리하는 방법에 관해 질의응답했던 부분을 정리할 예정이다.