jQuery angular, React.js 로 댓글달아보기 공부했던 기록

1. ---------- 1
JQUERY,
ANGULAR,
REACT 댓글달기
해보자!
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
• 댓글달기를 jQuery, angular, react로 해보면서
비교해봅시다!
• 기술과 구현에 대핚 얘기를 하고 싶었습니다.
그래서 만들어본 방송과 슬라이드입니다.
더 좋은 방법과 의견은 언제나 환영입니다.

4. 제가 어쩌다 프롞트엔드 방송을 하지만.. 4
• 제가 어쩌다 프롞트 엔드 관련 기술 방송을
하지만, 더 좋은 붂의 방송을 기다립니다^0^

5. 삽질 자료들 5
• 초보프롞트엔드 : jQuery =
https://www.youtube.com/watch?v=RL2yapNhL68
• 초보프롞트엔드 : Angular =
https://www.youtube.com/watch?v=0kEcPVUnaHA
• 초보프롞트엔드 : React.js =
https://www.youtube.com/watch?v=RcG5NA0-HKw
• 깂헙 주소 :
https://github.com/arahansa/springBroadReply

6. 시나리오... 6
CRUD시나리오
• REST API - POST man 으로 갂단테스트
-------------------------
• 댓글 목록불러오기
• 댓글 쓰기
• 댓글 삭제
• 댓글 수정
* jQuery, Angular, React.js 로 반복..

7. 먼저 시작은..스프링 Boot로 REST API를
갂단하게 만듭니다!
7
• 음... 이 부붂은 젂에 만든 스프링시큐리티 강좌나,
동영상을 보시면 나옵니다. ;ㅁ;.. (무책임)
• 백기선님의 아무거나 방송을 보면 더더욱 이해가
잘됩니다.
• 제쪽에서는 아~주 갂단히 예외처리도 없이 응답주고,
요청받는 형태만...
• http://www.slideshare.net/meadunhansa/ss-53303729
• https://www.youtube.com/watch?v=C0BQplG7Epo

8. 이왕 하는 김에 bower 같은 것도 조금 봅시다! 8
npm install -g bower
bower install angular
bower install react
bower install jquery
.bowerrc 파일로 경로 수정
--save 옵션으로
bower.json 의존성 설정됨

9. 수정사항. 9
• 어쩌다 보는 프롞트엔드라^^ jQuery 방송에서
해로욲새(?)를 얘기했었습니다.
• 이모콘에서 bower 가 해로욲 새인 이유와
요즘의 프롞트엔드 개발이야기
(http://blog.weirdx.io/%EC%9A%94%EC%A6%98-
front-end-%EA%B0%9C%EB%B0%9C-
%EC%9D%B4%EC%95%BC%EA%B8%B0/)
를 참조해주세요.

10. 프롞트엔드 빌드도구
Gulp (와 browser-sync)
10
npm install gulp
gulpfile.js 에서 설정 후
gulp 실행
제가 좋아하는 플러그인
browser-sync
GULP 슬라이드 http://www.slideshare.net/meadunhansa/gulp-48608642
공부 깂헙 : https://github.com/arahansa/learn_gulp

11. 화면의 설계? 11
• 상단의 폼과, 하단의 댓글 리스트
(안의 댓글 하나하나씩...)

12. jQuery 흐름.. 12
• 불러오기 : $.get , $.each
• 쓰기 : $.ajax 후 추가..
https://www.google.co.kr/search?num=30&newwindow=1&es_sm=93&q=jquery+ajax&oq=
jquery+ajax&gs_l=serp.3..0i131j0l9.9122.9632.0.9787.4.3.0.1.1.0.149.357.0j3.3.0....0...1c.1.64.
serp..1.3.215.Xm3zGdlt77w
• 삭제 : $.ajax 후 해당 요소 삭제
• 수정 : 수정은 폼을 바꿔주는 것을 생각해보고, 쓰기
과정을 다시 거쳐서 고치는 걸 생각...

13. Jquery - 화면의 설계 13

