본문 바로가기
학습/Node.js

node js 파라미터, 쿠키, 세션 이용하기

코동이 2022. 1. 15.

* 개요

 

앞 글에서 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에 쿠키와 세션이 설정됨을 유의한다.

반응형
저작자표시 비영리 변경금지

'학습 > Node.js' 카테고리의 다른 글

강의 후기  (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

관련글

티스토리툴바