React, Redux 실전 적용기
•
3 likes•610 views
React, Redux를 서비스에 적용, 유지보수하면서 생겼던 문제점들을 해결하기 위한 방안들. * 대상 - React, Redux를 접하지 않은 분 - React, Redux를 서비스에 적용하고 있는 분 * 내용 - React만으로는 해결되지 않는 문제들 - Flux의 한계 - Redux의 정의 및 서비스 적용 - 코드가 많아짐에 따른 문제를 typescript를 통해 해결 * 실전팁 - Typescript를 사용하여 컴파일 타임에 오류를 감지하자 - 많아지는 dom tree를 high order component를 통해 모듈화하자 - Logical component를 만들어서 control flow를 제어하자
Recommended
More Related Content
Similar to React, Redux 실전 적용기
Similar to React, Redux 실전 적용기 (20)
React, Redux 실전 적용기
- 1. 선물하기 React, Redux 적용기
- 2. 프리젠테이션 본래 목표 React, Redux를 이미 경험한 팀원들을 대상으로 2년간 React, Redux를 서비스에 적용, 유지보수하면서 생겼던 문제점들을 해결하기 위한 방안들
- 3. 프리젠테이션 본래 목표 2년간 React, Redux를 서비스에 적용, 유지보수하면서 생겼던 문제점들을 해결하기 위한 방안들 괜히 들어왔구나!
- 4. 프리젠테이션의 대상 01 02 React, Redux를 접하지 않은 분 React, Redux를 서비스에 적용하고 있는 분
- 5. 프리젠테이션의 목표 01 02 React, Redux를 접하지 않은 분 React, Redux를 서비스에 적용하고 있는 분 React, Redux 및 관련 기술에 대한 가벼운 개념 전달 선물하기의 시행착오를 보면서, 마치 내가 개발한 듯한 착시 효과
- 6. 프리젠테이션의 목표 01 02 React, Redux를 접하지 않은 분 React, Redux를 서비스에 적용하고 있는 분 선물하기의 서비스 적용 및 시행착오를 보면서 “쟤네들 아직 멀었다.” 혹은 “아, 저건 우리 서비스에도 적용할 만 하다” 라는 반응을 이끌어 낼 수 있도록 하는 것
- 7. 선물하기 기술 스택
- 8. Back end MSA, Java, Scala Play, Finatra, Spring, Akka Back end MSA, Java, Scala Play, Finatra, Spring, Akka 선물하기에서 사용하는 기술 Front end React, Redux, AngularJS
- 9. 선물하기에서 사용하는 Front end 기술 01 03 React Redux 2015년 중순 운영툴에 적용 2016년 초 서비스에 적용
- 10. 선물하기에서 사용하는 Front end 기술 01 02 03 04 + React Flux Redux Typescript 개선사항 2015년 중순 운영툴에 적용 2016년 초 서비스에 적용 2017년 중순 서비스에 적용 2017년 말 서비스에 적용 예정 2015년 중순 운영툴에 적용 삽질순서 & 발표순서
- 12. 01 02 03 04 05 React Flux Redux Typescript React를 선택한 이유? 개선사항 컴포넌트 기반으로 재사용이 가능하다 페이스북 주가가 높다 virtual dom을 사용해서 빠르다
- 13. 01 02 03 04 05 React Flux Redux Typescript React를 선택한 이유? 개선사항 컴포넌트 기반으로 재사용이 가능하다 페이스북 주가가 높다 virtual dom을 사용해서 빠르다 리액트 덕후가 있어서… 리.. 리액트 찡
- 14. 01 02 03 04 05 React Flux Redux Typescript React란? <div> <ul> <li>… <li>... </ul> </div> <form> <label …> <div class=“…> <input class… <div class… </div> </form> <div> <ul> <li>… <li>... </ul> </div> <SearchInput query=“카카오프렌즈”/> React!! 개선사항 카카오프렌즈
- 15. React만으로는 해결되지 않는 문제들 검색결과 검색어 서제스트 카테고리 상품 가격대 필터링할 가격대 검색 API이벤트 서제스트 API이벤트 가격대 API이벤트
- 16. React만으로는 해결되지 않는 문제들 검색결과 검색어 서제스트 카테고리 상품 가격대 필터링할 가격대 검색 API이벤트 서제스트 API이벤트 가격대 API이벤트 이벤트 이벤트
- 17. React만으로는 해결되지 않는 문제들 검색결과 검색어 서제스트 카테고리 상품 가격대 필터링할 가격대 검색 API이벤트 서제스트 API이벤트 가격대 API이벤트 이벤트 이벤트 ViewModelController
- 18. 01 02 03 04 05 React Flux Redux Typescript 개선사항 React만으로는 해결되지 않는 문제들 https://facebook.github.io/flux/
- 19. 01 02 03 04 05 React Flux Redux Typescript 개선사항 React만으로는 해결되지 않는 문제들 https://facebook.github.io/flux/
- 21. 01 02 03 04 05 React Flux Redux Typescript Flux란? 개선사항 기존 MVC의 한계를 해결하기 위한 단방향 데이터 아키텍쳐 https://facebook.github.io/flux/ Flux is the application architecture that Facebook uses for building client-side web applications (https://facebook.github.io/flux/docs/in-depth-overview.html)
- 22. Flux란? 예전 정적인 페이지 정적인 데이터API이벤트 Controller Model View 기존 MVC 페이지를 단순히 그려주기만 했던 정적인 웹페이지에서는 문제가 없었다 01 02 03 04 05 React Flux Redux Typescript 개선사항 단방향 문제가 생길 여지가 없다
- 23. Flux란? 인터렉티브하면서 발생한 문제점 데이터API이벤트 Controller Model View 기존 MVC 웹페이지가 인터렉티브하면서 문제가 생기게 되었다 01 02 03 04 05 React Flux Redux Typescript 개선사항 이벤트 데이터 단방향이 아님
- 24. Flux란? 데이터API Store View 기존 MVC 웹페이지가 인터렉티브하면서 문제가 생기게 되었다 01 02 03 04 05 React Flux Redux Typescript 개선사항이벤트 Dispatcher Dispatcher Action 단방향을 만들어 문제를 해결하자
- 25. 01 02 03 04 05 React Flux Redux Typescript Flux란? 개선사항 기존 MVC의 한계를 해결하기 위한 단방향 데이터 아키텍쳐 https://facebook.github.io/flux/ Flux is the application architecture that Facebook uses for building client-side web applications (https://facebook.github.io/flux/docs/in-depth-overview.html)
- 26. 01 02 03 04 05 React Flux Redux Typescript React + Flux로 서비스에 적용해보자 개선사항 Dispatcher StoreView Action class MyView { render() { return <div> …. callAction(); </div> } } callAction() { …. Dispatcher. handleAction( type: “MyAction” payload: … ); } 등록된 모든 store들에게 MyAction 이벤트가 발생했음을 알림 1. Dispatch에 등록 Dispatcher.register 2. 이벤트를 받을 준비 switch(type) { case MyAction : …. (저장) … 3. 이벤트를 발생시키면서 View에 알린다.
- 27. 01 02 03 04 05 React Flux Redux Typescript React + Flux로 서비스에 적용해보자 개선사항 Dispatcher StoreView Action class MyView { render() { return <div> …. callAction(); </div> } } callAction() { …. Dispatcher. handleAction( type: “MyAction” payload: … ); } 등록된 모든 store들에게 MyAction 이벤트가 발생했음을 알림 1. Dispatch에 등록 Dispatcher.register 2. 이벤트를 받을 준비 switch(type) { case MyAction : …. (저장) … 3. 이벤트를 발생시키면서 View에 알린다. 내가 안쓰고 말지…
- 28. 01 02 03 04 05 React Flux Redux Typescript 개선사항 문제의 원인이 뭘까 React + Flux 문제의 원인이 무엇인가 Flux 정의를 보면 알수 있다. 기존 MVC의 한계를 해결하기 위한 단방향 데이터 아키텍쳐 라이브러리나 프레임워크가 아니라 이론인 것 2015년 운영툴에 이렇게 적용했었는데 너무 힘들었다…
- 30. 01 02 03 04 05 React Flux Redux Typescript Redux란? 개선사항 Flux를 구현하는 삽질 여러분들은 안하셔도 됩니다… 왜 눈물이 나지...
- 31. 01 02 03 04 05 React Flux Redux Typescript Redux란? 개선사항 Redux is not that different from Flux. Overall it has same architecture. (…중략…) I had one main objective: make it possible to change reducer code on the fly or even “change the past” by crossing out actions, and see the state being recalculated. - Dan Abramov (https://stackoverflow.com/questions/32461229/why-use-redux-over-facebook-flux) Redux는 flux와 동일한 아키텍쳐를 가지고 있다. Flux의 아이디어를 발전시켜서, Time Travel Debugging이 가능하게 만들었다.
- 32. 01 02 03 04 05 React Flux Redux Typescript Redux란? 개선사항 Arrays.stream(new int[]{1, 2, 3, 4}).reduce(0, (acc, n) -> acc + n); 1 2 3 40 acc n 0 1 acc n 1 2 acc n 3 3 acc n 6 4 10 System.out.println(acc); 0 1 2 6 10 Redux = Reduce + flux 값이 하나
- 33. Redux = Reduce + flux 01 02 03 04 05 React Flux Redux Typescript Redux란? 개선사항 Action 1 Action 2 Action 3 Action 4 상태 1 Action 2 상태 2 Action 3 상태 3 Action 4 Store 검색어를 입력 가격대를 선택 검색어를 변경 카테고리 선택 상태값이 하나
- 34. Redux = Reduce + flux 01 02 03 04 05 React Flux Redux Typescript Redux란? 개선사항 Action 1 Action 2 Action 3 Action 4 상태 1 Action 2 상태 2 Action 3 상태 3 Action 4 Store 검색어를 입력 가격대를 선택 검색어를 변경 카테고리 선택 상태값이 하나
- 35. 01 02 03 04 05 React Flux Redux Typescript React + Redux로 서비스에 적용해보자 개선사항 “선물하기는 2016년 초, 정신 못차리고 또다시 서비스에 react + redux를 적용하기 시작한다...”
- 36. 01 02 03 04 05 React Flux Redux Typescript React + Redux로 서비스에 적용해보자 개선사항 View Action Reducer (Store)
- 37. 01 02 03 04 05 React Flux Redux Typescript React + Redux로 서비스에 적용해보자 개선사항 React / Redux Es6 -> es5 모듈화 도구 URL 라우팅 도구 Webpack Babel Redux Router js js js js js js url view view view bundle.js
- 38. 01 02 03 04 05 React Flux Redux Typescript React + Redux로 서비스에 적용해보자 개선사항app search component SearchInput SearchFilter CategoryFilter Price Filter Products Product SearchAction SearchReducer SearchResultView ... core 구성
- 39. 01 02 03 04 05 React Flux Redux Typescript 그렇게 1년… 개선사항 레거시 제거 신규 기능 추가 기존 코드도 변경 유지보수 갑자기 잘되던 애가 동작을 안하기 시작 잘 안쓰는 기능이라 테스트에서도 놓친 채로 릴리즈
- 41. 01 02 03 04 05 React Flux Redux Typescript Typescript란? 개선사항 function sum(a, b) { return a + b; } function sum(a: number, b: number) { return a + b; } sum(1, 2); sum(1, ‘2’); 3 12 sum(1, 2); sum(1, ‘2’); 3 ERROR 타입 기반 프로그래밍이 가능한 Javascript superset.
- 42. 01 02 03 04 05 React Flux Redux Typescript Typescript란? 개선사항 ts js컴파일 타입 기반 프로그래밍이 가능한 Javascript superset. 컴파일하여 javascript를 얻음 컴파일 시점에 타입 체크 기존 코드 마이그레이션? 이렇게 까지 해서 써야 되나? 생각보다 쉽다 런타임에 발생 하는 오류 테스트 케이스 테스트 케이스 테스트 케이스 … 컴파일 타임에 발생 하는 오류
- 43. 01 02 03 04 05 React Flux Redux Typescript Typescript란? 개선사항 ts js컴파일 타입 기반 프로그래밍이 가능한 Javascript superset. 컴파일하여 javascript를 얻음 컴파일 시점에 타입 체크 기존 코드 마이그레이션? 이렇게 까지 해서 써야 되나? 생각보다 쉽다 런타임에 발생하는 오류 테스트 케이스 … 컴파일 타임에 발생 하는 오류
- 44. 01 02 03 04 05 React Flux Redux Typescript Typescript란? 개선사항 ts js컴파일 타입 기반 프로그래밍이 가능한 Javascript superset. 컴파일하여 javascript를 얻음 컴파일 시점에 타입 체크 기존 코드 마이그레이션? 이렇게 까지 해서 써야 되나? 생각보다 쉽다 런타임에 발생하는 오류 테스트 케이스 … 컴파일 타임에 발생 하는 오류 이렇게 까지 해서 써야 되나 => 노력 대비 효과가 있었냐 등가교환
- 45. 01 02 03 04 05 React Flux Redux Typescript React + Redux + Typescript로 서비스에 적용해보자 개선사항 2017년 중반 선물하기는 typescript를 서비스에 적용한다…
- 46. 지금은 광고 시간입니다 테스트 케이스 만들기도 귀찮고, 자꾸 깨지고… “최소한 테스트 케이스 최대한 안전한 코드” 만들수 있는 방법이 없을까? Back-end에 훨씬 더 정교하고 우아한 방식으로 타입 기반 프로그래밍을 적용하는 내용을 발표할 예정입니다.
- 47. 01 02 03 04 05 React Flux Redux Typescript 그래도 해결되지 않는 문제들… 개선사항 01 02 Component로 너무 쪼개서 코드 따라 가기가 힘들어요. 이놈의 React… 스크립트 안에 마크업이 같이 있어서 Hell 여기까지 잘 따라오셨습니다… 이제 선물하기의 현재에 오셨습니다.
- 48. 01 02 03 04 05 React Flux Redux Typescript 개선사항 & 내부 가이드 개선사항
- 49. 01 02 03 04 05 React Flux Redux Typescript 문제점 1. Depth가 너무 깊다 개선사항 TodoList Example.
- 50. 01 02 03 04 05 React Flux Redux Typescript 문제점 1. Depth가 너무 깊다 개선사항 TodoList Example.
- 51. 01 02 03 04 05 React Flux Redux Typescript 문제점 1. Depth가 너무 깊다 개선사항 TodoList Example.
- 52. 01 02 03 04 05 React Flux Redux Typescript 문제점 1. Depth가 너무 깊다 <SearchResultView> <SearchResult /> </SearchResultView> <SearchResult> <ItemList /> </SearchResult> <ItemList> <ItemBox /> </ItemList> <ItemBox … ”복잡하고 직관적이지 않다.” 개선사항
- 53. 01 02 03 04 05 React Flux Redux Typescript SearchResultView SearchResult ItemList ItemBox NewAction NewAction NewAction NewAction 문제점 1. Depth가 너무 깊다 “유지보수가 어렵고 번거롭다.” 개선사항
- 54. 01 02 03 04 05 React Flux Redux Typescript 가이드 1. 코드가 한눈에 들어올 수 있도록 하자 <SearchResult> </SearchResult> <SearchFilter> <CategoryFilter /> <PriceFilter /> </SearchFilter> <SearchInput /> <Products> <Product /> </Products> “직관적이다.” 개선사항
- 55. 01 02 03 04 05 React Flux Redux Typescript 가이드 1. 코드가 한눈에 들어올 수 있도록 하자 <SearchResult> </SearchResult> <SearchFilter> <CategoryFilter /> <PriceFilter /> </SearchFilter> <SearchInput /> <Products> <Product /> </Products> 개선사항 action=“newAction” /> “Action이나 데이터를 쓸데없이 거쳐서 전달할 필요도 없다.” 새로운 액션을 전달하려면?
- 65. 01 02 03 04 05 React Flux Redux Typescript 문제점 2. 로직이 반복되고, 가독성이 떨어진다. 개선사항 <SearchResult> <SearchInput> <SearchFilter> <CategoryFilter /> <PriceFilter /> </SearchFilter> <Products> <Product /> </Products> </SearchResult> { if (isLoading == true) ? <Loading/> : } { if (this.props.searchResult.items.length > 0) ? : <EmptyResult />} { if (isFilterLoading == true) ? <Loading/> : } { this.props.searchResult.items.map((item, index) => item={item} } ”한 화면에 로직이 다 들어간다는건 말도 안된다.”
- 67. 01 02 03 04 05 React Flux Redux Typescript 문제점 2. 해결책을 찾아보자 스칼라에서 배운 것을 사용해보자. 01 02 자료구조 타입 로직 타입 List[Int], Map[Int, String] if (n != null) { … } Future<Integer> future = executor.submit( () -> { ... } ); Option[Int] Future[String] 개선사항 try { … } catch () … Try[Long]
- 68. 01 02 03 04 05 React Flux Redux Typescript 가이드 2. 로직을 컴포넌트화 하자 개선사항 <SearchResult> <SearchInput> <SearchFilter> <CategoryFilter /> <PriceFilter /> </SearchFilter> <Products> <Product /> </Products> </SearchResult> <Loading> </Loading> <If condition={this.props.searchResult.item.length > 0}> </If> <Foreach items={this.props.searchResult.items} > </Foreach> <Loading> </Loading> <InfiniteLoading> </InfiniteLoading> <Swipe> </Swipe> ”컨테이너 하나가 그 페이지의 명세가 될수 있다.“
- 69. 01 02 03 04 05 React Flux Redux Typescript 개선사항 가이드 2. 로직을 컴포넌트화 하자 설마 모든 로직을 컴포넌트화 하겠다고? 생각해보니 서비스에서 쓰는 로직이 몇 개 안되더라. 01 If 02 For 03 Loading 04 Foldable 05 Swipe 06 InfintLoading
- 70. 01 02 03 04 05 React Flux Redux Typescript 가이드 2. 로직을 컴포넌트화 하자 SearchResultView logic Loading Foldable InfiniteScroll Swipe If Foreach presentation SearchInput SearchFilter ... Product 관심사의 분리 재사용 가능 TDD 적용하기 쉽다 화면 렌더링만 담당 개선사항
- 72. 01 02 03 04 05 React Flux Redux Typescript 구현해보자 개선사항 리스트를 출력할때 쓸 foreach를 구현해보자
- 73. 01 02 03 04 05 React Flux Redux Typescript 구현해보자 개선사항 If, foreach는 구색 맞추려고 만든것.. Loading을 만들어보자
- 80. 01 02 03 04 05 React Flux Redux Typescript 정리 02 03 Main페이지에 HTML코드가 아닌, 주요 컴포넌트를 표현하자 주요 로직을 컴포넌트화 하자 개선사항 01 Typescript를 사용하여 컴파일 타임에 오류를 감지하자 실행하지 않아도 오류를 미리 알수 있다. 테스트에서 놓칠까봐 전전긍긍하지 않아도 된다.
- 81. 01 02 03 04 05 React Flux Redux Typescript 정리 02 03 Main페이지에 HTML코드가 아닌, 주요 컴포넌트를 표현하자 주요 로직을 컴포넌트화 하자 컨테이너에 절대 HTML 코드가 보이지 않게 하자. 코드가 직관적이고, 유지보수가 용이하다. 개선사항 01 Typescript를 사용하여 컴파일 타임에 오류를 감지하자
- 82. 01 02 03 04 05 React Flux Redux Typescript 정리 02 03 Main페이지에 HTML코드가 아닌, 주요 컴포넌트를 표현하자 주요 로직을 컴포넌트화 하자 개선사항 관심사를 분리할 수 있으며 중복 코드를 줄일수 있고, 재사용 가능하다. TDD를 적용하기에도 용이하다. 01 Typescript를 사용하여 컴파일 타임에 오류를 감지하자
- 83. </End>