[2026.03.04] 게시글 리스트에 에디터 스타일 빼기 (칸반보드3) - HTML 텍스트에서 태그 제거하기 & dangerous한 html text

문제점/개선점

게시글 목록에서는 플레인 텍스트가 낫겠다는 의견이 나왔다.

- 가독성이 떨어짐

- 통일성도 떨어짐

 

해결방안

해결하는 도중, 

tiptap 라이브러리에는 해당 기능을 제공하지 않아서 tag 가득한 text를 순수 text로 전환하려면 별도의 function을 만들어줘야 함을 알게 되었다.

정확히는, tiptap 라이브러리로 가능하긴 한데 쓸데없이 무거워진다가 맞는 표현이겠다.

editor.getText()

팁탭 에디터의 getText 함수를 사용하면 tag 가득한 text를 순수 text로 전환 할 수 있다.

다만, 이 editor instance를 가져오는 것이 까다롭다.

PostBar은 백엔드 DB에서 editor instance를 가져오는 게 아니라, HTML text를 가져오기 떄문이다.

 

물론, editor을 새로 정의하면 되긴 한다. 근데 딱히 에디터를 적용하는 것도 아니고,

에디터의 작은 기능 하나를 사용하는데 에디터를 정의하는 건 overkill이라는 판단이다.

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  extensions: [StarterKit],
  content: htmlString,
})

const text = editor.getText()

 

그래서 독립적인 함수를 만들었다

- DOMParser 사용

- 해당 라이브러리의 parseFromString 함수 사용

export const htmlToText = (html) => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  return doc.body.textContent || html;
};

---

문제 

gemini 코드 리뷰를 읽으니

1. dangerouslySetInnerHTML은 XSS vulnerability를 생성하기 때문에 안 쓰는 것이 좋다

 

2. 같은 이유로 html Text는 외부에 공개되게 하면 안된다.