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