日新又日新

2017년 12월 22일 금요일

[STAN] Structure Analysis for Java > Tasks > Analyzing Code > Selecting Libraries

Selecting Libraries

Library Page는 분석의 코드 베이스를 형성하는 라이브러리의 리스트를 유지한다.

JAR 파일들을 추가하기 위해 Add JARs... 버튼을 누른다.
클래스 폴더를 추가하기 위해 Add Foldr... 버튼을 누른다.

Up과 Down버튼은 라이브러리 아이템들의 순서를 정렬하기 위해 사용할 수 잇다. Structure Explorer은 Show Libraries 모드에서 이 순서대로 라이브러리들을 보여준다. 선택된 아이템을 제거하려면 Remove button을 사용한다.

[STAN] Structure Analysis for Java > Tasks > Analyzing Code > Choosing the Level of Detail

Choosing the Level of Detail

Level of Detail은 분석의 상세 정도를 결정한다.

Class - 분석의 상세 레벨은 클래스 계층으로 제한될 것이다. 필드나 메소드의 어떤 정보도 수집되지 않는다. 이 모드는 매우 큰 코드 베이스이거나 클래스의 상세 정보에는 관심이 없는 경우 시간과 메모리 사용을 감소시키기 위해 사용된다.
Member - 분석은 전체 레벨의 상세정보에 대해 수행된다. 필드와 메소드 정보가 수집된다. 메소드 매트릭스와 멤버 의존성 그래픽을 사용할 수 잇다.

새로운 분석을 생성할 때 상세정보의 기본 레벨은 Analysis Preferences로부터 취하게 된다.

[STAN]Structure Analysis for Java > Tasks > Analyzing Code

Analyzing Code

STAN의 RCP(stand-alone) 변종은 이른바 Projects라 불리는 것을 사용한다. Project settings은 workspace에 저장되어 수정될 수 있고 언저든지 실행할 수 있다.

Running an Analysis

Projects View는 workspace에 있는 모든 STAN 프로젝트들을 보여준다. 더블 클릭을 통해 프로젝트를 실행시키거나 컨텍스트 메뉴의 Analyze를 선택해서 실행시킬 수 있다.

Creating a new project

새로운 프로젝트를 열기 위해 메뉴바의 File > New 를 선택하거나 ALT+SHIFT+N을 선택한다. 다른 방법 : CTRL+N을 누르고 리스트에서 위저드를 선택한다.
프로젝트의 이름을 입력하고 아래에 설명하는데로 프로젝트 설정으로 통과하기 위해 다음을 누룬다.

Configuring an Analysis

Project Configuration 다이얼로그는 다음의 페이지를 갖고 있다.

General - 이 페이지에서 Level of Detail을 선택할 수 있다.
Libraries - 이 페이지는 코드베이스를 형성하는 라이브러리의 리스트를 유지한다.
Filter - 이 페이지는 당신의 Class Filter Patterns을 설정할 수 있게 해준다.

다 설정했으면, Finish를 누른다.
존재하는 프로젝트의 설정을 변경하기 위해서는 Projects View의 컨텍스트 메뉴에서 Properties를 선택한다. 현재 분석중인 프로젝트를 위해서는 Structure Explorer에 있는 root의 컨텍스트 메뉴로부터 선택하면 된다.

2017년 11월 24일 금요일

Chapter8. HTTP 서버

학습 목표

HTTP 모듈을 이용해서 서버를 작성할 수 있습니다.
HTTP 요청을 분석하는 코드를 작성할 수 있습니다.
HTTP 응답 메시지를 작성하는 코드를 작성할 수 있습니다.
정적 파일 요청과 서비스 제공하는 서버를 작성할 수 있습니다.

1. HTTP 서버

◎ HTTP 서버 구동 코드

var http = require('http');

var server = http.createServer(function(req, res) {

res.end('Hello World');

}).listen(3000);

2. HTTP 요청

◎ HTTP 요청

클라이언트 요청 분석
request 이벤트 리스너의 파라미터
req : IncomingMessage
var server = http.createServer(function(req, res) {} )

▷ 클라이언트 요청 분석

▷ IncomingMessage

message.url : 요청 url, 경로와 쿼리 문자열
message.method : 요청 메소드
message.headers : 요청 메소드의 헤더
message(streamable) : 요청 메시지 바디

▷ 요청 URL 경로와 쿼리 문자열 분석

▷ URL 분석하기 : URL 모듈

var url = require('url');

url.parse(req.url, true);

▷ 요청 메시지 헤더 분석

▷ 헤더 정보 : request.header

var headers = request.headers;

headers.host;

headers.content-type;

headers.user-agent;

. . .

▷ 요청 메시지 바디 분석

IncomingMessage의 data 이벤트 사용
POST 요청을 다루는 장에서 다룬다.

◎ HTTP 요청 출력

▷ 요청 내용 콘솔에 출력하기

var server = http.createServer(function(req, res) {
    console.log('HTTP Method : ' + req.method);
    console.log('HTTP URL : ' + req.url);
    console.log('== HEADERS ==');
    console.log(req.headers);

    res.end('Hello Node.js');
});