14. 댓글 불러오기 14
• $.get으로 데이터를 받자 !
• 각각의 요소를 .each 로 하나씩 댓글을
추가해주기로 해봅니다! $(‚아이디‛).prepend로
아이디 부붂에 넣어줘봅시다!

15. 댓글 불러오기 15
• 앗차 prepend 는 이쪽입니다! 스택오버플로우
(http://stackoverflow.com/questions/1484
6506/append-prepend-after-and-before )
참조!

16. 불러오기가 잘 되는굮요 ! 16

17. jQuery – 댓글 쓰기 17
• $.ajax 로 ajax로 쓰기 젂송을 날리도록 하겠습니다~~!
스프링에서 @RequestBody 를 잊지 말아주세요~

18. jQuery – 삭제 18
• 삭제입니다. $.ajax를 거의 그대로 씁니다!
• 갂단해서 생략;;

19. 수정 ! 19
• 수정은 언제나 조금 골치아픕니다. 먼저 수정버튺을 눌렀을 때는 수정폼으로
바뀌어야하고 수정버튺을 다시 누르면 수정이 되고, 취소를 눌르면 다시
원래대로 돌아갑니다.
• 먼저 수정버튺을 눌러줬을 때, onclick=이벤트(this)로 현재 요소를 젂달하여
obj로 받아서 처리해주도록 하겠습니다.
• 여기선 편의를 위해 prev()같은 메서드를 적어줬는데, 요렇게 위치로 잡아주면
나중에 유지보수하기가 힘듭니다. find로 처리를 해줘도 될 것같습니다. Jquery
용어로는 Traversing 이라고 하더굮요~ 그리고 취소를 눌렀을 때 원래 댓글을
보여줘야하므로, 현재 댓글을 저장해주기 위해 tempContent라는 변수를
위에서 설정해주고 그 안에 임시로 댓글을 넣어줬었습니다.

20. 수정하기 ! 20
• 기존의 쓰기와 비슷하게 수정하기를 해줍니다..
별 다른 설명은 크게 없습니다.(무책임)

21. 원래대로 돌아가기 함수 만들기 21
• 수정이 완료되면 다시 원래대로 돌아가는 기능도
함수로 만들어줬었습니다.

22. 수정취소 22
• 젂 장의 원래대로 돌아가기 함수로 수정취소를 했을 때
원래 댓글대로 돌아가게 핛 수도 있겠굮요..
• 수정을 완료 했을 때도 같은 함수를 써서 수정후에
수정된 댓글 내용으로 다시 원래댓글로 돌아가게
해봤습니다.

23. 그런데 문제는..?! 23
• 하지만 문제가 있습니다. 댓글 수정 버튺을 여러개를 누르고,
폼으로 변환시킨 후 일일이 수정을 누르면 다음과 같이 내용이
하나로 바뀌게 됩니다..tempContent 가 하나라서 그렇굮요
ㅠ 그리고 댓글을 여러개를 수정하는 것도 마음에 들지가
않았습니다.

24. 생각... 24
• 원하는 기능을 조금 더 상세히 적어보았습니다...
수정버튺을 누를 때 다른 수정중인 댓글창이 있다면
원래대로 돌리고 현재 댓글은 수정폼으로 바뀌게 하자..
• 이를 위해서는 저기 빨갂색 글씨인 수정중인 을 가질
상태를 가지고 있게 해줘야했습니다. 수정폼을 클릭핛
때 status 속성을 주었습니다. 원래 댓글로 돌아올 때는
수정중인 상태를 또 제거해주어야겠지요..

25. 수정 마무리.. 25
• 그리고 댓글을 수정 핛 때 다른 수정중인
댓글(status가 modifying)이 있다면, 원래대로
돌리게 하였습니다. 잘 되는 굮요...

26. Angular 의 시작.. 26

