SlideShare une entreprise Scribd logo
1  sur  34
Node.js
발표자 이기동
Node.js?
• 라이언 달이 2009년 JSConf에서 발표
• 서버사이드 자바스크립트(V8 엔진) 프레임워크
• 이벤트 기반(Event Driven) Non-Blocking I/O 방식
• 버전(2014-5-26기준) : v0.10.28
• C++ Complie
• 단일 쓰레드 이벤트 루프로 구동
장점?
• 가볍고
• 빠르다
• 설치와 사용이 간편하다
• 많은 모듈(npmjs.org 2014-05-26 기준 : 75,038개)
• Front-End 개발자의 진입이 쉽다.
단점?
• Event-Driven 프로그래밍이 쉽지 않다.
• 동기적 코드가 전체 성능 저하를 유발한다.
• CPU 작업이 많은 곳에는 적합하지 않다.
• 에러 발생시 서버가 종료될 수 있다..
어디서 쓰고 있지?
Node.js 처리구조?
1. 피자를 전화로 주문한다. (Callback 함수
전달)
2. 다른 일을 한다.
3. 피자 배달이 오면(EVENT),
결제하고 먹는다(Callback 함수 내용 실
행).
1. 피자를 테이크아웃 주문한다.
2. 될때까지 기다린다.(cpu Wait)
3. 완료되면 결제 후 먹는다.
싱글 스레드 기반 비동기 처리 멀티 스레드 기반 동기 처리
설치
• 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
실행
> node testApp.js
또는
#!/usr/local/bin/node 1 라인에 추가
chmod a+x ./testApp.js  실행권한주
기
./testApp.js
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');
REPL
• Python 이나 개발자 도구의 Console과 같은 대화형 모
드
• 개발 시 테스트용 등으로 사용하며 save/load 기능 제공
내장 객체 - 1
모듈명 설명
Assertion Testing 단정문 모듈
Buffer 바이너리 데이터의 옥텟 스트림(8비트 데이터) 모듈
C/C++ Addons C/C++ 모듈 사용 관련 모듈
Child Processes 자식 프로세스 생성및 관리 모듈
Cluster 멀티코어처리 모듈
Console 콘솔 출력관련 모듈
Crypto 암호화 모듈
Debugger 디버깅 모듈
DNS 도메인 네임 서버 모듈
Domain 도네임 모듈
Events 이벤트 관련 모듈
내장 객체 - 2
모듈명 설명
File System(FS) 파일시스템(읽고/쓰고) 모듈
Globals 글로벌 객체 모듈
HTTP HTTP 서버와 클라이언트 기능 모듈
HTTPS HTTPS 서버와 클라이언트 기능 모듈
Modules 모듈 사용관련 기능
Net 비동기 네트워크 통신 기능 모듈
OS 운영체제 정보를 제공 모듈
Path 파일의 경로 제공 모듈
Process 실행된 프로세서의 대한 정보 제공
Punycode non-ASCII 문자 의 인코딩 함수 제공
Query Strings URL의 쿼리 문자열을 다루는 함수를 제공
내장 객체 - 3
모듈명 설명
Readline 스트림에서 라인 단위로 읽는 기능을 제공
REPL 대화식 모드 관련 기능
Stream 스트림을 다루기 위한 추상 인터페이스
String Decoder 버퍼를 스트링으로 변환 함수
Timers Javascript 시간처리 관련 함수
TLS/SSL OpenSSL을 이용하는 보안 관련 모듈
TTY 터미널이나 콘솔 관련 기능을 제공
UDP/Datagram UDP의 소켓(Datagram Socket) 통신 기능을 제공
URL URL을 다루는 함수를 제공
Utilities 출력 및 디버깅용 모듈
VM 자바스크립트를 실행하는 기능을 제공
ZLIB 압축 함수를 제공
내장 모듈 Stability
Stabilit
y
상태명 설명
0 Deprecated 하위호환성 X, 문제가 될 수 있으며 변경예정
1 Experimental 하위호환성 X, 신생으로 변경되거나 삭제될 수 있음
2 Unstable 하위호환성 △, 현재 만드는 중
3 Stable 하위호환성 ○, 마이너 한 변화가 있을 수 있음
4 API Frozen
하위호환성 ○, 테스트 끝난 상태로 앞으로 수정이 없을 예
정
5 Locked 하위호환성 ○, 심각한 버그가 없는 한 수정 안 함
외부 모듈 관리
• 전역모드 설치 : /usr/local/lib/node_module
– root $ npm install –g <패키지명>
• 지역모드 설치
– $ npm install <패키지명>
• 특정 버전 설치
– $ npm install <패키지명>@<버전>
• 삭제
– $ npm uninstall <패키지명>
• 업데이트
– $ npm update <패키지명>
외부 모듈 관리
• 전역모드 설치 : /usr/local/lib/node_module
– root $ npm install –g <패키지명>
• 지역모드 설치
– $ npm install <패키지명>
• 특정 버전 설치
– $ npm install <패키지명>@<버전>
• 삭제
– $ npm uninstall <패키지명>
• 업데이트
– $ npm update <패키지명>
웹서비스를 한다면?
• 라우팅
• 동적뷰
• 세션
• 쿠키
• 로깅
• 외부 세션 저장소 기능
• 등등
Express
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
}));
});
});
화면은 어떻게 그리나?
• 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>
PhantomJS
• healess webkit 기반 브라우저
• 웹사이트 접속 후 렌더링 및 스크립트등의 처리가
완료된 DOCUMENT 획득
• HTML의 DOM API 지원(예 : getElementById)
• 웹사이트 캡처
• PhantomJS 는 단독 실행이 가능하며 node 에서
사용하기 위해서는 node-phantom(브릿지 드라
이버)를 설치하여야 함
CasperJS
• PhantomJS를 기반하여 phantomJS을 가지고 있음
• 사용자 액션 기능 제공
– Form 입력
– Submit(Click)
• Javascript 삽입(예 : Jquery, Jindo 등) 후 처리 가
능
• 전체 화면 캡처 및 특정 Element 캡처
• casperjs 는 단독 실행이 가능하며 node에 붙여서
사용하기 위해서는 SpookyJS(브릿지 드라이버)가
필요하다.
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();
CasperJS 데이터 추출
CasperJS 으로 로그인
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();
CasperJS 으로 로그인
YSlowJS
• PhantomJS 기반
• 웹사이트에 대한 성능 분석 도구
• 성능 분석된 데이터 추출하여 원하는 포맷
으로 리턴
- Json, Xml, Plain text, Tap, JUnit
• 임의로 정한 등급에 따라 성공 여부 판단
YSlowJS - 결과
Async
• 중첩 callback 이 많아 짐에 따라 이를
일목요연하게 정리하기 위한 모듈
• 각 function을 흐름제어 한다.
• 지금은 잘 모르겠지만 개발을 하게 되면
중첩 Callback 이 많아짐에 따라 필요성을
느끼게 될 것 이다.
그때 찾아보면 좋을 것 같다.
• 참고 URL : http://nodeqa.com/nodejs_ref/3
활용?
• Prototyping
• 간단한 웹서비스
• 간단한 로직의 대용량 처리
• 빠른 응답 시간을 요구하는 어플리케이션
• File Up/Download 같은 I/O 서비스
• Test Framework 및 웹사이트 성능 분석
• 채팅 서비스(socket.io)
• 서버 배치 프로그래밍
• REST API 개발
• 모니터링 시스템
• Android, iOS 푸시서비스
소스를 조금 볼까요?
참고 사이트
• 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/
참고 사이트
• Nodejs 관련 블로그
– http://nodeqa.com/
• Phantomjs 공식홈페이지
– http://phantomjs.org/
• Casperjs Doc
– http://casperjs.readthedocs.org/en/
• Phantomjs, Casperjs, App 푸시 서비스등 참조
블로그
– http://blog.saltfactory.net/category/Javascript
THE END

