웹프론트엔드 기술의 발달로 웹프론트엔드는 더이상 단순한 페이지 뷰가 아닌 앱의 역할을 충분히 해내고 있습니다. SPA 구조로 웹을 개발하게 되면서 자연스럽게 프론트엔드에서는 상태관리에 대한 요구가 생기게 되었고 jQuery 시절부터 지금까지 그 방법에 대한 다양한 접근법이 제시되었습니다. 이 발표를 통해 그 상태관리가 왜 필요하고 어떻게 발전되어왔는지, 또 현재는 어떠한지 간단한 예제와 함께 살펴보고자 합니다.

2. , !
네이버 PWE | 최현철

3. 발표자소개
• .
• ) ,
• (
• @F A FE E

4. 목차
A
2 5 ? A
41 3.5 ? A
? A

6. FE에서 상태 관리가 왜 중요한가요?

7. 상태 관리가 무엇인가요?

8. 그 뿐일까요?

9. 무엇이 문제인가요?
• ,
•

10. 무엇이 문제인가요?

11. 상태 관리 패러다임의 변화

12. jQuery 와 상태 관리

13. jQuery 상태 관리

14. jQuery 상태 관리
HTML
동작(Click) A
동작(Click) B
동작(Keyboard) C
Element A
Element B
Element C

15. jQuery 상태 관리
• data-seq=“287518”
• data-title=“나 그 길 싫은뒈,“
• data-expsstartymdt=“2019-03-25 05:59”
• data-clk=“tcc_ani.contents”
• data-gdid=“UAT_3915384”

16. jQuery 상태 관리 무엇이 문제인가요?
Element A를 선택해서 상태를 가져옴
HTML
동작(Click) B
Element A
Element B
Element C

17. jQuery 상태 관리 무엇이 문제인가요?
Element A를 선택해서 상태를 가져옴
Element C를 선택해서 상태를 가져옴
HTML
동작(Click) B
Element A
Element B
Element C

18. jQuery 상태 관리 무엇이 문제인가요?
Element A를 선택해서 상태를 가져옴
Element C를 선택해서 상태를 가져옴
가져온 데이터를 조합
HTML
동작(Click) B
Element A
Element B
Element C

19. jQuery 상태 관리 무엇이 문제인가요?
Element A를 선택해서 상태를 가져옴
Element C를 선택해서 상태를 가져옴
가져온 데이터를 조합
API 호출
HTML
동작(Click) B
Element A
Element B
Element C

20. jQuery 상태 관리 무엇이 문제인가요?
Element A를 선택해서 상태를 가져옴
Element C를 선택해서 상태를 가져옴
가져온 데이터를 조합
API 호출
응답 값이 내려옴
HTML
동작(Click) B
Element A
Element B
Element C

21. jQuery 상태 관리 무엇이 문제인가요?
Element A를 선택해서 상태를 가져옴
Element C를 선택해서 상태를 가져옴
가져온 데이터를 조합
API 호출
응답 값이 내려옴
응답 값 정제
HTML
동작(Click) B
Element A
Element B
Element C

22. jQuery 상태 관리 무엇이 문제인가요?
Element A를 선택해서 상태를 가져옴
Element C를 선택해서 상태를 가져옴
가져온 데이터를 조합
API 호출
응답 값이 내려옴
응답 값 정제
Element B를 선택해서 상태 업데이트
HTML
동작(Click) B
Element A
Element B
Element C

23. jQuery 상태 관리 무엇이 문제인가요?

24. jQuery 상태 관리 정리
• jQuery 개발은 DOM에 jQuery로 동작을 입히는 것
• DOM이 베이스
• 각 Element에 상태를 저장
• 서로 다른 Element의 상태변화 추적이 어려움

25. AngularJS 와 상태 관리

26. AngularJS 상태 관리
출처: https://d2.naver.com/helloworld/1172239

27. AngularJS 상태 관리
• ) ( J
• S
• A
<div ng-controller="MyController">
Your name: <input type="text" ng-model="username" />
<button ng-click="sayHello()">greet</button>
{{ greeting }}
</div>
angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
$scope.username = 'World';
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
}]);

28. AngularJS 상태 관리
• ) ( (
• $scope.greeting (

29. AngularJS 상태 관리

30. AngularJS 상태 관리
LOGIC
STATE
LOGIC
STATE
VIEW
VIEW
VIEW
CONTROLLER
LOGIC
STATE
LOGIC
STATE
SERVICE VIEW

31. AngularJS 상태 관리 무엇이 문제인가요?
서비스에서 데이터를 가져옴
Module A
Module B
Module C
Service

32. AngularJS 상태 관리 무엇이 문제인가요?
서비스에서 데이터를 가져옴
가져온 데이터 조합Module A
Module B
Module C
Service

33. AngularJS 상태 관리 무엇이 문제인가요?
서비스에서 데이터를 가져옴
가져온 데이터 조합
API 호출
Module A
Module B
Module C
Service

34. AngularJS 상태 관리 무엇이 문제인가요?
서비스에서 데이터를 가져옴
가져온 데이터 조합
API 호출
응답 값이 내려옴
Module A
Module B
Module C
Service

35. AngularJS 상태 관리 무엇이 문제인가요?
서비스에서 데이터를 가져옴
가져온 데이터 조합
API 호출
응답 값이 내려옴
응답 값 정제
Module A
Module B
Module C
Service

36. AngularJS 상태 관리 무엇이 문제인가요?
서비스에서 데이터를 가져옴
가져온 데이터 조합
API 호출
응답 값이 내려옴
응답 값 정제
모듈 B의 상태 업데이트
Module A
Module B
Module C
Service

37. AngularJS 상태 관리 무엇이 문제인가요?

38. AngularJS 상태 관리 무엇이 문제인가요?

39. Redux 와 상태 관리

40. Redux
( ) ,

41. Redux
FLUX
CQRS
Event Sourcing

42. Redux

43. Redux
) ) (
출처: https://docs.microsoft.com/ko-kr/azure/architecture/guide/architecture-styles/cqrs

44. Redux
출처: https://docs.microsoft.com/ko-kr/azure/architecture/guide/architecture-styles/cqrs

45. Redux

46. Redux

47. Redux 무엇이 문제인가요?
• .
•
•

48. 정리

49. 정리
• ( F
• d e F M Q a
• E nOyA l j a
n
• d A R a d O u
• n , ). Q F S R
D A u
• g J x r F S
a n A u

50. 정리