node.js를 처음 접하는 개발자를 위한 스터디 자료입니다.
실습 위주로, 간단한 웹 페이지를 만들어 보는 것을 목표로 하며,
express를 활용하기에 앞서, node.js 기본 API만으로 GET/POST 처리 방식을 알아봅니다.
내용의 깊이가 있지는 않으며, 단지 node.js의 입문을 위한 가벼운 수준으로 내용이 구성되었습니다.
node.js를 처음 접하는 개발자를 위한 스터디 자료입니다.
실습 위주로, 간단한 웹 페이지를 만들어 보는 것을 목표로 하며,
express를 활용하기에 앞서, node.js 기본 API만으로 GET/POST 처리 방식을 알아봅니다.
내용의 깊이가 있지는 않으며, 단지 node.js의 입문을 위한 가벼운 수준으로 내용이 구성되었습니다.
Adied 2014, 봄싹 세미나에서 발표한 `Resource Handling in Spring MVC`의 발표자료입니다.
주요 내용으로 Spring MVC에서 정적 자원(css, js, etc)을 다루는 방법을 다루고 있습니다.
데모 코드 : https://github.com/arawn/resource-handling-in-springmvc
기존 내용을 수정. Edit가 안되어 다시 올림.
기존 내용을 보셨으면 안보셔도 됩니다.
GraphQL overview,
GraphQL란
Schema (entity 및 entity간 관계설정)
graphiql 이란?
query + mutation sample
Sample code,
https://github.com/gidong-lee/graphQL_exam
Adied 2014, 봄싹 세미나에서 발표한 `Resource Handling in Spring MVC`의 발표자료입니다.
주요 내용으로 Spring MVC에서 정적 자원(css, js, etc)을 다루는 방법을 다루고 있습니다.
데모 코드 : https://github.com/arawn/resource-handling-in-springmvc
기존 내용을 수정. Edit가 안되어 다시 올림.
기존 내용을 보셨으면 안보셔도 됩니다.
GraphQL overview,
GraphQL란
Schema (entity 및 entity간 관계설정)
graphiql 이란?
query + mutation sample
Sample code,
https://github.com/gidong-lee/graphQL_exam
Isomorphic JavaScript applications can share the same code and run on both the front end and back end. It is also a spectrum containing applications that share minimal bits of validation logic with ones that share a bulk of the application code. Nashorn is a new JavaScript engine for Java that was released with Java 8. The Nashorn JavaScript engine makes isomorphic web apps on the JVM possible by allowing the exact same browser code to run on the server. This enables us to achieve the don’t-repeat-yourself (DRY) principle, by reducing repetition in a multitier architecture. This presentation covers the key concepts, rationale, and categories of Isomorphic JavaScript and how it makes your large applications maintainable.
MEAN 스택을 사용한 IoT 개발 예제를 설명합니다.
* MEAN 스택 기본 내용 소개
* Node.js와 Express를 활용한 간단한 CRUD 서버 작성 방법(아주 단순하지만 (인증을 제외한 나머지) RESTful 서버의 기본 내용을 구현함)
* MongoDB와 Mongoose ODM를 사용한 영속적인 자료 저장 방법
* AngularJS를 사용한 아주 간단한 모니터링 도구 구현(하지만 의존성 주입, 양방향 자료 결합, 라우팅 활용 방법이 모두 들어 있음)
* 모든 예제는 bitbucket(git 호스팅 서비스)에 공개되어 있음
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)LanarkSeung
프로덕션 환경에서 클라이언트 사이드 렌더링을 고집하기란 힘든 일입니다. 서버를 통해 웹사이트를 제공하면서도 React의 편리함을 누리려면 서버 사이드 렌더링(SSR)을 구현해야 하는데요. Create-React-App을 그대로 유지하면서 SSR을 구현하는 과정을 보여드리고자 합니다. TypeScript로도 가능합니다!
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
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 <패키지명>
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();
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