이미 가지고 있던 게시판과 쓰기만 가능했던 댓글소스를 가지고 이틀정도동안 블로그를 만들어봤습니다. 경험과 후기를 적고자 합니다.

1. ---------- 1
개인 블로그 만들기
2~3일간의 개발 기록
스프링프레임워크와 함께
https://fb.com/me.adunhansa
https://twitter.com/arahansa
http://adunhansa.tistory.com/
사이트 : http://arahansa.com
ABOUT
CONTACT
SOURCE
1

2. 1. 작성자 소개 2
아라한사
-------------------------------------------------------------------
그리고, 평소 정리를 즐겨합니다. 한 때 동영상강좌도
만들다보니.. 비실명과 만화캐릭터를 쓰네요
이 점 양해 부탁드립니다 ㅎㅎ

3. 개요 3
• 개발이 입문한 지는 그리 오래 되지는 않았습니다만,
대부분의 시간을 혼자 개발하고 지냈습니다-_-
• 제 꿈은 .. 언젠가 제가 만든 커뮤니티를 개발하는 것이 꿈인지라..
처음부터 누구를 외주를 줄 상황도 아니고, 혼자 다 습득을 해야
했습니다.. 중간의 많은 시행착오가 있었고, 지금도 그 연속입니다.
• 그런 과정 속에서.. 이게 맞게 하는 것인가 궁금하기도 했고..
또 지금의 제가 과거의 아무것도 모르던 저에게 …
이런 흐름으로 만들면 되니까 너무 어렵게 생각하지마ㅎㅎ
이런 느낌으로..조금 친절하게 설명을 해주고 싶었습니다. ㅎ
(사실 개발한 게 조금 뿌듯&재밌기도하고요 ㅋ)

4. 주의사항 4
• 개발업계에 어떤 것을 바로 아는 방법은 “틀린 것을 말하는 것이다”라고 하는 말이
있더군요..이 PPT는 많이 틀릴 수도 있습니다. 혹시나 다른 더 좋은 방법있으면
저에게 가르쳐주세요. 기술에 대한 이야기를 나누기 위한 PPT입니다^^;
• 제가 이 글을 쓰면서도 틀린 글을 적을 지도 모릅니다. 잘못된 소스를 보여드릴지도
모르구요…잘못된 소스를 적는다는게 상당히 창피한 일이 될 지도 모릅니다.
하지만 그런 것을 창피해해서는 더 나은 발전이 없다고 생각해서 왠만하면 그냥
적어보려고 합니다^^;
• 어떤 기술을 잘 모르면..(ㅠ.ㅜ) “너 그것도 모르니? 훗? 저질소스를 만들어내는군?!”
가끔 이렇게 비쳐지지는 않을까 하는 걱정을 합니다. 제 괜한 걱정일지도
모릅니다만..흠흠 아무튼.. 제가 실수가 있고 모르는 것들이 있더라도
저질소스군? 이런 분위기보다는 기술에 대한 흥미에서
발생하는 자유로운 토론, 의견 교환이 되었으면 합니다^0^; ( ㄷ ㄷ ㄷ . 개발업계는
잘하는 분들이 너무 많으셔서요 ;; )

5. 예상하는 독자분 초점 5
• 에.. 저는 초보시절에 어려운 글을 상당히 읽기가 힘들었습니다.. 지금도 마찬가지이구요. 한국어를
읽으면서 한국어가 이해가 안되는 상황이 많이 발생했습니다. (제가 사실 언어등급이 안 좋습니다ㅠ)
• 초보시절에 글들을 읽으면서 “아 나는 앞으로 글을 쓰면 최대한 초보의 기준으로 적겠어!”하는
다짐을 했습니다..그렇게 한 명의 설명충이 되가는 ….(…)
• 이왕 블로그 개발기를 적으면서, 웹개발의 흐름을 알고 싶어하시는 분과, 다른 언어를 사용하시면서
스프링 프레임워크에 대해 관심있어하시는 분을 염두에 두고 적어보고자 합니다. 최대한
쉽…쉽게(쉬운 걸 어렵게 설명할지도;;)
<= 설명충의 좋은 예.
타이의 대모험

6. 앗차, 낚시 사죄 ㅠ 6
제목에 2~3일이라고 적었지만, 실은 그 2~3일을 위해서
그 동안 투자했던 많은 시간과
어디든 붙여넣을려고 만들어두었던 게시판정도의
잔여소스가 있었습니다^^;
( 블로그 만든건 2~3일이 맞긴하지만..제목..낚시성…성격이
조금 있습니다 .ㅎㅎ;;)
-------------
예전의 게시판, 댓글 게시판 원형 을 토대로 새로 만든 블로그

7. 자, 그럼 목차 부터 갑니다. 7
1. 블로그 디자인 선택하기
2. HTML, 디자인! 서버
연동시작(스프링 환경설정)
3. 게시글 클래스 만들고
CRUD해보기
4. 게시판을 위한 페이징구현
-----------------------
우선 블로그를 개발하면서 크게 할 일을 생각해봅니다.
대략 이런 흐름으로 개발을 했습니다.
1부 2부
5. 이제 댓글을 달아볼까?
6. 소셜 회원 가입도 달고
싶은데?
7. 회원이랑 게시글, 댓글,
암호화 혹은 회원권한
8. 기타 잡다한 설정
9. 아마존에 배포

8. 1부. 디자인부터 게시글 페이징까지 8
블로그 개발후기 -1부

9. 1. 디자인의 선택 9
• 우선 최종 작업 사이트부터 보실까요? http://arahansa.com/

10. 1. 디자인의 선택 - 부트스트랩 10
• 개인적으로는 디자인이 어느정도 잘 되어있다고 생각합니다만,
실상은 역시 이렇습니다.
• 개발업계에서는 바퀴를 처음부터 만들 필요가 없었습니다! 두둥ㅠ!
• 부트스트랩이라는 잘 만들어진 도구와, 이미 부트스트랩으로 만들어진
사이트들을 구매를 하거나, 무료테마를 받아서 수정을 합니다.
• 사이트 참고)
• 부트스트랩 공홈 : http://www.getbootstrap.com/
• 부트스트랩 유료테마 : https://wrapbootstrap.com/
• 무료 테마 : http://startbootstrap.com/
• 테마사이트 2 : http://themeforest.net/

11. 1. 디자인의 선택 - 부트스트랩 11
부트스트랩은 반응형 페이지를 쉽게
만들어주고 각종 양식들을 잘 미리 만들어놓은
프레임워크입니다.
여기선 다음의 사이트를 구매하겠습니다.

12. 1. 디자인의 선택 – 부트스트랩&디자인주의사항 12
• 아무리 이미 만들어진 사이트를 구매해서 수정을 한다해도, 그것들을
다루는 데는 그 사이트를 읽고서 수정하고 응용할 기본 지식이 필요합니다.
• 또한 구매한 사이트 그대로 사용하는 경우도 없습니다. 없는 기능의
경우에는 직접 그 틀에 맞춰서 만들어야 하고 그게 오히려 개발하는 데
힘든 경우도 있습니다…
• 개발을 할 수 있다는 자신감을 갖되, 너무 쉽게 보면 나중에 불면의 밤을
보내게 될 것입니다 ..(ㅎㅎ?)
– (커스터마이징을 하려면 다음같이 은근 많은 수정을…또 해야 합니다..; )

13. 1. 디자인의 선택 – 디자인 주의사항 직접 개발하기 13
• 아, 이 이야기는 하고 가도록 하겠습니다.
• 간혹 부트스트랩으로 사서 하다보면 판매자가 특정 레이아웃맞춰서 개발을 하지 않거나… 아니 뭐.
결국엔 자기가 만든 것을 직접 만들어 넣을 때가 있습니다. 특히 게시판 같은 경우에는 더욱
그러합니다;; 주로 이런 것을 염두에 둡니다;;음.. ;
• 미디어태그를 이용하여 각 화면에 맞추어서 개발한다.
• %와 em을 통해서 퍼센트로 개발한다. 부트스트랩같은 경우에는 col-md같은 비율을 맞춰서
개발하고 모바일 퍼스트(핸드폰 화면먼저) 염두에 두고 개발한다.
• 반응형 강좌로 여기가 좋습니다.(감사합니다) http://readme.skplanet.com/?p=9739
• 사실 부트스트랩 가지고 노는게 제일..만만합니다(ㅠ) 화면부분은.. 신경쓸게많다보니. ㅎㅎ;

