* 개요
앞 글에서 express를 이용해 nodejs의 라우팅, ejs 랜더링 개념을 배우고 실습했다. 이번 시간에는 단순 get요청이 아닌 파라미터를 이용한 POST 요청, 쿠키, 세션을 사용한다. 파라미터를 주고받는 방법을 중점적으로 살펴본다.
* form 객체에서 파라미터 이용한 POST 요청하기
express에서 파라미터는 request 객체를 통해 파라미터 추출이 가능하다.
get 방식의 경우 query라는 객체안에 모두 들어 있다.
post 방식의 경우 bodyParser 모듈을 이용해야 파라미터를 추출할 수 있다.
POST 요청은 GET과 다르게 body에 데이터를 담아서 이동한다. noe에서는 body를 이용할 수 있도록 body-parser 모듈을 새로 추가해야 한다. dependencies에 body-parser 모듈을 추가한다.
//main.js
<!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>
<a href="parameter?data1=aaa&data2=bbb">parameter</a>
<form action="parameter" method="get">
data1 : <input type="text" name="data1"/><br/>
data2 : <input type="text" name="data2"/><br/>
<button type="submit">확인</button>
</form>
<form action="parameter" method="post">
data1 : <input type="text" name="data1"/><br/>
data2 : <input type="text" name="data2"/><br/>
<button type="submit">확인</button>
</form>
</body>
</html>
3가지 경로 요청이 있다.
첫번째는 a태그를 이용해 파라미터를 가지고 서버에 get요청한다.
두번째는 form태그에서 body를 가지고 get요청을 보낸다.
세번째는 form태그에서 body를 가지고 post요청을 보낸다.
//controller.js
var bodyParser = require("body-parser");
var urlencodedParser = bodyParser.urlencoded({extended : false});
bodyParser를 사용하기 위해서 controller.js에서 모듈을 호출한다. extended를 true로 하면 qs 모듈을 사용하고, false로 하면 query-string 모듈을 사용한다.
//controller.js
var bodyParser = require("body-parser");
var urlencodedParser = bodyParser.urlencoded({extended : false});
module.exports = function(app) {
app.get("/parameter", function(req, res) {
var render_data = {
data1: req.query.data1,
data2: req.query.data2
};
res.render("parameter.ejs", render_data);
}
app.post("/parameter", urlencodedParser, function(req, res)) {
var render_data = {
data1: req.body.data1,
data2: req.body.data2
}
res.render("parameter.ejs", render_data);
}
...
}
첫번째, 두번째는 보내느 방식이 다를 뿐 서버에서는 같은 요청으로 인식한다.
parameter를 경로로 해서 data1과 data2에 데이터를 넣어서 query로 전송한다.
따라서 req.query.data1, req.query.data2로 쿼리에 있는 값을 읽을 수 있다.
세번째, post방식은 body에 데이터를 담아서 보내기 때문에 body를 확인해야 한다.
urlencodedParser를 사용해야하고, req.body.data1, req.body.data2로 body의 값을 읽을 수 있다.
* 쿠키 사용하기
쿠키란 클라이언트 측에 저장되는 데이터이다. 클라이언트가 서버에 요청할 때 쿠키 정보를 전달한다
쿠키는 사용자 컴퓨터에 저장되므로 브라우저를 닫아도 데이터가 유지된다.
epxress에서 쿠키를 관리할 때는 cookie-parser 모듈을 사용한다..
쿠키 사용을 위해 dependencies에 cookie-parser를 추가한다.
//main.js
app.use(cookieParser());
main.js에서 쿠키를 사용하기 위해서 app에 설정을 한다.
//main.js
...
<a href="save_cookie">쿠키저장</a>
<a href="load_cookie">쿠키로드</a>
...
화면에서 get 요청으로 쿠키 저장과 로드를 만든다.
//controller.js
...
app.get("/save_cookie", function(req, res) {
var op = {
maxAge : 365 * 24 * 60 * 60;
};
res.cookie("cookie1", "aaaaaa", op);
res.render("save_cookie.ejs");
});
app.get("load_cookie", function(req, res) {
var render_data = {
cookie1: req.cookies.cookie1
}
res.render("load_cookie.ejs", render_data);
});
...
save_cookie에서 쿠키 유효기간 설정 및 쿠키 설정을 한다. res.cookie로 바로 쿠키를 심을 수 있다.
load_cookie에서 req에 저장되어 넘어오는 cookie값을 읽는다.
* 세션
세션은 서버 메모리에 데이터를 저장하는방식으로 브라우저 하나당 하나의 공간이 할당
브라우저를 닫으면 세션이 사라진다. dependencies에 express-session을 추가해야 한다.
//main.js
app.use(session({
secret : "abcdefg",
resave : false,
saveUninitialized : true
}));
쿠키와 달리 세션을 사용하기 위해서 3가지를 설정한다.
secret으로 암호화 key를 정한다.
resave는 매 요청시마다 다시 세션을 저장할지 설정한다.
saveUninitialized는 세션이 저장되기 전에 uninitialized 상태로 미리 만들어서 저장할지 설정한다.
//main.js
<a href="save_session">세션저장</a>
<a href="load_session">세션로드</a>
프런트 화면에 세션 저장과 로드 경로를 만든다.
//controller.js
...
app.get("save_session", function(req, res) {
req.session.data1 = 100;
req.session.data2 = "안녕하세요";
res.render("save_session.ejs");
});
app.get("load_session", function(req, res) {
var render_data = {
data1: req.session.data1,
data2: req.session.data2
};
res.render("load_session.ejs", render_data);
});
save_session은 요청에 session값을 담아 다시 프런트 화면에 전달한다
load_sesion은 요청으로 온 세션을 검사해서 결과를 화면에 전달한다.
*정리
GET, POST 전달방식에 따른 query, body 사용법을 알아보았다.
HTTP 요청에 따라 데이터 전달방식을 잘 유의하고 확인한다.
또한, 쿠키와 세션 설정을 간단하게 알아보았다.
따로 쿼리나 body에 담아보내는 것이 아니라 req, res에 쿠키와 세션이 설정됨을 유의한다.
'공부 정리 > NodeJs' 카테고리의 다른 글
| 강의 후기 (0) | 2022.01.15 |
|---|---|
| node js 데이터베이스 이용하기 (0) | 2022.01.15 |
| node express 모듈 사용하기 (0) | 2022.01.15 |
| node js 기본 모듈 (0) | 2022.01.15 |
| Var, Let, Const 차이점 (0) | 2021.05.25 |