jQuery angular, React.js 로 댓글달아보기 공부했던 기록
51 likes5,441 views
jQuery angular, React.js 로 댓글달아보기 공부했던 기록
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
- 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