14. 1. 디자인은 이렇게 일단 종료^^ 14
• 흠…뭐 내용물은 이런 식으로..필요한 이미지는 직접 따고, html 코드
수정해가면서 기본적인 화면은 미리 만들어두면 디자인은 완성입니다.
로고도 만들어줍시다. 이미지가 필요할때는 구글에서 여러 이미지를
조합해서 만들어주면 좋습니다.
• 무료 아이콘 사이트 : http://www.freepik.com/
• 색감 사이트 : http://www.colourlovers.com/

15. 02. 서버 연동시작 15
• 그럼 이제 게시판이 보여질 화면도 미리 포함하여
html뷰 화면들을 어느 정도 만들었다고 가정합니다.
html이 약하실 때는
(https://opentutorials.org/course/1) 생코
강의를 봅시다^^;
• 그렇다면 이제 웹서버를 켜보겠습니다.

16. 02. 서버 연동시작 – 빌드도구 그래들 16
• 웹서버를 돌릴려면 로깅, 웹프레임워크같은 많은 외부 라이브러리들이
필요하고 이것들을 관리하려면 빌드도구가 필요합니다.
• 여기선 빌드도구 그래들 설정을 써주겠습니다.
• 뭐..이렇게 환경변수를 써주고, 스프링 같은 설정도 적어줍니다. 그래들을
다루는 문서가 아니므로 흐름만 체크하고 생략^^합니다.

17. 02. 서버 연동시작 – 스프링 환경설정 17
• 스프링 프레임워크는 자바에서의 대표적인 프레임워크입니다..
스프링 프레임워크의 설정을 해주겠습니다. xml로도
설정가능하고 자바클래스를 이용한 자바설정으로도 가능합니다.
• 우선 기본적인 환경설정은 제가 예전에 번역한
http://adunhansa.tistory.com/192 (스프링 소셜+시큐리티)
에 많이 참고를 하였습니다.
• 환경설정에선 저 글에서 제공하는 깃헙소스를 참고해봅니다

18. 02. 서버 연동시작 – 스프링 환경설정 18
• 여기선 대략 이런 config패키지를 가져갑니다.
• 각각 Database설정,
보안설정, 소셜설정,
웹MVC 설정, 캐쉬설정,
그외 애플리케이션 설정등
여러 설정파일을 지정하였습니다.
• 자세한 설명은 생략 ^^(설명은 방금 링크의 번역글에도
나와있습니다)

19. 02. 서버 연동시작 – 스프링 환경설정 19
• 일단 웹의 흐름이므로 웹MVC설정을 보시겠습니다. 중간 메서드는 이미지파일같은
정적자원들을 관리해줄 경로들을 지정해주고, ViewResolver란 것으로 사용자가
볼 뷰를 어떻게 구성해줄지 설정해줍니다. 여기선 jsp로 구성합니다.
정적자원관리에서는 캐쉬설정을 해줄 수가 있겠습니다.
 요녀석 봐줍시다
↑ 정적자원 캐쉬 :
나중엔 캐쉬가 따로 필요합니다

20. 02. 서버 연동시작 – 헬로월드! 20
• 환경설정이 끝났으면 이제 간단하게 헬로월드를 띄워봅니다. 앗차!
스프링의 웹에서는 크게 @Controller @Service
@Repository 영역이 있습니다.
• 사용자가 요청한 주소처리 부분이 @Controller
실제 비즈니스 로직을 처리할 부분이 @Service
데이터베이스로의 접근을 주로 하는 @Repository
@Controller
계산기
입력받아요~
1+2 = ?
3이군
DB에 저장할래!
@Service @Repository
http://계산기.com/calcul

21. 02. 서버 연동시작 21
• 설명을 너무 간단히 하는 것같아서-_-..음.
• 이건 Roo 구조? 뭐 이런 것같은데..뭐 아무튼 3단구성이
흔한 구조입니다 ㅎㅎ; (아아 돌날라오는 소리가..)

22. 02. 서버 연동시작 – 주소와 뷰파일 연결 22
• 자 이제.. 아무튼 RequestMapping이라는 요청매핑을 통해
컨트롤러에서 helloworld를 반환하면 오른쪽의 뷰리졸버라는 녀석이
경로를 해석해서 helloworld.jsp 파일을 불러오게 됩니다.
정적파일들도 잘 연결이 될 것입니다..(그..그래야 합니다)
(괜히 다른 언어하시는 분도 독자에 염두에 둔건가….;;) 으으.
WEB-INF/jsp/ .jsp 가 최종적으로 붙습니다

23. 03. 게시글 클래스 계획 23
• 일단 블로깅의 가장 작은 단위부터 만들어봅니다.
게시판의 글을 하나의 클래스로 생각합시다.
• 먼저 게시글 클래스를 만들어줍니다.

24. 03. 게시글 클래스CRUD - ORM 24
• 앗참, @Entity 이것들이 뭐냐고요? 혹시라도 다른 언어
사용자께서 보실..(으으;;괜히 염두를?!) 위해 얘기해보자면 ORM이라는
기술로 객체관계매핑 ! 클래스를 만들면서 동시에 데이터베이스에 저장될
속성들을 정해주고 있습니다. (자바만의 기술은 아니죠 ㅎㅎ; )
• @Entity라는 어노테이션을 붙여주면, 클래스에 적힌 변수들이
애플리케이션이 구동이 되면서 데이터베이스에 자동으로 필드가
만들어집니다. 세상 참 좋죠?^-^
자동변환!

25. 앗차! spring-data-jpa소개 25
• 앗차, 여기선 ORM 기술로 spring-data-jpa란 기술을 씁니다.
• 하단의 링크에 예전에 간단히 spring-data-jpa에 대한 설명을 적어둔 것입니다
• http://www.slideshare.net/meadunhansa/spring-data-jpa-46105441

26. 03. 게시글 클래스CRUD - ORM 26
• 이제 그러면 읽고 쓰기 수정, 삭제(CRUD)를 위해 다음과 같은
리파지토리 인터페이스를 만들어줍니다. 이렇게 해주면 CRUD
작업이 완료입니다. 정말입니다; 스프링 프레임워크에서 알아서 이
인터페이스를 구현해주고, 메서드를 붙여줍니다.
• 필요한 기능이 있다면 하단과 같이 추가해주면 됩니다.

27. 03. 게시글 클래스CRUD - Test 27
• 자 그럼, 게시글을 읽고 써봐야할텐데요.. 웹서버를 바로 돌리지는 않습니다. 이런
기능을 검사하기 위해 일일이 웹서버를 키면 개발자의 아까운 시간이 소비되기
마련입니다. 테스트를 통해서 먼저 게시글이 잘 저장되고 써지나 검사를 해보고
테스트를 통과하면 기능을 올리던가 합니다. 간단히 소스 일부를 보자면
@Autowired를 이용해 repository를 불러옵니다.
(스프링의 큰 특징이지만..설명은 과감히 패..패쓰!;;;)
방금 만들었던 인터페이스..입니다^^;
리파지토리를 불러오고, 자동으로 넣어진 메서드가
있는데 deleteall로 모두 지워보고,
.count로 갯수세보고,
클래스를 만든 뒤에 .save로 해주면 DB에
필드들이 저장이 됩니다.
assertEqual로 맞는지 틀린지 검사해봅니다.

28. 03. 게시글 클래스 화면연결 - 테스트 28
예.. 이번에도 계속해서 테스트입니다 테스트테스트@_@;;
웹서버를 키지 않고도 페이지가 잘 동작을 하나
뭐…이런 식으로
테스트를 해봅니다.
코드가 많아보이시나요
설정부분은 복붙템플릿
을 많이 이용합니다.
괜찮습니다(ㄷㄷ…)

29. 03. 게시글 클래스 화면연결 - 테스트 29
• CRUD와 화면이 잘 동작함을 알 수가 있습니다. html으로 연결하는
부분은 생략합니다..
(책보면 게시판 만드는 예제 많으니깐요 ㅎㅎ)
• 이렇게 테스트를 잘 만들면, 원하는 기능을 가볍게 테스트해가면서 개발할
수 있고, 나중에 개발한 것들을 바꾸더라도 만들어놓은 테스트를
돌려가면서 프로그램의 기능들을 안심하고 보장할 수가 있습니다.

30. 잠시 책 얘기..-ㅅ-ㅋ 30
• 예. 테스트에 관한 부분은 토비의 스프링이라는 책과 최범균님의 Spring
4.0 프로그래밍 책을 보시면 “오오오 이렇군” 하고 무릎을 탁치며 보실
수가 있으실 것입니다.
앗차! 가볍게는 제가 예전에 만든 Junit 원포인트 글이 있습니다 
• https://opentutorials.org/module/1281/8280

31. 04. 페이징 – 무엇이 필요할까! 31
• 이제 단순히 게시글을 쓰고, 작업하는 모든 작업이 완료되었다고 가정을 합니다.
(여기까진 눈으로 봐도 됩니다^^) 그럼 이제 게시글의 모습을 보려면 페이징 처리를
해야겠지요? 이것은 예전에 만들었던 게시판입니다;; 이것을 참고로 무엇이 필요할지
생각해보겠습니다.

32. 04. 페이징- 설계 32
• 대략 보시는 페이지에 다음과 같이 있다고 가정을 합니다. 하나의
페이지 정보안에는 여러 개의 게시글이 있다고 합시다. 눈에
보이는 대로 그렸습니다;;

33. 04. 페이징 – 게시글 목록받아오기 33
• 예.. 이런 정보중에는 직접 계산해야되는것도 있고, 스프링의 Page객체에서 알아서
구해주는 것도 있습니다. ORM을 시작하면서 알려드린 슬라이드
http://www.slideshare.net/meadunhansa/spring-data-jpa-46105441
38페이지 부분에 페이징에 관련된 글이 나옵니다. .
Page<게시글클래스> 를 선언을 하고서 리파지토리의 find 계열메서드에서
자동으로 만들어주는 페이지 정보를 최대한 받습니다.
• 흠.. (다른 곳은 어떻게 하시는지 모르겠지만;;) 게시글 한 화면을 통째로 보여줄
포장용(?) 클래스를 하나 만들어주겠습니다.
 페이지 정보 반환 메서드

34. 04. 페이징 – 페이징 알고리즘 34
• 다음과 같이 페이지 정보 클래스를 만들어주고서, 게시글조회 컨트롤러로 들어오면 서비스계층에서
이 클래스를 만들어서 반환해주기로 합니다.
• 생성자로 객체가 만들어지면서 자동으로 Page객체에서 알고리즘을 계산하도록 하겠습니다.
• 페이지 계산 알고리즘은 아~주 예전에.. php책에서 본 것을 아직도 거의 복붙으로 하고
있습니다(…);; 참고로 오른쪽 사진은 Page<T> 클래스에 있는 메서드 정보입니다. 저러한
정보들을 findAll(Pageable pageable) 메서드에서 자동으로 받을 수가 있습니다.

35. 04. 페이징 – html 소스 작성 35
• 페이징의 밑의 소스로, 게시글은 오른쪽 소스로
페이징 객체에서 얻은 정보를 돌립니다!

36. 04. 페이징 – 구현! 36
• 음…뭐 대략 이런 흐름으로 페이징까지 구현했습니다-_-ㅋ;
• … 여기저기서 소스 품앗이를 다니다보니 잘 됐는지
모르겠지만 암튼..잘 나오기는 하는 것같습니다.흠흠..

37. 04. 페이징 – 고민1. 레이지로딩 37
• 페이징에서의 고민을 해봅니다...게시글 목록을 불러올 때, 글 내용을 다 불러올
것인가? 이런 문제를 생각해봅시다. 게시글 클래스들이 담긴 Page객체를
findAll같은 메서드로 받아오는데 모든 필드.. 글의 내용까지 전부 받아옵니다.
게시글마다 글내용이 매우 많은 경우.. 저렇게 게시글 목록만을 원하는데 매우
비효율적이게됩니다.
• 당장 필요한 것은 게시글 목록을 불러올 시, 게시글 내용들은 제외를 해야 합니다.
내용들을 불러오는 것을 지연! 즉 Lazy Loading을 해야 합니다.

38. 04. 페이징 – 고민1. 레이지로딩 38
• 권남님의 블로그에 이와 관련된 부분이 있습니다.
http://kwonnam.pe.kr/wiki/java/jpa/one-to-one
• (그리고 박재성님의 slipp소스도 참고함^^ 감사합니다)
• 다음과 같이 불러오기지연 설정을 해주겠습니다.

39. 04. 페이징 – 레이지로딩 테스트 39
• 그럼 불러오기지연(LazyLoading) 테스트를 해보겠습니다. 다음의
스택오버플로우를 참고합니다. 메시지를 불러올 때 지연된 sql문이 나오게 됩니다
http://stackoverflow.com/questions/4306463/how-to-test-whether-lazy-loaded-jpa-collection-
is-initialized

40. 04. 페이징 –고민. 레이지로딩. 뷰에서 예외발생 40
• 테스트도 잘 되겠거니…해서 글을 읽으면 글이 읽어와지지가
않습니다. 레이지 로딩을 하나 했더니 다른 문제가 있습니다.
• 늦은 초기화 예외가 발생한 것입니다. 이것이 무엇일까요?
이것이 무엇인지, 어떻게 해결하는지 잠깐 알아보겠습니다.

41. 04. 페이징 –고민. 늦은초기화예외 41
• 아까전에 세 계층을 말씀드렸었습니다. 주로 DB를 불러오는 것은 서비스계층에서
@Transactional이라는 어노테이션을 통해서 이뤄지며, 지연로딩같은 정보들을
기억을 했다가 요청을 하면 지연로딩관련 내용을 불러와줍니다.
어? 목록요청?
페이지목록줄게요
DB야 목록좀다오 findAll !
서비스계층 :
내가 ! DB관련작업 기억하고 있어요!
아 저 화면녀석 나중에 글 읽을 때
지연로딩한 내용줘야하는데…
화면으로 간 순간 저런 녀석은 제 관심밖입니다…ㅠㅋ
화면따위 관심없거든요 !

42. 서비스계층 :
너(DB글)이 나를 벗어난 순간, 나는 너를 기억못해.
내가 왜 너까지 기억해야 하니?흥뿡칫.(오글오글)
그건..내 책임 밖이라고!
04. 페이징 –고민. 늦은초기화예외 42
• 서비스계층에서까지만 이런 DB관련 작업에 대한 정보를 들고 있으니(영속성
컨텍스트라고…하겠죠. 어려운말 안쓰겠습니다ㅠ쿨럭)
화면단에서 나중에 내용을 달라고 할 곳이 없는 것입니다!
이번엔 글 읽게? DB야 글 좀다오 findAll !
1. 이런 화면을 기대하지만
2. 페이지요청
하지만 실패!
3. content가 없어요.. 징징
?어디로 가나?

43. 04. 페이징 –고민. 늦은초기화예외의 고민 43
어떻게… 그럼 해결해야 할까요?
잠시 쉬어가겠습니다.

44. 04. 페이징 –고민. 늦은초기화예제 고민해결해보기 44
• 첫번째가 지연로딩이 아니라 Eager로딩이라고 막 불러오는 것입니다. .
게시목록받으면서 게시글 내용도 팍팍 주는 것입니다.
흠 좀 컴퓨터가 힘들겠죠?
• 두번째가, Hibernate.Initilize() 같은 메서드가 있는데, 이것을
서비스계층에 심어줘서 뷰에 내보내기 전에 초기화를 시켜주는 것입니다.
하지만 이는 화면에서 필요한 사항들을 서비스계층에서 적어줍니다.
(초보때는 오 그럼되지..했는데 이게 또 안 좋다고 합니다^^; 뷰와
서비스는 될 수 있으면 분리가 되어야 한다고..하더군요! )음.. 꼭
Initilize를 안써도 뭐.. 해당 필드를 불러와줘도 SQL문이 구동되는
것같긴합니다.
• 세번째가 OSIV (Open Session In View) 라는 패턴(?)을 이용하는
것입니다. 화면에까지 ..서비스계층이 기억을 하자..이런 말입니다!
그럼 OSIV를 어떻게 사용할까요?

45. 저..잠깐 좀 징징대겠습니다ㅠ 45
• OSIV 예제.. 아 진짜 자료…없다-_-… 최신이 2007?…상상속의
기술인가.. 이 것때문에 밤 거의 샜습니다……(외로움) 찾고찾고 이거저거
해보다.. 그냥 doc.spring 문서보고 새로 짜보려고-_-까지..

46. 잠시 설명충이 되어 문제해결 복기 좀 해보겠습니다-_-;
스킵하셔도 무방합니다^^; 46
• 예. 아무튼 스택오버플로우에서 다음 인터셉터를 사용하면 된다고 해서
힌트를 얻어서, 적용하려고 하면 몇가지 문제에 봉착합니다. 저 글의
버전은 하이버네이트3버젼이고, sessionFactory를 인식을 해야 하는데
저희쪽에서는 sessionFactory를 명시적으로 선언을 하지 않았습니다.
지금보니..단어와 힌트만 잘 캐치해냈으면 빨리 해결해냈을 텐데..제
부덕함의 결과이군요-_-..
• 예전엔 버전 다른 라이브러리 설치하는 것도 -_-
힘들어했지만 지금은 그냥저냥 설치합니다. 문제는 OSIV 필터 혹은
인터셉터에 넣어줄 SessionFactory 였습니다 ;

47. 잠시 설명충이 되어 문제해결 복기 좀 해보겠습니다-_-;
스킵하셔도 무방합니다^^; 47
• 저같은경우는 Spring-data-jpa에서 받은
LocalContainerEntityManagerFactoryBean 라는 것을 사용을 합니다.
(앗차, 이 팩토리가 있어야지 DB를 제어할 수 있는 세션을 받아 씁니다^^)
아무튼 하이버네이트의 SessionFactory를 설정을 같이 해주는건가?! 하고서.. 막
찾아보았습니다;
• MK용블로그에서 오..요기잉네?하고서 써봤지만 당연 되지도 않았고; 이름을 알 수
없는 블로그에서 오 요기도 잉네?헉헉 하고 써봤지만 되지가 않았었습니다.

48. 잠시 설명충이 되어 문제해결 복기 좀 해보겠습니다-_-;
스킵하셔도 무방합니다^^; 48
• 아 그럼 오픈세션인뷰필터를 사용해보자! 고 해서..똑같은
문제해결시간*2를 소비하고 만 것입니다…제길..제길…제길슨-_-
• 여기까지 문제를 겪어보자, 지금 내가 사용하고 있는 spring-
data-jpa의 Factory와 OSIV류가 필요로 하는
SessionFactory의 종류가 다르니.. 뭔가 필요한 게 있었던
것같은데..하고 찾아본-_-..그것이 바로!!
OpenEntityManagerInViewInterceptor !!

49. 뭐..다음과 같이 설정을..해줘보고.. 49
• OEIV 설정 적용 후
• 인터셉터 시도 =>

50. 되…되는군요…생각보다 간단하게;; 50
목록로딩시 자동생성 SQL 게시글 읽을 시 자동생성 SQL

51. 아..해냈다! 한화우승!!한 심정일세(잉?)!!-_-! 51
ya..yatta!

52. 잠시 설명충이 되어 문제해결 복기 좀 해보겠습니다-_-;
스킵하셔도 무방합니다^^; 52
• 후..구글링에 급급해하지않고 구조를 좀 더 잘
파악했으면 조금이라도 떠 빨리 해결했을텐데하는
아쉬움이 남습니다. 쩝.. 설명은 그만;;

53. 잠깐, 스킵! 그냥 들러봤던 곳중에 괜히 혹시몰라서 저장해뒀던 링크좀
적어봅니다; 삽질한거라도 일단 저장을 하는 스타일인지라;; 53
• https://code.google.com/p/krank/wiki/Spring_
MVC_and_Entity_Manager_Lifecycle
• http://stackoverflow.com/questions/2270285
1/no-bean-named-sessionfactory-is-defined-
after-opensessioninviewfilter
• http://www.mkyong.com/spring-
security/spring-security-hibernate-
annotation-example/
• http://fuzzydb.blogspot.kr/2013/03/spring-
java-config-jpa-and-hibernate.html

54. 더 참고할 내용들 54
• 토비님의 블로그에는 제가 방금 썼던 JavaConfig로 인터셉터를
적용하는 경우 우려될 수 있는 사항에 대한 글이 있습니다. 이
PPT에서는 일단 기술채무로 남겨두고 그냥 써봤습니다;;
http://toby.epril.com/?p=1168
• 이터너티님의 OSIV패턴과 JPA영속성에 관련된 좋은 글이 있습니다.
http://egloos.zum.com/aeternum/v/2798098
• JPA에 대해서라면 이분의 영상이 꽤 도움이 될 것같습니다.
김영한님의 JPA영속성 컨텍스트 관련 영상입니다. 여기서 OEIV 라는
글자를 안 봤으면 생각을 못했었을 것같습니다.
https://www.youtube.com/watch?v=xqEVS8LzxZM&feature
=youtu.be

55. 잠시 쉬어가면서 페이지 레이아웃 55
• 큰 산을 넘은 기분입니다. 그럼 잠시 페이지 레이아웃을 보실까요?
웹사이트 화면을 크게 보시면 다음과 같이 중복되는 윗부분,아랫부분과
바뀌는 내용물이 들어가는 부분이 있습니다. 이런 부분은 어떻게
해야할까요? thymeleaf에는 layoutDiarect 가 있고, Jsp를 쓸 때는
sitemesh 라는 레이아웃 엔진을 쓰는 편이긴합니다.

56. 잠시 쉬어가면서 페이지 레이아웃 56
• 보통 외부라이브러리로 불러온 sitemesh 필터를 web.xml에 넣어주고
• 다음과 같이 sitemesh의 xml설정을 정해줍니다.
• 그리고 다음과 같이 레이아웃 파일에서 body로 들어갈 부분을 정해주면
xml에서 정해준 경로에 한해서 레이아웃들을 자동으로 덮어씌워줍니다.

57. 2부의 시작 – 57
• 댓글, 회원가입, 소셜, 배포, 기타 등등

58. 자, 그럼 목차 2부 갑니다. 58
1. 블로그 디자인 선택하기
2. HTML, 디자인! 서버
연동시작(스프링 환경설정)
3. 게시글 클래스 만들고
CRUD해보기
4. 게시판을 위한 페이징구현
-----------------------
우선 블로그를 개발하면서 크게 할 일을 생각해봅니다.
대략 이런 흐름으로 개발을 했습니다.
5. 이제 댓글을 달아볼까?
6. 소셜 회원 가입도 달고
싶은데?
7. 회원이랑 게시글, 댓글,
암호화 혹은 회원권한
8. 기타 잡다한 설정
9. 아마존에 배포

59. 05. 댓글달기 – 설계와 테스트 59
• 댓글을 설계하면서.. 잠깐 고민을 했습니다.
• 게시글 클래스와 비슷한 구조인데 게시글클래스를 응용을 해서 갈까.. 아니면
비슷하지만 클래스를 그냥 하나 더 만들까-_-음.. 뭐.. 딱 한번만 더 쓸 거라 두
번까지는 참을 수 있다 생각해서 비슷하게 만들어줍니다.
• 게시글 클래스와 구조가 비슷하므로 생략.. 그리고 리파지토리 interface만들어주고
테스트부터 돌립니다. 음.. 잘 동작하는 것같습니다. 백엔드가 어느정도 동작이
하는것을 확인하고, 화면을 구현해주겠습니다.

60. 05. 댓글달기 – ajax구현 60
• 보통 댓글정도까지는 하고싶은 기능을 바로 그려가면서 개발하도록
합니다.
• 백엔드에서 CRUD동작을 하니, 웹에서 한번 써보고 불러들이고, 수정,
삭제하는 흐름대로 그냥 코딩합니다;;
게시판 짤 때와 흐름은 거의 비슷합니다. 다만 ajax붙은 게시판
정도입니다. 다음과 같이 주소 설정을 하고 하위 메서드에서 다음주소를
연결해주면서 글을 썼을 시에, 댓글 페이지를 새로 고침해주도록
하겠습니다.

61. 05. 댓글달기 흐름 61
• 대략 이런 흐름입니다. 간단하게 만들었던 이전 게시판…입니다^^;
1. ajax 로 전송
2. 게시판과 비슷한 구조였던
댓글 컨트롤러로 이동후 처리 화면 전달
3. 응답을 result로 보냅니다.
4. 반응에 따라 결과 추가

62. 05. 댓글달기 흐름 – 페이징까지;; 게시글 구현할때처럼 그대로;; 62
음.. 뭐..;; 게시판
만들때 페이징포장
해주던 것을 그대로
불러와서 썼습니다;;
게시판과 비슷하게
했습니다~ 흠~
보통 ajax 를
JSON으로 같은 걸로 많이
하시던데 저는 그냥
아예 jsp페이지째로 받아오곤
합니다.. 뭐 이래도 될지ㅎ
그냥 좀 궁금하긴합니다.

63. 설명충도 힘이 듭니다;
ajax같은 것은 검색하면 많이..
나오므로 패..패쓰;;;
댓글의 수정삭제는 생략^^; 63

64. 6. 소셜회원가입 64
블로깅을 하려면 일단 내가 로그인을 써서 회원가입을 해야 합니다.
이 부분에 대해서는 이미
예전에 블로깅을 해둔 것이 있습니다.
이전 소스에도 적었지만,
환경설정을 할시에 말씀드렸던 주소..
http://adunhansa.tistory.com/192
여기서 적은 소스로
소셜로 회원가입도 같이 합니다.
스프링 시큐리티도 같이 적용합니다.
이미 정리된 글이 있으므로
자세한 설명은 생략하고 중요한 부분만
포인트를 잡자면

65. 6. 소셜회원가입 - 출처 65
• 앗참. 저 소셜 회원가입 소스와 강좌를 원래 적어주신 분은 핀란드의
개발자 Petri 님이십니다. 아티클 번역 허락받을 때도 어디 링크인지
적어달라고하다보니^^; 지금도 적네요. 무척 고맙게 생각하고 있습니다.
• 그럼 이 분의 소스를 기준으로 회원가입에서 제일 중요한 부분만 잠깐
적어보겠습니다.

66. 6. 소셜회원가입 – 페이스북 App설정 66
• developers.facebook.com 에 가셔서 MyApps에서 로그인 설정을 해줍시다.
블로그에도 내용이 있지만 중요한 부분은 4번째그림에서 ContactEmail설정을
해주시고 5번째 그림 Status yes로 해줍시다.그러면 세팅에서 우측하단의 코드가
나옵니다.

67. 6. 소셜 회원 가입&시큐리티 67
• 아…깜빡했군요. (혹시라도 다른 언어를 주로 하실 분이 보실지도
모르니;; 이런 식으로 시큐리티 설정을 해줍니다. 정적자원은
시큐리티에서 제외. 로그인 정보와 권한등을 설정합니다.)

68. 6. 소셜회원가입 68
• 제가 스프링 소셜 시큐리티 회원가입을 보면서 가장 처음에
이해가 안됐던 것이 로그인을 하는 컨트롤러가 없었습니다.
• (하단의 LoginController 는 단순 주소전환용입니다^^)
• 이 소스에서는 ExampleUserDetails라는 DTO에
필요할 때는 SecurityUtil이라는 클래스를 사용해서
로그인을 하였습니다.

69. 6. 소셜회원가입 69
• 사용자 정보는 노출되서는 안되는 정보도 있고, 또 로그인을 했을 때 계속 들고있을
객체로 적절하지가 않습니다. 그래서 여기 소스에서는 ExampleUserDetails라는
클래스로 로그인하서도 유지하고 있을 사용자 정보를 정의합니다.
-----------------------

70. 6. 소셜회원가입 70
• 뭐…회원가입을 하고 수동로그인을 해줄 때는 다음과 같이 직접
시큐리티유틸에 있는 LoginUser메서드를 이용해서
로그인해주기도 합니다.

71. 6. 소셜회원가입 71
• 소셜 회원가입부분도, 예전에 블로깅했으므로 패..패쓰;;
설명충에게 기회는 없다 ! 오직 우려먹기와 이전의
링크제공이 있을 뿐!(장시간 글쓰기로..미..미쳐가고있습니다;;)
• 아..조금 중요한 것을 깜빡했네요
petri님의 회원가입에서는 소셜토큰을
암호화하지 않고, depreciated 된 메서드를
좀 쓰는데요…
http://adunhansa.tistory.com/194
• 여기에 정리해뒀습니다. 이걸로 바꿔쓰시면
됩니다. 그냥 쓰셔도 잘 동작하긴합니다.

72. 7. 게시글 회원 댓글 등의 권한 설정전 다른 사이트 참고 72
• 댓글을 이제 좀 더 고도화를 해보겠습니다.
이 부분에서 쪼금 머리를 굴렸습니다-_-나름 고심한 부분입니다.
• 이 부분은 화면에 보이는 프론트엔드부분과, 서버에서 동작할 백엔드
부분을 동시에 쓰면서 .뭐..그렇게 하기로 했습니다. 우선 댓글을 달면서
외부에서는 어떻게 했나 참고를 해보겠습니다.

73. 7. 게시글권한설정(비밀번호, 회원) 73
…흐음 댓글 수정을 하기에 앞서 간단하게 게시글에
대해서 다음과 같은 시나리오를 작성해봅니다.
비회원이 쓴글인가?
- 수정, 삭제 버튼이 열려야 한다.
- 비밀번호를 물어보고 삭제를 한다.
그럼 회원이 쓴 글인가?
- 수정, 삭제 버튼이 열린다
- 비밀번호를 묻지 않고 바로 삭제 한다.
회원 권한에 따라 화면이
우선 바뀌어야 하고
프론트를 나쁜 의도로 만지고
들어올 수 있을 수 있으므로
회원,비회원 여부에 따라
백엔드에서 다르게처리.

74. 7. 게시글 권한 설정 – 화면 74
• 아 먼저 게시글 권한 설정입니다. 게시글을 저장할 때 회원아이디를
설정하게 해줬었는데요… 그냥 머리속의 흐름을 그대로 소스로
적어줬습니다; (막소스;ㅋ) (JPA관계설정을 막 하진 않았습니다  당장
꼭 필요한게 아니다보니…-.-;)
• 조건 = 비회원의 글 일 때는 수정삭제를 보여주고
회원이 작성한 글 일 때는 회원 아이디와 글의 아이디가 같은 경우 수정
삭제를 보여준다. 를 이런 식으로 소스로 바로 표현합니다;;;

75. 7. 게시글 권한 설정 – 백엔드 작성 75
• 흠.. 백엔드는 조금 더 세심하게 작성해야 합니다.
• 삭제의 대략적인 흐름은 이렇게 가는데, 업데이트 할 시에는 하단에서 폼을 또
다르게 줘야 합니다-_- 중복될 부분, 안 될부분 선긋기도 애매하다보니..쩝.
삭제요청
회원게시글
여부검사
비밀번호
묻는 페이지
회원 맞는지
여부 재검사
비밀번호
맞음
비밀번호
다름
글쓴회원
맞음
글쓴회원
아님
삭제
악의적 의도가
다분함.응징.
삭제

76. 7. 게시글 권한 설정 – 백엔드 수정의 예
분기 1. 수정폼이동 =>
회원여부에 따라
패스워드 혹은 수정페이지
76
-----------------------------
분기 2. 비밀번호체크=>
회원은 바로 수정페이지갔고
비회원은 비밀번호 체크받는
백엔드
-----------------------------
분기 3. 최종수정=>
음..뭐 최종적으로 이런..
흐름으로 만들어줬습니다;
crsf를 줘서.. 잘못된
유입을 막긴할텐데..
흠.. 아무튼…뭐;; 흠흠;
아! model. 어쩌고는 뷰 페이지에 정보를
전달하게 해주는 객체입니다~~

77. 7. 게시글 권한 설정 – 한번 보기 77
• 음..뭐 어차피 당장은 혼자만 쓸 수 있는 블로그니 개인 페이지디자인은
제쳐두고;; 회원로그인 시에도 비밀번호로 뭐..지울 수 있게 됐다. 그정도!~
• 여기서 하나의 궁금증이 있습니다.
(책에 뻔히 나오는 얘기지만;;)
다음 페이지에서 보시겠습니다.

78. 7. 게시글 – 업데이트 78
• 글을 수정할 때는 다음과 같은 것을 생각해 볼 수 있습니다.
이 이야기는 토비의 스프링이라는 책에도 있는 이야기지만 게시글을 수정하면서 다들
느끼셨을 내용인지라 다시 한번 적어보겠습니다.
• 글을 수정버튼을 누르면 DB에서 읽어서 데이터를 수정화면에 보내줍니다. 여기서
고치는 것들은 제목-내용밖에 없습니다. 그리고 전송을 하게 되면?!
DB에는 다른 내용들이 사라지고, 제목과 내용밖에 안 남게 되는 경우가 있습니다.
전송

79. 앗참. 잠시 스프링 광고 좀 ^^ 79
• 옛날 생각이 나서 그런데 옛날에 잠깐 다른 언어를 공부했었는데..
폼에서 전송하는 파라미터들을 일일이 뽑아써줬거든요..
• 하지만 스프링에서 그냥 객체로 통틀어서 받아놓으면 객체변수에
맞춰서 알아서 폼정보를 딱 받고 끝납니다. . 너무.. 고…고마워용
ㅠ.ㅠ질질..

80. 7. 게시글 – 업데이트- 다시 80
아..아무튼 다시 본론으로 들어와서.. 이렇게 되다보니.. 어떻게 할까요?
1. input type=“hidden”으로 모든 필드를 폼에 같이 넣어준다.
2. 게시글 아이디를 가지고 있다가 폼 전송시 DB에서 다시 불러온다.
3. 스프링에서 제공하는 멋진 기능을 사용한다.
가 있습니다. 잠시 스프링에서 어떤 기능을 제공하는 지 살펴보겠습니다.
전송

81. 7. 게시글 – 업데이트 81
• 스프링에서 제공하는 태그에서 (여기선 form:form )
commandName을 선언을 해서 폼을 써주면 따..딱히 히든따위
써주지 않아도 됩니다^^
• 그리고 전송을 받을 때 @ModelAttribute를 붙여주고~
session상태를 .setComplete해주면 됩니다^^ 간단하죠~
(스프링 책에서 많이 배웠습니당;; )

82. 7. 게시글 업데이트 82
그럼 이와 같이 몇가지만 수정해주고 바로 전송해줘도 내용이 살아있게 됩니다.
하지만 이것을 쓰실 때도 조금 조심스러운 부분으로 접근을 하셔야 합니다.
권남님의 Spring MVC @SessionAttributes를 통한 객체 수정은 올바른가?
http://egloos.zum.com/kwon37xi/v/4759848
참조를 하시면 나쁜사용자들이 꼭 자기가 수정할 수 있는 부분은 수정을 해서 접근을
하려는 경우가 있습니다. 뭐든지 알아두면 좋습니다 ㅎㅎ;
전송

83. 7.5 댓글 프론트 엔드 설정! 83
• 자 이번엔 댓글을 좀 더 손을 보겠습니다. 먼저 댓글을 수정을 누르면
수정창이 떠야 되고, 비회원이 쓴 댓글이면 삭제비밀번호를 묻는 창이 떠야
됩니다.
아까전에 게시글 했던 그 흐름과 비슷한데 이번엔 자바스크립트로 해야
된다는 점이 조금 다릅니다;; 그래서 조~금 더 골치아픕니다^^;

84. 7.5 댓글 프론트 설정 84
• 우선 수정 삭제 버튼 동작에서 회원, 비회원이 쓴 글에 따라 다른
창이 떠지게 합니다. class명을 다르게 줬습니다.
두번째 사진은 ajax로 불러온 것들을
액션지정하려면 특징 태그에 미리 on을
걸어야 한다는 것을 보여드릴려고 적었습니다.
(초초보시절에 저거가지고 고생을 하다보니ㅠㅠ)
추억돋는 에러라서요.ㅠㅠ. ;

85. 7.5 댓글 프론트엔드 시나리오 작성 85
• 자 일단 화면을 보면서 어떻게 화면을 짤지 시나리오를
작성해봅니다.
수정을 눌렀을 때
• 1. 다른 수정중인 내용을
모두 수정취소시킨다.
2. 현재의 [수정]같은
내용을 바꾼다.
3. 현재 부분에 폼을 넣는다.
대략 이런 흐름을 염두에 두고 작성해봅니다;

86. 7.6 댓글 프론트엔드 js작성
이제 시나리오를 그대로 옮겨적습니다.
다음과 같이 주요 작업과 밑작업들이 좀씩 있습니다
86
1. 다른 수정중인 내용을 모두 수정취소시킨다.
(2번을 위한 변수를 미리 뽑는다)
(- 다른 개인프로젝트에서 바로 가져온 거라 변수명이 안 좋습니다. 양해
부탁드립니다.ㅎㅎ)
(잠시 현재 버튼 클래스명을 저장해줘서 다음에 있을 수정취소 때 다시
불러올 수 있게 합니다. )
현재 댓글도 잠시 일시적인 공간에 저장합니다.
그래야 수정취소 할때 다시 불러오니깐요.
2. 현재 [수정] 같은 버튼내용을 바꾼다.
회원인 경우 비밀번호를 물을 필요가 없다.
3. 현재 부분에 폼을 넣는다.
폼 댓글 창에 포커스를 둔다. 최대한 사용자가
편하게

87. 7.5 댓글 프론트엔드 시나리오 작성 87
• 이전 소스같은 경우 prev로 해당 객체를 찾았는데 closest 같은 더 좋은 메서드도 있습니다. 전
그냥 하나하나 따지고 들어가다보니….(레거시이기도하고요;;)
• 아무튼 다음과 같이 버튼을 눌렀을 때 제일 하나의 구성요소를 찾아가서 작업을 처리하고, 어떤
부분에는 넣어주고 이런 것들을 기억하면 대부분의 작업은 처리해줄 수가 있었습니다.
• 크롬 개발자 도구( F12) 에는 돋보기 기능이 있습니다. 이 버튼을 클릭하고 요소를 클릭하면, 해당
소스로 바로 이동을 하게 됩니다. 프론트엔드 시나리오짜거나 디버깅할 때 매우 편리합니다.

88. 7.5 댓글 백엔드 계획 88
• 음.. 여기서부터는 생각의 정리가 필요해서.. 분기별 어떤
행동을 줄건지 먼저 종이에 적고 시작을 합니다.

89. 7.6 댓글 백엔드 구성하기 89
• 시나리오부터 그려봅니다. 비회원이 어떻게 들어오고,
회원이 어떻게 물어볼지..어디가 중복되는 기능이 될지 ~
그런 기능등을 생각해봅니다.
• 가장 먼저 생각나는 부분은 삭제건 수정이건 비회원인지
회원인지, 비회원이면 비밀번호가 맞는지, 회원이면
아이디가 서로 맞는지 물어보는 기능이 필요하다였습니다.
• 여러 분기별로 흐름도는.. 그리기 귀찮네요;(퍽);
이 부분이 제일 신경많이 쓰긴했는데 ㅋㅋ;

90. 7.6 댓글 백엔드 구성하기 90
• 일단 정해준 흐름대로 메서드를 만들어서 원본댓글과 새로운
댓글사이에 비밀번호, 회원권한에 따라서 문자열을 다르게
리턴해주는 메서드를 만들고서, 수정, 삭제에 써보도록
하겠습니다.

91. 7.6 댓글 백엔드에서 화면까지. 91
• 서비스부분의 메서드인데 삭제권한에 따라서
업데이트를 하고 상태문자열을 그대로 화면단의
ajax까지 결과를 돌려주도록 합니다. 상태여부에
따라서 화면단에서도 다르게 처리할 수 있도록
합니다.
서버단 프론트엔드단

92. 여러 조건에 따라 다르게 나올 화면.. 92
• 훔..이정도 흐름이면 정리 됐다고 생각합니다. 잠깐 쉬고요~

93. 8. 기타 잡다한 93
• 예.. 기타 잡다한 부분입니다. 쉬엄쉬엄 넘어가도록 할까요?
• 우선 사이트를 개발하면서 보안에도 좀 신경을 써야합니다.
흔히들 말하는 3대 보안공격이 SQL Injection, 웹쉘,
XSS 이라고 보안뉴스를 보면 나오는데요..
• 여기선 XSS가 무엇이고 어떻게 막는지 nhn의
루시라이브러리와 함께 보겠습니다.

94. 8. 기타 잡다한 – XSS 방어 94
• 보통 보시면 저기에 글을 쓰면서 <script>부분이 보이실 것입니다.
html 소스창을 키고서 저렇게 글을 쓰면 어떤 일이 벌어질까요?
예. 보시다시피 저런 방정맞은 메시지가 뜹니다;

95. 8. 기타 잡다한 – XSS 방어 95
• 저렇게 특정 스크립트를 넣으며 악의적인 행동을 하게 되는 것을
XSS (뭐 그렇게 부르는듯;;;)합니다 ㅎㅎ;
• 어떻게 막는지 보시겠습니다.
우선 nhn에서 XSS 방어라이브러리
Lucy를 공개하고있습니다 
• 아아..고맙습니다 (쥘쥘 ㅠㅠ)

96. 8. 기타 잡다한 – XSS 방어 – Lucy소개 96
• 다음 주소에서 받으실 수 있습니다.
https://github.com/naver/lucy-xss-filter
• 그래들에 라이브러리 추가해주시고
• 공홈에서 소스 그대로 루시 받아다가 테스트돌려보고~
저같은 경우는..음 관리자가 아닐 경우..> 이런 식으로..그냥
필터링 된 값을 넣어줘봅니다; 음;

97. 8. 기타 잡다한 – XSS 방어 – Lucy소개 97
• 뭐..관리자가 아닌 경우 글을 써주면 이렇게 잘 방어가 잘 되는 것을 보실
수가 있습니다.
• 참고 : <c:out 으로 그냥 값을 뽑아주면 모든 값이 그냥 문자열로
나옵니다^^; 이런 방식이..아마 블랙? 머시기 방식이었죠;; 으으@_@;
• 어쨌든 루시 개발자분들 고맙습니다. 잘 쓰고 있습니다 ( _ _)

98. 8. 기타 잡다한 – 문자열 추출 도구jsoup 98
• 블로그를 보면 글의 내용이 일정부분 뽑아져나오는 것을 보실 수가
있습니다. 이걸 어떻게 구현을 할지 처음에는 고민이 많았는데요~
• 아참, 제가 생활코딩에 가끔 가는데
정말 쉬운 질문도 가끔 올라옵니다.
그럼 문제해결을 위한,
검색을 어떻게 가는지 같이 보실까요?

99. 8. 기타 잡다한 – 문자열 추출 도구jsoup 99
먼저 스택오버플로우에 검색을 합니다. 영어로 그냥 자바로 html에서 문자열
추출을 어떻게 하나요 물어보니… 두번째 사이트에 들어가니 바로 jsoup
이라는 도구가 나오네요. 제가 한번 들어가보겠습니다.

100. 8. 기타 잡다한 – 문자열 추출 도구jsoup 100
• 후… 예 이렇게 쓰면 되는 것같군요;; … 실은 이거랑 Lucy랑 같이
쓰다보니, 두개가 충돌이 나서 (흠 그러니까 루시가 &lt; 이렇게 태그를
만들어둔 것을 jsoup이 다시 텍스트로 뽑아내는 바람에.. 중간에 삽질을
좀 하긴 했는데..;; 설명충이 되가는 것같으니 자세한 건 생략합니다.

101. 8. 기타 잡다한 – 문자열 추출 도구jsoup 101
• 다음과 같이 테스트코드도 작성해보고~ .remove는
요소제거입니다. .text()메서드로 문자열만 추출하긴 하는데 혹시라도
iframe이나 script같은 것을 지워주도록 하고서 서버에 적용했습니다.

102. 8. 기타 잡다한 – SEO의 적용 102
• 예..-_-…다음과 같이 구글에서 검색엔진에 뜨는 것..이런 것을 일컬어
검색엔진최적화(SEO)라고 부릅니다. 개인블로그를 만들던, 커뮤니티를
만들던, 검색엔진에 떠야 블로깅을 하는 느낌입니다. 구글광고비도
받아야죠;; 검색안뜨면..뭐.. 에버노x에 쓰는게 낫습니다만;흠 아무튼..
• 블로그를 만들면서 SEO를 어떻게
할까 고민을 했었습니다.
정적인 레이아웃 템플릿에 어떻게
.. 하지? 라고 생각했는데 역시
그냥 코딩하러 자리에 앉으니;;뭐;;
• 다음과 같이 구현하겠습니다..

103. 8. 기타 잡다한 – SEO의 적용 103
• 게시글을 읽는 경우 게시글의 타이틀을 기준으로해서 게시글이 있으면
게시글의 정보들을 SEO에 등록을 시킵니다; 해보니 별게 없네요;
• SEO를 좀 더 잘하는 방법은 예전에 따로 정리해둔 슬라이드가 있습니다.
http://www.slideshare.net/meadunhansa/seo-42948512
• 모두 구글광고비
많이 벌어서
따뜻한 겨울을..
보냈으면 좋겠습니다.

104. 8. 기타 잡다한 – 썸머노트적용 104
• 여기 글쓰기 페이지를 보시면 Summernote가 적용이 되어있는
것을 보실 수가 있습니다. 아마 개발자 분께서.. 한국분인걸로 얼핏
아는데요. 제가 한번 써보겠습니다.

105. 8. 기타 잡다한 – 썸머노트적용 – bower, grunt 105
• 음.. 그 전에 frontEnd에서 쓰이는 빌드도구 grunt와 라이브러리 관리도구로
bower, grunt를 설치해주겠습니다.
• 먼저 npm명령어가 필요한데 node.js를 다운받아서 설치합니다.
• 여기를 참조했습니다만, grunt자료는 많으므로 바로 적겠습니다.
(https://www.youtube.com/watch?v=VwiuhoCPs40)
webapp폴더 기준으로 npm install –g grunt-cli 를 치고 grunt를 설치합니다.

106. 8. 기타 잡다한 – 썸머노트적용 – bower, grunt 106
• Grunt 위치를 확인해보겠습니다~
• 자, 컴퓨터의 속성에서 환경변수로 들어가서 Path 에 npm
이 원래 자동으로 붙어들어가는군요 . 그래도 확인^^;
• Grunt 를 까실 분들은 어느정도 컴퓨터 잘하실거라 가정하고 이 부분은 대략 적으로 생략.

107. 8. 기타 잡다한 – 썸머노트 – grunt 적용 107
npm init 으로 시작합니다. 동영상의 저자는 일단
Enter enter를 해서
Package.json이 생성됩니다

108. 8. 기타 잡다한 – 썸머노트 – grunt 적용 108
• npm install grunt –save-dev 로 grunt.js 가 생성됩니다.
• 기타 명령어 코넥트 웹서버 : npm install connect –save
• serve-static : npm install serve-static –save

109. 8. 기타 잡다한 – 썸머노트 – bower 109
• bower 설치 npm install -g bower
• bower init 초기화. 이정도 나오는데 그냥 쭈욱
엔터 칩시다~

110. 8. 기타 잡다한 – 썸머노트 – bower 110
• bower install summernote –save를 해줍니다.
• 기본설치폴더가 bower_components 입니다.
변경해주겠습니다. .bowerrc라는 파일을
만드셔서 다음과 같이 설정해줍니다 .

111. 8. 기타 잡다한 – 썸머노트 – bower 111
• bower uninstall summernote
bower install summernote 등으로 재
설치해주시고
• bower list –paths 혹은 그냥 list해주시면 설치된
라이브러리들이 나옵니다.

112. 8. 기타 잡다한 – 썸머노트 – 적용 112
• summernote.org에 보시면 다음과 같이 사용방법이 나옵니다.
layout.jsp 에 다음과 같이 적용해주도록 하겠습니다. (일단은
min이 아닌 그냥 파일 그대로..;;) 이..이러면 됩니다; 흠.

113. 9. 배포 – 아마존에 배포하기 113
• 예. 이제 배포입니다. 서버에 올려야 뭐든 하겠죠?
• 먼저 서버에서 돌릴 war파일이란 것을 만듭니다.
gradle build 로 war파일이 생깁니다.

114. 9. 배포 – 아마존에 배포하기 114
• 자, 그럼 .. 아마존에 계정을 만들고.. 서버 인스턴스를 설치하고,
RDB연결하고, route53연결하고~ 이정도만 해도 될것같은데요…
• 아마존에 대한 튜토리얼은 정말 고마우신 이재홍님께서 적어주신 내용이
많습니다.
• 여기서 인스턴스 생성, RDB, Route53 을 참고하면서 보시면 되겠습니다.
자세한 설명은 생략합니다.
http://pyrasis.com/aws.html

115. 9. 배포 – 아마존환경에 자바와 톰캣 설치 115
• 예 하지만 아마존 환경에 자바, 톰캣도 깔아야하죠!
• 이것도 안하다가 하게 되면 은근 시간 잡아먹는
일입니다; 이 사이트에 나온 명령어 고대로~
복붙하면 설치가 다 알아서 잘 됩니다 
• 자바설치
http://tecadmin.net/install-java-8-on-centos-rhel-and-
fedora/
• 톰캣 설치
http://tecadmin.net/install-tomcat-8-on-centos-rhel-and-ubuntu/

116. 9 도메인의 구매 - Godaddy 116
• 도메인을 해외에서 사면 .com의 경우 1년에 2달러
미만으로 삽니다. GoDaddy라는 사이트가 있습니다.
가입하시고 MyAccount에서 ManageMyDomains를
가셔서 나오는 도메인을 클릭하셔서 NameServer 를
아마존에서 받아서 설정해주시면 됩니다^^ Aset도 꼭
설정해주시구요~

117. 이제 끝났군요. 감사합니다 ㅎㅎ 117
• 더 적고 싶은 것들이 많지만, 저도 이제 제 일을 해야 할 시간입니다. ㅎㅎ
봐주셔서 감사합니다.

118. 10. 마치며… -후기 118
• … 개발에 입문하면서 언제 한번 대략적으로 한번 만드는 과정을
적어보자는 생각으로 만들기 시작했는데 … 아직도 모자라는 게
많아서-_- 부족한 마음뿐입니다.. 아키텍쳐라던가, 서버같은거..
요즘엔 이런 거..파고 싶은 생각이..ㅠ 드는데 개인개발자라..ㅠㅠ;
작업환경이..참… 홈서버나 돌려야겠네요 ㅋㅋ;
• 뭐.. 내용도 다 적은 것은 아니기도하구요..
• 스프링을 공부하면서 “스프링은 어려워, 빨리 할려면 다른
언어하세요” 란 글을 얼핏보면서 스프링은 이런 이런 특징이
있어요..라고 말을 하고도 싶었습니다. 다른 언어로
블로그개발기같은거 보고 싶기도 했구요.

119. 10. 마치며 - 개발계획 119
• 일단 블로그에 미흡한 점으로..추후 업데이트 해볼 생각입니다.
1) 카테고리가 DB화가 안되어있다는 점이고,
2) 소셜부분도 더 추가를 해야겠고
3) 자잘한 JPA에서 SQL문도 잘 안 튀게 견고하게 만들고 싶습니다.
4) Admin 관리 권한도 좀 더 업데이트.
5) 중복되는 부분들을 많이 좀 지우고 싶습니다~ 게시글과 코멘트라.음…
• 나중에는 Php진영에 그누보드가 있다면… 국산 스프링 개발CMS를 하나 추가 하고
싶은 ..생각입니다만..(… 제가 그냥 코드품앗이나 하는 일인개발자인지라..ㅎㅎ; 아무튼 미래는
모르겠습니다. 어찌 될지 모르는 것이니ㅠ 희망사항으로ㅎㅎㅎ)

