유튜브에서 발표영상을 확인할수있습니다. https://www.youtube.com/watch?v=bwNoh-kdgQA&t=403s html css3 javascript 2017년 프론트엔드 개발자 web, 하이브리드앱 자바스크립트 전망 노매드 커넥션 사내발표 자료 정경환

1. 프론트엔드 개발자
CSS3 HTML5 JS

2. 전부다 하기는 힘들어서 ….
발표는 자바스크립트만 하겠습
니다.
Html5 - webrtc, service work, web push, canvas, indexedDB,
webGL …
CSS3 - sass, less, postCSS …
http://ko.y8.com/games/grandpa_run_3d
그래도 데모한개씩 보시
죠
https://webdesign.tutsplus.com/articles/15-inspiring-examples-of-css-animation-on-
codepen--cms-23937

3. 구글에 개발자 검색하면 첫번째로 나오는 사진
모든걸 한번에 말해주는 사진

4. 개발자가 보면 암걸리는 영상
https://www.youtube.com/watch?v=i0pkKABS-YY

5. 존재하지 않는걸 요구합니다.
이런건 세상에 없는거에요.
존재하지 않는걸 요구하시니까
이런 아이템이 팔립니다.

6. 그래도 어떻게 안될까 ?
고민1 : 빠른 개발으로 야근을 피하자.
고민2 : 빠르게 개발하지만 퀄리티도 높이자.
고민3 : 전에 만든거 쉽게 다른곳에 쓰고 싶다.
고민4 : 내가 다시 봐도 이해되는 코드를 만들고 싶다.
고민5 : 남이 만든 좋은거 쉽게 쓰고 싶다.
고민6 : 가볍고 빠른 멋진 앱을 만들고 싶다.
고민7 : 1개 코드로 여러 플랫폼에 서비스하고 싶다.

7. 수많은 자바스크립트(frame work)
뭘써야되나요?

8. Layout Speed
https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/
레이아웃 잡는
데 걸리는 속도

9. Paint Speed
https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/
화면 그리는데
걸리는 속도

10. Frame Per Sec Speed
https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/
1초당 몇번까지
프레임이 바뀌
는지

11. Javascript Speed
https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/
자바스크립트
실행속도

12. React 빨라서 좋네요
최근 angular2도
react속도 거의
따라왔다네요.
^^

13. React를 배워봅시다.
https://facebook.github.io/react/
서술적 컴포넌트기반 한번 배우면 어디서
든 사용

14. React 최신 예제는 모두 ES6
http://www.ecma-international.org/publications/standards/Ecma-262.htm
이걸 알아야 쓸수있습니다.

15. 현실은 ... es6문법은 아직 browser에서 지원중에 있습니
다.
어떻게 해야되나요 ?

16. ES6문법을 ES5으로 변환하는 compiler
https://babeljs.io/
이것도 알아야 쓸수있습니다.

17. Babel 한개면 될줄알았는데 ...
https://babeljs.io/docs/plugins/
뭐 이리 많은지 ...

18. NPM ! node package module
https://nodejs.org/ko/
자바스크립트는 npm으로 의존성관리 npm은 node.js를 설치하면 자동 설치됩니
다.

19. 모듈이 너무 많은데 ..
https://webpack.github.io/
module bundler로 합쳐 몇개만
로드하면 끝

20. 코딩은 언제부터 하는거죠 ?
조금 더있어요…..

21. Data Flow
여기에 모듈이 몇개가
더 붙는다고 생각해보
세요 .
지옥이 펼쳐집니다.

22. Redux Data flow
so sample
https://github.com/reactjs/redux

23. 넘나 많은 HTML
복잡하고 관리도 안
됩니다.

24. 대세는 SPA (single page application)
https://github.com/ReactTraining/react-router

25. SPA를 지원하는 React Router
https://github.com/ReactTraining/react-router

26. MVC 아키텍트? NO! MVVM 아키텍트
https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel
프런트엔드도 아키텍트가 필
요합니다.

27. MVVM
더 쉬운 그림을 가저왔습니다.
React는 1-way Binding입니
다.

28. 2016년에 자바스크립트를 배우는 기분
http://www.looah.com/article/view/2054

29. 하다보니...
https://stackshare.io/sujkh85/my-stack 링크 클릭

30. 프로젝트할때 모두 개발해야되나요 ?
https://github.com/brillout/awesome-react-components
https://www.material-ui.com/
갔다가 써야죠 !

31. 개발환경 세팅 이걸로하세요 ! (제가 만들었습니다.)
https://github.com/sujkh85/react-router-webpack-babel-redux
세팅의 귀찮음을 날립니다.
모르는 사람에게 처음 별받은 오픈소스!
사용하시면 별점 부탁드립니다.
링크 클릭

