[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민

1. React로
개발자 2명이
플랫폼 4개를
서비스하는 이야기
심상민

2. 사실, 일반적인 경우에는
개발자 2명이 플랫폼 4개를 개발하진 않습니다…

3. 프론트앤드
서버
iOS iOS
안드로이드
프론트앤드 프론트앤드
서버 서버
서버
서버
출처: 풋볼데이

4. 프론트앤드
서버
iOS iOS
안드로이드
프론트앤드 프론트앤드
서버 서버
서버
서버
출처: 풋볼데이

5. OSMU
One Source Multi Use
뜻: 여러번 할 삽질을 한 번만 하는 것

6. ORMU
One ReSource Multi Use
뜻: 여러명이 할 삽질을 한 명이 다 하는 것

7. 풀스택개발자저렴한 연봉의
출처: https://commons.wikimedia.org/wiki/File:Unicorn_(PSF).png

8. 우리는 자바스크립트를 선택했습니다. 그리고…

9. 어떤 프레임워크를 써볼까…

10. React

11. React를 쓰는 이유
● 렌더링 시점을 직접 제어하지 않아도 됨
● 그러면서도 Virtual DOM으로 성능을 확보함
● Angular 쓰기 싫어서
● 그리고…

13. React-Hot-Loader
● 재시작 없이 State를 유지한 상태로 변경된 코드를 반영
● 생산성을 높이는데 굉장히 효과적
● react + webpack + hot-loader 등이 필요
● boilerplate 등 참고할 수 있는 예제 많음
https://github.com/gaearon/react-hot-loader

14. 하이브리드앱에도 적용할 수 있지 않을까?

15. React Hot Loader 사용 흐름
클라이언트React Hot Loader 서버
초기 클라이언트 리소스 전달
HTTP
변경사항 전달
Websocket
변경사항 감지
변경된 부분
Webpack 빌드

16. Phonegap에서 React-Hot-Loader 적용하
기
● 실제 디바이스에서 Charles나 Fiddler 등으로 프록시 사용
● localhost 대신 Hosts 파일 수정을 통해 개발 도메인으로 접
근
- ex) 127.0.0.1 dev.hogangnono.com
● webpack 설정에서 위의 도메인으로 모듈을 띄움

19. 두 배 빨라진 개발환경
출처: https://pixabay.com/ko/%EC%B9%98%ED%83%80-%EB%8F%99%EB%AC%BC-%ED%8F%AC%EC%9C%A0-%EB%8F%99%EB%AC%BC-%EB%A0%88%EC%98%A4-%ED%8C%8C-%EB%93%9C-%EB%8F%99%EB%AC%BC%EC%9B%90-%EC%9B%90%EC%A0%95-%EC%97%AC%ED%96%89-48013/

20. SPA(Single Page Application)로 만들려면
라우터가 있어야 겠다!

21. React-Router
● SPA를 만드는데 필요한 기본적인 라우터 기능을 구현
https://github.com/ReactTraining/react-router

22. React-Router
● 많은 곳에서 사용하고 있기 때문에 큰 문제는 없음
- 자잘한 문제가 있었지만 거의 해결됨
● Phonegap에서 사용시 Hash History 방식을 사용해야함
- 예) index.html#/main
● major 버전이 변경됨에 따라 사용법이 충격적으로 바뀜
- 1년전 버전 0.13, 지금 버전 v4.0.0-alpha…

23. React만 쓰려니 허전한데…
Flux 구현체가 있어야겠다!

24. Flux
https://facebook.github.io/flux/

25. Alt
● 지금은 Airbnb에 있는 Josh Perez가 만든 심플한 Flux 구현
체
● redux가 출시되지 않은 상황이었음…
https://github.com/goatslacker/alt

26. Action

27. Store

28. View

30. SPA는 첫 페이지 로딩이 느리지.
Server-Side Rendering을 적용해야겠다!

31. React Isomorphic
● 클라이언트의 Action, Store, Component 코드를 서버에서 사
용
● React-Router 코드를 서버에서 불러서 라우팅 처리
● Iso 모듈을 이용해서 클라이언트 코드로 렌더링 수행

32. 이런식으로 구현하면

33. 이렇게 보입니다.
렌더링된 HTML
연산된 Store 값

34. React Isomorphic
● 서버에서 실행할 수 없는 로직은 분기처리 해야함
- window.alert, window.confirm 등
● Action 코드를 같이 사용하기 때문에 클라이언트와 서버에서
동시에 쓸 수 있는 XMLHTTPRequest 모듈 필요

35. http://andrewhfarmer.com/ajax-libraries/

36. React Isomorphic
● 404 페이지등 서버에서 별도의 처리가 필요한 경우 React-
Router의 로직을 사용하기 전에 서버에서 따로 확인해야함

37. 참고로 현재 Airbnb에 있는 Josh Perez는 Iso를 없애
고
Alt 의존성을 제거한 Hypernova를 내놨습니다…

