Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,567 views

Published on

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

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks }} ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 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. 2. 1. 작성자 소개 2 ------------------------------------------------------------------- 평소 정리를 즐겨합니다. 핚 때 동영상강좌도 만들다보니.. 비실명과 만화캐릭터를 쓰네요 양해 부탁드립니다 ㅎㅎ
  3. 3. 오늘은..방송하면서 만들어보는 슬라이드!! 3 • 댓글달기를 jQuery, angular, react로 해보면서 비교해봅시다! • 기술과 구현에 대핚 얘기를 하고 싶었습니다. 그래서 만들어본 방송과 슬라이드입니다. 더 좋은 방법과 의견은 언제나 환영입니다.
  4. 4. 제가 어쩌다 프롞트엔드 방송을 하지만.. 4 • 제가 어쩌다 프롞트 엔드 관련 기술 방송을 하지만, 더 좋은 붂의 방송을 기다립니다^0^
  5. 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. 시나리오... 6 CRUD시나리오 • REST API - POST man 으로 갂단테스트 ------------------------- • 댓글 목록불러오기 • 댓글 쓰기 • 댓글 삭제 • 댓글 수정 * jQuery, Angular, React.js 로 반복..
  7. 7. 먼저 시작은..스프링 Boot로 REST API를 갂단하게 만듭니다! 7 • 음... 이 부붂은 젂에 만든 스프링시큐리티 강좌나, 동영상을 보시면 나옵니다. ;ㅁ;.. (무책임) • 백기선님의 아무거나 방송을 보면 더더욱 이해가 잘됩니다. • 제쪽에서는 아~주 갂단히 예외처리도 없이 응답주고, 요청받는 형태만... • http://www.slideshare.net/meadunhansa/ss-53303729 • https://www.youtube.com/watch?v=C0BQplG7Epo
  8. 8. 이왕 하는 김에 bower 같은 것도 조금 봅시다! 8 npm install -g bower bower install angular bower install react bower install jquery .bowerrc 파일로 경로 수정 --save 옵션으로 bower.json 의존성 설정됨
  9. 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. 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. 화면의 설계? 11 • 상단의 폼과, 하단의 댓글 리스트 (안의 댓글 하나하나씩...)
  12. 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. 13. Jquery - 화면의 설계 13
  14. 14. 댓글 불러오기 14 • $.get으로 데이터를 받자 ! • 각각의 요소를 .each 로 하나씩 댓글을 추가해주기로 해봅니다! $(‚아이디‛).prepend로 아이디 부붂에 넣어줘봅시다!
  15. 15. 댓글 불러오기 15 • 앗차 prepend 는 이쪽입니다! 스택오버플로우 (http://stackoverflow.com/questions/1484 6506/append-prepend-after-and-before ) 참조!
  16. 16. 불러오기가 잘 되는굮요 ! 16
  17. 17. jQuery – 댓글 쓰기 17 • $.ajax 로 ajax로 쓰기 젂송을 날리도록 하겠습니다~~! 스프링에서 @RequestBody 를 잊지 말아주세요~
  18. 18. jQuery – 삭제 18 • 삭제입니다. $.ajax를 거의 그대로 씁니다! • 갂단해서 생략;;
  19. 19. 수정 ! 19 • 수정은 언제나 조금 골치아픕니다. 먼저 수정버튺을 눌렀을 때는 수정폼으로 바뀌어야하고 수정버튺을 다시 누르면 수정이 되고, 취소를 눌르면 다시 원래대로 돌아갑니다. • 먼저 수정버튺을 눌러줬을 때, onclick=이벤트(this)로 현재 요소를 젂달하여 obj로 받아서 처리해주도록 하겠습니다. • 여기선 편의를 위해 prev()같은 메서드를 적어줬는데, 요렇게 위치로 잡아주면 나중에 유지보수하기가 힘듭니다. find로 처리를 해줘도 될 것같습니다. Jquery 용어로는 Traversing 이라고 하더굮요~ 그리고 취소를 눌렀을 때 원래 댓글을 보여줘야하므로, 현재 댓글을 저장해주기 위해 tempContent라는 변수를 위에서 설정해주고 그 안에 임시로 댓글을 넣어줬었습니다.
  20. 20. 수정하기 ! 20 • 기존의 쓰기와 비슷하게 수정하기를 해줍니다.. 별 다른 설명은 크게 없습니다.(무책임)
  21. 21. 원래대로 돌아가기 함수 만들기 21 • 수정이 완료되면 다시 원래대로 돌아가는 기능도 함수로 만들어줬었습니다.
  22. 22. 수정취소 22 • 젂 장의 원래대로 돌아가기 함수로 수정취소를 했을 때 원래 댓글대로 돌아가게 핛 수도 있겠굮요.. • 수정을 완료 했을 때도 같은 함수를 써서 수정후에 수정된 댓글 내용으로 다시 원래댓글로 돌아가게 해봤습니다.
  23. 23. 그런데 문제는..?! 23 • 하지만 문제가 있습니다. 댓글 수정 버튺을 여러개를 누르고, 폼으로 변환시킨 후 일일이 수정을 누르면 다음과 같이 내용이 하나로 바뀌게 됩니다..tempContent 가 하나라서 그렇굮요 ㅠ 그리고 댓글을 여러개를 수정하는 것도 마음에 들지가 않았습니다.
  24. 24. 생각... 24 • 원하는 기능을 조금 더 상세히 적어보았습니다... 수정버튺을 누를 때 다른 수정중인 댓글창이 있다면 원래대로 돌리고 현재 댓글은 수정폼으로 바뀌게 하자.. • 이를 위해서는 저기 빨갂색 글씨인 수정중인 을 가질 상태를 가지고 있게 해줘야했습니다. 수정폼을 클릭핛 때 status 속성을 주었습니다. 원래 댓글로 돌아올 때는 수정중인 상태를 또 제거해주어야겠지요..
  25. 25. 수정 마무리.. 25 • 그리고 댓글을 수정 핛 때 다른 수정중인 댓글(status가 modifying)이 있다면, 원래대로 돌리게 하였습니다. 잘 되는 굮요...
  26. 26. Angular 의 시작.. 26
  27. 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. 앵귤러 헬로월드 해보기... 28 • 깂헙의 이 파일들의 흐름대로 갑니다 • 가장 먼저는, 앵귤러2way 바인딩 해보기로..
  29. 29. Angular – 목록 불러오기 29 • ng-repeat 로 scope 에 있는 배열을 repeat시켜줘봅니다 ! 목록 불러오기
  30. 30. Angular 쓰기 30 • ng-click 으로 이벤트를 연결해서 쓰기를 했었습니다. 아아.. ng-model 은 맨끝에 나옵니다.. =ㅅ=ㅋ • 우선은 요 방식으로 넣어보죠. push 로 넣어주면 자동으로 2way binding 으로 ng-repeat에 들어갔습니다.
  31. 31. Angular – 삭제해보기 ! 31 • ng-click 에 $index를 붙여줘서 삭제를 해줬었지만, 이렇게 하니 정렬을 새로 핛 때 문제가 발생했었습니다. ㅠ • 그래서, 삭제를 해줄 때 다음과 같이 현재 바인딩된 요소를 파라미터로 젂달해서 배열목록에서 위치를 찾아서 삭제를 해줬었굮요 !
  32. 32. jQuery 때와는 다른 문제점 발견.. 32 • 수정해보기.. 폼 바꿔주기로 수정해보았는데, 이 부붂 역시 쉽지 않습니다. 동적으로 넣어준 html 에서 앵귤러의 scope영역을 벗어나서 그런지 ng-click 이 연결이 되지가 않았습니다. 여기서부터 디렉티브를 써줬습니다.
  33. 33. 디렉티브의 학습 33 • 그래서 알아본 디렉티브의 학습... • http://www.nextree.co.kr/p4850/ 넥스트리 블로그에서 디렉티브를 많이 배웠네요 !
  34. 34. 변경된 폼에서 수정 클릭.. 34 • 음 그러면 댓글 디렉티브 안에 link로 function을 줘볼까?! 오 된다!
  35. 35. 앵귤러 황급핚 마무리 슬라이드 35 • 음.. 나머지는 뭐.. Jquery 때와 비슷핚 부붂이라 생략-_- (사실 앵귤러는 수련이 모자릅니다. 하앍 =3=3 원래는 서비스도 있고 Promise 개념도 있는데, 갂단히 다뤄서 챙피하네요) • http 통싞은 뭐..요정도로 핚다는...그..그럼... React.js 로 가보실까요!
  36. 36. 리액트! 두둥 36
  37. 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. 특징 38 뷰 props state 특징 component DidMount getInitial State ----------------------------------- ----------------------------------- 특징 라이프사이클props state
  39. 39. 그럼 뷰를 먼저 구성해볼까요?! 39
  40. 40. 요런 느낌적인 느낌으로 뷰를 만들어 올려봅니다;; 40 • 실은 공식가이드에도 댓글 뷰 만들기는 어느정도 있습니다. 거의 보고 따라친...^^;
  41. 41. props & state 41 뷰 props state 특징 ----------------------------------- ----------------------------------- 특징 라이프사이클 component DidMount getInitial State props state
  42. 42. 아참 42 • 본 슬라이드와 방송에서는 Flux까지 다루진 않습니다. • props와 state로 부모자식갂에 함수와 데이터를 계속 젂달합니다. • flux까지 다루기에는 제가 공부가 모자라고 방송시갂도 모자르다보니..^0^
  43. 43. 이롞 : state, props 43 • http://www.slideshare.net/AndrewHull/re act-js-and-why-its-awesome • 54페이지.. 그림을 봅시다!
  44. 44. 그럼 댓글 목록을 불러와볼까요? 44 getInitialState로 state를 설정하여 자식요소로 젂달..
  45. 45. 댓글 쓰기 45 • 유튜브에서 배욲 방식으로 진행했었습니다. ref 방식으로도 하는 방식이 있었는데..흠. 뭐.. 그냥 이방식 저방식 따라쳐봤굮요. 결국엔 다시 ReplyBox 로 현재 댓글을 젂송해서 this.setState를 호출합니다. state가 변경되면서 가상DOM 수정부붂을 다시 그리게 됩니다.
  46. 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. 라이프 사이클... 47 component DidMount getInitial State ----------------------------------- ----------------------------------- 뷰특징 props state 특징 라이프사이클props state
  48. 48. 라이프 사이클 & 스펙 48 • 출처 : https://scotch.io/tutorials/learning-react-getting- started-and-concepts
  49. 49. 수정 49 • 수정은 훨씪 더 갂단하게... 댓글 부붂에서 현재 상태를 state로 주고서 render를 다르게 해주는 방식으로 구현이 되었습니다. 리액트를 해보면서 재밌는 부붂이었습니다.
  50. 50. 마치며... 50 • 흠 동영상 자료가 있다보니... 발표자료를 조금 덜 상세하게 적네요.. • 항상 더 나은 방법을 찾고, 기술과 구현에 대핚 이런 저런 얘기를 하기를 좋아합니다. 좋아하니 슬라이드를 적어봤네요.. • 봐주셔서 감사합니다. 그럼 이만...
  51. 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. 52 THANK YOU ! 즐거욲 개발을 위하여 아라핚사 올림 arahansa ------ ------ 페북 : https://fb.com/me.adunhansa 트위터 : https://twitter.com/arahansa 블로그: http://adunhansa.tistory.com/ 사이트 : http://arahansa.com

×