3. HTTP 응답

◎ 응답 메시지

응답 메시지 : http.ServerResponse
상태 코드와 상태 메시지
응답 메시지 헤더
응답 메시지 바디

▷ 메시지 상태

response.statusCode

response.statusMessage

▷ 메시지 헤더

response.writeHead(statusCode[, statusMessage][, headers])

response.removeHeader(name)

response.getHeader(name)

response.setHeader(name, value)

▷ 메시지 바디

response.end([data][, endcoding][, callback])

response.write(chunk[, encoding][, callback])

▷ HTTP 상태 코드와 메시지
// 200 OK
response.statusCode = 200;
response.statusMessage = 'OK';

// 404 Error
response.statusCode = 404;
response.statusMessage = 'Not found';

▷ 응답 메시지 헤더

▷ 응답 코드, 메시지 헤더 작성 함수 : writeHead
res.writeHead(200, {'Content-Length': body.length,
'Content-Type': 'text/plain'});

▷ 헤더 작성하기 : setHeader
res.setHeader("Content-Type", "text/html");
res.setHeader("Content-Length", body.length);

▷ 응답 메시지 바디
▷ 응답 메시지 종료
response.write(chunk[, endcoding][, callback])
response.end()

▷ 응답 메시지 작성 시 주의

▷ 응답 메시지 종료 - 클라이언트 대기 - timeout
http.createServer(function(req, res) {
res.write('Hello Node.js');
res.end(); // 응답 메시지를 완료시켜주어야 한다.
});

▷ 메시지 헤더는 메시지 바디 작성 전에
res.write('Hello World');
// 바디를 작성한 이후에 헤더를 작성하면 에러가 발생한다.
res.setHeader('Conent-Type', 'text/plain');

4. HTTP 서버 작성

◎ 정적 파일 요청

▷ 정적인 컨텐츠(이미지, html, 음악 등) 요청

미리 작성된 파일로 응답

▷ 요청 예

http://myServer.com/image/cat.jpg
http://myservice.net/music/sing.mp3

▷ 요청 경로

req.url

▷ 요청 경로 분석

path 모듈

▷ 정적 파일 요청 : 응답

정적 파일 찾기
파일 로딩, 응답

▷ fs 모듈

fs.readFile(FILEPATH, CALLBACK);

▷ 응답 메시지에 파일 내용 쓰기

res.write();
res.end();

▷ 정적 파일 요청에 대한 응답

