summer-note란?

썸머노트는 무료 웹에디터의 한 종류로서 글편집 기능을 사용자가 쉽게 사용할 수 있도록 해주는 api다.

프로젝트에 썸머노트 적용시키기

https://tyrannocoding.tistory.com/15
https://programmer93.tistory.com/31

위의 글을 읽고 머리를 비우고 일단 적용해보자.

수정사항 및 참고사항

1. application.properties에서 외부파일 경로를 설정해준 후 어노테이션을 통해 받아오자.
2. "file:" -> 이 부분을 수정해야한다.

외부파일 경로를 설정해주는 이유

이미지 파일들은 DB에 base64형식 그대로 넣게되는 경우 DB에 저장될 텍스트양이 엄청나게 많아지기 때문에 서버 내부의 리소스 폴더에 이미지를 따로 저장해주는 것이다.

서버에 이미지 저장

2. json 오브젝트 얻어오기
3. 파일명, 확장자명 구분해서 저장하기
4. UUID객체를 이용해서 랜덤한 이름 설정해서 서버에 저장해주기
   (이렇게 저장하는 이유는 서버에 똑같은 이름의 파일이 저장될 때 원래 있던 파일이 덮혀지는 일이 있기 때문이다.)
5. 이미지의 정보(서버에서의 저장위치)를 json 객체로 response 해준다.

form을 통해 notice 전송

1. db에 html 태그를 그대로 저장하게 되는 경우 mysql에서 에러가 난다. 그래서 form 데이터를 받는 객체에서 html태그를 escape하게 해주자

서버에서 이미지 불러오기

1. DB에서 게시글의 정보를 가져올 때 위처럼 처음에 html 태그가 들어갔던 글을 escape 시켰었는데 이를 다시 정상으로 돌려줘야한다.
2. 이제 html로 돌아왔으니 사용하는 렌더러에 맞게 그것이 html 코드로 작용할 수 있도록 해줘야한다.
   thymeleaf의 경우에는 아래처럼 th:utext를 사용하면 html코드로 적용이 가능하다.