본문 바로가기

Javascript/Node.js

Express 기초 (morgan 로깅미들웨어, 라우팅, 요청/응답 확장, 뷰 렌더링)

반응형

Express 기초

주요 기능

1. 미들웨어 - 하나의 함수를 통해서만 요청이 흘러가는 node.js와 대조적으로, 함수를 효과적으로 배열하는 미들웨어 스택이 있음.

2. 라우팅 - HTTP메서드(get,post,put,delete...)로 특정 URL을 방문할 때만 함수가 호출됨.

3. 요청/응답 개체에 대한 확장 - response.redirect(...) 나 response.sendFile(...) 처럼 확장 가능.

4. 뷰 - 뷰를 사용해서 HTML을 동적으로 렌더링할 수 있음. (뷰템플릿 pug, ejs 등)


Morgan

로그 기록을 남기는 morgan 모듈을 설치하고 사용해본다.

npm install morgan --save 명령어를 입력하여 morgan 모듈을 설치한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var express = require("express"); //Express를 변수에 담는다.
var http = require("http"); //노드 내장 모듈
var logger = require("morgan"); //로그 모듈
var app = express();
 
app.use(logger("short")); // logger("short")은 함수 반환
//short을 통해 간단한 로그만 남김
 
app.use(function(request,response){
  response.writeHead(200, {"Content-Type":"text/plain"});
  response.end("Hello world!");
});
 
http.createServer(app).listen(3000);
 


위의 예제 코드를 입력하고 실행한 뒤 localhost:3000 에 접속해보면 명령프롬프트에 로그가 찍히는 것을 알 수 있다.


Express.static

Express에서 제공되고 정적 파일 서비스를 도와준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var express = require("express"); //Express를 변수에 담는다.
var http = require("http"); //노드 내장 모듈
var logger = require("morgan"); //로그 모듈
var path = require("path");
var app = express();
 
app.use(logger("short")); // logger("short")은 함수 반환
//short을 통해 간단한 로그만 남김
var publicPath = path.resolve(__dirname,"public");
app.use(express.static(publicPath));
 
app.use(function(request,response){
  response.writeHead(200, {"Content-Type":"text/plain"});
  response.end("Looks like you didn't find a static file.");
});
 
http.createServer(app).listen(3000);
 


__dirname 은 현재위치를 가리키는 node 전역변수

path.resolve를 사용하는 이유는 OS에 따라 /public , \public 처럼 분리자가 다를 수 있는데 그것을 처리해주기때문.


라우팅

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var express = require("express"); //Express를 변수에 담는다.
var http = require("http"); //노드 내장 모듈
var path = require("path");
 
var app = express();
 
var publicPath = path.resolve(__dirname,"public");
app.use(express.static(publicPath));
 
app.get("/",function(request,response){
  response.end("welcome to my homepage!");
});
app.get("/about",function(request,response){
  response.end("welcome to my about page!");
});
app.use(function(request,response){
  response.statusCode = 404;
  response.end("404!");
});
 
http.createServer(app).listen(3000);
 


app.get과 앞에 url을 통해서 라우트되는 곳마다 다르게 보여줄 수 있다.

고정된 경로뿐만아니라 정규표현식같은 것으로 더 복잡한 경로를 매칭할 수 있다.


request/response 확장

1
2
3
4
5
6
response.redirect("/hello/world");
response.redirect("http://expressjs.com");
 
response.sendFile("/path/to/cool_song.mp3");
request.ip // 이렇게 하면 요청한 곳 ip주소를 받을 수 
 


Express에서 이런식으로 reponse.redirect나 request에서 ip를 받아오는등의 기능을 할 수 있다.



1
2
3
4
5
6
7
8
var express = require("express"); //Express를 변수에 담는다.
var http = require("http"); //노드 내장 모듈
var path = require("path");
 
var app = express();
 
app.set("views",path.resolve(__dirname,"views"));
app.set("view engine","ejs");


app.set을 이용해서 앞으로 뷰와 관련된 파일은 views 폴더에 넣을 거라고 정하고

뷰 템플릿 엔진을 ejs로 정했다. (pug(jade)로 정해도 됨.)

이런식으로 express에서 뷰 설정을 제공한다.


다음 포스트에서 위의 기능을 가지고 간단한 방명록 웹 애플리케이션을 만들어 본다.

반응형