Contenu connexe

Tendances

Html5 web workers
Html5 web workersHtml5 web workers
Html5 web workersWoo Jin Kim
 
Startup JavaScript 9 - Socket.IO 실시간 통신
Startup JavaScript 9 - Socket.IO 실시간 통신Startup JavaScript 9 - Socket.IO 실시간 통신
Startup JavaScript 9 - Socket.IO 실시간 통신Circulus
 
파크히어 Realm 사용 사례
파크히어 Realm 사용 사례파크히어 Realm 사용 사례
파크히어 Realm 사용 사례선협 이
 
ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!WooYoung Cho
 
막하는스터디 두번째만남 Express(20151025)
막하는스터디 두번째만남 Express(20151025)막하는스터디 두번째만남 Express(20151025)
막하는스터디 두번째만남 Express(20151025)연웅 조
 
5-5. html5 connectivity
5-5. html5 connectivity5-5. html5 connectivity
5-5. html5 connectivityJinKyoungHeo
 
Angular2 router&http
Angular2 router&httpAngular2 router&http
Angular2 router&httpDong Jun Kwon
 
헷갈리는 자바스크립트 정리
헷갈리는 자바스크립트 정리헷갈리는 자바스크립트 정리
헷갈리는 자바스크립트 정리은숙 이
 
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발정석 양
 
