origoni's Blog from Millky

origoni의 스프링 블로그 입니다.

06/07
2015

23:30:42
0, 0
In SpringBlog from Millky

[블로그개발_09] WYSIWYG 에디터 붙이기

http://millky.com/@origoni/post/1162

블로그개발 시리즈 - 다른글 : http://millky.com/@origoni/folder/30/post/list

라이브 데모 : http://blog.millky.com/post/list

자바 웹 개발 시작하기 : http://www.slideshare.net/origoni/presentations



이번시간은 주말이니 좀 짧게 적어보겠다.

지난시간에 글쓰기 부분에 에디터가 없어서 /post/write?subject=test&content=test 이런식으로 글을 작성하였다;;

뷰쪽은 대충 정리하고 넘어가기 위해 에디터를 먼저 붙이기로 한다.


Pen이라는 위지윅(WYSIWYG) 에디터를 붙일 것이다.

참고로 위지윅이란 'What You See Is What You Get(보이는데로 얻는다?)' 의 약자로. 우리가 일반적으로 사용하는 워드프로세서 같은 편집기를 생각하면 된다.

https://github.com/sofish/pen




위처럼 마치 medium 에디터 같은 기능도 있는데.. 우선 나는 위에 달아 두었다.;

그리고. 마크다운 기능도 지원하는데 (# 하고 스페이스 누르면 H1 적용!) 버그가 좀 있어서;;;

medium 에디터가 맘에 든다면 https://github.com/yabwe/medium-editor 요것도 있다!



사실 다른 많은 유명한 에디터들이 있지만. (위에 언급한 medium-editor도 있고..)

http://ckeditor.com/

http://www.tinymce.com/

https://github.com/daumkakao/DaumEditor/wiki

http://dev.naver.com/projects/smarteditor

https://github.com/summernote/summernote

...

그냥 가장 깔끔하고 이번 블로그 스킨과 어울릴 것 같아서. Pen으로 선택하였다.


작업


우선 pom.xml파일에 아래의 dependency를 추가한다.

<dependency>
	<groupId>org.webjars.bower</groupId>
	<artifactId>pen</artifactId>
	<version>0.1.0</version>
</dependency>


그리고 기본적으로 제공되는 데모를 우리 환경에 맞게 조금(?) 수정하여 form.jsp 파일로 저장하였다.

https://github.com/origoni/Spring-Blog/blob/v0.0.9/src/main/webapp/WEB-INF/jsp/form.jsp


그리고 컨트롤러를 조금 수정하겠다.

지난시간에 있던 부분을 수정하여

@RequestMapping("/write")
public String write(Post post) {
	post.setRegDate(new Date());
	return "redirect:/post/" + postDao.save(post).getId();
}

아래과 같이 만들어보자.

@RequestMapping(value = "/write", method = RequestMethod.GET)
public String form(Post post) {
	return "form";
}
@RequestMapping(value = "/write", method = RequestMethod.POST)
public String write(Post post) {
	post.setRegDate(new Date());
	return "redirect:/post/" + postDao.save(post).getId();
}


수정한 파일들은 이런 느낌이면 되겠다..



간단하게 설명하면..


/post/write 주소를

GET방식으로 접근하면. (method = RequestMethod.GET)

form.jsp파일(return "form") 을 보여주고.

POST방식으로 접근하면.. (method = RequestMethod.POST)

post를 저장하고(postDao.save(post)) 아이디를 가지고 와서(.getId()) 글 읽기 쪽으로 리다이렉트(return "redirect...) 해준다.


음. GET, POST 방식에 대해서 잘 모르시는 분들은...

나중에 한번 설명할 기회가 있을 것이다. (개인적으로는 웹 개발을 잘 하려면. 개발 도 중요하지만. 웹에 대해서도 잘 알아야 한다고 생각한다. 절대로 내가 정보통신을 전공해서 그러는 것이 아니다.)

우선 아래 그림 참고 바란다.




수정이 완료되었으며. 프로젝트를 돌려서 에디터를 확인 해보자.


깔끔한 에디터를 확인 할 수 있다. (글 다쓰고 서버에 올려서 모바일에서 확인해보니.. 휴대폰에서 쓰려면 조금 수정이 필요해 보이긴 한다;;)



끝!

이번시간에 하려 한것은 여기 까지 이다..


오늘 작업한 코드는 아래를 참고 바란다.

https://github.com/origoni/Spring-Blog/tree/v0.0.9


위에 수정한 부분과 화면 부분 조금 더 수정해 두었다.



잡설


이번 커밋본에 스프링 부트 버전업을 진행했다.

1.2.3 -> 1.2.4


이번 버전은 마이너 버전으로. 크게 바뀐 부분보다는 버그 패치 위주로 올라갔다.

나같은 경우 메이저 버전 변경된 경우에는.. 새로운 프로젝트 세팅하는것이 아닌이상.. 고민 많이 해서 올리지만..

마이너 버전은 이슈 조금 확인해보고.. 올리는 편이다.


거기다 이번 버전업 내역을 보면. 

https://github.com/spring-projects/spring-boot/issues?q=milestone%3A1.2.4+is%3Aclosed


기타 라이브러리 버전업이 엄청 많다.

지난시간에도 이야기 했지만.

라이브러리들 의존성 관리도 보통일이 아니다.

이 수고스럽고도 어려운 일을 스프링 부트 팀에서 지원해주고 있으니 얼마나 감사한 일인가.


단. 이번 버전업 이후 서버에 서 올릴때. 이슈가 발생 하였다.

뭔가 로드가 안되었는데;;;;

아래 dependency 추가 하고 해결하였다;;

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-loader-tools</artifactId>
</dependency>


콘솔에서 작업한거라.. 일단은 그냥 넘어가긴 했는데. 나중에 이슈 올라온것 있는지 좀 찾아봐야 하겠다.

SpringBlog 0.0.9 버전에는 적용되어있다.

기타 변경 사항은 아래를 참고 부탁드린다.

https://github.com/origoni/Spring-Blog/commit/362fd62b6d7eb05bfa94ad83b9377ee9b8d8f67b



+1

테스트 해볼 수 있는 데모를 올려 두었다.


http://blog.millky.com/post/list


해당 주소에서 개발중인 블로그를 테스트 가능하다.

단 아직은 XSS필터 같은것 붙이기 전이니 살살 테스트 부탁드린다.

그리고. 지난시간에 언급했듯이.. 메모리 H2를 사용중이라.. 서버를 다시시작하면 글이 다 날아간다. 정말 테스트 용으로만 부탁드린다.



깃헙 : https://github.com/origoni/Spring-Blog

프로젝트 시작하는 방법은(for Windows User)? http://millky.com/@origoni/post/1145

블로그개발 시리즈 - 다른글 : http://millky.com/@origoni/folder/30/post/list
◀ 06/11 2015 05:54:46
[블로그개발_10] 글에 부제목 추가 (Post Entity 모델링 +lombok, @Valid)
06/06 2015 11:09:46 ▶
CentOS7 자바 실행환경 (Java8 + Maven3.3 + GIT + Tomcat8)
back to top