프론트엔드 개발자의 자바스크립트
TRANSCRIPT
김수호2015.05.30하드코딩하는사람들프론트엔드 개발 세미나in NAVER D2 Startup Factory
프론트엔드 개발자의 자바스크립트
발표자 소개
회사 :㈜한빛소프트소속 부서 :서비스개발팀 UI 파트
담당 업무 :하이브리드앱 개발 (HTML, CSS, JS)
이름 :김수호
당신은
웹퍼블리셔 인가요 ?
아하 !
프론트엔드 개발자 인가요 ?
그 이야기는 나중에… 이제부터 우리는
프론트엔드 개발의 범위
디자이너포토샵 등
??HTML, CSS, Javascript
웹 개발자JSP, PHP, ASP
DBA데이터베이스
Request
Response
클라이언트와 서버에 대한 이해부터 선행 되어야…
스킬트리
1. 서버 - Node.js
- 네트워크 어플리케이션 ( 특히 서버사이드 ) 개발에 사용되는 소프트웨어 플랫폼
- Non-blocking I/O 와 단일 스레드 이벤트 루프를 통한 높은 성능
- V8 자바스크립트 엔진 위에서 동작
- NPM(Node Package Manager)
var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, { 'Content-Type‘ : 'text/plain‘ }); res.end('Hello World\n'); }).listen(1337, '127.0.0.1');
1. 서버 - Node.js
- NPM(Node Package Manager)
2. 데이터베이스 - MongoDB
- 크로스플랫폼 도큐먼트 지향 데이터베이스 시스템
- NoSQL
- 오픈소스 소프트웨어
백엔드를 왜…… .!!!???
3. 클라이언트 데이터베이스WebSQL :- 관계형 데이터베이스- SQLite 기반
IndexedDB :- NoSQL- HTML5 웹표준- IE 10 이상 .. ㅠㅠ- 모바일이라면 ?
CouchDB, PouchDB :- 이런 것도 있다 .
Etc.
4. etc. for Full Stack Development
MEAN Stack Development- MongoDB : 데이터베이스- Express : 서버 프레임워크- AngularJS : 클라이언트 프레임워크- Node.js : 서버
5. 모바일 어플리케이션
하이브리드 앱의 장점 :- HTML, CSS, Javascript 로 개발- One source multi use- 나쁘지 않은 성능- 디바이스 자원 사용 ( 카메라 등 )- 개발이 쉽고 빠르다
5. 모바일 어플리케이션
하이브리드 앱의 장점 :- HTML, CSS, Javascript 로 개발- One source multi use- 나쁘지 않은 성능- 디바이스 자원 사용 ( 카메라 등 )- 개발이 쉽고 빠르다
5. 모바일 어플리케이션
하이브리드 앱의 장점 :- HTML, CSS, Javascript 로 개발- One source multi use- 나쁘지 않은 성능- 디바이스 자원 사용 ( 카메라 등 )- 개발이 쉽고 빠르다
개발자의 이상 :1 의 리소스로 2 + @ 결과iOS, Android 등등
현실 :1.5 의 리소스로 0.7 의 결과모바일 브라우저 파편화느려터진 성능
5. 모바일 어플리케이션
아키텍처이해
& 도구필요
5. 모바일 어플리케이션
개발 과정 시연
6. 스마트워치 어플리케이션
LG WebOS :
Tizen :삼성 기어 S 및 기어 fit, 1, 2 ..Tau.js 라이브러리 제공스마트 폰 및 TV, 냉장고 등의 가전https://www.youtube.com/watch?v=NCCKx6Cs2oo
LG Watch Urbane
7. 크롬 확장 프로그램
Chrome Extensions :- 크롬 웹스토어- 개발자 등록 5$
유용한 확장 프로그램 :- JSONView- ColorPick Eyedropper- 당신이 앞으로 만들 것
8. 크롬북 앱
Chrome Book :- 크롬 웹스토어 앱에서 눈치 채셨겠지만…- 크롬 OS 에서도 실행 됩니다 .
9. 3D 그래픽
WebGL :- 웹 기반의 3 차원 그래픽 라이브러리- HTML5 캔버스
9. 3D 그래픽
Three.js :- WebGL 을 위한 라이브러리
- 다양한 예제 제공
- 카메라 , 질감 , 그림자 등 3D 그래픽 활용을 위한 경험 또는 지식 필요
- http://threejs.org
9. 웹 및 모바일 게임
COCOS 2D-JS :- 2D 게임 개발 엔진 및 툴
- One source multi use
- 쿠키런 , 아이러브커피 , 다함께 퐁퐁퐁 , 제노니아 5, 모두의 마블 등 (COCOS 2D-x)
- 다양한 예제 제공
- http://www.cocos2d-x.org/- https://github.com/cocos2d/cocos2d-js
10. 하드웨어
1. 라즈베리파이2. 비글본3. 아두이노
- 저렴한 가격- 싱글 보드 컴퓨터- 괜찮은 성능- 다양한 모듈
10. 하드웨어
1. 라즈베리파이2. 비글본3. 아두이노
- 저렴한 가격- 싱글 보드 컴퓨터- 괜찮은 성능- 다양한 모듈
Node.js 를 올린다면 ?
10. 하드웨어
- https://www.youtube.com/watch?v=wwOrjPfsNV4
- https://github.com/felixge/node-ar-drone
- https://www.youtube.com/watch?v=ObJEnZKagbY
10. 하드웨어
- https://www.youtube.com/watch?v=wwOrjPfsNV4
- https://www.youtube.com/watch?v=ObJEnZKagbY
11. 3D 모션 제스처 컨트롤
Leap Motion :https://www.leapmotion.com/https://www.youtube.com/watch?v=_d6KuiuteIA
Myo :https://www.thalmic.com/en/myo/https://www.youtube.com/watch?v=oWu9TFJjHaMhttps://github.com/logotype
12. 가상현실
Oculus Rift :https://www.youtube.com/watch?v=db-7J5OaSag
WebVR :http://webvr.info/
Chrome Experiments for VR :http://webvr.info/
13. Universal Windows Apps
14
15 1617
18
15. PC 용 어플리케이션
NW (Node Webkit): Linux, Windows, Mac
https://github.com/nwjs/nw.js/
UWA :
Universal Windows Apps
16. 콘솔 게임
Xbox One
https://www.youtube.com/watch?v=sOhBfoLKE7M
17. 칠판 (?)
Surface Hub
https://www.youtube.com/watch?v=FRLDRQePY1o
https://www.microsoft.com/microsoft-surface-hub/en-us
18. 증강현실
홀로렌즈 :https://www.microsoft.com/microsoft-hololens/en-us
https://www.youtube.com/watch?v=aThCr0PsyuA
물론 중요하다
- 웹 표준- 시멘틱 마크업- 반응형 웹- 접근성- 크로스 브라우징- SEO ..
우리의 미래는 ?
or
위기이자 기회
우리는 누구인가 ?
웹퍼블리셔 ?
UI 개발자 ?
프론트엔드 개발자 ?
분명한 건
HTML, CSS, Javascript
… 라는 전문기술로 밥벌이를 한다 .
김수호2015.05.30하드코딩하는사람들프론트엔드 개발 세미나in NAVER D2 Startup Factory
프론트엔드 개발자의 자바스크립트
자바스크립트를 주 언어로 하는
세상을 이롭게 만들고 싶은
개발자의
서버 , 데이터베이스모바일 디바이스스마트워치 , 웨어러블브라우저 플러그인
프론트엔드크롬북 , 드론 ,3D 그래픽 , IOT게임 , 하드웨어모션 제스처PC 응용 프로그램콘솔 , 셋톱 박스증강현실 , 가상현실
김수호2015.05.30하드코딩하는사람들프론트엔드 개발 세미나in NAVER D2 Startup Factory