[1B4]안드로이드 동시성_프로그래밍
[1B4]안드로이드 동시성_프로그래밍[1B4]안드로이드 동시성_프로그래밍
[1B4]안드로이드 동시성_프로그래밍NAVER D2
 
20131217 html5
20131217 html520131217 html5
20131217 html5DK Lee
 
세션3 node.js의 의미와 자바의 대안
세션3 node.js의 의미와 자바의 대안세션3 node.js의 의미와 자바의 대안
세션3 node.js의 의미와 자바의 대안Lee Ji Eun
 
5-4. html5 offline and storage
5-4. html5 offline and storage5-4. html5 offline and storage
5-4. html5 offline and storageJinKyoungHeo
 
Resource Handling in Spring MVC
Resource Handling in Spring MVCResource Handling in Spring MVC
Resource Handling in Spring MVCArawn Park
 
Startup JavaScript 8 - NPM, Express.JS
Startup JavaScript 8 - NPM, Express.JSStartup JavaScript 8 - NPM, Express.JS
Startup JavaScript 8 - NPM, Express.JSCirculus
 
GraphQL overview #2
GraphQL overview #2GraphQL overview #2
GraphQL overview #2기동 이
 

Tendances (20)

Node.js 심화과정
Node.js 심화과정Node.js 심화과정
Node.js 심화과정
 
Node.js 기본과정
Node.js 기본과정Node.js 기본과정
Node.js 기본과정
 
Html5 web workers
Html5 web workersHtml5 web workers
Html5 web workers
 
Startup JavaScript 9 - Socket.IO 실시간 통신
Startup JavaScript 9 - Socket.IO 실시간 통신Startup JavaScript 9 - Socket.IO 실시간 통신
Startup JavaScript 9 - Socket.IO 실시간 통신
 
파크히어 Realm 사용 사례
파크히어 Realm 사용 사례파크히어 Realm 사용 사례
파크히어 Realm 사용 사례
 
ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!
 
막하는스터디 두번째만남 Express(20151025)
막하는스터디 두번째만남 Express(20151025)막하는스터디 두번째만남 Express(20151025)
막하는스터디 두번째만남 Express(20151025)
 
5-5. html5 connectivity
5-5. html5 connectivity5-5. html5 connectivity
5-5. html5 connectivity
 
4-3. jquery
4-3. jquery4-3. jquery
4-3. jquery
 
Angular2 router&http
Angular2 router&httpAngular2 router&http
Angular2 router&http
 
헷갈리는 자바스크립트 정리
헷갈리는 자바스크립트 정리헷갈리는 자바스크립트 정리
헷갈리는 자바스크립트 정리
 
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발
 
[1B4]안드로이드 동시성_프로그래밍
[1B4]안드로이드 동시성_프로그래밍[1B4]안드로이드 동시성_프로그래밍
[1B4]안드로이드 동시성_프로그래밍
 
20131217 html5
20131217 html520131217 html5
20131217 html5
 
세션3 node.js의 의미와 자바의 대안
세션3 node.js의 의미와 자바의 대안세션3 node.js의 의미와 자바의 대안
세션3 node.js의 의미와 자바의 대안
 
4-2. ajax
4-2. ajax4-2. ajax
4-2. ajax
 
5-4. html5 offline and storage
5-4. html5 offline and storage5-4. html5 offline and storage
5-4. html5 offline and storage
 
Resource Handling in Spring MVC
Resource Handling in Spring MVCResource Handling in Spring MVC
Resource Handling in Spring MVC
 
Startup JavaScript 8 - NPM, Express.JS
Startup JavaScript 8 - NPM, Express.JSStartup JavaScript 8 - NPM, Express.JS
Startup JavaScript 8 - NPM, Express.JS
 
