[Draft.js] Unknown DraftEntity key: null 해결방법

발단

  Draft.js를 이용해서 wysiwyg 에디터를 구현하던 중 에러가 발생했다. 에러메세지로 파악하기엔 Draft.js 라이브러리를 사용하면서 생긴 문제라고밖엔 파악되지 않았고, 에디터로 작성한 값을 저장할땐 문제가 없었는데 이후 저장된 내용을 조회하는데 에러가 발생한 정도까지 파악을 했다. 

  구글링해보면 많진 않지만 에러를 해결한 사례들을 몇 개 볼 수 있었다. 이미지가 업로드된 글을 수정할 때 한글을 타이핑하는 경우 발생된다는 경우가 대다수였고, 나는 수정조차 가지 못했기 때문에 위 내용과는 약간 다르다고 생각이 들었다. 

 

해결 과정

 

1. 이미지 태그 내 url 관련 문제

이미지를 첨부하게 되면 이미지를 미리보기로 보여줘야 하기 때문에 base64로 변환하는데, 이를 바로 데이터베이스에 저장하기엔 너무 너무 너무 긴 문자열이 되기 때문에 다른 방법을 고민했다.

 

  데이터베이스에 내용을 보내줄 때 <img src=""    이런 식으로 src속성에 빈 문자열로 바꿔주고, 이미지파일은 별도로 서버에 전송하여 aws에서 변환해주는 Url을 저장했고, 불러올 때 src에 해당 Url을 삽입해서 렌더링하는 방식으로 진행했다.

  게시글을 조회할 때 생기는 문제다보니 여기서 변환하는 과정에서 문제가 있을 것 같다는 생각이 들었고, github에는 이미 해당 이슈에 대한 많은 내용들이 오가고 있었는데 여기서 대다수는 태그에 대한 문제나 src속성에 대한 문제인 것을 확인하고 빈 문자열이 아닌 src="-" 이렇게 바를 넣어주기로 했다. 

 // 값을 데이터베이스에 저장할 때 sr를 -로 변경해서 보내줍니다.
   const handleSave = async (editedTitle: string, editedContent: string) => {
    // 이미지 태그의 src 속성을 -로 변경
    const sanitizedContent = editedContent.replace(/<img[^>]+src="[^"]+"[^>]*>/g, (match) => {
      return match.replace(/src="[^"]+"/, 'src="-"');
    });
    
    
// article.content 파싱하여 이미지 URL을 추출하고, src 속성에 imageUrl을 추가합니다.
export const inputImageToHtml = (content: string, imageUrl?: string) => {
  const parsedContent = content.replace(/<img[^>]*src="[^"]*"/g, (match) => {
    return match.replace(/src="[^"]*"/, `src="${imageUrl}"`);
  });
  if (imageUrl) {
    return <Typography variant="body2" color="textSecondary" dangerouslySetInnerHTML={{ __html: parsedContent }} />;
  } else {
    return <Typography variant="body2" color="textSecondary" dangerouslySetInnerHTML={{ __html: content }} />;
  }
};

// 게시글을 수정하면 처음에 useState에 들어갈 기본값에 content 자체가 들어가야 하는데, 
// 미리보기를 보여주기 위해서는 이미지url이 필요하여 string으로도 변환하는 함수를 만들어줍니다. 
export const inputImageToContent = (content: string, imageUrl?: string) => {
  const replacedContent = content.replace(/<img[^>]*src="[^"]*"/g, (match) => {
    return match.replace(/src="[^"]*"/, `src="${imageUrl}"`);
  });
  return replacedContent;
};

 

  사실 변환해서 보여주기 때문에 문제가 없을 수도 있으나 내가 테스트하는 과정에서 변환해서 렌더링하는 과정이 3개가 있었는데 그 중 미리보기 부분에서 놓쳐서 미리보기에서 이미지를 렌더링해야하는데 src="" 로 값을 찾지 못해 생기는 문제인 것으로 파악된다. 

  이미지 url을 별도로 가져와서 삽입하나, url자체에 대한 내용이나 여러 이슈가 있을 수 있으니 일단 src는 굳이 빈 문자열보다는 에러가 발생하지 않는 "-" 로 넣어주는 방법을 택했고, 당장 에러는 사라졌다. 

 

2. 한글 입력시 에러

  저장한 뒤 다시 조회했을 때 에러는 사라졌는데, 처음 구글링했을 때 봤던 내용은 조회해서 수정하려고 할 때 이미지가 있는 상태면 한글을 쓰려고 할 때 오류가 난다는 것이였고, 아마 나도 오류가 나겠다 싶었는데 역시나였다. 아래 레퍼런스를 참고했고, 바로 해결되었다. 

 

참고 url

https://velog.io/@kwb020312/%EC%95%8C%EA%B2%8C%EB%90%9C-%EA%B2%83-react-draft-wysiwyg-Unknown-DraftEntity-key-null-%EC%98%A4%EB%A5%98

 

 

 

코멘트

  간혹 라이브러리를 사용하면서 에러내용이 바로 드러나지 않는 경우들이 있다. 이번에는 에러 내용이 드러나지도 않았지만, 여러 에러 내용들이 다 같은 에러메세지로 파악이 되었다. Unknown DraftEntity key: null .. 아 뭔가 DraftEntity라는 객체의 키값이 null 이구나 라고 파악하기엔 이미지 url 소스 문제, 이미지 업로드 후 한글 문제 이 둘만 보더라도 더 자세하게까진 아니더라도 에러메세지를 다르게 반환할 수 있지 않았을까? 하는 생각이 든다. 

  프론트 앱 개발자 한 분이 늘어나면서 내 템포가 조금 더 빨라져야 하는 상황인데, 방심하지 말고 에러메세지를 구분해서 잘 보내야겠다는 다짐을 하게된다..!

 

+ 업로드한 이미지를 수정하려면 이미지 자체 태그가 지워지고 새로운 이미지를 업로드할 수 있도록 해야하는데, 지금은 이미지가 박혀 있는 상태라서 다시 해당 오류가 난다...ㅠㅠ 해결하고 업데이트해야겠다.