27. 먼저 자료 링크... 27
• 먼저 공부했던 angular.js 참조 링크를 핚번 링크를.. ‘ㅁ’...
• Outsider 님 자료 : http://blog.outsider.ne.kr/975
• 넥스트리 블로그 :
http://www.nextree.co.kr/tag/angularjs/
• 하루만에 끝내는 angular.js
http://soomong.net/blog/2014/01/20/translation-
ultimate-guide-to-learning-angularjs-in-one-day/
• 자료 감사합니다. ㅎ
• (Angular 방송은 초보댓글 이외에도 angular가 배욳 게
많은데 발표PPT도 없이 하여 자싞감 하락에, 아파서 자다
일어나서 핚 방송이라... ;; 상태가 좋질 않습니다 ㅋㅋ)

28. 앵귤러 헬로월드 해보기... 28
• 깂헙의 이 파일들의 흐름대로 갑니다
• 가장 먼저는, 앵귤러2way 바인딩
해보기로..

29. Angular – 목록 불러오기 29
• ng-repeat 로 scope 에 있는 배열을
repeat시켜줘봅니다 ! 목록 불러오기

30. Angular 쓰기 30
• ng-click 으로 이벤트를 연결해서 쓰기를 했었습니다. 아아..
ng-model 은 맨끝에 나옵니다.. =ㅅ=ㅋ
• 우선은 요 방식으로 넣어보죠. push 로 넣어주면 자동으로
2way binding 으로 ng-repeat에 들어갔습니다.

31. Angular – 삭제해보기 ! 31
• ng-click 에 $index를 붙여줘서 삭제를 해줬었지만, 이렇게
하니 정렬을 새로 핛 때 문제가 발생했었습니다. ㅠ
• 그래서, 삭제를 해줄 때 다음과
같이 현재 바인딩된 요소를 파라미터로 젂달해서 배열목록에서
위치를 찾아서 삭제를 해줬었굮요 !

32. jQuery 때와는 다른 문제점 발견.. 32
• 수정해보기.. 폼 바꿔주기로 수정해보았는데, 이 부붂
역시 쉽지 않습니다. 동적으로 넣어준 html 에서
앵귤러의 scope영역을 벗어나서 그런지 ng-click 이
연결이 되지가 않았습니다. 여기서부터 디렉티브를
써줬습니다.

33. 디렉티브의 학습 33
• 그래서 알아본 디렉티브의 학습...
• http://www.nextree.co.kr/p4850/ 넥스트리
블로그에서 디렉티브를 많이 배웠네요 !

34. 변경된 폼에서 수정 클릭.. 34
• 음 그러면 댓글 디렉티브 안에 link로 function을 줘볼까?!
오 된다!

35. 앵귤러 황급핚 마무리 슬라이드 35
• 음.. 나머지는 뭐.. Jquery 때와 비슷핚 부붂이라 생략-_-
(사실 앵귤러는 수련이 모자릅니다. 하앍 =3=3 원래는
서비스도 있고 Promise 개념도 있는데, 갂단히 다뤄서
챙피하네요)
• http 통싞은 뭐..요정도로 핚다는...그..그럼...
React.js 로 가보실까요!

36. 리액트! 두둥 36

37. 우선 React 이해하기...참고자료 37
• 주우영님의 글 :
http://blog.coderifleman.com/post/122232296024/reactjs%EB%A5
%BC-%EC%9D%B4%ED%95%B4%ED%95%98%EB%8B%A41
• Leonardo 님 발표자료 : http://www.slideshare.net/dalinaum/react-
redux-react-native
• 김태곤님의 슬라이드(34페이지 버츄얼 DOM ) :
http://www.slideshare.net/taggon/react-js-46357445
• 이해하기 좋은 링크 : https://scotch.io/tutorials/learning-react-
getting-started-and-concepts
• 공식 가이드 번역 : http://reactkr.github.io/react/docs/tutorial-ko-
KR.html

38. 특징 38
뷰
props
state
특징
component
DidMount
getInitial
State
-----------------------------------
-----------------------------------
특징 라이프사이클props state

39. 그럼 뷰를 먼저 구성해볼까요?! 39

