프론트엔드 개발자의 자바스크립트

김수호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

14. IOT

Windows IOT:https://dev.windows.com/en-US/iot

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