프론트엔드개발자CSS3 HTML5 JS

…전부다하기는힘들어서 .

발표는자바스크립트만하겠습니다 .

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

구글에개발자검색하면첫번째로나오는사진

모든걸한번에말해주는사진

개발자가보면암걸리는영상

https://www.youtube.com/watch?v=i0pkKABS-YY

존재하지않는걸요구합니다 . 이런건세상에없는거에요 .

존재하지않는걸요구하시니까

이런아이템이팔립니다 .

그래도어떻게안될까 ?

고민 1 : 빠른개발으로야근을피하자 .

고민 2 : 빠르게개발하지만퀄리티도높이자 .

고민 3 : 전에만든거쉽게다른곳에쓰고싶다 .

고민 4 : 내가다시봐도이해되는코드를만들고싶다 .

고민 5 : 남이만든좋은거쉽게쓰고싶다 .

고민 6 : 가볍고빠른멋진앱을만들고싶다 .

고민 7 : 1 개코드로여러플랫폼에서비스하고싶다 .

수많은자바스크립트 (frame work)

뭘써야되나요 ?

Layout Speed

https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/

레이아웃 잡는데걸리는

속도

Paint Speed

https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/

화면그리는데 걸리는속도

Frame Per Sec Speed

https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/

1 초당몇번까지 프레임이

바뀌는지

Javascript Speed

https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/

자바스크립트실행속도

React 빨라서좋네요

최근 angular2 도 react 속도

거의따라왔다네요 . ^^

React 를배워봅시다 .

https://facebook.github.io/react/

서술적 컴포넌트기반 한번배우면 어디서든사용

React 최신예제는모두 ES6

http://www.ecma-international.org/publications/standards/Ecma-262.htm

이걸알아야쓸수있습니다 .

현실은 ... es6 문법은아직 browser 에서지원중에있습니다 .

어떻게해야되나요 ?

ES6 문법을 ES5 으로변환하는 compiler

https://babeljs.io/ 이것도알아야쓸수있습니다 .

Babel 한개면될줄알았는데 ...

https://babeljs.io/docs/plugins/ 뭐이리많은지 ...

NPM ! node package module

https://nodejs.org/ko/

자바스크립트는 npm 으로의존성관리 npm 은 node.js 를설치하면자동설치됩니다 .

모듈이너무많은데 ..

https://webpack.github.io/module bundler 로합쳐몇개만

로드하면끝

코딩은언제부터하는거죠 ?

…조금더있어요 ..

Data Flow

여기에모듈이몇개가 더붙는다고

생각해보세요 . 지옥이펼쳐집니다 .

Redux Data flow

so sample

https://github.com/reactjs/redux

넘나많은 HTML

복잡하고관리도안됩니다 .

대세는 SPA (single page application)

https://github.com/ReactTraining/react-router

SPA 를지원하는 React Router

https://github.com/ReactTraining/react-router

MVC 아키텍트 ? NO! MVVM 아키텍트

https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel

프런트엔드도아키텍트가필요합니다 .

MVVM

더쉬운그림을가저왔습니다 .

React 는 1-way Binding입니다 .

2016 년에자바스크립트를배우는기분

http://www.looah.com/article/view/2054

하다보니 ...

https://stackshare.io/sujkh85/my-stack 링크클릭

프로젝트할때모두개발해야되나요 ?

https://github.com/brillout/awesome-react-componentshttps://www.material-ui.com/

갔다가써야죠 !

개발환경세팅이걸로하세요 ! ( 제가만들었습니다 .)

https://github.com/sujkh85/react-router-webpack-babel-redux

세팅의귀찮음을날립니다 .

모르는사람에게처음별받은오픈소스 !

사용하시면별점부탁드립니다 .

링크클릭

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

환경설정한데모잠깐볼까요 ?

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

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

PC앱 , 폰앱 , web 개발모두가능 !

PC PHONE BROWSER

PC App Framework

https://electron.atom.io

리눅스맥윈도우에서프로그램을만들수있습니다 .

node.js + chromium + v8

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

https://electron.atom.io/

좋은기능들이생기고있습니다 .

버그제보하여기여한프로젝트 !! 별이 43000 개 !!!

CallSync 도이걸로만들었죠

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

App Framework

안드로이드 ios 앱을동시에만들수있습니다 .

최근에 react native 기반으로만들어진Expo

cordova 위에만들어진 ionic (angular2문법 )

비교 비슷하지만 ionic 이 1위

Ionic 이핫한이유ios android window 한방에처리

https://ionicframework.com/docs/v2/components/#overview

각 os 기본 UI 모두지원

링크클릭

Cordova !ionic 도 cordova 없으면무용지물

os api 호출가능

심플한설치방법

ionic 은앵귤러 2 해야되지만cordova 는자바스크립트라

아무거나쓸수있습니다 .!

cordova+react 오픈소스도만들어보았습니다 .

https://github.com/sujkh85/react-cordova

다음프로젝트에서쓸까해서만들었습니다 .

react 에서기본으로쓰는모든컴포넌트를넣어두었습니다 .

명령어몇개로 build 후시뮬레이터로바로볼수있습니다 .

study web 데모

A React Native app is a real mobile app

React Native 장점

1. React 문법과 매우유사합니다 .

2. 네이티브 답게웹앱에비해속도가빠릅니다 .

3. javascript 로코딩가능합니다 .

4. 안드로이드 , IOS 코드가 80% 정도똑같습니다 .

5. javascript 모듈사용가능합니다 .

6. 디버깅도크롬개발자도구로가능합니다 .

React Native 단점

1. 익숙하지않으면세팅이어렵습니다 .

2. ios android react 등알아야되기때문에러닝코스트가

듭니다 .

3. 조금의오타만있으면퍽퍽 죽어나갑니다 .

4. 가장최신버전은지원되지않습니다 .(android v7.0 지미

원 )

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 에서사용되는것과비슷합니다 .

React Native 컴포넌트도

https://github.com/jondot/awesome-react-native

갔다가써야죠 !

React-Native-Boilerplate

https://github.com/sujkh85/react-native-boilerplate

별점찍어주세요 ...

굽신굽신

현재별이 0 개입니다 . ㅋㅋㅋㅋㅋㅋㅋ

reading demo

제가만든즉시개발할수있게세팅한오픈소스입니다 .

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위

https://http2.github.io/ 빨라진다고

하네요 .

드디어발표가끝났습니다 .

사진의주인공은친구개발자입니다 .ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

발표자

회사 : 노매드커넥션

이름 : 정경환

email : wjdrughks85@gmail.com

github : https://github.com/sujkh85

stackoverflow : http://stackoverflow.com/users/5133386/kyunghwanjung

stackshare : https://stackshare.io/sujkh85/my-stack