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.
React로
개발자 2명이
플랫폼 4개를
서비스하는 이야기
심상민
사실, 일반적인 경우에는
개발자 2명이 플랫폼 4개를 개발하진 않습니다…
프론트앤드
서버
iOS iOS
안드로이드
프론트앤드 프론트앤드
서버 서버
서버
서버
출처: 풋볼데이
프론트앤드
서버
iOS iOS
안드로이드
프론트앤드 프론트앤드
서버 서버
서버
서버
출처: 풋볼데이
OSMU
One Source Multi Use
뜻: 여러번 할 삽질을 한 번만 하는 것
ORMU
One ReSource Multi Use
뜻: 여러명이 할 삽질을 한 명이 다 하는 것
풀스택개발자저렴한 연봉의
출처: https://commons.wikimedia.org/wiki/File:Unicorn_(PSF).png
우리는 자바스크립트를 선택했습니다. 그리고…
어떤 프레임워크를 써볼까…
React
React를 쓰는 이유
● 렌더링 시점을 직접 제어하지 않아도 됨
● 그러면서도 Virtual DOM으로 성능을 확보함
● Angular 쓰기 싫어서
● 그리고…
React-Hot-Loader
● 재시작 없이 State를 유지한 상태로 변경된 코드를 반영
● 생산성을 높이는데 굉장히 효과적
● react + webpack + hot-loader 등이 필요
● boilerplate...
하이브리드앱에도 적용할 수 있지 않을까?
React Hot Loader 사용 흐름
클라이언트React Hot Loader 서버
초기 클라이언트 리소스 전달
HTTP
변경사항 전달
Websocket
변경사항 감지
변경된 부분
Webpack 빌드
Phonegap에서 React-Hot-Loader 적용하
기
● 실제 디바이스에서 Charles나 Fiddler 등으로 프록시 사용
● localhost 대신 Hosts 파일 수정을 통해 개발 도메인으로 접
근
- ex...
두 배 빨라진 개발환경
출처: 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...
SPA(Single Page Application)로 만들려면
라우터가 있어야 겠다!
React-Router
● SPA를 만드는데 필요한 기본적인 라우터 기능을 구현
https://github.com/ReactTraining/react-router
React-Router
● 많은 곳에서 사용하고 있기 때문에 큰 문제는 없음
- 자잘한 문제가 있었지만 거의 해결됨
● Phonegap에서 사용시 Hash History 방식을 사용해야함
- 예) index.html#/...
React만 쓰려니 허전한데…
Flux 구현체가 있어야겠다!
Flux
https://facebook.github.io/flux/
Alt
● 지금은 Airbnb에 있는 Josh Perez가 만든 심플한 Flux 구현
체
● redux가 출시되지 않은 상황이었음…
https://github.com/goatslacker/alt
Action
Store
View
SPA는 첫 페이지 로딩이 느리지.
Server-Side Rendering을 적용해야겠다!
React Isomorphic
● 클라이언트의 Action, Store, Component 코드를 서버에서 사
용
● React-Router 코드를 서버에서 불러서 라우팅 처리
● Iso 모듈을 이용해서 클라이언트 코드...
이런식으로 구현하면
이렇게 보입니다.
렌더링된 HTML
연산된 Store 값
React Isomorphic
● 서버에서 실행할 수 없는 로직은 분기처리 해야함
- window.alert, window.confirm 등
● Action 코드를 같이 사용하기 때문에 클라이언트와 서버에서
동시에 쓸 ...
http://andrewhfarmer.com/ajax-libraries/
React Isomorphic
● 404 페이지등 서버에서 별도의 처리가 필요한 경우 React-
Router의 로직을 사용하기 전에 서버에서 따로 확인해야함
참고로 현재 Airbnb에 있는 Josh Perez는 Iso를 없애
고
Alt 의존성을 제거한 Hypernova를 내놨습니다…
이제 앱을 만들어봐야겠다!
Phonegap
React Native가 아니고?
● OSMU(One Source Multi Use) 불가능
● 부족한 플러그인
- 카카오톡, Fabric, Google Analytics 등 연동할 서비스가 너무 많음
● 네이티브라고 ...
Phonegap으로 될까?
하이브리드앱은 퀄리티가 떨어지는데…
화면B
Native Page Transitions
화면A
화면A
스크린샷
로딩중…
Native Page Transitions
화면A
스크린샷
화면B
Native Page Transitions
Native Page Transitions
● 기본 설정으로 사용하면 타이밍이 맞지 않아 같은 페이지가 반복 호
출되는 이슈 발생
● React-Router와 연계해서 트랜지션 타이밍을 맞춰야함
- onEnter 핸들러...
뭔가 부족한데…
더미(Dummy) 노출
더미 노출
화면A 화면A
더미 노출
화면B
페이지 로딩
화면B
페이지 로딩
화면A 화면A
더미 노출
화면B
Ajax호출…
화면A 화면A
더미 노출
화면A 화면A
Ajax호출
더미 노출
화면A 화면A
더미 노출
Phonegap 그 밖에…
● Swipe Back 등 네이티브 앱의 고유 동작을 모방함
● 기본 탑재 브라우저 성능 향상 가능
- 안드로이드는 Crosswalk, iOS는 WkWebview Engine
● 다양한 플러그...
지원하는 플랫폼이 많아지니깐
코드가 복잡해진다…
멀티플랫폼
Write Once
Run Everywhere
출처: http://www.dailymail.co.uk/travel/travel_news/article-2812387/From-car-boat-15-seconds-155-0...
출처: 귀귀님 웹툰
그렇다고 무작정 플랫폼 별로 파일을 나누면
변경사항이 발생할 때 무조건
X 플랫폼수로 작업해야합니다…
분리의 기준
● 성격이 다른 플랫폼은 폴더를 분리
- /desktop, /mobile
● 공통적인 기능이 생길 경우 공통 폴더로 로직을 분리
- /base
● 성격이 유사한 플랫폼은 같은 파일 내에서 분기문으로 처리
-...
예시
/client
/server
/actions
/stores
/components
app.js
/desktop
/mobile
/base Phonegap
Electron
Subtree 프로젝트
Subtree 프로젝트
...
서버
/client
/server
/actions
/stores
/components
app.js
/desktop
/mobile
/base Phonegap
Electron
Subtree 프로젝트
Subtree 프로젝트
...
데스크탑 웹
/client
/server
/actions
/stores
/components
app.js
/desktop
/mobile
/base Phonegap
Electron
Subtree 프로젝트
Subtree 프...
모바일 웹
/client
/server
/actions
/stores
/components
app.js
/desktop
/mobile
/base Phonegap
Electron
Subtree 프로젝트
Subtree 프로...
안드로이드, iOS
/client
/server
/actions
/stores
/components
app.js
/desktop
/mobile
/base Phonegap
Electron
Subtree 프로젝트
Subtr...
Windows, Mac
/client
/server
/actions
/stores
/components
app.js
/desktop
/mobile
/base Phonegap
Electron
Subtree 프로젝트
Sub...
정리해보죠!
자바스크립트
자바
파이썬Node.js
서버-클라이언트 언어 통일
React
Angular
Backbone
React-Router
Alt
Iso
Isomorphic
Webpack
Grunt
Gulp
React-Hot-Loader
Phonegap
빠른 생산성, 코드 재사용
Native Page Transition
더미 노출
Phonegap
React-Native
Native App
네이티브 같은 앱
이렇게 우리는 개발자 2명이 플랫폼 4+개를
빠르게 개발하고 있습니다.
Q&A
부스에서 만나요!
감사합니다!
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
Upcoming SlideShare
Loading in …5
×

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

