크게 스프링과 관련있는 것 같지는 않지만 카테고리 추가하기 귀찮기 때문에 여기다가 적어야겠다.
toast ui에 있는 데이터를 그냥 getHTML()해서 DB에 저장하고 이걸 불러오면 될 줄 알았는데 아니었다.
UI단과 DB에 저장될 때 인식 가능한 캐릭터가 다르기 때문에 특정 문자는 바꿔주어야한다.
대표적인 것이 <> " ' &이런 문자다.
다만 인코딩을 해줘야할 것 같지만, 그대로 getHTML() 이후 server단에서 콘솔을 찍어보면 인코딩이 된 상태로 db에 저장됨을 확인할 수 있다.
function encodeHTML(html) {
return html.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll('"', """)
.replaceAll("'", "'");
}
// 필요없는 함수인것같다. 다만 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에 통으로 저장할 수 있었다.
'spring' 카테고리의 다른 글
spring MVC (0) | 2024.06.15 |
---|---|
Bean Scope빈스코프 (0) | 2024.06.02 |
@AutoConfig, @ComponentScan, @Autowired, Filter (0) | 2024.05.28 |
Spring Container의 생성 과정 (0) | 2024.05.23 |
라이브러리 vs 프레임워크, 정 동적 객체 인스턴스 의존 관계 (0) | 2024.05.23 |