40. 요런 느낌적인 느낌으로 뷰를 만들어 올려봅니다;; 40
• 실은 공식가이드에도 댓글 뷰 만들기는 어느정도
있습니다. 거의 보고 따라친...^^;

41. props & state 41
뷰
props
state
특징
-----------------------------------
-----------------------------------
특징 라이프사이클
component
DidMount
getInitial
State
props state

42. 아참 42
• 본 슬라이드와 방송에서는 Flux까지 다루진
않습니다.
• props와 state로 부모자식갂에 함수와
데이터를 계속 젂달합니다.
• flux까지 다루기에는 제가 공부가 모자라고
방송시갂도 모자르다보니..^0^

43. 이롞 : state, props 43
• http://www.slideshare.net/AndrewHull/re
act-js-and-why-its-awesome
• 54페이지.. 그림을 봅시다!

44. 그럼 댓글 목록을 불러와볼까요? 44
getInitialState로 state를 설정하여 자식요소로 젂달..

45. 댓글 쓰기 45
• 유튜브에서 배욲 방식으로 진행했었습니다. ref 방식으로도 하는
방식이 있었는데..흠. 뭐.. 그냥 이방식 저방식 따라쳐봤굮요. 결국엔
다시 ReplyBox 로 현재 댓글을 젂송해서 this.setState를
호출합니다. state가 변경되면서 가상DOM 수정부붂을 다시 그리게
됩니다.

46. 정렬.. 46
• 아무리 그래도 Angular에서는 repeat에서 orderBy 가
있어서, React에서는 어떻게 해볼까 고민하다가
ReactCon에서 발표자료를 참고하여 구현을 해봤습니다...음...
이 부붂은 글로 적기 애매하네요.. React 콘퍼런스 동영상
주소와 깂헙 주소를 남깁니다.
• https://www.youtube.com/watch?v=z5e7kWSHWTg#
t=424
• https://github.com/ryanflorence/react-magic-move

47. 라이프 사이클... 47
component
DidMount
getInitial
State
-----------------------------------
-----------------------------------
뷰특징
props
state
특징 라이프사이클props state

48. 라이프 사이클 & 스펙 48
• 출처 : https://scotch.io/tutorials/learning-react-getting-
started-and-concepts

49. 수정 49
• 수정은 훨씪 더 갂단하게... 댓글 부붂에서 현재 상태를
state로 주고서 render를 다르게 해주는 방식으로
구현이 되었습니다. 리액트를 해보면서 재밌는
부붂이었습니다.

50. 마치며... 50
• 흠 동영상 자료가 있다보니... 발표자료를 조금 덜
상세하게 적네요..
• 항상 더 나은 방법을 찾고, 기술과 구현에 대핚
이런 저런 얘기를 하기를 좋아합니다. 좋아하니
슬라이드를 적어봤네요..
• 봐주셔서 감사합니다. 그럼 이만...

51. 참고해볼만핚 곳... 51
• 제이쿼리 http://jquery.com/
• 앵귤러 참고 링크
넥스트리 : http://www.nextree.co.kr/tag/angularjs/
아웃사이더님 블로그 : http://blog.outsider.ne.kr/975
윤영식님 블로그 : http://mobicon.tistory.com/329
• 리액트 참고 링크
리액트 시작해보기 : http://reactkr.github.io/react/docs/getting-started-ko-KR.html
주우영님의 리액트 이해 시리즈 :
http://blog.coderifleman.com/post/123792037004/reactjs%EB%A5%BC-
%EC%9D%B4%ED%95%B4%ED%95%98%EB%8B%A46
Spinbox로 리액트 겉핡기 : http://wit.nts-corp.com/2014/11/19/2584
•

52. 52
THANK YOU !
즐거욲 개발을 위하여
아라핚사 올림
arahansa
------
------
페북 : https://fb.com/me.adunhansa
트위터 : https://twitter.com/arahansa
블로그: http://adunhansa.tistory.com/
사이트 : http://arahansa.com