에디터 글 DB 저장, 이미지 base 64인코딩 데이터 DB저장

크게 스프링과 관련있는 것 같지는 않지만 카테고리 추가하기 귀찮기 때문에 여기다가 적어야겠다.

 

toast ui에 있는 데이터를 그냥 getHTML()해서 DB에 저장하고 이걸 불러오면 될 줄 알았는데 아니었다.

UI단과 DB에 저장될 때 인식 가능한 캐릭터가 다르기 때문에 특정 문자는 바꿔주어야한다.

 

대표적인 것이 <> " ' &이런 문자다.

다만 인코딩을 해줘야할 것 같지만, 그대로 getHTML() 이후 server단에서 콘솔을 찍어보면 인코딩이 된 상태로 db에 저장됨을 확인할 수 있다.

function encodeHTML(html) {
    return html.replaceAll("&", "&")
               .replaceAll("<", "&lt;")
               .replaceAll(">", "&gt;")
               .replaceAll('"', "&quot;")
               .replaceAll("'", "&#039;");
}
// 필요없는 함수인것같다. 다만 DB에 저장되는 값은 이렇게 저장된다.

 

디코딩은 해줘야한다.

한가지 주의할 점이 인코딩은 알아서 해주니까 디코딩도 알아서 해주겠지? 생각해서 DB 그대로 setHTML()으로 넣어왔는데 DB에서 불러왔는데 막상 에디터에 넣어서 찍어보니 <p><p>hi<p/><p/> 처럼 p 태그가 두번 감싸게 된다. 다른 태그면 디코딩이 되는데 에디터는 디코딩이 이상하게 되는건가 하는 추측을 할 수 있었다.

그래서 따로 어떤 태그에 innerHTML을 넣은 다음에 파싱된 value 값을 그대로 setHTML()을 통해서 넣어주면 된다.

function decodeHTML(html) {
    var txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
}

 

 

하지만 예상외의 복병인 Base 64 인코딩 바이너리 이미지가 있었다.

저장할 때는 잘 저장이 되는 것 같은데 계속 불러올 때 이미지가 깨져서 alt만 불러왔다.

처음 첨부할 때와 DB에 저장된 String을 비교해보니 +로 되어있던 String이 " " 과 같은 공백이 되어있음을 알 수 있었다.

+와 같은 문자는 BASE 64 데이터 수신시 공백으로 바뀐다고 한다. 

그래서 시험삼아 IMG의 src에서 공백을 전부 +로 바꾸니 해결되었다.

그럼 인코딩시 replaceAll을 통해 DB에 저장하고 디코딩 시 이를 되돌리면 해결된다는 가설을 세웠다.

function encodeImg(str) {
	return str.replaceAll('+', '%2B');
}

function encodeImg(str) {
	str.replaceAll('%2B', '+');
}

이렇게 에디터의 데이터를 db에 통으로 저장할 수 있었다.