GraphQL overview #2
GraphQL overview #2GraphQL overview #2
GraphQL overview #2
 

En vedette

Nodejs 트래픽 라우팅, 파일 서비스, 미들웨어
Nodejs 트래픽 라우팅, 파일 서비스, 미들웨어Nodejs 트래픽 라우팅, 파일 서비스, 미들웨어
Nodejs 트래픽 라우팅, 파일 서비스, 미들웨어Mungyu Choi
 
Node.js의 도입과 활용
Node.js의 도입과 활용Node.js의 도입과 활용
Node.js의 도입과 활용Jin wook
 
[C5]deview 2012 nodejs
[C5]deview 2012 nodejs[C5]deview 2012 nodejs
[C5]deview 2012 nodejsNAVER D2
 
개발 생산성 향상 기법 V1.2
개발 생산성 향상 기법 V1.2개발 생산성 향상 기법 V1.2
개발 생산성 향상 기법 V1.2Daniel Lim
 
Nodejs 발표자료
Nodejs 발표자료Nodejs 발표자료
Nodejs 발표자료shanka2
 
Isomorphic JavaScript with Nashorn
Isomorphic JavaScript with NashornIsomorphic JavaScript with Nashorn
Isomorphic JavaScript with NashornMaxime Najim
 
[2014널리세미나] 웹 서비스분석 MEAN Stack과 PhantomJS만 알면 끝!
[2014널리세미나] 웹 서비스분석 MEAN Stack과  PhantomJS만 알면 끝![2014널리세미나] 웹 서비스분석 MEAN Stack과  PhantomJS만 알면 끝!
[2014널리세미나] 웹 서비스분석 MEAN Stack과 PhantomJS만 알면 끝!Nts Nuli
 
한림대학교 석세스모델링 by. 온라인브랜드디렉터강정은
한림대학교 석세스모델링 by. 온라인브랜드디렉터강정은한림대학교 석세스모델링 by. 온라인브랜드디렉터강정은
한림대학교 석세스모델링 by. 온라인브랜드디렉터강정은JUNGEUN KANG
 
Present 페북 광고 이야기
Present 페북 광고 이야기Present 페북 광고 이야기
Present 페북 광고 이야기Leo Kwon
 
Learn design pattern-1
Learn design pattern-1Learn design pattern-1
Learn design pattern-1Daniel Lim
 
Desing Pattern-2
Desing Pattern-2Desing Pattern-2
Desing Pattern-2Daniel Lim
 
아꿈사 발표 Node JS 프로그래밍 8장
아꿈사 발표 Node JS 프로그래밍 8장아꿈사 발표 Node JS 프로그래밍 8장
아꿈사 발표 Node JS 프로그래밍 8장Woo Yeong Choi
 
자바 직렬화 (Java serialization)
자바 직렬화 (Java serialization)자바 직렬화 (Java serialization)
자바 직렬화 (Java serialization)중선 곽
 
Node.js 시작하기
Node.js 시작하기Node.js 시작하기
Node.js 시작하기Huey Park
 
Laravel로 스타트업 기술 스택 구성하기
Laravel로 스타트업 기술 스택 구성하기Laravel로 스타트업 기술 스택 구성하기
Laravel로 스타트업 기술 스택 구성하기KwangSeob Jeong
 
Node.js 자바스크립트로 서버사이드 개발하기
Node.js 자바스크립트로 서버사이드 개발하기Node.js 자바스크립트로 서버사이드 개발하기
Node.js 자바스크립트로 서버사이드 개발하기JeongHun Byeon
 
Atlassian confluence WIKI를 활용한 공유와 협업 환경 구성
Atlassian confluence WIKI를 활용한 공유와 협업 환경 구성Atlassian confluence WIKI를 활용한 공유와 협업 환경 구성
Atlassian confluence WIKI를 활용한 공유와 협업 환경 구성KwangSeob Jeong
 

En vedette (18)

Nodejs 트래픽 라우팅, 파일 서비스, 미들웨어
Nodejs 트래픽 라우팅, 파일 서비스, 미들웨어Nodejs 트래픽 라우팅, 파일 서비스, 미들웨어
Nodejs 트래픽 라우팅, 파일 서비스, 미들웨어
 
