Node.js - Express 를 이용한 웹 앱 만들기
Node를 이용하여 웹 어플리케이션을 만들때 가장 많이 쓰는 Express를 이용한다.
Express는 가장 인기있는 Node웹 프레임워크이다.
1. Express 설치
Express 모듈을 설치한다.
npm install express --save
--save는 dependencies를 추가하기위함. (package.json 파일에서 확인 가능.)
2.app.js
var express = require("express"); // express모듈 로드. express변수를 통해 모듈 제어가능.
var app = express(); // 위에 선언된 express는 함수를 리턴함으로 express()를 호출해줌.
var bodyParser = require("body-parser");
app.set("view engine", "jade");
app.set("views", "./views"); // jade에서는 관습적으로 템플릿 파일들을 views 폴더 안에서 관리한다. 설정을 안해줘도 디폴트(views)로 설정되어 있긴하다.
app.use(express.static("public")); //정적인 파일이 위치할 디렉토리를 지정하는 기능. (디렉토리명 지정 -> public 관습적으로 퍼플릭이라고 명함)
//정적인 파일을 서비스하고 싶을때 !.
app.use(bodyParser.urlencoded({ extended: false }));
app.get("/", function (req, res) {
// 루트 설정
res.send("hello home page");
});
app.get("/login", function (req, res) {
res.send("login please~");
}); // get 메서드란 특정경로로 들어왔을때 어떠한 동작을 할지 결정함. 이때 get을 라우터라 부르고 get이 하는일을 라우팅이라고한다 (길을 찾는것.)
app.get("/template", function (req, res) {
res.render("temp", { time: Date(), _title: "jade" }); // render를 하게 되면 views에 디렉토리에서 템플릿엔진이 jade로 설정되어 있는 것을 확인하고 temp.jade를 랜더링해줌.
}); // 변수 전달시 위처럼 사용함. // jade에서 변수 사용시 =변수명 으로 선언하고 render에서 파라미터로 전달해준다.
app.locals.pretty = true; // 이게 없으면 jade 포맷이 줄맞춤같은게 제대로 되서 안나온다. 이거 써주면 포맷에 맞춰서 잘 나오게 됨.
app.get("/dynamic", function (req, res) {
var lis = "";
for (var i = 0; i < 5; i++) {
lis = lis + "<li>coding</li>";
}
var time = Date();
//동적으로 웹페이지를 만드는것.
var output = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
Dynamic Static
<ul>
${lis}
</ul>
${time}
</body>
</html>`; // `` 이걸 사용하면 내용 그대로 사용가능하다. html에서는 동적인 코딩이 불가능하므로 이렇게 코딩하여 값을 넣을수 있음.
res.send(output); // 이 내용은 재부팅을 해야된다. 동적이기때문에.
});
app.get("/topic", function (req, res) {
// 쿼리스트링을 통한 인자 전달시.
//res.send(req.query.id + "," + req.query.name); // 인자 여러개 받을때
var topics = ["11111", "22222", "33333"];
var output = `
<a href="/topic?id=0">11111</a><br>
<a href="/topic?id=1">22222</a><br>
<a href="/topic?id=2">33333</a><br>
${topics[req.query.id]}
`; // ~ 아래 `
res.send(output);
});
//시멘틱 url 변환시
app.get("/topic/:id", function (req, res) {
// 쿼리스트링을 통한 인자 전달시.
//res.send(req.query.id + "," + req.query.name); // 인자 여러개 받을때
var topics = ["11111", "22222", "33333"];
var output = `
<a href="/topic?id=0">11111</a><br>
<a href="/topic?id=1">22222</a><br>
<a href="/topic?id=2">33333</a><br>
${topics[req.params.id]}
`; // ~ 아래 `
res.send(output);
});
app.get("/topic/:id/:mode", function (req, res) {
res.send(req.params.id + "," + req.params.mode);
});
app.get("/form", function (req, res) {
res.render("form");
});
app.get("/form_receiver", function (req, res) {
var title = req.query.title;
var description = req.query.description;
res.send(title + "," + description);
});
app.post("/form_receiver", function (req, res) {
var title = req.body.title;
var description = req.body.description;
res.send(title + "," + description);
});
app.listen(3030, function () {
console.log("connected 3030 port");
}); //3030포트로 리스닝하게 된다.
3. temp.jade
html
head
title= _title
body
h1 Hello Jade
ul
-for(var i=0; i<5; i++)
li coding
div= time
- var express = require("express");
var app = express(); --> express 사용 규칙.
-템플릿 뷰 엔진 선언
app.set("view engine", "jade");
'NODE.JS' 카테고리의 다른 글
| Node.js - Express 웹 서버 구성시 서버 자동 재시작을 도와주는 Nodemon (0) | 2021.08.22 |
|---|---|
| Node.js - Middleware 개념 (0) | 2021.07.30 |
| Node.js - mssql server 연동 (0) | 2021.06.11 |
| Node.js - nodemailer 를 이용한 메일 보내기 (0) | 2021.05.29 |
| Node.js - Node.js & NPM (2) | 2021.05.28 |
댓글