React-Quill을 활용해 게시판 기능을 구현하는 과정에서, 게시물 저장 방식에 대한 문제를 발견했습니다. 형식으로 저장되는 문제를 해결하기 위해 Delta 형식으로 저장하는 방법을 소개합니다.
게시판 기능 구현의 필요성
크로스핏 웹사이트 ‘wodLog’ 개발
크로스핏 박스 전용 웹사이트인 ‘wodLog’에서는 공지사항과 운동 페이지에 게시판 기능이 필요했습니다. 이를 위해 React-Quill이라는 에디터 라이브러리를 선택했습니다. 이 라이브러리는 아래와 같은 장점을 가지고 있습니다.
– 인기 있는 npm 라이브러리
– 간편한 설정
– 가벼운 번들 크기
– 다양한 커스터마이징 옵션
저장 방식의 문제점
React-Quill로 게시판의 글을 작성한 후, DB에 형식으로 저장된다는 문제를 발견했습니다. 예를 들어, 게시글 내용이 다음과 같이 태그를 포함해 저장됩니다.
“`
드랍인은 크로스핏 경험이 있으신 분들을 위한 1회 수업/박스 이용권입니다.
무료체험은 크로스핏이 1달 미만이신 분들만 신청 부탁드립니다!
“`
이러한 방식은 보안 취약점인 XSS 공격에 노출될 수 있습니다.
문제점 분석 및 해결책
문제점 정리
- DB에 형식으로 저장됨
- 상세 페이지에서 태그가 포함된 내용이 그대로 조회됨
두 번째 문제에 대한 해결책으로는 dangerouslySetInner과 DOMPurify 라이브러리를 사용하여 을 안전하게 처리할 수 있습니다. 그러나 첫 번째 문제를 해결하기 위해서는 저장 형식을 변경해야 합니다.
Delta 형식의 도입
Delta는 Quill에서 사용하는 JSON 기반의 데이터 형식입니다. 다음과 같은 장점을 가지고 있습니다.
– 모든 텍스트와 서식 정보를 구조화하여 저장
– 보안성이 대폭 향상됨
– 의 복잡성을 제거
아래는 Delta 형식으로 저장된 데이터의 예시입니다.
json
{
"ops": [
{ "insert": "드랍인은 크로스핏 경험이 있으신 분들을 위한 1회 수업/박스 이용권입니다." },
{ "insert": "\n" },
{ "insert": "무료체험은 크로스핏이 1달 미만이신 분들만 신청 부탁드립니다!" },
{ "insert": "\n\n" },
{ "insert": "드랍인 비용은 타 박스 30,000원 / wodLog 타 지점 15,000원입니다." },
{ "insert": "\n" },
{ "insert": "감사합니다 :)" },
{ "insert": "\n" }
]
}
Delta 형식의 장점
| 구분 | 형식 | Delta 형식 |
|---|---|---|
| 저장 형식 | 태그 포함 문자열 | JSON 기반의 구조화된 데이터 |
| 보안성 | XSS 공격에 취약 | 구조화된 데이터로 안전 |
| 데이터 정제 | 복잡한 파싱 필요 | 구조화된 데이터로 처리 용이 |
| 변환 과정 | 직접 출력 가능 | 변환 과정 필요 |
결론
Delta 형식으로 저장 방식을 개선함으로써, React-Quill을 통해 입력된 사용자 데이터는 삽입의 위험 없이 안전하게 처리됩니다. 보안은 매우 중요한 이슈이므로, 복잡하더라도 안전한 방식을 선택하는 것이 바람직합니다. React-Quill을 사용하시는 분들은 Delta 형식 저장을 고려해보는 것을 추천드립니다.
자주 묻는 질문
질문1: Delta 형식의 장점은 무엇인가요?
Delta 형식은 구조화된 데이터로 보안성이 높고, 의 복잡성을 제거하여 데이터 처리에 용이합니다.
질문2: React-Quill에서 Delta 형식을 사용하려면 어떤 설정이 필요하나요?
React-Quill의 설정에서 Delta 형식을 지원하는 방법을 찾아 적용하면 됩니다. Quill 공식 문서를 참조하면 상세한 정보를 얻을 수 있습니다.
질문3: 에서 Delta로 변환하는 과정은 어떻게 되나요?
사용자가 입력한 내용을 Delta 형식으로 변환하여 DB에 저장하고, 필요 시 로 다시 변환해 출력하는 과정을 거칩니다.
질문4: XSS 공격을 방지하기 위해 어떤 조치를 취해야 하나요?
dangerouslySetInner을 사용할 때는 DOMPurify와 같은 라이브러리를 사용하여 을 안전하게 처리해야 합니다.
질문5: Delta 형식으로 저장할 때 어떤 데이터가 포함되나요?
Delta 형식은 텍스트와 서식 정보를 포함하며, 이를 통해 안전하게 데이터를 저장하고 필요한 경우 로 변환할 수 있습니다.