19.01.09 수요일

D+3

주요/자주 사용하는 메소드들의 이해가 부족하다. 코드를 통해 메소드 사용법 공부하고, 미들웨어와 라우팅까지 공부했당

1. 동기식IO & 비동기식IO

동기식 IO는 파일 작업이 끝날 때 까지 대기하며 비동기식 IO는 파일 작업을 요청만 하고 그 다음 작업을 바로 수행한다. 이후 파일 작업이 끝나면 그 상태는 이벤트로 받아서 처리한다.

var fs = require('fs');
 
var data = fs.readFile('./views/index.ejs','utf8',function(err,data){
    console.log(data);
});
 
console.log('프로젝트 안의 파일을 읽도록 요청했습니다.');

비동기식 IO로 파일을 읽어들이는 방식이다. 파일을 읽기 전에 먼저 console.log가 먼저 실행된다. 에러를 확인할 수 있기 때문에 비동기식 방식을 더 많이 사용한다.

* require(‘readline’) 모듈은 line-by-line으로 읽어오도록 한다. 이 모듈을 호출하면 인터페이스와 STDIN스트림을 닫을 때 까지 프로그램이 종료되지 않기 때문에 readline.createInterface(instream, process.stdout);와 함께 사용한다.

* on(event, listener) 메소드 : 지정한 이벤트의 리스너를 추가한다. on(‘exit’, function())는 exit를 발생시킨다는 의미이다.

2. buffer 사용법

(1)

var buf1 = new Buffer(10); //크기를 먼저 할당한 후

buf1.write(‘안녕’, ‘utf8’); //문자열을 입력하는 방식

(2)

var buf2 = new Buffer(‘안녕’, ‘utf8’); //buffer를 만듦과 동시에 문자열을 입력하는 방식

* isBuffer()메소드 : 변수에 들어있는 것이 벼퍼인지 아닌지 확인할 때 사용한다.

3. 스트림 단위로 파일 읽고 쓰기

스트림이란 데이터가 전달되는 통로를 말한다.

- createReadStream(path, [options]) : 파일을 읽기 위한 스트림 객체를 만든다.

- createWriteStream(path, [options]) : 파일을 쓰기 위한 스트림 객체를 만든다.

var fs = require('fs');
 
var infile = fs.createReadStream('./output.txt', {flags: 'r'});
var outfile = fs.createWriteStream('./output2.txt', {flags: 'w'});
 
infile.pipe(outfile);

스트림 객체를 각각 생성해 준 후 pipe() 메소드로 연결해 주면 output.txt의 파일의 내용을 읽어와서 output2.txt 파일에 작성한다.

4. 로그 파일

console객체의 log()나 error() 메소드를 통해 로그를 출력할 수 있으나, 프로그램의 크기가 커지면 로그의 양도 많아지기 때문에 로그를 보관하는 방식이 중요하다. 그래서 외부 모듈을 사용한다.

로그 레벨이란? 어떤 정보(오류수준)까지 출력하여 알려줄 것인지 결정하는 것을 말한다.

debug:0 > info:1 > notice:2 > warning:3 > error:4 > crit:5 > alert:6 > emerg:7

5. 웹 서버 만들기

http.createServer() : 웹 서버 객체를 만드는 것

listen() 메소드 : 웹 서버 시작하는 메소드

connection 이벤트 :  클라이언트가 접속하여 연결이 만들어질 때 발생하는 이벤트

request 이벤트 : 클라이언트가 요청할 때 발생하는 이벤트

Content-Type은 데이터 타입을 말하는 것인데, Content-Type에는 text/plain, text/html, text/css, image/jpeg, image/png, video/mpeg, audio/mp3등이 있다.