120. 10. 마치며2 120
• 요즘 개발모임외에도 가끔 다른 모임에 가는데, 창업에 대한 열기가 뜨거움을
느낍니다… 제가 글을 처음 쓸 때 이틀만에 만든 블로그라 적었지만-_- 아직도 손봐야
할 곳이 많은 사이트입니다.
• 혹시나 노파심에.. 외주를 주시는 분께서는, “옆집 누구는 이틀만에 만들었다는데.. 너도
이거 3일이면 되겠지..” 이런 말씀은 하지마시길 바랍니다;; 저도 개인개발에 소스복붙이
많다보니^^; 지금의 개발을 하기 위해 많은 시간을 투자했고 또 해야하니깐요..;; 음.
• 아, 정말..하고싶었던 말은 요즘 학생동생분들을 보면 창업에 대한 꿈이 조금씩 있는
것같은데 … 흠 뭐. 개발자를 찾고 남에게 부탁을 하기보다는 1~2년정도는 개발에 한번
빠져보는 것도 어떨까 하는 생각입니다. 개발에 몰두한 1~2년 후에는 뭐든 만들어낼 수
있을 것같은 두근두근거리는 자신감이 생기지 않을까요?
길이 어떻게 되든, 모두 자신의 꿈과 목표를 이루시길 바랍니다 
(그런데 그 뒤로는 개발공부에 더 신경을 쓴다는…;; 아 .. 개발..잘못들어갔다가
헬게이트를 열었다면서 저를 원망하진 마세요;)

121. 오늘도 개발왕..을 꿈꾼다!-_- 121
(현실은 시궁창)
아 그리고..좋은 라이브러리, 글들 공유해주시는 분들 캄사합니다.

122. 122
THANK YOU !
arahansa
------
------
페북 : https://fb.com/me.adunhansa
트위터 : https://twitter.com/arahansa
블로그: http://adunhansa.tistory.com/
사이트 : http://arahansa.com