Node.js의 도입과 활용
Node.js의 도입과 활용Node.js의 도입과 활용
Node.js의 도입과 활용
 
[C5]deview 2012 nodejs
[C5]deview 2012 nodejs[C5]deview 2012 nodejs
[C5]deview 2012 nodejs
 
개발 생산성 향상 기법 V1.2
개발 생산성 향상 기법 V1.2개발 생산성 향상 기법 V1.2
개발 생산성 향상 기법 V1.2
 
Nodejs 발표자료
Nodejs 발표자료Nodejs 발표자료
Nodejs 발표자료
 
Isomorphic JavaScript with Nashorn
Isomorphic JavaScript with NashornIsomorphic JavaScript with Nashorn
Isomorphic JavaScript with Nashorn
 
[2014널리세미나] 웹 서비스분석 MEAN Stack과 PhantomJS만 알면 끝!
[2014널리세미나] 웹 서비스분석 MEAN Stack과  PhantomJS만 알면 끝![2014널리세미나] 웹 서비스분석 MEAN Stack과  PhantomJS만 알면 끝!
[2014널리세미나] 웹 서비스분석 MEAN Stack과 PhantomJS만 알면 끝!
 
한림대학교 석세스모델링 by. 온라인브랜드디렉터강정은
한림대학교 석세스모델링 by. 온라인브랜드디렉터강정은한림대학교 석세스모델링 by. 온라인브랜드디렉터강정은
한림대학교 석세스모델링 by. 온라인브랜드디렉터강정은
 
NODEJS INTRO
NODEJS INTRONODEJS INTRO
NODEJS INTRO
 
Present 페북 광고 이야기
Present 페북 광고 이야기Present 페북 광고 이야기
Present 페북 광고 이야기
 
Learn design pattern-1
Learn design pattern-1Learn design pattern-1
Learn design pattern-1
 
Desing Pattern-2
Desing Pattern-2Desing Pattern-2
Desing Pattern-2
 
아꿈사 발표 Node JS 프로그래밍 8장
아꿈사 발표 Node JS 프로그래밍 8장아꿈사 발표 Node JS 프로그래밍 8장
아꿈사 발표 Node JS 프로그래밍 8장
 
자바 직렬화 (Java serialization)
자바 직렬화 (Java serialization)자바 직렬화 (Java serialization)
자바 직렬화 (Java serialization)
 
Node.js 시작하기
Node.js 시작하기Node.js 시작하기
Node.js 시작하기
 
Laravel로 스타트업 기술 스택 구성하기
Laravel로 스타트업 기술 스택 구성하기Laravel로 스타트업 기술 스택 구성하기
Laravel로 스타트업 기술 스택 구성하기
 
Node.js 자바스크립트로 서버사이드 개발하기
Node.js 자바스크립트로 서버사이드 개발하기Node.js 자바스크립트로 서버사이드 개발하기
Node.js 자바스크립트로 서버사이드 개발하기
 
Atlassian confluence WIKI를 활용한 공유와 협업 환경 구성
Atlassian confluence WIKI를 활용한 공유와 협업 환경 구성Atlassian confluence WIKI를 활용한 공유와 협업 환경 구성
Atlassian confluence WIKI를 활용한 공유와 협업 환경 구성
 

Similaire à Nodejs, PhantomJS, casperJs, YSlow, expressjs

자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기Jeado Ko
 
Mean 스택을 사용한 IoT 개발
Mean 스택을 사용한 IoT 개발Mean 스택을 사용한 IoT 개발
Mean 스택을 사용한 IoT 개발Jay Park
 
Node.js and react
Node.js and reactNode.js and react
Node.js and reactHyungKuIm
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기현철 조
 
Ji 개발 리뷰 (신림프로그래머)
Ji 개발 리뷰 (신림프로그래머)Ji 개발 리뷰 (신림프로그래머)
Ji 개발 리뷰 (신림프로그래머)beom kyun choi
 
KGC 2016 오픈소스 네트워크 엔진 Super socket 사용하기
KGC 2016 오픈소스 네트워크 엔진 Super socket 사용하기KGC 2016 오픈소스 네트워크 엔진 Super socket 사용하기
KGC 2016 오픈소스 네트워크 엔진 Super socket 사용하기흥배 최
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나JeongHun Byeon
 
Express framework tutorial
Express framework tutorialExpress framework tutorial
Express framework tutorial우림 류
 