fs.access(path, fs.F_OK, function(exist) {

fs.readFile(path, function(err, data) {

res.end(data);

});

◎ 정적 파일 요청

정적 파일 요청에 대한 응답
정적 파일 체크
상태 코드
컨텐츠 타입

▷ 파일이 없으면?

▷ 404 에러 처리 코드

fs.access(path, fs.R_OK, function(err) {

// 접근 불가능 시 404 에러

if( err ) {

res.statusCode = 404;

res.end('Not Found');

return;

}

▷ 정적 파일 응답

fs.access(path, fs.F_OK, function(err) {

if( err ) {

res.statusCode = 404;

res.end('Not found');

return;

}

fs.readFile(path, function(err, data) {

res.statusCode = 200;

res.setHeader('Content-type', 'image/jpg'); // 이미지라면

res.end(data);

});

▷ 스트림 파이프

입력 스트림 : fs.createReadStream()
출력 스트림 : res
fs.createReadStream(path).pipe(res);

▷ 파미콘 : 웹 사이트의 아이콘 이미지

▷ 파비콘 요청

GET /favicon.ico

▷ 파비콘 응답 코드

if( request.url == '/favicon.ico' ) {

// 파비콘 처리

return;

}

▷ 컨텐츠 타입

var server = http.createServer(function(req, res) {

if(req.url == '/favicon.ico') {}

else if(req.url == '/image.png' ) {

res.writeHeader(200, {'Content-Type':'image/png'});

fs.read...

}

else if(req.url == '/music.mp3') {

res.writeHeader(200, {'Content-Type':'audio/mp3'});

fs.createReadStrea...

}

else if(req.url == '/movie.mp4') {

res.writeHead(200, {'Content-Type':'video/mp4'});

fs.createReadStream...

}

});

◎ 정적 파일 서비스

▷ 요청 URL의 경로를 실제 파일 경로 매핑

myServier.com/resource/image.png -> ./resources/image.png
myServier.com/resource/audio.mp3 -> ./resources/audio.mp3

▷ 요청 url에서 경로 생성

URL로부터 파일의 패스 정보를 가져와서 바로 파일에 대한 경로를 만들어 줄 수 있다.

파일을 찾고 파일에 대한 읽기위한 경로를 만드는 과정이 단순해짐.

var pathUtil = require('path');

var path= __dirname + pathUtil.sep + 'resources' + req.url;

◎ 웹 페이지 서비스

▷ 요청

인덱스 요청
파비콘 요청
JS와 css요청
이미지 요청 : <img>

▷ 서비스 용 html

<html>

<body>

<h1>Hello Kitty</h1>

</body>

</html>

html요청

css 요청

image 요청

파비콘 요청 에 대한 응답 처리를 모두 해주저야 한다.

▷ 서버 코드

var server = http.createServer(function(req, res) {

if(req.url == '/favicon.ico') {

// 파비콘 응답

}

else if(req.url == '/') {

// 기본 페이지 : index.html

fs.createReadStream('./public/index.html').pipe(res);

}

else {

var path = __dirname + req.url;

}

})

◎ 서비스

▷ 서비스

▷ URL 쿼리 문자열 : 합계 구하기

http://127.0.0.1:3000/count?start=1&end=10

▷ 서버 코드

// URL 분석 : 쿼리 문자열

var parsed = url.parse(request.url, true);

var query = parsed.query;

// start와 end

var start = parseInt(query.start);

var end = parseInt(query.end);

if(입력값 오류) {

response.statusCode = 404;

response.end('Wrong Parameter');

}

else {

// 합계 구하기

response.statusCode = 200;

response.end('Result : ' + result);

}

학습 정리

◎ 지금까지 'HTTP 서버'에 대해 살펴보았습니다.

HTTP 요청
클라이언트의 HTTP 요청을 분석했습니다.
HTTP 응답
클라이언트에게 HTTP 응답 메시지를 작성하고 전송하는 방법을 알아봤습니다.
HTTP 서버
다양한 형태의 HTTP 서버 작성 방법을 알아봤습니다.

2017년 11월 13일 월요일

Chapter7. HTTP 통신

학습 목표

HTTP 통신의 특징을 이해할 수 있습니다.
HTTP 통신을 다루는 HTTP 모듈 사용 방법을 알 수 있습니다.
HTTP 서버와 클라이언트 클래스와 주요 메소드를 알 수 있습니다.

1. HTTP 통신

◎ HTTP

웹(WWW)의 주역!
HTTP : Hyper Text Transfer Protocol
하이퍼 텍스트 - 하이퍼 링크로 논리적으로 연결된 문서
ex) HTML

◎ HTTP 통신의 특징

▷ HTTP 통신

요청(Request)
응답(Response)

▷ 요청과 응답 과정

웹 브라우저 → 주소 입력 → 요청 → 웹 서버 → 응답 → 웹 브라우저

◎ HTTP 통신

◎ URL

▷ 리소스의 위치 : URL(Uniform Resource Locator)

http://username:password@host:8080/directory/file?query#ref:

◎ URL 인코딩

▷ URL에 허용되는 문자

알파벳, 숫자, 하이픈, 언더스코어, 점 틸드

▷ URL 인코딩하기

https://www.google.com/search?q=아이폰
https://www.google.com/search?q=%EC%95%84%EC%9D%B4%ED%8F%B0

◎ 웹 브라우저에서 요청/응답 확인해보기

▷ 웹브라우저

개발자 도구

2. HTTP 요청

◎ HTTP 메시지 구조

▷ 요청 메시지

요청 라인
요청 헤더
요청 바디(엔티티)

http body를 사용하지 않는 요청 메시지

◎ 요청 라인

요청 메소드
요청 URL
HTTP 버전
GET http://en.wikipedia.org/wiki/The_Scream HTTP/1.1

◎ HTTP 메소드

HTTP 메소드 : 리소스를 다루는 행위
GET : 리소스를 얻어오는 요청
POST : 리소스 전송 요청
PUT : 저장 요청(수정)
DELETE : 삭제
. . .

◎ 요청 헤더

헤더는 키 : 값 방식으로 작성

▷ 주요 요청 헤더

Accept : 클라이언트가 받을 수 있는 컨텐츠

Cookie : 쿠키

Content-Type : 메시지 바디(엔티티)의 종류

Content-Length : 메시지 바디의 길이

if-Modified-Since : 특정 날짜 이후에 변경됐을 때만

◎ 요청 정보 전달

▷ URL을 이용해서 요청 정보 전달

GET 메소드, TRACE 메소드 : 메시지 바디를 사용하지 않으므로 URL만으로 클라이언트가 원하는 정보를 전달

▷ 경로와 쿼리 스트링 사용

http://idols.com/snsd/taeyon.png
http://idols.com/q?group=snsd&name=jessica

▷ 메시지 바디를 사용하지 않는다.

◎ 요청 정보 전달

▷ URLEncoded 방식

▷ 메시지 헤더(컨텐츠 타입)

application/x-www-form-urlencoded

▷ 메시지 바디 : 쿼리 문자열

▷ 메시지 예

Content-Type : application/x-www-form-urlencoded

title=Madmax&Director=George+Miller

◎ 요청 정보 전달

▷ JSON/XML

▷ 메시지 헤더(컨텐츠 타입)

application/json

▷ 메시지 예

Content-Type:application/json

{

"name":"iu", "best":"좋은 날"

}

◎ 요청 정보 전달

▷ 멀티 파트를 이용한 요청 정보 전달

바이너리 파일을 올리는 경우에 주로 사용
하나의 메시지 바디에 파트를 나눠서 작성

▷ 메시지 헤더

컨텐츠 타입 ; 파트 구분자(boundary)
multipart/form-data; boundary=frontier

▷ 각 파트별 컨텐츠 타입

▷ 파트로 구성된 바디

◎ 요청 정보 전달

▷ 요청 정보 전달

메시지 바디를 사용 여부
바디의 인코딩 방식

▷ URL로 요청 정보 전달 : 바디 분석 불필요

3. HTTP 응답

◎ HTTP 메시지 구조

▷ 응답 메시지

응답 라인
응답 헤더
응답 바디

◎ HTTP 메시지

◎ 응답 메시지

▷ 응답 라인

버전
상태 코드
상태 메시지 → HTTP/1.1 200 OK

◎ 상태 코드

▷ 상태 코드 : 서버의 응답 코드

▷ 대 분류

1xx : 정보
2xx : 성공
3xx : 리다이렉션
4xx, 5xx : 오류

▷ 상태 코드 : 2xx

200 : OK. 요청 성공
201 : Created. 생성 요청 성공
202 : Accepted : 요청 수락. 요청 처리는 보장 안됨
203 : Non-authoritavive Information
204 : Non Content...

▷ 상태 코드 : 3xx

300 : Multiple choices. 여러 리소스에 대한 요청 결과 목록
301, 302, 303 : Redirect. 리소스 위치가 변경된 상태
304 : Not Modified. 리소스가 수정되지 않았음...

▷ 상태 코드 : 4xx

400 : Bad Request. 요청 오류, 요청을 처리하는 필수 데이터가 없는 경우
401 : Unauthorized. 권한 없는 상태
403 : Forbidden. 요청 거부 상태
404 : Not Found. 리소스가 없는 상태...

▷ 상태 코드 : 5xx

500 : Internal Server Error. 서버가 요청 처리를 못하는 상태
501 : Not Implemented. 서버가 지원하지 않는 요청
503 : Service Unavailable. 과부하 등으로 당장 서비스가 불가능한 상태 ...

◎ 응답 메시지 헤더

▷ 응답 메시지 헤더

▷ 주요 헤더 필드

Content-Type : 바디 데이터의 타입
Content-Length : 바디 데이터 크기
Set-Cookie : 쿠키 설정
ETag : 엔티티 태그

◎ 응답 메시지 바디

▷ 바디 데이터

HTML
XML/JSON
Octet Stream 등

▷ 바디 기록 방식 : Content-Type 헤더 필드

▷ 컨텐츠 타입

메시지 헤더에 기록
필드 이름 content-type
대분류/소분류

▷ 주요 컨텐츠 타입

text/plain, text/html
application/xml, application/json
image/png, image/jpg
audio/mp3, video/mp4

◎ 응답 메시지

▷ HTML 응답 메시지 헤더

content-type:text/html

▷ HTML 응답 메시지 바디

<html>

<body>

<h1>Hello Node.js</h1>

</body>

</html>

▷ HTML 응답 메시지 헤더

content-length: 73228
content-type: image/jpeg

▷ HTML 응답 메시지 바디 - 이미지를 헥사타입으로 출력

◎ 응답 메시지

컨텐츠 타입이 안 맞으면?
컨텐츠 타입 : application/json
실제 바디 데이터 : 이미지
제대로 표현하지 못한다.

4. HTTP 모듈

◎ HTTP 모듈

▷ HTTP 모듈, 기본 모듈

var http = require('http');

▷ HTTP 서버

클라이언트의 요청 메시지 수신
클라이언트에게 응답 메시지 전송

▷ HTTP 클라이언트

서버로 요청 메시지 전송
서버의 응답 메시지 수신

◎ HTTP 모듈 클래스

▷ 서버용 클래스

http.Server : HTTP 서버
http.IncomingMessage : HTTP 서버의 요청 메시지, Readable Stream
http.ServerResponse : HTTP 서버의 응답 클래스

▷ HTTP 클라이언트

http.Client : HTTP 클라이언트
http.ClientRequest : HTTP 클라이언트 요청 메시지
http.IncomingMessage : HTTP 서버의 응답 메시지, Readable Stream

◎ HTTP 모듈

5. HTTP 서버

◎ HTTP 서버

▷ HTTP 서버

http.Server

▷ HTTP 서버 생성

var server = http.createServer([requestListener])

▷ HTTP 서버 주요 이벤트

request : 클라이언트의 요청 도착
connection : 소켓 연결
close : 서버 종료

▷ HTTP 서버 메소드

server.listen()
server.close()
server.setTimeout()

◎ HTTP 서버
▷ HTTP 서버 동작시키기

서버 객체 생성
클라이언트 접속 대기(listening)
var server = http.createServer();
server.listen(PORT);

▷ 포트

0~1023 : well-known port, 미리 정의된 포트, 관리자 권한 필요
1024 ~ 49151 : registered port
49151 ~ 65535 : dynamic port

▷ 포트 바인딩 실패

이미 사용 중
권한 없음

▷ 서버와 이벤트 리스너

var http = require('http');

var server = http.createServer();

server.on('request', function(request, response) {

});

server.on('connection', function(socket) {

console.log('connection event');

});

server.on('close', function() {

console.log('close');

});

server.listen(3000);

▷ HTTP 서버 request 이벤트 리스너

var http = require('http');

var server = http.createServer(function(req, res) {

res.end('Hello World');

}).listen(3000);

웹 브라우저 : http://127.0.0.1:3000

6. HTTP 클라이언트

◎ HTTP 클라이언트

▷ 클라이언트 객체

http.create([port][, host]) // deprecated

▷ 클라이언트 요청

http.request(options[, callback])

▷ 바디 없이 요청 보내기(GET)

http.get(options[, callback])

학습정리

◎ 지금가지 'HTTP 통신'에 대해 살펴보았습니다.

HTTP 통신
요청과 응답 메시지를 사용하는 HTTP 통신을 알아봤고, 메시지 구조를 알아봤습니다.
HTTP 모듈
HTTP 통신 기능을 제공하는 HTTP 모듈을 알아봤습니다.
HTTP 서버
HTTP 모듈 중 서버를 작성하는 클래스와 이벤트를 알아봤습니다.
HTTP 클라이언트
HTTP 모듈 중 클라이언트를 작성하는 데 필요한 기능을 간단히 알아봤습니다.

2017년 10월 29일 일요일

Chapter6. 흐름 제어

학습 목표

1. 콜백과 콜백으로 발생하는 복잡한 상황을 확인할 수 있습니다.
2. Async 모듈과 Promise를 이용해서 복잡도를 낮추면서 작업 흐름 제어를 할 수 있습니다.

1. 콜백과 콜백 헬

◎ 콜백 함수 보기
▷ 비동기 함수 - 콜백 함수 사용
function asyncTask(path, function(result) {
// 결과 처리
});

◎ 비동기 동작과 콜백
▷ 비동기 동작의 연속

task1 실행 이수에 task2 실행
task1 실행 결과를 이용해서 task2 실행

▷ 콜백의 연속된 호출

◎ 연속된 비동기 동작의 예

이미지 업로드 후 데이터 베이스에 저장
다수의 이미지에서 썸네일 생성 후 업로드

◎ 연속된 비동기 동작 코드

▷ 비동기 동작 연속 실행

function task1(args, function(result) {

// 결과 처리

});

function task2(args, function(result) {

// 결과 처리

});

▷ 실행

~~task1()~~

~~task2()~~

▷ task1 실행 이후에 task2 실행

task1(arg1, function(result) {

task2(arg2, function(result) {

});

};

▷ task1 실행 결과를 task2 에서 사용

task1(arg1, function(result) {

var arg2 = result.value;

task2(arg2, function(result) {

});

};

◎ 콜백의 연속으로 발생한 현상

▷ 그러다 콜백 지옥에 도착

task1(a, b, function(err, result1) {

task2(c, function(err, result2) {

task3(d, e, f, function(result3) {

task4(h, i, function(result4) {

// 비동기 동작

}); // task4

}); // task3

}); // task2

}); // task1

◎ 콜백 지옥 탈출 시도

▷ 콜백 지옥 탈출하기

- function을 인라인방식으로 작성하지 않고 분리해서 작성하기

- 중간에 비동기 동작을 부르는 순서가 바뀌거나 로직이 바뀌는 경우

이 코드를 유지하기 어려워짐. -> 근본적인 해결책이 되지는 못함. => Async, promise 도입

task1('a', 'b', task1Callback);

function task1Callback(result) {

task2('c', task2Callback);

}

function task2Callback(result) {

// task3 호출

}

// callbackhell.js
function task1(callback) {
    console.log('Task1 시작');
    setTimeout(function() {
        console.log('Task1 끝');
        //callback();
    }, 300);
}

function task2(callback) {
    console.log('Task2 시작');
    setTimeout(function() {
        console.log('Task2 끝');
        //callback();
    }, 200);
}

task1();
task2();

PS C:\project\nodetest> cd chapter6
PS C:\project\nodetest\chapter6> node callbackhell.js
Task1 시작
Task2 시작
Task2 끝
Task1 끝

// callbackhell2.js
function task1(callback) {
    console.log('Task1 시작');
    setTimeout(function() {
        console.log('Task1 끝');
        callback();
    }, 300);
}

function task2(callback) {
    console.log('Task2 시작');
    setTimeout(function() {
        console.log('Task2 끝');
        callback();
    }, 200);
}

task1(function() {
    task2(function() {
        
    });
});

PS C:\project\nodetest\chapter6> node callbackhell2.js
Task1 시작
Task1 끝
Task2 시작
Task2 끝

2. Async

◎ 비동기 동작의 흐름 제어
▷ Async 모듈

https://github.com/caolan/async
모듈이름 js (async js) 라고 검색하면 자바스크립트용 모듈(라이브러리)을 쉽게 찾을 수 있다.

▷ 모듈 설치

npm install async

◎ Async의 대표적인 기능

▷ 행위 순서 제어

series seriesEach
paralles
waterfall

▷ 콜렉션(배열, 객체)

eachcallback
forEachOf
map, filter

◎ Async의 순차 실행

▷ series(tasks, [callback])

비동기 태스크들을 배열 형태로 넘김

async.series(

[

태스크1,

태스크2,

태스크3

function(err, results) {

완료 콜백

}

);

◎ 순차 실행

▷ callback 호출 : 다음 태스크로 진행

▷ 태스크 완료 : 다음 태스크 실행

function(callback) {

// 태스크 성공

callback(null, result);

}

▷ 완료 콜백으로 동작 결과 전달

▷ 태스크 에러 발생 : 에러 전달

function(callback) {

// 에러 발생

callback(err, null);

}

▷ 다음 태스크 실행 안함

▷ 마무리 콜백으로 에러 전달

◎ 연속 동작 마무리

▷ serial 마무리 콜백

async.series([태스크1, 태스크2, 태스크3],

function(err, results) {

if(err) {

// 태스크 진행 중 에러 : callback(err, null)

return;

}

// 마무리 동작

}

);

results에는 Async가 제공해주는 함수마다 각각 다른 형태을 제공해주는데

API를 참조해야 한다. Async.series는 각각 태스크에서 전달한 result 데이터가 배열

형태로 넘어옴.

◎ async.series 예제코드

▷ async.series

async.series([

function task1(callback) {

callback(null, 'result1');

function task2(callback) {

callback(null, 'result2');

function task3(callback) {

callback(null, 'result3');

}

function (err, results) {

// results : ['result1', 'result2', 'result3']

}

);

◎ 순차 실행

▷ 태스크로 정보를 전달하려고 할 때 : async.waterfall

다음 태스크로 전달할 값을 콜백의 파라미터로
태스크 함수의 파라미터로 전달 이전 태스크의 값 전달
series는 최종 마무리에 있는 콜백으로 데이터를 바로 전달하게 되는데
waterfall은 그 다음에 있는 task로 값을 전달한다.

function task1(callback) {

callback(null, 'value');

function task2(arg, callback) {

callback(null, 'hello', 'world');

}

어떤 비동기 동작이 필요하냐에 따라 series와 waterfall을 선택적으로 사용

◎ async.waterfall 예제 코드
▷ async.waterfall 샘플 코드
async.waterfall([
function task1(callback) {
callback(null, 'value');
},
function task2(arg, callback) {
callback(null, 'value1', 'value2');
},
function task3(arg1, arg2, callback) {
callback(null, 'result');
}
],
function(err, results) {
}
);

◎ 동시 실행
▷ 여러 태스크를 동시에 실행
▷ 모든 태스크를 마치면 완료 콜백

parallel(tasks, [callback])

▷ 사용 방식

async.parallel([ task1, task3, task3 ],

function(err, results) {

// ['태스크 1 결과', '태스크2 결과', '태스크3 결과']

}

);

▷ async.parallel 예제 코드

async.parallel(

[

function(callback) {

callback(null, '태스크1 결과');

function(callback) {

callback(null, '태스크2 결과');

function(callback) {

callback(null, '태스크3 결과');

}

function(err, results) {

console.log('모든 태스크 종료, 결과 : ', results); // ['태스크1 결과', '태스크2 결과', '태스크3 결과']

]

);

◎ 콜렉션과 비동기 동작

▷ 콜렉션 내 각 항목을 사용하는 비동기 동작

다수의 파일(배열)을 비동기 API로 읽기
다수의 파일을 비동기 API로 존재하는지 확인하기

ex) 파일 다섯개를 비동기 API와 같이 사용해야 할 때 각각 동작시키는 것은 가능하나

비동기 동작이 모두 끝났을 때의 처리를 해줄 수가 없다.

ex) 여러개의 파일이 있는지 없는지 비동기 API를 통해 확인하고 싶다. fs모듈의 access(), stat() 같은 비동기 API를 이용해 파일 10개가 있는지 없는지 체크하고 난 이후에 뭔가 하고 싶을 때

ex) 콜렉션의 개수 만큼 비동기 동작을 수행

◎ 콜렉션과 비동기 동작

▷ 비동기 순회 동작

each, eachSeries, eachLimit
map, filter
reject, reduct
. . .

▷ 콜렉션과 사용하기 : each

each(arr, iterator, [callback])

▷ 예제 코드

async.each(array, function (item, callback) {

// 베열 내 항목 item을 사용하는 비동기 동작

callback(null);

}, function(err) {

// async.each 완료

});

// async.js
function task1(callback) {
    console.log('Task1 시작');
    setTimeout(function() {
        console.log('Task1 끝');
        callback(null, 'Task1 결과');
    }, 300);
}

function task2(callback) {
    console.log('Task2 시작');
    setTimeout(function() {
        console.log('Task2 끝');
        callback('null', 'Task2 결과');
    }, 200);
}

var async = require('async');
async.series([task1, task2], function(err, results) {
    console.log('비동기 동작 모두 종료', results);
});

PS C:\project\nodetest\chapter6> node async.js
Task1 시작
Task1 끝
Task2 시작
Task2 끝
비동기 동작 모두 종료 [ 'Task1 결과', 'Task2 결과' ]

// async_error.js
function task1(callback) {
    console.log('Task1 시작');
    setTimeout(function() {
        console.log('Task1 끝');
        callback(Error, null);
    }, 300);
}

function task2(callback) {
    console.log('Task2 시작');
    setTimeout(function() {
        console.log('Task2 끝');
        callback('null', 'Task2 결과');
    }, 200);
}

var async = require('async');
async.series([task1, task2], function(err, results) {
    if(err) {
        console.error('Error : ', err);
        return;
    }
    console.log('비동기 동작 모두 종료', results);
});

PS C:\project\nodetest\chapter6> node async_error.js
Task1 시작
Task1 끝
Error : function Error() { [native code] }

3. Promise

◎ Promise

비동기 동작의 흐름 제어
사이트 : www.promisejs.org
JavaScript ES6에 추가
→ Node.js4.x 이후 모듈 설치 필요 없음

◎ Promise 생성

▷ Promise 객체 생성

new Promise(function() {

// 비동기 동작

});

◎ Promise 상태

▷ Promise의 상태

pending : 동작 완료 전
fulfilled : 비동기 동작 성공
rejected : 동작 실패

◎ Promise 상태 반영

▷ Promise 생성, 상태 반영

성공적으로 완료 : fullfill 호출
에러 상황 : reject 호출

▷ Promise 생성, 상태 반영

new Promise( function(fullfill, reject) {

// 비동기 동작

if( err )

reject(err);

else

fullfill(result);

});

◎ Promise 이후 동작

▷ Promise 이후의 동작 : then

fullfilled 상태일 때의 콜백
rejected 상태일 때의 콜백

▷ 코드 형태

new Promise(task).then(fullfilled, rejected);

function fullfilled(result) {

// fullfilled 상태일 때의 동작

}

function rejected(err) {

// rejected 상태일 때의 동작

}

◎ Promise를 사용하는 태스크
▷ Promise를 사용하는 태스크
function task() {
return new Promise(function(fullfill, reject) {
if( success )
fullfill('Success');
else
reject('Error');
});
}

비동기 태스크 객체 자체가 Promise를 리턴하는 방식으로 사용

Promise를 세련되게 사용하는 방법임.

▷ 태스크 사용 코드
task(arg).then(fullfilled, rejected);

◎ 흐름 제어
▷ Async, Promise

Async : Flow Control
Promise : Chain

// promise.js
function task1(fullfill, reject) {
    console.log('Task1 시작');
    setTimeout(function() {
        console.log('Task1 끝');
        fullfill('Task1 결과');
    }, 300);
}

function fullfilled(result) {
    console.log('fullfilled : ', result);
}

function rejected(err) {
    console.log('rejected : ', err);
}

new Promise(task1).then(fullfilled, rejected);

PS C:\project\nodetest\chapter6> node promise.js
Task1 시작
Task1 끝
fullfilled : Task1 결과

// promise_error.js
function task1(fullfill, reject) {
    console.log('Task1 시작');
    setTimeout(function() {
        console.log('Task1 끝');
        //fullfill('Task1 결과');
        reject('Error msg');
    }, 300);
}

function fullfilled(result) {
    console.log('fullfilled : ', result);
}

function rejected(err) {
    console.log('rejected : ', err);
}

new Promise(task1).then(fullfilled, rejected);

PS C:\project\nodetest\chapter6> node promise_error.js
Task1 시작
Task1 끝
rejected : Error msg

학습정리

◎ 지금까지 '흐름 제어' 에 대해 살펴보았습니다.

콜백과 콜백 지옥
비동기 동작을 연속적으로 수행하는 경우 콜백의 중첩으로 복잡도가 증가하는 현상을 살펴보았습니다.
Async
Async 모듈을 이용해서 비동기 동작의 흐름을 제어했습니다.
Promise
자바 스크립트의 표준에 추가된 Promise를 살펴봤습니다. 체인 방식으로 비동기 동작을 제어합니다.

2017년 10월 25일 수요일

Chapter5. npm을 이용한 모듈 관리

학습목표

npm을 이용한 모듈 관리 방법을 이해할 수 있습니다.
패키지 정보에 대해 알 수 있습니다.
확장 모듈 설치에 대해 이해할 수 있습니다.
커스텀 모듈을 만들 수 있습니다.

1. npm

◎ npm

홈페이지 : https://www.npmjs.org/

◎ js 패키지 포털

확장 모듈(패키지) 검색

◎ 패키지 매니저

◎ npm 사이트

모듈 검색
모듈 상세 정보
모듈 설치 방법
API 설명, 예제

◎ 모듈

▷ 패키지 매니저 : npm

모듈 설치, 삭제(확장 모듈)
모듈 검색
모듈 정보
패키지 정보 작성

◎ 콘솔 명령 : npm

◎ npm 주요 옵션

init : 패키지 준비, package.json 생성
install : 패키지에 필요한 모듈 설치
install [PACKAGE] : 개별 패키지 설치
list : 설치된 모듈 목록 보기
info : 모듈 정보
search : 모듈 검색
update : 모듈 업데이트
uninstall : 모듈 삭제

◎ 모듈 설치

▷ 전역 설치

한번 설치로 모든 프로젝트에서 사용
라이브러리 폴더(lib/node_modules)
관리자 권한 필요, -g 옵션

▷ 지역 설치

프로젝트마다 설치
현재 폴더 내 node_modules 폴더

▷ 모듈 전역 설치

npm install [Module][@Version]

▷ 모듈 지역 설치 예

$npm install async

$npm install jade@1.0.0

node_modules 폴더 내 모듈 설치

▷ 모듈 목록 보기

npm list
npm list async

◎ 모듈 검색

▷ 모듈 검색 : npm search

▷ 정보 보기 : npm info

◎ 모듈 업데이트

▷ npm update [모듈명]

◎ 모듈 삭제

▷ npm uninstall [모듈 이름]

◎ 전역 모듈

▷ 전역 모듈

Node.js의 중앙 라이브러리에 설치 : lib/modeules
위치는 시스템마다 달라짐

▷ 전역 모듈 다루기

npm 명령에 -g 옵션만 추가
관리자 권한

◎ 전역 모듈 - 모듈, 전역 설치와 삭제
▷ 설치

[sudo] npm install -g nodemon

▷ 삭제

[sudo] npm uninstall -g nodemon

◎ 전역 모듈과 지역 모듈 중

▷ 지역 모듈 권장

개발에 필수 라이브러리
특정 버전 모듈에 의존적인 상황

▷ 유틸성(mocha, nodemon)은 전역 설치 권장

2. 패키지 정보

◎ 패키지 설정 파일

package.json
npm init 으로 생성
패키지에 대한 정보 입력

◎ 패키지 정보 파일 : package.json

{
    "name": "package_sample",
    "version": "1.0.0",
    "description": "패키지 설정",
    "main": "main.js",
    "scripts": {
        "test": "echo \"Enter: no test specified\" && exit 1"
    }
    "author": "",
    "license": "ISC"
}

◎ 패키지 정보 중 의존성 정보

"dependencies": {
    "async":"^1.5.0",
    "jade": "^1.0,0"
},
"devDependencies": {
    "mocha": "^2.3.4"
},

◎ 패키지 정보 기록하기

의존성 정보 기록 : npm install async --save

◎ 패키지 의존성 정보 사용하기

패키지 정보 파일에 기록된 모듈 설치/업데이트
→ npm install
→ npm update

3. 확장 모듈 : nodemon

◎ nodemon
▷ 소스 코드 수정 후 재시작

동작 멈추기, 다시 시작

▷ 수정 후 자동 재시작

nodemon source.js

◎ 모듈 nodemon

▷ 설치

글로벌로 설치
관리자 권한 필요
[sudo] npm install -g nodemon

▷ 실행

nodemon app.js

4. 모듈 만들기

◎ 모듈 만들기

▷ 소스 코드 분리

모듈

▷ 모듈 작성 방법

module.exports

▷ 모듈 사용하기

모듈 로딩 : require
require('./greeting.js'); // 경로에 대한 명시가 필요, 경로 없으면 node_module에서 찾음

▷ 모듈 로딩 에러

require('greeting.js');
Error: Cannot find module 'greeting.js'

◎ 함수 exports

▷ 모듈 greeting.js

module.exports.goodMorning = function() {

// 모듈 함수 기능 작성

}

exports.goodNight = function(arg, callback) {

// module 생략 가능

}

▷ 사용하기

var greeting = require('./greeting.js');

greeting.goodMorning();

◎ 모듈 만들기
▷ exports 하지 않은 함수는 사용 불가
function goodAfternoon() {
console.log('goodAfternoon');
}
▷ 사용하기
var greeting = require('./greeting.js');
greeting.goodAfternoon();
▷ 에러

TypeError: greeting.goodAfternoon is not a function

▷ 클래스 정의 exports

function BusDef() {

this.take = function() {}

}

function MetroDef() {

this.ride = function() {}

}

module.exports.Bus = BusDef;

exports.Metro = MetroDef; // module 생략 가능

▷ 사용하기

var Bus = require('./transport').Bus; // 클래스

var bus = new Bus(); // 객체생성

bus.take();

▷ 클래스 exports

function Exercise() {

this.pushup = function();

}

Exercise.prototype.run = function() {

}

module.exports = Exercise; // module 생략 불가

// 하나의 모듈 내에서 단 하나의 class만 export할 때 사용

▷ 사용하기

var Exercise = require('./exercise');

var exercise = new Exercise();

exercise.pushup();

▷ 객체 exports - 객체 단위로
var student = {
hour : 0,
study : function() {
this.hour++;
console.log(this.hour + '시간째 공부 중');
}
}
module.exports = student;

▷ 사용하기
var you = require('./student.js');
you.study();

▷ 모듈은 캐쉬됨
var you = require('./student.js');
you.study(); // 1
you.study(); // 2

// 모듈 로딩
var him = require('./student.js');
him.study(); // 3시간째 공부 중

학습정리

◎ 지금까지 'npm을 이용한 모듈 관리'에 대해 살펴보았습니다.

▷ npm

npm을 이용해서 모듈을 찾고 설치할 수 있습니다.

▷ 패키지 정보

패키지 정보 파일 사용 방법을 알아봤습니다.

▷ 확장 모듈, nodemon

확장 모듈 nodemon을 설치해보고 사용해봤습니다.

▷ 모듈 만들기

커스텀으로 모듈을 만들어봤습니다.