38. 이제 앱을 만들어봐야겠다!

39. Phonegap

40. React Native가 아니고?
● OSMU(One Source Multi Use) 불가능
● 부족한 플러그인
- 카카오톡, Fabric, Google Analytics 등 연동할 서비스가 너무 많음
● 네이티브라고 다 빠르고 좋진 않다는 교훈
- Titanium…

41. Phonegap으로 될까?
하이브리드앱은 퀄리티가 떨어지는데…

43. 화면B
Native Page Transitions
화면A

44. 화면A
스크린샷
로딩중…
Native Page Transitions

45. 화면A
스크린샷
화면B
Native Page Transitions

46. Native Page Transitions
● 기본 설정으로 사용하면 타이밍이 맞지 않아 같은 페이지가 반복 호
출되는 이슈 발생
● React-Router와 연계해서 트랜지션 타이밍을 맞춰야함
- onEnter 핸들러로 확인할 수 있음
라우팅 액션
Native Page
Transition
start()
라우팅 완료
Native Page
Transition
execute()

47. 뭔가 부족한데…

48. 더미(Dummy) 노출

49. 더미 노출
화면A 화면A

50. 더미 노출
화면B
페이지 로딩
화면B
페이지 로딩
화면A 화면A

51. 더미 노출
화면B
Ajax호출…
화면A 화면A

52. 더미 노출
화면A 화면A
Ajax호출

53. 더미 노출
화면A 화면A

54. 더미 노출

55. Phonegap 그 밖에…
● Swipe Back 등 네이티브 앱의 고유 동작을 모방함
● 기본 탑재 브라우저 성능 향상 가능
- 안드로이드는 Crosswalk, iOS는 WkWebview Engine
● 다양한 플러그인으로 보다 네이티브 앱처럼 만들 수 있음
- Fabric, PushPlugin, CustomURLScheme, Facebook, KakaoTalk,
CallNumber, Universal Clipboard 등
- http://cordova.apache.org/plugins/
- http://plugins.telerik.com/cordova

56. 지원하는 플랫폼이 많아지니깐
코드가 복잡해진다…

57. 멀티플랫폼

58. Write Once
Run Everywhere
출처: http://www.dailymail.co.uk/travel/travel_news/article-2812387/From-car-boat-15-seconds-155-000-Panther-car-hit-waves-45mph-s-18-month-waiting-list-buy-one.html

59. 출처: 귀귀님 웹툰

60. 그렇다고 무작정 플랫폼 별로 파일을 나누면
변경사항이 발생할 때 무조건
X 플랫폼수로 작업해야합니다…

61. 분리의 기준
● 성격이 다른 플랫폼은 폴더를 분리
- /desktop, /mobile
● 공통적인 기능이 생길 경우 공통 폴더로 로직을 분리
- /base
● 성격이 유사한 플랫폼은 같은 파일 내에서 분기문으로 처리
- /mobile을 하이브리드앱도 같이 사용

62. 예시
/client
/server
/actions
/stores
/components
app.js
/desktop
/mobile
/base Phonegap
Electron
Subtree 프로젝트
Subtree 프로젝트
Platform별로 다름

63. 서버
/client
/server
/actions
/stores
/components
app.js
/desktop
/mobile
/base Phonegap
Electron
Subtree 프로젝트
Subtree 프로젝트
Platform별로 다름

64. 데스크탑 웹
/client
/server
/actions
/stores
/components
app.js
/desktop
/mobile
/base Phonegap
Electron
Subtree 프로젝트
Subtree 프로젝트
Platform별로 다름

65. 모바일 웹
/client
/server
/actions
/stores
/components
app.js
/desktop
/mobile
/base Phonegap
Electron
Subtree 프로젝트
Subtree 프로젝트
Platform별로 다름

66. 안드로이드, iOS
/client
/server
/actions
/stores
/components
app.js
/desktop
/mobile
/base Phonegap
Electron
Subtree 프로젝트
Subtree 프로젝트
Platform별로 다름

67. Windows, Mac
/client
/server
/actions
/stores
/components
app.js
/desktop
/mobile
/base Phonegap
Electron
Subtree 프로젝트
Subtree 프로젝트
Platform별로 다름

68. 정리해보죠!

69. 자바스크립트
자바
파이썬Node.js
서버-클라이언트 언어 통일

70. React
Angular
Backbone
React-Router
Alt
Iso
Isomorphic

71. Webpack
Grunt
Gulp
React-Hot-Loader
Phonegap
빠른 생산성, 코드 재사용

72. Native Page Transition
더미 노출
Phonegap
React-Native
Native App
네이티브 같은 앱

73. 이렇게 우리는 개발자 2명이 플랫폼 4+개를
빠르게 개발하고 있습니다.

74. Q&A

75. 부스에서 만나요!
감사합니다!