Node js[stg]onimusha 20140822
Node js[stg]onimusha 20140822Node js[stg]onimusha 20140822
Node js[stg]onimusha 20140822병헌 정
 
[오픈소스컨설팅] 스카우터 사용자 가이드 2020
[오픈소스컨설팅] 스카우터 사용자 가이드 2020[오픈소스컨설팅] 스카우터 사용자 가이드 2020
[오픈소스컨설팅] 스카우터 사용자 가이드 2020Ji-Woong Choi
 
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)LanarkSeung
 
7가지 동시성 모델 람다아키텍처
7가지 동시성 모델  람다아키텍처7가지 동시성 모델  람다아키텍처
7가지 동시성 모델 람다아키텍처Sunggon Song
 
Node.js 20버전에 변경된 점들.pdf
Node.js 20버전에 변경된 점들.pdfNode.js 20버전에 변경된 점들.pdf
Node.js 20버전에 변경된 점들.pdfSeung kyoo Park
 
Javascript 조금 더 잘 알기
Javascript 조금 더 잘 알기Javascript 조금 더 잘 알기
Javascript 조금 더 잘 알기jongho jeong
 

Similaire à Nodejs, PhantomJS, casperJs, YSlow, expressjs (20)

One-day-codelab
One-day-codelabOne-day-codelab
One-day-codelab
 
Nodejs express
Nodejs expressNodejs express
Nodejs express
 
자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기
 
Mean 스택을 사용한 IoT 개발
Mean 스택을 사용한 IoT 개발Mean 스택을 사용한 IoT 개발
Mean 스택을 사용한 IoT 개발
 
Node.js and react
Node.js and reactNode.js and react
Node.js and react
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
 
Spring boot actuator
Spring boot   actuatorSpring boot   actuator
Spring boot actuator
 
Ji 개발 리뷰 (신림프로그래머)
Ji 개발 리뷰 (신림프로그래머)Ji 개발 리뷰 (신림프로그래머)
Ji 개발 리뷰 (신림프로그래머)
 
KGC 2016 오픈소스 네트워크 엔진 Super socket 사용하기
KGC 2016 오픈소스 네트워크 엔진 Super socket 사용하기KGC 2016 오픈소스 네트워크 엔진 Super socket 사용하기
KGC 2016 오픈소스 네트워크 엔진 Super socket 사용하기
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
 
Express framework tutorial
Express framework tutorialExpress framework tutorial
Express framework tutorial
 
Node js[stg]onimusha 20140822
Node js[stg]onimusha 20140822Node js[stg]onimusha 20140822
Node js[stg]onimusha 20140822
 
[오픈소스컨설팅] 스카우터 사용자 가이드 2020
[오픈소스컨설팅] 스카우터 사용자 가이드 2020[오픈소스컨설팅] 스카우터 사용자 가이드 2020
[오픈소스컨설팅] 스카우터 사용자 가이드 2020
 
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
 
ES6 for Node.js Study 2주차
ES6 for Node.js Study 2주차ES6 for Node.js Study 2주차
ES6 for Node.js Study 2주차
 
Html5 performance
Html5 performanceHtml5 performance
Html5 performance
 
7가지 동시성 모델 람다아키텍처
7가지 동시성 모델  람다아키텍처7가지 동시성 모델  람다아키텍처
7가지 동시성 모델 람다아키텍처
 
Node.js 20버전에 변경된 점들.pdf
Node.js 20버전에 변경된 점들.pdfNode.js 20버전에 변경된 점들.pdf
Node.js 20버전에 변경된 점들.pdf
 
Javascript 조금 더 잘 알기
Javascript 조금 더 잘 알기Javascript 조금 더 잘 알기
Javascript 조금 더 잘 알기
 
Scala for play
Scala for playScala for play
Scala for play
 

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 작업이 많은 곳에는 적합하지 않다. • 에러 발생시 서버가 종료될 수 있다..
  • 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();
  • 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();
  • 27. YSlowJS • PhantomJS 기반 • 웹사이트에 대한 성능 분석 도구 • 성능 분석된 데이터 추출하여 원하는 포맷 으로 리턴 - Json, Xml, Plain text, Tap, JUnit • 임의로 정한 등급에 따라 성공 여부 판단
  • 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 푸시서비스
  • 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