Node.js 101 for Student

Node

Transcript

1. Node.js 101 Out of browser, not only for web application but also using everywhere 1
2. Jimmy Moon ( 문현경, @ragingwnd) KOSSLAB 2기 Google Developer Expert Yeoman 등 node/webapp 오픈소스 코어 멤버 2
3. Understanding Node(.js) 공식적으로는 Node(node), 단어 혼동을 피하기 위해 Node.js V8 엔진( 당분간) 을 사용하는 그래서 Javascript 을 주언어로 사용 ( 비교적) 가볍고, 빠르며, 다양한 환경에서 동작하는 프레임워크 비동기(Asynchronous) I/O via libuv 이벤트- 드리븐(Event-driven) 그리고 넌블럭킹(Non-Blocking) I/O 엄청나게 활발한 커뮤니티의 은혜. Node 파운데이션과 NPM Packages 3
4. V8 Javascript Engine 기존 대비 월등한 성능을 보여주는 Javascript 엔진( 인터프린터) 독립적으로 구현되어 다른 프로젝트와 결합 가능. Node.js, MongoDB, Electron 등 V8 엔진 업데이트와 함께 Javascript 의 여러가지 기능 추가. ES2015 추가 스펙 (ECMAScript 2015 stage-x) 2017 년 여러 엔진 사용가능 예상. ( 마이크로소프트 Edge 브라우저의 ChakraCore) 4
5. High-performance for Low Resource Consumer ( 소시적에) 비교적 빠른 성능 보여줌 적은 리소스 사용 싱글 쓰레드에서 초당 수만건의 데이터 처리 만명 이상의 동시접속자 처리 가능 ( 라이트패킷) 다양한 ( 비교적 저사향) IoT 모듈에 임베디드 V8 와 node 를 위한 내장 / 외장 프로파일러 제공 5
6. Asynchronous I/O via libuv 싱글 쓰레드에서 고성능 I/O 보장 멀티 플랫폼에서 안정적인 비동기 I/O 지원 node 이벤트 루프의 유니콘 6
7. Event Loop for Event-driven APIs and Non-blocking I/O Morning Keynote - Everything You Need to Know About Node.js Event Loop - Bert Belder 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. Event Loop s e t I m m e d i a t e ( ( ) = > c o n s o l e . l o g ( " 1 " ) ) ; s e t T i m e o u t ( ( ) = > c o n s o l e . l o g ( " 2 " ) , 0 ) ; P r o m i s e . r e s o l v e ( ) . t h e n ( ( ) = > c o n s o l e . l o g ( ' 3 ' ) ) ; s e t T i m e o u t ( ( ) = > c o n s o l e . l o g ( " 4 " ) , 0 ) ; ( ( ) = > c o n s o l e . l o g ( ' 5 ' ) ) ( ) ; P r o m i s e . r e s o l v e ( ) . t h e n ( ( ) = > c o n s o l e . l o g ( ' 6 ' ) ) ; p r o c e s s . o n ( ' b e f o r e E x i t ' , ( ) = > { c o n s o l e . l o g ( ' 7 ' ) ; } ) ; Question?: 이벤트 일어나는 순서를 추측해보세요 1: 3 5 6 1 2 4 7 2: 5 3 6 1 2 4 7 3: 3 5 6 2 4 1 7 4: 5 3 6 2 4 1 7 16
17. Open Source, Amazing Communities for Node 17
18. 18
19. How many packages are downloaded? A BILLION 19
20. Getting Started Node Node 6.9.x LTS 버전 기준 https://github.com/nodejs/LTS#lts_schedule NVM 을 사용한 Node 설치 Node 프로젝트 생성과 NPM 사용 기본 사용법 모듈 (module) 로딩 이벤트 처리: 콜백(Callback), 프라미스(Promise) 핸들링 에러, 예외(Exception) 처리 기본 API 사용법: Net / HTTP / File System / Stream 20
21. Installing Node with NVM # g e t v e r s i o n s c a n b e i n s t a l l a b l e n v m l s - r e m o t e # i n s t a l l n o d e n v m i n s t a l l v 6 . 9 . 1 n v m i n s t a l l - - l t s # g e t v e r s i o n s i n s t a l l e d n v m l s # u s e a v e r s i o n n v m u s e v 6 . 9 . 1 21
22. Setting up Projects by NPM / yarn 대부분의 프로젝트는 여러 패키지를 설치해서 사용. 그 정보들을 package.json 에 저장 # i n i t p r o j e c t y a r n i n i t o r n p m i n i t # i n s t a l l p a c k a g e s o f t h e p r o j e c t y a r n i n s t a l l o r n p m i n s t a l l # i n s t a l l n e w p a c k a g e t o d e p e d e n c i e s y a r n a d d P A C K A G E _ N A M E o r n p m i n s t a l l — s a v e P A C K A G E _ N A M E # i n s t a l l n e w p a c k a g e t o d e v d e p e d e n c i e s y a r n a d d - - d e v P A C K A G E _ N A M E o r n p m i n s t a l l — s a v e - d e v P A C K A G E _ N A M E # r u n s c r i p t s y a r n s t a r t o r n p m s t a r t y a r n t e s t o r n p m t e s t y a r n r u n m y - c o m m a n d o r n p m r u n m y - c o m m a n d 22
23. Module Importing(loading) / / i n t e r n a l m o d u l e c o n s t f s = r e q u i r e ( ' f s ' ) ; / / i n s t a l l e d m o d u l e a t n o d e _ m o d u l e s c o n s t l i b = r e q u i r e ( ' l i b ' ) ; / / u s e r m o d u l e c o n s t f o o = r e q u i r e ( ' . / f o o ' ) ; / / d e s t r u c t u r i n g i n E S 2 0 1 5 c o n s t { a p p } = r e q u i r e ( ' e l e c t r o n ' ) ; / / i n a w a y o f E S 2 0 1 5 , n o t y e t l a n d i n g , u s i n g t r a n s f i l e r l i k e b a b e l . j s c o n s t e l e c t r o n , { a p p } i m p o r t ' e l e c t r o n ' ; 23
24. Module Exporting / / l e g a c y , u s i n g n o d e ' s m o d u l e s s y s t e m m o d u l e . e x p o r t s = f u n c t i o n l i b ( ) { r e t u r n ' e x p o r t e d ' ; } / / E S 2 0 1 5 , n o t y e t l a n d i n g , u s i n g t r a n s f i l e r l i k e b a b e l . j s e x p o r t d e f a u l t f u n c t i o n l i b ( ) { r e t u r n ' e x p o r t e d i n a n e w w a y ' ; } 24
25. Event / Error Handling with Callback Callback 은 node 의 low-level APIs 에서 기본으로 사용되는 방법 Error First Callback c o n s t f s = r e q u i r e ( ' f s ' ) ; f s . s t a t ( ' . ' , ( e r r , s t a t s ) = > { i f ( e r r ) { c o n s o l e . l o g ( e r r ) ; r e t u r n ; } c o n s o l e . l o g ( s t a t s ) ; } ) ; 25
26. Event / Error Handling with Promise c o n s t f s = r e q u i r e ( ' f s ' ) ; f u n c t i o n f s S t a t P r o m i s e ( p a t h ) { r e t u r n n e w P r o m i s e ( ( r e s o l v e , r e j e c t ) = > { f s . s t a t ( p a t h , ( e r r , s t a t s ) = > { i f ( e r r ) { r e s j e c t ( e r r ) ; } r e s o l v e ( s t a t s ) ; } ) ; } ) ; } f s S t a t P r o m i s e ( ' . ' ) . t h e n ( s t a t s = > { c o n s o l e . l o g ( s t a t s ) ; } ) . c a t c h ( e r r = > { c o n s o l e . l o g ( e r r ) ; } ) ; 26
27. Custom Event Class with EventEmitter c o n s t E v e n t E m i t t e r = r e q u i r e ( ' e v e n t s ' ) ; c l a s s H T T P 3 e x t e n d s E v e n t E m i t t e r { r e q u e s t ( m s g ) { i f ( ! m s g ) { t h i s . e m i t ( ' r e q u e s t ' , n e w E r r o r ( ' n o m e s s a g e ' ) ) ; r e t u r n ; } t h i s . e m i t ( ' r e q u e s t ' , n u l l , m s g ) ; } } c o n s t h t t p 3 = n e w H T T P 3 ( ) ; h t t p 3 . o n ( ' r e q u e s t ' , ( e r r , m s g ) = > { i f ( e r r ) { t h r o w e r r ; } c o n s o l e . l o g ( ' d o n e w i t h ' , m s g ) ; } ) ; h t t p 3 . r e q u e s t ( ' m s g ' ) ; h t t p 3 . r e q u e s t ( ) ; / / w i l l c a u s e e r r o r 27
28. Protips: Promisify a callback-style function Install y a r n a d d - - d e v p i f y How to use c o n s t f s = r e q u i r e ( ' f s ' ) ; c o n s t p i f y = r e q u i r e ( ' p i f y ' ) ; c o n s t f s p = p i f y ( f s ) ; f s p . s t a t ( ' . ' ) . t h e n ( s t a t s = > { c o n s o l e . l o g ( s t a t s ) ; } ) . c a t c h ( e r r = > { c o n s o l e . e r r o r ( e r r ) ; } ) ; 28
29. Node APIs Using Exmples Net: Echo Server using TCP and telnet HTTP: Very simple http server. Say Hello! Stream: Using stream in practice 29
30. Net: Echo Server using TCP and telnet c o n s t n e t = r e q u i r e ( ' n e t ' ) ; c o n s t s e r v e r = n e t . c r e a t e S e r v e r ( s = > { c o n s o l e . l o g ( ' c l i e n t c o n n e c t e d ' ) ; / / h a n d l e c l o s i n g c o n n e c t i o n s . o n ( ' e n d ' , ( ) = > { c o n s o l e . l o g ( ' c l i e n t d i s c o n n e c t e d ' ) ; } ) ; / / w r i t e w e l c o m e m e s s a g e s . w r i t e ( ' h e l l o \ n \ n ' ) ; / / e c h o m e s s a g e c o m e f r o m c l i e n t s . p i p e ( s ) ; } ) . o n ( ' e r r o r ' , e r r = > { t h r o w e r r ; } ) ; / / t o c o n n e c t , t e l n e t 0 . 0 . 0 . 0 8 0 8 0 s e r v e r . l i s t e n ( { p o r t : 8 0 8 0 } , ( ) = > { c o n s o l e . l o g ( ' S e r v e r h a s b e e n s t a r t e d ' , s e r v e r . a d d r e s s ( ) ) ; } ) ; 30
31. HTTP: Very simple http server. Say Hello! c o n s t h t t p = r e q u i r e ( ' h t t p ' ) ; c o n s t i n d e x H T M L = ` < h t m l > < h e a d > < / h e a d > < b o d y > < d i v > H e l l o < / d i v > < / b o d y > < / h t m l > ` ; c o n s t s e r v e r = h t t p . c r e a t e S e r v e r ( ( r e q , r e s ) = > { r e s . w r i t e H e a d ( 2 0 0 , { ' C o n t e n t - T y p e ' : ' t e x t / h t m l ' } ) ; r e s . e n d ( i n d e x H T M L ) ; } ) ; s e r v e r . o n ( ' c l i e n t E r r o r ' , ( e r r , s ) = > { s o c k e t . e n d ( ' H T T P / 1 . 1 4 0 0 B a d R e q u e s t \ r \ n \ r \ n ' ) ; } ) ; / / t o v i e w , t y p e l o c a l h o s t : 8 0 8 0 o n w e b b r o w s e r o r c u r l 0 . 0 . 0 . 0 : 8 0 8 0 s e r v e r . l i s t e n ( 8 0 8 0 , ( ) = > { c o n s o l e . l o g ( ' S e r v e r h a s b e e n s t a r t e d ' , s e r v e r . a d d r e s s ( ) ) ; } ) ; 31
32. Stream node 에서 기본적( 비동기적) 으로 데이터를 주고 받는 방법 대용량 파일이나 네트웍에서 들어오는 데이터(Stream) 를 처리하기 용이 TCP, HTTP requests / responses fs write, zlib, crypto, streams process.stdout, process.stderr, child process stdin Readable, Writable, Duplex/Transform (both readable and writable) 32
33. Stream: Transform 기본적으로 사용하는 Stream, Duples (Readable / Writable) pipe() 를 한 연결처리(pipelining) 하지만 사용하기 구현하기 다소 귀찮음 v a r s t r e a m = r e q u i r e ( ' s t r e a m ' ) ; v a r l i n e r = n e w s t r e a m . T r a n s f o r m ( { o b j e c t M o d e : t r u e } ) ; l i n e r . _ t r a n s f o r m = f u n c t i o n ( c h u n k , e n c o d i n g , d o n e ) { / / a f t e r p r o c e s s i n g d o n e ( ) } ; 33
34. Protips: through2 실제 많은 node 모듈에서 사용 읽기 - 포스트 프로세싱1 - 포스트 프로세싱2 - 쓰기 형태의 연결처리 가능 f s . c r e a t e R e a d S t r e a m ( ' b i g f i l e . t x t ' ) / / p i p e t o p o s t p r o c e s s 1 . p i p e ( t h r o u g h 2 ( f u n c t i o n ( c h u n k , e n c , d o n e ) { c h u n k = p r o c e s s ( c h u n k ) ; t h i s . p u s h ( c h u n k ) ; / / p i p e t o n e x t s t r e a m d o n e ( ) ; } ) ) / / p i p e t o w r i t e s t r e a m . p i p e ( f s . c r e a t e W r i t e S t r e a m ( ' o u t . t x t ' ) ) . o n ( ' f i n i s h ' , f u n c t i o n ( ) { d o S o m e t h i n g S p e c i a l ( ) ; } ) ; 34
35. 35% Node Packages node 의 시작과 끝은 npm (with cli) 수십가지의 도구들이 npm 으로 제공 신망있고 유지보수(contribution)가 잘 되고 사용자가 많은(like) 모듈을 사용 Javascript 개발을 위한 도구(shell script) 도 Javascript 로 개발 35
36. 35% Shell Script with Node # ! / u s r / b i n / e n v n o d e / / p a r s e a r g u m e n t a n d o p t i o n s c o n s t a r g v = p r o c e s s . a r g v . s l i c e ( 2 ) ; d o _ w o r k ( a r g v ) ; / / o p t i o n a l , i f n o j o b i n t a s k / / p r e v e n t t o p r o c e s s e x i t i m m e d i a t e l y p r o c e s s . s t d i n . r e s u m e ( ) ; 36
37. 35% Publishing Your Node Package for All 누구든지, 어떤 node package 든 publish 가능. 대박나거나 꾸준하다면 랭킹도 재사용성이 높거나 유용한 모듈, 도구들을 제작 배포할 수 있는 플랫폼 압도적 숫자의 패키지, 자유스러운 리인벤트- 휠(YAFS) 문화 37
38. 35% Making your first npm package 준비물: github 계정과 리퍼지토리, npm 개발자 등록 # m a k i n g d i r e c t o r y m k d i r [ Y O U R I D ] & & c d [ Y O U R I D ] # c r e a t a n d c o d e u p a t i n d e x . j s t o u c h i n d e x . j s & & t o u c h t e s t . j s # i n i t p r o j e c t a n d i n p u t ` p a c k a g e n a m e ` , ` m a i n ` , g i t a d d r e s s , a n d m o r e n p m i n i t # g i t i n i t , c o m m i t a n d p u s h g i t i n i t & & g i t r e m o t e a d d o r i g i n [ Y O U R - R E P O ] g i t a d d - A & & g i t c o m m i t - a - m ' i n i t ' & & g i t p u s h o r i g i n m a s t e r # p u b l i s h ( o r v e r s i o n u p ) n p m p u b l i s h 38
39. 35% Protips: Yeoman generator-nm # I n s t a l l w i t h y e o m a n n p m i n s t a l l - - g y o g e n e r a t o r - n m # S c a f f o l d i n g n o d e m o d u l e w i t h c l i o p t i o n y o n m - - c l i 39
40. Node for Web Applications express.js: HTTP server for serving static file serving and response socket.io: Connection-oriented chat service on browser via WebSocket Tooling for web application client 40
41. Fast, unopinionated, minimalist web framework for node. 사실상 표준(defacto) 웹서버 Node.js Foundation 프로젝트로 편입 기본적인 웹서버 기능에 충실 라우팅(routing), HTTP 헬퍼 APIs, Static file 서빙 에러처리, DB 처리등 미들웨어(Middleware) 를 사용하여 기능확장에 용이 그 외로, Koa, Next.js, Loopback 41
42. Install as a package y a r n a d d - - d e v e x p r e s s 42
43. Basic routing a p p . M E T H O D S [ g e t | p o s t | p u t | d e l e t e ] ( ' / ' , ( r e q , r e s ) = > { r e s . s e n d ( ' r o u t i n g / ' ) ; } ) ; Static file a p p . u s e ( ' / s t a t i c ' , e x p r e s s . s t a t i c ( p a t h . j o i n ( _ _ d i r n a m e , ' p u b l i c ' ) ) ) ; 43
44. Route paths / / ? , + , * , a n d ( ) a r e s u b s e t s o f t h e i r r e g u l a r e x p r e s s i o n c o u n t e r p a r t s a p p . g e t ( / @ . * / , ( r e q , r e s ) = > { r e s . s e n d ( r e q . o r i g i n a l U r l . r e p l a c e ( / ^ \ / @ / , ' ' ) ) ; } ) ; / / r o u t e w i t h p a r a m s t o g e t u s e r i n f o a p p . g e t ( ' / u s e r s / : u s e r I d ' , ( r e q , r e s ) = > { r e s . s e n d ( r e q . p a r a m s ) ; } ) ; 44
45. Route module, 별도의 미들웨어와 모듈 단위로 라우트 관리 가능 c o n s t r o u t e r = e x p r e s s . R o u t e r ( ) ; / / m i d d l e w a r e t h a t i s s p e c i f i c t o t h i s r o u t e r r o u t e r . u s e ( ( r e q , r e s , n e x t ) = > { c o n s o l e . l o g ( ` [ L O G : $ { D a t e . n o w ( ) } ] : $ { r e q . o r i g i n a l U r l } ` ) ; n e x t ( ) ; } ) ; r o u t e r . g e t ( ' / u s e r s / : u s e r I d ' , ( r e q , r e s ) = > { r e s . s e n d ( r e q . p a r a m s ) ; } ) ; m o d u l e . e x p o r t s = r o u t e r ; 45
46. Express application generator Install to global n p m i n s t a l l - g e x p r e s s - g e n e r a t o r Create a project e x p r e s s - - v i e w = j a d e m y a p p 46
47. WebSocket 프로토콜의 node 구현체, node 활성화에 큰 기여 WebSocket? HTTP 를 이용하는 (handsaking) 연결지향적인(TCP) 이며 양방향 커뮤니케이션(Full-duplex) 이 가능한 프로토콜 웹서버, 브라우저에서 이용가능 실시간 커뮤니케이션에 사용. 채팅, 알림등 Install: y a r n a d d - - d e v s o c k e t . i o 47
48. Tooling for Web Application Client 웹앱 클라이언트의 개발 워크플로우(Workflow) 를 관리 Scaffolding: Boilerplate code, files for projects Building: Compile, transform, transpiler, bundling, packaging Deploying: Automatic deployment Testing: Lint, TDD, End to End 개발 과정의 반복과 지루함을 제거해서 개발 퍼포먼스 향상 ( 별만큼) 많은 도구들이 개발되고 사용되고 다시 대체되어짐 트렌드는 계속 변화중 48
49. 49
50. 50
51. Stop Opening the Hood 각각의 도구 사용법과 각종 플러그인과 의존성 패키지의 버전 충돌로 파편화가 심해짐 오버- 툴링이 뉴비들의 러닝커브를 급상승 시킴. 2016 년에 자바스크립트를 배우는 기분 점차 프레임워크에서 자체적으로 개발, 구성한 도구 제공 React: create-react-app AngularJS 2: Angular CLI Polymer: Polymer CLI Vue.js: Vue CLI 사용되는 툴들의 종류, 버전 그리고 플러그인을 직접관리 -> 프레임워크 레벨에서 주도권을 가지고 관 리가능 생성된 프로젝트에선 npm scripts 로 사용 -> node 환경에서 일관되고 쉬운 사용법 하지만 뚜껑을 열면? 51
52. 52
53. n p m i n s t a l l - g p o l y m e r - c l i m k d i r m y - a p p & & c d m y - a p p p o l y m e r i n i t p o l y m e r s e r v e - - o p e n 53
54. n p m i n s t a l l - g v u e - c l i # i n i t w i t h w e b p a c k t e m p l a t e v u e i n i t w e b p a c k m y - a p p c d m y - a p p y a r n i n s t a l l y a r n r u n d e v 54
55. n p m i n s t a l l - g c r e a t e - r e a c t - a p p c r e a t e - r e a c t - a p p m y - a p p c d m y - a p p / n p m s t a r t 55
56. Fetching Open API with React.js / / s r c / A p p . j s i m p o r t R e a c t , { C o m p o n e n t } f r o m ' r e a c t ' ; c l a s s A p p e x t e n d s C o m p o n e n t { c o n s t r u c t o r ( ) { s u p e r ( . . . a r g u m e n t s ) ; t h i s . s t a t e = { u s e r I d : t h i s . p r o p s . u s e r I d | | ' L o a d i n g . . . ' } ; } c o m p o n e n t D i d M o u n t ( ) { f e t c h ( ' h t t p : / / l o c a l h o s t : 8 0 8 0 / u s e r s / r a g i n g w i n d ' ) . t h e n ( r e s = > r e s . j s o n ( ) ) . t h e n ( u s e r I d = > t h i s . s e t S t a t e ( u s e r I d ) ) . c a t c h ( e r r = > c o n s o l e . l o g ( e r r ) ) ; } r e n d e r ( ) { r e t u r n ( < h 2 > U s e r I D : { t h i s . s t a t e . u s e r I d } < / h 2 > ) } } e x p o r t d e f a u l t A p p ; 56
57. Node for Desktop Applications UI 를 브라우저 렌더러에 의존하는 하이브리드 node 어플리케이션 시스템 콜은 node 에서 어플리케이션은 웹앱으로 크로스 플랫폼 지원 많은 시도들, 남은 건 nw.js 와 Electron 57
58. 50% 깃허브에서 만든 크로스 플랫폼 데스크탑 어플리케이션 개발을 위한 프레임웍 node, 웹 관련 기술을 모두 사용가능 크로스 플랫폼 지원, Auto update, App store, ARM device 와 플랫폼 기능들 추가 중 오픈소스, 훌륭한 에코 시스템[1], [2]과 활발한 개발 Latest Chromium and Node npm 패키지 (거의 대부분) 그대로 사용가능 개발되는 많은 사용/ 오픈 어플리케이션들, Atom, Slack, VSCode, Wordpress 등 개발도구 지원이 훌륭 Devtron(Debug), Spectron(Test) 58
59. 50% 59
60. 50% 60
61. 50% 61
62. 50% 62
63. 50% 63
64. 50% 64
65. 50% or electron-quick-start: Clone to try a simple Electron app 65
66. Hello! Electron 1. Setup the project # s e t u p p r o j e c t a n d i n s t a l l p r e b u i l t e l e c t r o n . y a r n i n i t & & y a r n a d d - - d e v e l e c t r o n 2. Configure package.json { . . . " m a i n " : " m a i n . j s " " s c r i p t s " : { " s t a r t " : " e l e c t r o n . " } } 66
67. 3. main.js, for main process c o n s t { a p p , B r o w s e r W i n d o w } = r e q u i r e ( ' e l e c t r o n ' ) ; l e t m a i n W i n d o w ; a p p . o n ( ' r e a d y ' , ( ) = > { m a i n W i n d o w = n e w B r o w s e r W i n d o w ( { w i d t h : 8 0 0 , h e i g h t : 6 0 0 } ) ; m a i n W i n d o w . l o a d U R L ( ` f i l e : / / $ { _ _ d i r n a m e } / i n d e x . h t m l ` ) ; m a i n W i n d o w . o n ( ' c l o s e d ' , ( ) = > { m a i n W i n d o w = n u l l } ) ; } ) ; a p p . o n ( ' w i n d o w - a l l - c l o s e d ' , ( ) = > { i f ( p r o c e s s . p l a t f o r m ! = = ' d a r w i n ' ) { a p p . q u i t ( ) } } ) ; 4. index.html, for main view in renderer. and say Hello < h 1 > H e l l o ! < h 1 > < u l i d = " f i l e s " > < / u l > < s c r i p t t y p e = " t e x t / j a v a s c r i p t " s r c = " r e n d e r e . j s " > < / s c r i p t > 67
68. 5. renderer.js, for browser process c o n s t f s = r e q u i r e ( ' f s ' ) ; f s . r e a d d i r ( ' . ' , ( e r r , f i l e s ) = > { c o n s t u l = d o c u m e n t . q u e r y S e l e c t o r ( ' # f i l e s ' ) ; u l . i n n e r H T M L = f i l e s . m a p ( f = > { r e t u r n ` < l i > $ { f } < / l i > ` ; } ) . j o i n ( ' \ n ' ) ; } ) ; 6. run electron y a r n s t a r t 68
69. 50% Setup the project # s e t u p p r o j e c t a n d i n s t a l l p r e b u i l t e l e c t r o n . y a r n i n i t & & y a r n a d d - - d e v e l e c t r o n Configure package.json { . . . " m a i n " : " m a i n . j s " " s c r i p t s " : { " s t a r t " : " e l e c t r o n . " } } 69
70. 35% Protips: Yeoman generator-electron # I n s t a l l w i t h y e o m a n n p m i n s t a l l - - g l o b a l y o g e n e r a t o r - e l e c t r o n # S c a f f o l d i n g e l e c t r o n a p p y o e l e c t r o n 70
71. Node for IoT (BLE) 71
72. IoT Device Platforms for Node Programmed by Node/JS Johnny-Five, for Arduino and rwaldron/particle-io Cylon.js Particle Node/JS runtime on board (H/W) Intel® Edison alooh.io with Demo Ruff IoT.js - Samsung powered by JerryScript 72
73. BLE (Bluetooth 4.x, Bluetooth Low Energy) 73
74. BLE (Bluetooth 4.x, Bluetooth Low Energy) 저전력 무선 통신, Bluetooth Smart Ready, Smart, Classic 로 구분 최근 스펙은 4.2, Low-power IP(IPv6/LoWPAN) / Gateway for HTTP Proxy for RESTful Advertise: 특정 디바이스를 지정하지 않고 적은 바이트(31 byte) 를 일정 인터벌 동안 주변 디바이스 에게 시그널 방송(Broadcast), Advertiser 와 Observer 로 구분 Connection: Central 과 Peripheral 사이에 1:1 연결을 맺어 데이터를 타이밍에 맞게 전송 GATT (Generic Attribute Profile): BLE 데이터 커뮤니케이션을 담당, Read, Write 를 지원 RSSI (Received Signal Strength Indication): 수신 신호의 ( 총) 세기 (dBm) 74
75. Beacon 별도의 Advertising 데이터 타입( 프로토콜), UUID 와 그외 커스텀 헤더 paring / bonding 을 생략하고 Advertising pacaket 으로 특정 데이터(url 등) 전송 iBeacon(Apple), Eddystone(Google), Facebook Beacon( 도 있었음), SKP Syrup ( 도 뿌렸음) 75
76. 76
77. 77
78. 30% Node for Beacon sandeepmistry/bleno: A Node.js module for BLE peripherals sandeepmistry/node-bleacon: A Node.js library for iBeacons sandeepmistry/node-eddystone-beacon-scanner: Scanning Eddystone beacons using Node.js don/node-eddystone-beacon: Create an Eddystone Beacon using Node.js 78
79. Eddystone Advertising with eddystone-beacon-emulator # i n s t a l l n p m i n s t a l l - g e d d y s t o n e - b e a c o n - e m u l a t o r # a d v e r t i s i n g e d d y s t o n e - b e a c o n - e m u l a t o r - - u r i = h t t p : / / g o o . g l / e d d y s t o n e 79
80. Eddystone Scanning with eddystone-beacon-scanner c o n s t E d d y s t o n e B e a c o n S c a n n e r = r e q u i r e ( ' e d d y s t o n e - b e a c o n - s c a n n e r ' ) ; E d d y s t o n e B e a c o n S c a n n e r . o n ( ' f o u n d ' , f u n c t i o n ( b e a c o n ) { c o n s o l e . l o g ( ' f o u n d E d d y s t o n e B e a c o n : \ n ' , J S O N . s t r i n g i f y ( b e a c o n , n u l l , 2 ) ) ; } ) ; E d d y s t o n e B e a c o n S c a n n e r . o n ( ' u p d a t e d ' , f u n c t i o n ( b e a c o n ) { c o n s o l e . l o g ( ' u p d a t e d E d d y s t o n e B e a c o n : \ n ' , J S O N . s t r i n g i f y ( b e a c o n , n u l l , 2 ) ) ; } ) ; E d d y s t o n e B e a c o n S c a n n e r . o n ( ' l o s t ' , f u n c t i o n ( b e a c o n ) { c o n s o l e . l o g ( ' l o s t E d d y s t o n e b e a c o n : \ n ' , J S O N . s t r i n g i f y ( b e a c o n , n u l l , 2 ) ) ; } ) ; E d d y s t o n e B e a c o n S c a n n e r . s t a r t S c a n n i n g ( t r u e ) ; 80
81. Fin 81