Nodejs, PhantomJS, casperJs, YSlow, expressjs
Download as pptx, pdf14 likes3,991 views
node.js 관련 기초 세미나 자료.
Nodejs, PhantomJS, casperJs, YSlow, expressjs
- 2. Node.js? • 라이언 달이 2009년 JSConf에서 발표 • 서버사이드 자바스크립트(V8 엔진) 프레임워크 • 이벤트 기반(Event Driven) Non-Blocking I/O 방식 • 버전(2014-5-26기준) : v0.10.28 • C++ Complie • 단일 쓰레드 이벤트 루프로 구동
- 3. 장점? • 가볍고 • 빠르다 • 설치와 사용이 간편하다 • 많은 모듈(npmjs.org 2014-05-26 기준 : 75,038개) • Front-End 개발자의 진입이 쉽다.
- 4. 단점? • Event-Driven 프로그래밍이 쉽지 않다. • 동기적 코드가 전체 성능 저하를 유발한다. • CPU 작업이 많은 곳에는 적합하지 않다. • 에러 발생시 서버가 종료될 수 있다..
- 5. 어디서 쓰고 있지?
- 6. Node.js 처리구조? 1. 피자를 전화로 주문한다. (Callback 함수 전달) 2. 다른 일을 한다. 3. 피자 배달이 오면(EVENT), 결제하고 먹는다(Callback 함수 내용 실 행). 1. 피자를 테이크아웃 주문한다. 2. 될때까지 기다린다.(cpu Wait) 3. 완료되면 결제 후 먹는다. 싱글 스레드 기반 비동기 처리 멀티 스레드 기반 동기 처리
- 7. 설치 • http://nodejs.org/download/ 각 OS 별로 다운로드 #의존 패키지 설치(레드헷 계열) yum install gcc gcc-c++ yum install openssl-devel yum install make #다운로드 및 설치 cd /usr/src && wget http://nodejs.org/dist/v0.10.28/node- v0.10.28.tar.gz tar zxvf node-v0.10.28.tar.gz cd node-v0.10.28 ./configure make && make install
- 8. 실행 > node testApp.js 또는 #!/usr/local/bin/node 1 라인에 추가 chmod a+x ./testApp.js 실행권한주 기 ./testApp.js
- 9. Sample • var fs = require('fs'); • var contents = fs.readFile(‘text.txt','utf-8',function(err,contents){ • console.log('========================='); • console.log(contents); • console.log('========================='); • console.log('function end'); • }); • console.log('문법 end');
- 10. REPL • Python 이나 개발자 도구의 Console과 같은 대화형 모 드 • 개발 시 테스트용 등으로 사용하며 save/load 기능 제공
- 11. 내장 객체 - 1 모듈명 설명 Assertion Testing 단정문 모듈 Buffer 바이너리 데이터의 옥텟 스트림(8비트 데이터) 모듈 C/C++ Addons C/C++ 모듈 사용 관련 모듈 Child Processes 자식 프로세스 생성및 관리 모듈 Cluster 멀티코어처리 모듈 Console 콘솔 출력관련 모듈 Crypto 암호화 모듈 Debugger 디버깅 모듈 DNS 도메인 네임 서버 모듈 Domain 도네임 모듈 Events 이벤트 관련 모듈
- 12. 내장 객체 - 2 모듈명 설명 File System(FS) 파일시스템(읽고/쓰고) 모듈 Globals 글로벌 객체 모듈 HTTP HTTP 서버와 클라이언트 기능 모듈 HTTPS HTTPS 서버와 클라이언트 기능 모듈 Modules 모듈 사용관련 기능 Net 비동기 네트워크 통신 기능 모듈 OS 운영체제 정보를 제공 모듈 Path 파일의 경로 제공 모듈 Process 실행된 프로세서의 대한 정보 제공 Punycode non-ASCII 문자 의 인코딩 함수 제공 Query Strings URL의 쿼리 문자열을 다루는 함수를 제공
- 13. 내장 객체 - 3 모듈명 설명 Readline 스트림에서 라인 단위로 읽는 기능을 제공 REPL 대화식 모드 관련 기능 Stream 스트림을 다루기 위한 추상 인터페이스 String Decoder 버퍼를 스트링으로 변환 함수 Timers Javascript 시간처리 관련 함수 TLS/SSL OpenSSL을 이용하는 보안 관련 모듈 TTY 터미널이나 콘솔 관련 기능을 제공 UDP/Datagram UDP의 소켓(Datagram Socket) 통신 기능을 제공 URL URL을 다루는 함수를 제공 Utilities 출력 및 디버깅용 모듈 VM 자바스크립트를 실행하는 기능을 제공 ZLIB 압축 함수를 제공
- 14. 내장 모듈 Stability Stabilit y 상태명 설명 0 Deprecated 하위호환성 X, 문제가 될 수 있으며 변경예정 1 Experimental 하위호환성 X, 신생으로 변경되거나 삭제될 수 있음 2 Unstable 하위호환성 △, 현재 만드는 중 3 Stable 하위호환성 ○, 마이너 한 변화가 있을 수 있음 4 API Frozen 하위호환성 ○, 테스트 끝난 상태로 앞으로 수정이 없을 예 정 5 Locked 하위호환성 ○, 심각한 버그가 없는 한 수정 안 함
- 15. 외부 모듈 관리 • 전역모드 설치 : /usr/local/lib/node_module – root $ npm install –g <패키지명> • 지역모드 설치 – $ npm install <패키지명> • 특정 버전 설치 – $ npm install <패키지명>@<버전> • 삭제 – $ npm uninstall <패키지명> • 업데이트 – $ npm update <패키지명>
- 16. 외부 모듈 관리 • 전역모드 설치 : /usr/local/lib/node_module – root $ npm install –g <패키지명> • 지역모드 설치 – $ npm install <패키지명> • 특정 버전 설치 – $ npm install <패키지명>@<버전> • 삭제 – $ npm uninstall <패키지명> • 업데이트 – $ npm update <패키지명>
- 17. 웹서비스를 한다면? • 라우팅 • 동적뷰 • 세션 • 쿠키 • 로깅 • 외부 세션 저장소 기능 • 등등 Express
- 18. Express 라우팅 예 var routes = require('./routes'); var user = require('./routes/user'); …… app.get('/', routes.index); // routes/index.js 실행 app.get('/user/list', user.list); // routes/user.js 의 list function app.get('/user/info', user.info); // routes/user.js 의 info function app.get('/test.json',function(req, res){ //직접 실행 var tempJson = {'id': 'tester', 'message':'HIHI tester'}; res.json(tempJson); }); app.get('/hello/:name', function(req, res){ fs.readFile('views/index.jade', 'utf8', function(error,data){ var fn = jade.compile(data); res.writeHead(200,{'Content-Type':'text/html'}); res.end(fn({ name:req.params.name })); }); });
- 19. 화면은 어떻게 그리나? • HAML 기반 화면 그리기(Jade, coffeekup 등) – 무슨소린지 잘 모르겠지만 아래의 예를 보면 알 수 있다. • 기존 서버사이드에서 화면구성하는 방법(ejs, swig, handlebars 등) – ASP, PHP, JSP 등에서 화면 그리는 것과 같은 식으로 개발 할 수 있다. – 기존 JSP로 화면 그리는 것이 편한 경우 사용하면 좋을 것 같다. • API를 호출하여 가져온 데이터를 그리는 식의 패턴(Jsdom 등) – 서버에서 보여줄 파일을 로딩한 후 jquery나 angularJs등을 삽입하여 DOM에 내용을 변경 – Front-End 단에서 JSON 호출 후 템플릿을 이용하여 화면은 그리는 것과 거의 같은 식으로 개발할 수 있다. html head title= "I'm Title" link(rel='stylesheet', href='/stylesheets/style.css') body p Welcome to #{name} - for(var i=0;i<2;i++){ p HI #{name} - } <html> <head> <title>I'm Title</title> <link rel="stylesheet" href="/stylesheets/style.css"/> </head> <body><p>Welcome to hong</p> <p>HI hong</p> <p>HI hong</p> </body> </html>
- 20. PhantomJS • healess webkit 기반 브라우저 • 웹사이트 접속 후 렌더링 및 스크립트등의 처리가 완료된 DOCUMENT 획득 • HTML의 DOM API 지원(예 : getElementById) • 웹사이트 캡처 • PhantomJS 는 단독 실행이 가능하며 node 에서 사용하기 위해서는 node-phantom(브릿지 드라 이버)를 설치하여야 함
- 21. CasperJS • PhantomJS를 기반하여 phantomJS을 가지고 있음 • 사용자 액션 기능 제공 – Form 입력 – Submit(Click) • Javascript 삽입(예 : Jquery, Jindo 등) 후 처리 가 능 • 전체 화면 캡처 및 특정 Element 캡처 • casperjs 는 단독 실행이 가능하며 node에 붙여서 사용하기 위해서는 SpookyJS(브릿지 드라이버)가 필요하다.
- 22. CasperJS 데이터 추출 • var casper = require("casper").create({ • viewportSize: { • width: 1024, • height: 768 • } • }); • casper.start('http://pann.nate.com/', function() { • this.captureSelector('pann_talk.png', 'div .today-talk',function(){ • console.log('이미지 저장 : nate_pann.png'); • }); • var result = this.evaluate(function(){ • var title = document.title; • var element = document.querySelector('div .today-talk').outerText; • return {'title':title, 'element': element} • }); • console.log('Casper loading Page title : ' + result.title); • console.log('Casper loading capture element outerText : n' + result.element); • }); • casper.run();
- 23. CasperJS 데이터 추출
- 24. CasperJS 으로 로그인
- 25. CasperJS 으로 로그인 var casper = require("casper").create(); casper.start('https://login.danawa.com/login.php?url=http://bbs.danawa.com/point/index.php'); casper.then(function() { this.fill('form#frmLogin',{ 'txtId' : ‘아이디', 'pwdPasswd' : ‘패스워드' }, true); this.capture('danawa_nologin.png',{ top: 0, left: 0, width: 1024, height: 700 }); }); casper.thenOpen('http://bbs.danawa.com/point/index.php', function(){ this.capture('danawa_login.png',{ top: 0, left: 0, width: 1024, height: 700 }); }); casper.run();
- 26. CasperJS 으로 로그인
- 27. YSlowJS • PhantomJS 기반 • 웹사이트에 대한 성능 분석 도구 • 성능 분석된 데이터 추출하여 원하는 포맷 으로 리턴 - Json, Xml, Plain text, Tap, JUnit • 임의로 정한 등급에 따라 성공 여부 판단
- 28. YSlowJS - 결과
- 29. Async • 중첩 callback 이 많아 짐에 따라 이를 일목요연하게 정리하기 위한 모듈 • 각 function을 흐름제어 한다. • 지금은 잘 모르겠지만 개발을 하게 되면 중첩 Callback 이 많아짐에 따라 필요성을 느끼게 될 것 이다. 그때 찾아보면 좋을 것 같다. • 참고 URL : http://nodeqa.com/nodejs_ref/3
- 30. 활용? • Prototyping • 간단한 웹서비스 • 간단한 로직의 대용량 처리 • 빠른 응답 시간을 요구하는 어플리케이션 • File Up/Download 같은 I/O 서비스 • Test Framework 및 웹사이트 성능 분석 • 채팅 서비스(socket.io) • 서버 배치 프로그래밍 • REST API 개발 • 모니터링 시스템 • Android, iOS 푸시서비스
- 31. 소스를 조금 볼까요?
- 32. 참고 사이트 • Nodejs 공식 사이트 – http://nodejs.org/ • Nodejs opensource 모듈 정보 – https://www.npmjs.org/ • Nodejs opensource 모듈 사용 빈도/태깅 정리 사이 트 – https://nodejsmodules.org/ • Express 가이드(한글), Socket.io 기능을 이용한 시 스템 모니터링 – http://firejune.io/ – http://firejune.io/express/guide • Nodejs 내장 모듈 한글 Doc – http://nodejs-kr.org/
- 33. 참고 사이트 • Nodejs 관련 블로그 – http://nodeqa.com/ • Phantomjs 공식홈페이지 – http://phantomjs.org/ • Casperjs Doc – http://casperjs.readthedocs.org/en/ • Phantomjs, Casperjs, App 푸시 서비스등 참조 블로그 – http://blog.saltfactory.net/category/Javascript
- 34. THE END