* 개요
이전시간에는 node의 기본 모듈 사용법을 알아보았습니다. 이번에는 본격적으로 node express 모듈을 사용합니다. 초기 설정부터 라우팅 ,html 랜더링, 동적 웹 페이지(ejs), 간단한 쿠키, 세션, 파라미터 사용법을 배웁니다. express의 핵심 요소를 간단히 구현해보면서 빠르게 개념을 익힐 수 있습니다.
* 외부 모듈 사용하기
nodejs에서 제공하는 기본 모듈만 개발하기에 충분하지 않다
noejs 오픈소스 플랫폼으로 소스가 공개되어 있다.
모듈은 http://www.npmjs.com 에서 검색한다.
npm install <모듈이름>
ex) npm install arraylist
node_modules 파일이 생성되고 arraylist 관련 기능을 사용할 수 있다.
npm init
npm의 초기 설정파일을 생성해준다. package.json의 dependencies에 원하는 모듈을 추가한다.
package.json
- package.json 파일은 node.js 프로그램 개발 시 사용하는 외부모듈을 기록하고 한번에 설치할 수 있도록 관리하는 파일
npm install
dependencies에 등록된 모듈들을 설치해준다. 꼭 install을 하고 나서 이용할 수 있다.
* express로 서버 띄우기
- Express 모듈은 웹 어플리케이션을 개발할 때 가장 많이 사용하는 외부 모듈
- express 모듈은 http 모듈에 비해 많은 기능을 가지고 있어서 손쉽게 애플리케이션 개발 가능
- express 모듈은 jade, ejs등과 같은 동적 웹 페이지 파일을 지원하고있어 보다 쉽게 애플리케이션 개발이 가능하다.
앞서, http 기본모듈을 사용해서 서버를 띄워보았다. express를 사용하면 한결 간편하게 서버를 띄울 수 있다.
var express = require("express");
var app = express();
app.get("/", function(req, res) {
res.send("root");
}
app.get("/TEST", function(req, res) {
res.send("TEST");
}
var server = app.listen(2000, function() {
console.log("서버가동");
}
먼저, dependencies에 express 모듈을 추가하고 npm install을 먼저 해야하는 것이 필수이다!
createServer는 사라졌다. 대신에 express 모듈을 이용해서 listen을 바로 하면 된다.
또한, url.parse와 pathname을 이용했던 것과 달리, app.get()형식으로 바로 url을 구분할 수 있다.
* 라우팅
라우팅이란, 사용자 요청에 따라서 응답 결과를 달리 전달하는 것이다.
app.get("/"...
app.get("/test"...
웹 개발시 var app = express()를 이용하여 하나의 페이지에 만든다면 유지보수가 어려울 수 있다.
따라서 js파일에 만들어서 보관한다.
//main.js
...
var express = require("express");
var app = express();
var router = require("./router/controller")(app);
...
main.js에 router를 추가해주면 된다. app을 라우팅 경로에 넣어주고, controller.js에서 app을 이용해 라우팅을 한다.
//controller.js
module.exports = function(app) {
app.get("/", function(req, res) {
res.send("root");
};
app.get("/TEST", function(req, res){
res.send("TEST");
};
};
main.js에서 처리했던 모든 라우팅을 controller.js에서 해준다. 앞 글에서 exports.f2로 외부모듈로 만든 경험이 있다.
라우팅을 외부모듈로 만들 때는 module.exports로 익명방식으로 만들수도 있다. 이제 경로처리는 모두 controller.js에서 하게된다.
이전 글에서는 exports.f2로 외부 모듈을 만들었다.
//second.js
exports.f2 = function() {
console.log("f2 함수 호출");
};
* html 렌더링
클라이언트가 res.send 함수를 이용해 응답 결과를 전달하였다.
하지만 html을 전달하려면 javascript 코드를 모두 res.send로 전달해야 한다.
만약 수백 수천줄에 달하는 html에서 일일이 javascript 코드를 만들면 어렵다
express 모듈은 외부 파일의 데이터를 읽어와 html 코드로 만든 다음 클라이언트에게 전달하는 기능을 제공하는데, 이를 랜더링이라고 부른다.
express에서 랜더링을 위해서는 다른 모듈을 사용해야 하는데 여기에 ejs 모듈을 사용한다.
(마치 java/servlet의 jsp와 비슷하다)
ejs를 사용하지 않고 html에 데이터를 전달하는 앞 글의 방식을 다시 한번 살펴보자
var server= http.createServer(function(req, res){
// res.write("Hello World");
//res.writeHead(200, {"content-type" : "audio/mp3"});
var q = url.parse(req.url, true);
res.writeHead(200, {"content-type" : "text/html"});
res.write("<!DOCTYPE html>");
res.write("<html>");
res.write("<head>");
res.write("<meta charset='utf-8'>");
res.write("<body>");
switch(q.pathname) {
case "/":
res.write("<h1>root 입니다</h1>");
res.write("<a href='test1?data1=111'>test1</a><br/>");
res.write("<a href='test2?data1=222'>test2</a><br/>");
break;
case "/test1":
res.write("<h1>test1 입니다</h1>");
res.write("<h1>data :" + q.query.data1 + "<br/>");
break;
case "/test2":
res.write("<h1>test2 입니다</h1>");
res.write("<h1>data :" + q.query.data1 + "<br/>");
break;
}
res.write("</body>");
res.write("</html>");
res.end();
});
굉장히 지저분한 방식이다. res.write를 사용하여 한줄한줄 모든 코드를 넣어주고 있다.
ejs를 사용하기 위해서 꼭 dependencies에 ejs를 추가하고 npm install을 해준다!!!
//main.js
var ejs = require("ejs");
app.set("views", __dirname + "/views");
app.set("view engine", "ejs");
app.engine("ejs", ejs.renderFile);
...
ejs를 사용하기 위해서 코드를 추가해야 한다. ejs를 사용하는 경로는 /views폴더이다. 이제, res.render()로 front로 데이터를 전달할 때 해당 폴더에서 이름을 매칭시킬 것이다. 또한, view engine을 사용한다는 설정을 해야 한다.
//controller.js
module.exports = function(app) {
app.get("/", function(req, res){
var date = new Date();
var render_data = {
str : "문자열입니다",
number : 100,
date : date
};
res.render("index.ejs", render_data);
});
app.get("/test", function(req, res){
...
});
}
기존에 있던 app.get("/".. 방식을 바꿨다. res.send에서 res.render를 사용하여 index.ejs 파일에 render_data를 전달하고 있다. 하나의 문자열이 아닌 json 문자열을 전달할 수 있다.
//index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title >Document</title>
</head>
<body>
<h1>index.ejs</h1>
str : <%= str %></br>
number : <%= number %></br>
date : <%= date %></br>
</body>
</html>
ejs 확장자를 가지고 있는 index.ejs에서 controller.js에서 보내준 render_data를 랜더링하여 보여준다. 마치 jsp에서 사용하듯이, <%= >를 사용해서 서버에서 보내온 값을 표시할 수 있다.
<%= >
render_data가 가지고 있는 str, number, date 값을 넣어준다. 그러면 화면에 랜더링 된 값들이 표시된다.
*정리
npm을 이용해서 기본모듈이 아닌 외부모듈을 손쉽게 사용할 수 있으며, express를 기반으로 웹 어플리케이션을 만든다.
외부 모듈로 만들어 라우팅을하며, html에 데이터를 랜더링하고 싶으면 ejs를 사용하면 된다.
이번 강의를 통해서 express를 사용해서 기본 프로젝트를 띄울 수 있다. (아직은 HTTP의 get만 가능하다.)
'학습 > Node.js' 카테고리의 다른 글
| node js 데이터베이스 이용하기 (0) | 2022.01.15 |
|---|---|
| node js 파라미터, 쿠키, 세션 이용하기 (0) | 2022.01.15 |
| node js 기본 모듈 (0) | 2022.01.15 |
| Var, Let, Const 차이점 (0) | 2021.05.25 |
| 회원가입에서 공백, 특수문자 검사하기 (0) | 2021.04.27 |