server.on('request',function(req,res){
    console.log('클라이언트 요청이 들어왔습니다.');
   var filename = '4.png';
   fs.readFile(filename, function(err,data){
       res.writeHead(200, {"Content-Type":"image/png"});
       res.write(data);
       res.end();
   });

클라이언트의 요청에 의해 png 파일을 불러올 때의 코드이다.

writeHead메서드는 스트림에 상태코드와 헤더를 작성한다. 일단 헤더를 설정하고 나면 응답 데이터를 전송할 준비가 된 것이다.

server.on('request',function(req,res){
    console.log('클라이언트 요청이 들어왔습니다.');
       var filename = '4.png';
       var infile = fs.createReadStream(filename, {flags:'r'});
    
    infile.pipe(res);
  });

write메소드에서 Content-Type지정 필요없이 pipe()메소드를 사용하면 다른 설정 필요없이 알아서 처리가 된다. 하지만 이방법으로는 헤더를 설정할 수 없는 등의 제약이 생길 수 있다.

6. Express로 웹 서버 만들기&미들웨어 사용해 보기

* 미리 만들어 둔 여러가지 미들웨어들이 있지만 기본 개념만 공부

//express의 기본 모듈 불러오기
var express = require('express');
var http = require('http');

> express모듈은 웹 서버를 위해 만들어진 것으로 http모듈 위에서 동작한다. 따라서 둘은 항상 같이 붙어다닌다.

<자주 사용하는 메소드들>

set(name, value) 메소드 : 서버 설정을 위한 속성을 지정한다.

get(name) 메소드 : 서버 설정을 위해 지정한 속성을 꺼내온다.

use([path], function) 메소드 : 미들웨어 함수를 사용한다.

get([path], function) 메소드 : 특정 패스로 요청된 정보 처리한다.

- 미들웨어 : 익스프레스에서는 웹 요청과 응답에 관한 정보를 사용해 필요한 처리를 진행할 수 있도록 독립된 함수로 분리한다. 이 독립된 함수들을 미들웨어라고 한다. 예를 들어서 use() 메소드를 사용해서 이전에 만들어 놓은 함수를 미들웨어로 등록해두면, 그 함수를 실행시킬때 이 미들웨어를 거치면서 함수를 실행시킨다.

* 미들웨어는 use() 메소드를 사용하여 설정 next() 메소드를 이용하여 다음 미들웨어로 넘어갈 수 있음

- 라우터 : 클라이언트의 요청패스를 보고 이 요청 정보를 처리할 수 있는 곳으로 기능을 전달해 주는 역할을 한다. 즉 클라이언트의 요청에 따라 각각을 담당하는 함수로 분리시키는 일을 한다.

//express의 기본 모듈 불러오기
var express = require('express');
var http = require('http');
 
var app = express();
 
app.use(function(req, res, next){
    console.log('첫번째 미들웨어에서 요청을 처리한다.');
    req.user='mike';
    console.log(req.user);
    next();
});
 
app.use(function(req, res, next){
    console.log('두번째 미들웨어에서 요청을 처리한다.');
    res.writeHead('200',{'Content-Type':'text/html;charset=utf8'});
    res.end('<h1>Express server 에서' + req.user+ '응답한 결과입니다.</h1>');
});
 
//express서버 시작
http.createServer(app).listen(3000,function(){
    console.log('익스프레스 서버가 3000에서 시작됨');
});

두 개의 미들웨어를 사용하여 첫 번째 미들웨어에서 다음 미들웨어로 넘어가도록 하는 코드이고 아래는 그 결과이다.

* redirect() 메소드를 사용하면 다른 페이지로 이동할 수 있다! 또한 URL주소뿐만 아니라 프로젝트 폴더 안에 있는 다른 페이지를 보여줄 수 있다.

* render() 메소드는 뷰 엔진을 사용해 템플릿 파일에 있는 내용을 HTML페이지로 바꾼 후 그 결과물을 전송한다.

<post방식으로 요청했을 때(body-parser미들웨어를 사용)>

// Express 기본 모듈 불러오기
var express = require('express')
  , http = require('http')
  , path = require('path');
 
// Express의 미들웨어 불러오기
var bodyParser = require('body-parser')
  , static = require('serve-static');
 
 
 
// 익스프레스 객체 생성
var app = express();
 
// 기본 속성 설정
app.set('port', process.env.PORT || 3000);
 
// body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({ extended: false }))
 
// body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())
 
app.use('/public',static(path.join(__dirname, 'public')));
 
// 미들웨어에서 파라미터 확인
app.use(function(req, res, next) {
    console.log('첫번째 미들웨어에서 요청을 처리함.');
 
    var paramId = req.body.id || req.query.id;
    var paramPassword = req.body.password || req.query.password;
    
    res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
    res.write('<h1>Express 서버에서 응답한 결과입니다.</h1>');
    res.write('<div><p>Param id : ' + paramId + '</p></div>');
    res.write('<div><p>Param password : ' + paramPassword + '</p></div>');
    res.end();
});
 
 
// Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

* 혼란1 * 24번째 줄이 ‘public’폴더에 있는 html문서를 불러오는 코드이다…

* 혼란2 * static미들웨어 : 특정 폴더의 파일들을 특정 패스로 접근할 수 있도록 해 준다. 위 코드는 public폴더 안의 파일에 접근할 수 있도록 해 준다. 만약 파일 이름이 login.html이라면 <http://localhost:3000/login.html>로 접근이 가능하다!

7. 요청 라우팅하기

클라이언트로부터 로그인이 아닌 다른 요청이 들어온다면 일일이 URL을 확인해야 하는 번거로움을 없애주는 것이 라우터 미들웨어이다. 사용자가 요청한 기능이 무엇인지 패스를 기준으로 구별한다.

----------------------------------------------

Action Item

1. Router 재공부 / Vue Template (EJS 학습)

2. Node.JS와 i18n 연동 (~1/11일)

3. Language Pack은 언제쯤?? -> 8주 전에는 무조건!!! 나와야함