1. 문제 상황
현재 프로젝트에서는 Quill 에디터를 사용해 게시글을 작성하고 있으며, 작성된 콘텐츠는 HTML 형식으로 서버에 저장되고 있습니다.
예를 들어, “안녕하세요. Trend-Now입니다.”와 같은 문장은 아래와 같이 HTML로 저장됩니다.
<p><strong>안녕하세요. Trend-Now입니다.</strong></p>하지만 Quill 에디터는 편집 시 Delta 형식의 데이터를 필요로 하기 때문에, HTML로 저장한 뒤 다시 Delta로 변환해서 사용하는 방식과, 아예 처음부터 Delta로 저장하고 렌더링 시 HTML로 변환하는 방식 중에서 고민이 있었습니다.
Delta → HTML 변환은 비교적 안정적으로 잘 되지만, HTML → Delta는 변환 정확도가 떨어질 수 있어, 포맷이 깨지거나 의도한 대로 복원되지 않을 가능성이 있습니다.
그래서 결국 Delta로 저장하고 렌더링 시에만 HTML로 바꾸는 쪽이 더 나은 선택이라고 판단했습니다.
📖 Delta 형식
Delta는 Quill 에디터의 콘텐츠와 변경 내용을 표현하기 위한 간단하고 구조적인 JSON 포맷입니다.
텍스트와 포맷 정보(예: 굵게, 기울임, 링크 등)를 명확하게 분리해서 저장할 수 있으며, HTML처럼 태그 기반이 아닌 구조적 데이터라 기계가 처리하기 쉬우면서도 보안에도 유리한 형식입니다.
[
{
"insert": "안녕하세요. ",
"attributes": {
"bold": true
}
},
{
"insert": "Trend-Now입니다.\n"
}
]2. Delta 기반 저장 및 렌더링 처리
저장 방식을 Delta로 바꾸기 위해, 먼저 Quill 에디터에서 getContents()를 통해 Delta 데이터를 추출하고 이를 그대로 서버에 저장하도록 구조를 변경했습니다.
이후 렌더링 과정에서는 Delta 데이터를 그대로 사용할 수 없기 때문에, quill-delta-to-html 라이브러리를 사용해 Delta를 HTML로 변환하여 사용했습니다.
3. 결과
결론적으로 수정 기능을 구현할 때 Delta 데이터를 그대로 setContents()로 넘길 수 있어 편집 시 데이터 손실 없이 안정적인 복원이 가능해졌습니다.
출처
