[Node.js] Express.js

Node.js로 웹 서버에 필요한 기능을 하나하나 다 짜면, 귀찮은것들(Routing, Session, ...)이 많다.

 

Node.js 웹 프레임워크(Express, Koa, Hapi)를 사용하면 간편하게 웹 서버를 구축 할 수 있다.

 

Express는 npm으로 설치할 수 있다.

npm install express

 

 

Express 서버 생성

서버를 만드는 코드를 살펴보자.

const express = require('express');
const app = express();

// 루트 URL에 대한 라우트 정의
app.get('/', (req, res) => {
  res.send('안녕하세요!');
});

// 서버를 3000번 포트로 시작
const port = 3000;
app.listen(port, () => {
  console.log(`서버가 http://localhost:${port} 에서 실행중입니다.`);
});

먼저 express 모듈을 불러오고 express() 함수를 사용하여 Express 어플리케이션의 인스턴스를 생성한다.

const express = require('express');
const app = express();

그 다음은 각 페이지 URL에 대한 라우트를 정의한다.

// root url에 대한 라우트 정의
app.get('/',(req,res)=>{
	// root url에 대한 GET 요청에 대한 응답.
	res.send('안녕하세요');
});

마지막으로 서버를 원하는 포트에 시작 시킨다.

const port = 3000;
app.listen(port,()=>{
	console.log("Server Start!");
});

 

 

라우팅

Express 모듈을 사용하여 페이지 라우팅을 할 때는 일반적으로 라우팅 모듈을 따로 작성하여 사용한다.

먼저 디렉토리를 하나 만들고 그 안에 라우팅을 담당할 main.js 라는 파일을 작성한다.

module.exports = function (app) {
    app.get("/", function (req, res) {
        res.render("index.html");
    });
    app.get("/about", function (req, res) {
        res.render("about.html");
    });
};

이 코드를 살펴보면 root url에 접속하면 index.html을 렌더링하여 화면에 띄워주고, /about url에 접속하면 about.html을 렌더링하여 화면에 띄워준다.

 

이제 렌터링을 위한 페이지 index.html과 about.html을 작성하여 views라는 디렉토리에 넣어준다.

 

이제 이렇게 만든 파일들을 가지고 express 서버를 실행 시켜보자.

const express = require("express");
const app = express();

var router = require("./routes/main")(app);

app.set("views", __dirname + "/views");
app.set("view engine", "ejs");
app.engine("html", require("ejs").renderFile);

var server = app.listen(3000, function () {
    console.log("Express server has started on port 3000");
});

 

다음은 중간에 ejs 관련 코드를 살펴보자.

app.set("views", __dirname + "/views");

• "view" : Express 어플리케이션에서 템플릿 파일들이 위치한 디렉토리를 설정하는 옵션이다.
• __dirname + "/views" : 현재 실행 중인 파일의 디렉토리 경로이다.

app.set("view engine","ejs");

• "view engine" : Express 어플리케이션에서 사용할 템플릿 엔진을 설정하는 옵션이다.
• "ejs" : ejs 템플릿 엔진을 사용한다.

app.engine("html",require("ejs").renderFile);

• app.engine : Express 어플리케이션에서 사용할 템플릿 엔진의 파일 확장자를 설정하는 옵션이다.
• "html" : HTML로 설정한다.
• require("ejs").renderFile : ejs 모듈의 renderFile 함수를 사용하여 HTML 파일을 동적으로 렌더링하도록 설정한다.

 

 

정적 파일(Static files) 다루기

정적 파일은 HTML에서 사용되는 .js, css, image 등의 파일을 가르킨다.

서버에서 정적 파일을 다루기 위해선, express.static() 메소드를 사용하면된다.

 

먼저 정적 파일을 담을 디렉토리를 만들고 안에 정적 파일을 생성해보자.

그리고 server.js에 다음과 같은 코드를 추가하면된다.

app.use(express.static('static'));

css가 적용되면 정적 파일을 정상적으로 불러온 것이다.