[Spring][18]Using summernote[글쓰기 작성 구현]

목차

- 글쓰기 작성

- 구현되는 모습

- 글쓰기 작성 디자인

---

글쓰기 작성

 

saveForom.jsp를 새롭게 만들어 줍니다.

 

 

 

 

saveForm.jsp

 

글쓰기를 저장하는 것은 아래와 같은 쿼리문을 실행하는 것과 동일합니다.

 

Insert into post(title, content, userId)

values('제목 1', '내용 1', 3);

 

principal에 id잡아서 

저장을 해야 합니다.

 

세션에서 가져와서 User객체에 넣어줍니다

 

위와 같이하게 되면 id를 일일이 설정해야 합니다.

 

post는 userEntity의 id만 필요로 하기 때문에

세션의 principal을 가져와서 User객체에 담아서 저장해줍니다.

 

 

깔끔해진 모습

 

가져온 post를 현제의 세션에서 가져온 Entity 형태를

세션 형태의 User로 다운 캐스팅 후

post를 저장을 합니다.

 

이런 과정을 거치는 이유는 Post를 가져와서 저장을 할 때 post에도 

user의 정보가 필요하기 때문입니다.

 

---

구현되는 모습

 

 

 

 

 

 

 

반면 postman으로 요청해도 "/"로 반환됩니다.

null로 들어가 버립니다.

 

 

Postman으로 요청

 

들어간다?

 

 

인증과 권한이 없는 모습

 

 

코드상에서 postman으로 보내게 되면 null값이 principal로 들어가게 됩니다.

바로 인증 없이 들어가 버렸기 때문에 session이 만들어지지 않은 상태입니다.

 

 

인증을 추가해봅시다.

 

 

로그인 없이 들어온 것이면 principal이 null값이기 때문에

null값인지를 확인하면 간단해집니다.

(왜냐하면 로그인을 하지 않으면 session에 Entity 형태로

principal로 담겨 있는 상태가 아니기 때문이다)

 

 

principal이 null값이면 로그인 주소로 호출해줍니다.

 

인증 추가

 

위와 같이 코드를 작성하면 이제 로그인 안 한 상태에서 게시글이 작성이 되지 않습니다.

 

postman으로 확인한 결과

게시글 등록이 되지 않습니다.

 

---

글쓰기 작성 디자인

 

 

summernote를 사용해서 글쓰기 화면을 더 다채롭게 만듭시다.

 

summernote

 

 

 

Simple example

 

이제 본 프로젝트에 적용하기 전에 test를 위해 

(오류를 잡기 위해서) 

바로 적용을 하지 않고 DynamicWebProject를 만들어 줍니다. 

 

 

summernote.jsp 추가

 

복사 붙여넣기 합니다

 

실행되는 모습

 

test가 끝났으니 본 파일에 넣습니다.

CDN을 합칠 때 막 붙여 넣기 하지 말고 충돌하지 않게 잘 보고 넣어줘야 합니다.

(가령 bootstrap 버전이 낮은 것을 집어넣을 수도 있다.)

 

 

version confirm!

 

중복되는 것을 빼고 header에 넣어줍니다.

 

cdn

 

*

script 기생이라는 뜻

javascript html에 기생하는 언어

 

그런 언어들이 많습니다.

이런 언어들을 script언어라고 합니다.

 

그림을 그려놓고 여기에 맞는 속성을 찾아가는 script이기 때문에

interpreter언어이며 아래에 둬야 합니다.

*

 

글쓰기 페이지에 script 코드를 넣어줍니다.

header에 CDN을 넣어주었기 때문에 script 코드만 더 넣어주면 됩니다.

 

 

script를 적용합니다

 

이제 실행을 해보면 잘 적용이 됩니다

 

잘 적용이 됩니다

 

 

 여기서 글쓰기 창의 높이를 키우고 싶습니다.

 

lineHeight 추가

 

추가된 모습

 

길어졌습니다!

 

사진을 넣고 글쓰기 버튼을 누르면 다음과 같이 저장이 됩니다.

 

이미지도 Posting 가능하다

 

이미지가 DB에 들어간 모습

 

*

Tips

이미지는 byte로 저장하고 시각화를 시킴
1MB -> 백만 바이트
10MB -> 천만 바이트

base64 암호화 기술
디코딩되는 기술
암호화에는 두 가지
인코딩-> 디코딩
인코딩 -> 복호화 불가능
패스워드 -> 복호화불가능

이제는 디코딩이 불가능해야 한다.
인코딩 되면 불법임
data:image/jpeg
프로토콜, 마인 타입

1. 프로토콜
2. 마인 타입
3.base64

*

 

 

---

Reference

 

https://summernote.org/

Summernote - Super Simple WYSIWYG editor

 

---