5,642 views

Published on

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

Published in: Technology
  • Be the first to comment

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

  1. 1. React로 개발자 2명이 플랫폼 4개를 서비스하는 이야기 심상민
  2. 2. 사실, 일반적인 경우에는 개발자 2명이 플랫폼 4개를 개발하진 않습니다…
  3. 3. 프론트앤드 서버 iOS iOS 안드로이드 프론트앤드 프론트앤드 서버 서버 서버 서버 출처: 풋볼데이
  4. 4. 프론트앤드 서버 iOS iOS 안드로이드 프론트앤드 프론트앤드 서버 서버 서버 서버 출처: 풋볼데이
  5. 5. OSMU One Source Multi Use 뜻: 여러번 할 삽질을 한 번만 하는 것
  6. 6. ORMU One ReSource Multi Use 뜻: 여러명이 할 삽질을 한 명이 다 하는 것
  7. 7. 풀스택개발자저렴한 연봉의 출처: https://commons.wikimedia.org/wiki/File:Unicorn_(PSF).png
  8. 8. 우리는 자바스크립트를 선택했습니다. 그리고…
  9. 9. 어떤 프레임워크를 써볼까…
  10. 10. React
  11. 11. React를 쓰는 이유 ● 렌더링 시점을 직접 제어하지 않아도 됨 ● 그러면서도 Virtual DOM으로 성능을 확보함 ● Angular 쓰기 싫어서 ● 그리고…
  12. 12. React-Hot-Loader ● 재시작 없이 State를 유지한 상태로 변경된 코드를 반영 ● 생산성을 높이는데 굉장히 효과적 ● react + webpack + hot-loader 등이 필요 ● boilerplate 등 참고할 수 있는 예제 많음 https://github.com/gaearon/react-hot-loader
  13. 13. 하이브리드앱에도 적용할 수 있지 않을까?
  14. 14. React Hot Loader 사용 흐름 클라이언트React Hot Loader 서버 초기 클라이언트 리소스 전달 HTTP 변경사항 전달 Websocket 변경사항 감지 변경된 부분 Webpack 빌드
  15. 15. Phonegap에서 React-Hot-Loader 적용하 기 ● 실제 디바이스에서 Charles나 Fiddler 등으로 프록시 사용 ● localhost 대신 Hosts 파일 수정을 통해 개발 도메인으로 접 근 - ex) 127.0.0.1 dev.hogangnono.com ● webpack 설정에서 위의 도메인으로 모듈을 띄움
  16. 16. 두 배 빨라진 개발환경 출처: 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/
  17. 17. SPA(Single Page Application)로 만들려면 라우터가 있어야 겠다!
  18. 18. React-Router ● SPA를 만드는데 필요한 기본적인 라우터 기능을 구현 https://github.com/ReactTraining/react-router
  19. 19. React-Router ● 많은 곳에서 사용하고 있기 때문에 큰 문제는 없음 - 자잘한 문제가 있었지만 거의 해결됨 ● Phonegap에서 사용시 Hash History 방식을 사용해야함 - 예) index.html#/main ● major 버전이 변경됨에 따라 사용법이 충격적으로 바뀜 - 1년전 버전 0.13, 지금 버전 v4.0.0-alpha…
  20. 20. React만 쓰려니 허전한데… Flux 구현체가 있어야겠다!
  21. 21. Flux https://facebook.github.io/flux/
  22. 22. Alt ● 지금은 Airbnb에 있는 Josh Perez가 만든 심플한 Flux 구현 체 ● redux가 출시되지 않은 상황이었음… https://github.com/goatslacker/alt
  23. 23. Action
  24. 24. Store
  25. 25. View
  26. 26. SPA는 첫 페이지 로딩이 느리지. Server-Side Rendering을 적용해야겠다!
  27. 27. React Isomorphic ● 클라이언트의 Action, Store, Component 코드를 서버에서 사 용 ● React-Router 코드를 서버에서 불러서 라우팅 처리 ● Iso 모듈을 이용해서 클라이언트 코드로 렌더링 수행
  28. 28. 이런식으로 구현하면
  29. 29. 이렇게 보입니다. 렌더링된 HTML 연산된 Store 값
  30. 30. React Isomorphic ● 서버에서 실행할 수 없는 로직은 분기처리 해야함 - window.alert, window.confirm 등 ● Action 코드를 같이 사용하기 때문에 클라이언트와 서버에서 동시에 쓸 수 있는 XMLHTTPRequest 모듈 필요
  31. 31. http://andrewhfarmer.com/ajax-libraries/
  32. 32. React Isomorphic ● 404 페이지등 서버에서 별도의 처리가 필요한 경우 React- Router의 로직을 사용하기 전에 서버에서 따로 확인해야함
  33. 33. 참고로 현재 Airbnb에 있는 Josh Perez는 Iso를 없애 고 Alt 의존성을 제거한 Hypernova를 내놨습니다…
  34. 34. 이제 앱을 만들어봐야겠다!
  35. 35. Phonegap
  36. 36. React Native가 아니고? ● OSMU(One Source Multi Use) 불가능 ● 부족한 플러그인 - 카카오톡, Fabric, Google Analytics 등 연동할 서비스가 너무 많음 ● 네이티브라고 다 빠르고 좋진 않다는 교훈 - Titanium…
  37. 37. Phonegap으로 될까? 하이브리드앱은 퀄리티가 떨어지는데…
  38. 38. 화면B Native Page Transitions 화면A
  39. 39. 화면A 스크린샷 로딩중… Native Page Transitions
  40. 40. 화면A 스크린샷 화면B Native Page Transitions
  41. 41. Native Page Transitions ● 기본 설정으로 사용하면 타이밍이 맞지 않아 같은 페이지가 반복 호 출되는 이슈 발생 ● React-Router와 연계해서 트랜지션 타이밍을 맞춰야함 - onEnter 핸들러로 확인할 수 있음 라우팅 액션 Native Page Transition start() 라우팅 완료 Native Page Transition execute()
  42. 42. 뭔가 부족한데…
  43. 43. 더미(Dummy) 노출
  44. 44. 더미 노출 화면A 화면A
  45. 45. 더미 노출 화면B 페이지 로딩 화면B 페이지 로딩 화면A 화면A
  46. 46. 더미 노출 화면B Ajax호출… 화면A 화면A
  47. 47. 더미 노출 화면A 화면A Ajax호출
  48. 48. 더미 노출 화면A 화면A
  49. 49. 더미 노출
  50. 50. 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
  51. 51. 지원하는 플랫폼이 많아지니깐 코드가 복잡해진다…
  52. 52. 멀티플랫폼
  53. 53. 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
  54. 54. 출처: 귀귀님 웹툰
  55. 55. 그렇다고 무작정 플랫폼 별로 파일을 나누면 변경사항이 발생할 때 무조건 X 플랫폼수로 작업해야합니다…
  56. 56. 분리의 기준 ● 성격이 다른 플랫폼은 폴더를 분리 - /desktop, /mobile ● 공통적인 기능이 생길 경우 공통 폴더로 로직을 분리 - /base ● 성격이 유사한 플랫폼은 같은 파일 내에서 분기문으로 처리 - /mobile을 하이브리드앱도 같이 사용
  57. 57. 예시 /client /server /actions /stores /components app.js /desktop /mobile /base Phonegap Electron Subtree 프로젝트 Subtree 프로젝트 Platform별로 다름
  58. 58. 서버 /client /server /actions /stores /components app.js /desktop /mobile /base Phonegap Electron Subtree 프로젝트 Subtree 프로젝트 Platform별로 다름
  59. 59. 데스크탑 웹 /client /server /actions /stores /components app.js /desktop /mobile /base Phonegap Electron Subtree 프로젝트 Subtree 프로젝트 Platform별로 다름
  60. 60. 모바일 웹 /client /server /actions /stores /components app.js /desktop /mobile /base Phonegap Electron Subtree 프로젝트 Subtree 프로젝트 Platform별로 다름
  61. 61. 안드로이드, iOS /client /server /actions /stores /components app.js /desktop /mobile /base Phonegap Electron Subtree 프로젝트 Subtree 프로젝트 Platform별로 다름
  62. 62. Windows, Mac /client /server /actions /stores /components app.js /desktop /mobile /base Phonegap Electron Subtree 프로젝트 Subtree 프로젝트 Platform별로 다름
  63. 63. 정리해보죠!
  64. 64. 자바스크립트 자바 파이썬Node.js 서버-클라이언트 언어 통일
  65. 65. React Angular Backbone React-Router Alt Iso Isomorphic
  66. 66. Webpack Grunt Gulp React-Hot-Loader Phonegap 빠른 생산성, 코드 재사용
  67. 67. Native Page Transition 더미 노출 Phonegap React-Native Native App 네이티브 같은 앱
  68. 68. 이렇게 우리는 개발자 2명이 플랫폼 4+개를 빠르게 개발하고 있습니다.
  69. 69. Q&A
  70. 70. 부스에서 만나요! 감사합니다!

×