32. node.js / git은 설치되었다고 가정하겠습니다.
git clone https://github.com/sujkh85/react-router-webpack-babel-
redux.git
cd react-router-webpack-babel-redux
npm i
npm run start
환경설정한 데모 잠깐 볼까요 ?

33. 여기까지 오는데 힘들었는데 어떤걸 할수있나요?

34. 자바스크립트로 할수있는 일

35. PC앱, 폰앱, web 개발 모두 가능!
PC PHONE BROWSER

36. PC App Framework
https://electron.atom.io
리눅스 맥 윈도우에서 프로그램을 만들수있습니다.
node.js + chromium + v8

37. 비교 비교할수 없을정도로 electron 압
승

38. https://electron.atom.io/
좋은 기능들이 생기고 있습니다.
버그 제보하여 기여한 프로젝트 !!
별이 43000개 !!!
CallSync도 이걸로 만들었죠

39. Electron App 일렉트론으로 만든 앱 너무 많아서 전부 소개를 못해드립
니다.

40. App Framework
안드로이드 ios앱을 동시에 만들수있습니다.
최근에 react native기반으로 만들어진
Expo
cordova위에 만들어진 ionic (angular2문법)

41. 비교 비슷하지만 ionic이 1위

42. Ionic이 핫한 이유
ios android window 한방에 처리
https://ionicframework.com/docs/v2/components/#overview
각 os 기본 UI 모두 지
원
링크 클릭

43. Cordova !
ionic도 cordova없으면 무용지물
os api 호출가능
심플한 설치방법
ionic은 앵귤러2해야되지만
cordova는 자바스크립트라 아무
거나 쓸수있습니다.!

44. cordova+react 오픈소스도 만들어보았습니다.
https://github.com/sujkh85/react-cordova
다음 프로젝트에서 쓸까해서 만들었습니
다.
react에서 기본으로 쓰는 모든 컴포넌트를 넣어두었
습니다.
명령어 몇개로 build후 시뮬레이터로 바로 볼수있습
니다.
study web 데모

45. A React Native app is a real mobile app

46. React Native 장점
1. React 문법과 매우 유사합니다.
2. 네이티브 답게 웹앱에 비해 속도가 빠릅니다.
3. javascript로 코딩가능합니다.
4. 안드로이드, IOS 코드가 80%정도 똑같습니다.
5. javascript 모듈 사용가능 합니다.

47. React Native 단점
1. 익숙하지 않으면 세팅이 어렵습니다.
2. ios android react등 알아야 되기 때문에 러닝 코스트가 듭
니다.
3. 조금의 오타만 있으면 퍽퍽 죽어나갑니다.
4. 가장 최신버전은 지원되지 않습니다.(android v7.0 지미원)

48. React Native에 꼭 필요한 모듈
"node-fetch": "^1.6.3",
"react": "15.4.2",
"react-native": "0.42.3",
"react-native-router-flux": "^3.38.0",
"react-redux": "^5.0.3",
"redux": "^3.6.0",
"redux-logger": "^2.10.1",
"redux-thunk": "^2.2.0",
"babel-preset-react-native": "1.9.1",
"jest": "19.0.2",
"react-test-renderer": "15.4.2"
web에서 사용되는것과 비슷합니다.

49. React Native 컴포넌트도
https://github.com/jondot/awesome-react-native
갔다가 써야죠 !

50. React-Native-Boilerplate
https://github.com/sujkh85/react-native-boilerplate
별점 찍어주세요...
굽신굽신
현재 별이 0개 입니다.ㅋㅋㅋㅋㅋㅋㅋ
reading demo
제가 만든 즉시 개발할수 있게 세팅한 오픈소스입
니다.

51. https://fossbytes.com/best-popular-programming-languages-2017/
웹 개발자가 아니더라도 소프트웨어 개발에 어떤 식으로든 참여하고 있다면,
최근 몇 년간 JavaScript의 진화는 물론 JavaScript가 세상을 집어삼키고 있다
는 사실도 아마 잘 알 것이다.
http://www.zdnet.co.kr/news/news_view.asp?artice_id=20161207152723
웹 요소들이 웹브라우저에서 독립
선언
http://www.kdnuggets.com/2016/06/top-machine-learning-libraries-javascript.html
자바스크립트 머신러
닝 자바스크립트 백엔
드
http://d2.naver.com/helloworld/3618177
인기 좋은 언어 성장률1위

52. https://http2.github.io/
빨라진다고 하네
요.

53. 드디어 발표가 끝났습니다.
사진의 주인공은 친구 개발자 입
니다.
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

55. 발표자
회사 : 노매드 커넥션
이름 : 정경환
email : wjdrughks85@gmail.com
github : https://github.com/sujkh85
stackoverflow : http://stackoverflow.com/users/5133386/kyunghwanjung
stackshare : https://stackshare.io/sujkh85/my-stack