[포스코x코딩온] 웹개발자 입문 과정 7주차 | Session

1.Session 이란?

 웹 !서버! 에 저장되는 쿠키로,

 사용자가 웹 브라우저에 접속하고 종료할 때 까지 상태를 유지시킨다.

 브라우저 단위로 관리된다. (크롬에서 생성된 세션ID ≠ 웨일에서 생성된 세션ID)

 예시 - 로그인 유지

 

 npm 문서를 읽어보면 (https://www.npmjs.com/package/express-session)

 세션 데이터는 쿠키 자체에 저장되지 않고 sessionID만 쿠키에 저장된다고 한다.

 세션 데이터는 서버측에 저장된다. 

 

 사용자 컴퓨터(로컬)에 저장되던 쿠키와 다르게 서버에 저장되므로,

 비교적 보안이 필요한 데이터는 쿠키보다 세션에 저장한다.

 그리고 페이지별 어떤 정보를 공유하고 싶을 때도 유용하게 사용될 수 있다.

 서버가 종료되거나 유효기간이 지나면 세션이 사라진다.

 

개발자도구에서 확인할 수 있는 sessionID

 sessionID란 세션이 생성될 때 발급되는 고유 ID로,

 req.sessionID를 통해 값을 확인할 수 있다.

 이 값은 수정할 수 없으며, 이를 통해 서버가 클라이언트를 식별하는데

 앞서 얘기한대로 이 값이 브라우저 단위로 생성되므로

 같은 브라우저라면 다른 탭이더라도  sessionID값이 동일하다

 

 sessionID가 필요한 이유는 보안상 직접적인 아이디나 패스워드를 통해

 서버와 교류한다면 이를 해킹할 수 있으므로, 별도로 sessionID를 생성하여

 이 값을 이용하여 클라이언트를 식별할 수 있도록한다.

 

 가.동작 방식

세션 동작 방식

1.   클라이언트가 서버에게 요청을 보내면
2.  서버는 세션 및 sessionID를 생성하고 세션을 서버 메모리에 저장한다. (세션 생성시 필요한 키를 설정해서 값을 저장할 수 있다. ex - req.session.user = req.body.id; 
3.  세션이 발급되면 sessionID가 포함된 connect.sid 쿠키가 생성되고 이를 클라이언트에 전송한다.
4.  클라이언트는 서버측에 요청을 보낼때 connect.sid 쿠키를 전송한다.
5.  서버는 connect.sid 쿠키 내의 sessionID를 확인해 세션의 저장소에서 동일한 세션을 서치한다.
6.  세션 매핑에 성공하면 클라이언트에 세션 데이터를 전송할 수 있다.

 

 

 나.쿠키와의 차이점 

  세션의 단점으로는 서버에 저장되므로 서버 공간의 제약이 있다.

 

2.사용 방법

 npm을 설치해서 사용한다.

 가.설치

npm install express-session

 설치를 완료했다면 package.json에서 잘 설치되었는지 확인한다.

package.json

 

 나.사용하기

  app.js에서 session을 사용하는 방법은 다음과 같다.

   1)express-session 모듈 불러오기

  먼저 node_modules의 폴더 내의 "express-session"미들웨어 모듈을 불러와서 변수 session으로 저장한다.

const session = require("express-session");

   2)옵션 지정

  다음 session을 사용하기 위해서는 다음처럼 옵션을 지정해야한다.

app.use(
  session({
    secret: process.env.SECRET_KEY, 
    resave: false,
    saveUninitialized: false,
  })
);

session({세션 모듈 옵션})으로 작성되며 옵션들은 다음과 같다.

• secret: 세션을 발급할 때 사용되는 키(임의 변조 방지) , session의 필수 옵션으로 암호화 할 때 쓰이는 키이다. 특수기호 제외하고 , 아무값이나 가능하다. ex- secret: "secretKey" 

        위의 예시처럼 민감한 정보를 올리면 좋지 않으므로 env 파일을 만들어서 지정할 수 있다.

        env파일을 만들기 위해서는  npm i dotenv 로 npm을 통해 설치해서 사용할 수 있다. 

       

        env파일을 만들기 위해서는 프로젝트 최상의 루트경로에 '.evn'이름으로 파일을 생성하고 

        해당 파일에 필요한 환경변수를 넣어준다.

       

.evn파일 예시

        이후에는 .env에 입력한 환경 설정을 불러오기 위해 app.js에서

        node_modules의 폴더 내의 "dotenv"모듈을 불러오고 .

        dotenv.config()는 현재 디렉토리의 .env파일을 자동으로 인식하여 환경변수를 세팅한다

        config()함수 호출을 통해 process.env.XXX형태로 사용한다.

 

        주의사항은 이를 깃허브에 같이 올리면 안된다는 것이다. (말짱 도루묵..ㅎㅎ)

        반드시 .gitignore 파일에 .env를 추가한 후 올리도록 하자!

const dotenv = require("dotenv"); 
dotenv.config(); //process.env.XXX 형태로 사용 \
console.log("dotenv >> ", process.env.SECRET_KEY);

 

• resave: 세션에 수정사항이 생기지 않더라도 매 요청(request)마다 저장할 건지
• saveUninitialized: 세션에 저장할 내역에 없더라도 처음부터 세션 생성할지
• secure: https 프로토콜에서만 세션을 주고 받을 건지

   3)세션 생성-읽기-삭제

//세션 설정
//req.session.키 = 값

//세션 읽기(사용)
//req.session.키

//세션 삭제
//req.session.destroy(callback 함수)

app.get("/", (req, res) => {
  res.render("session");
});

app.get("/set", (req, res) => {
  //세선 설정
  req.session.name = "홍길동"; //connect.sid 단순한 식별자, 다른 탭에도 동일한 value, 세션이 브라우저 단위로 형성됨
  //응답
  res.send("세션 설정 완료");
});

app.get("/name", (req, res) => {
  //세션 읽기 (사용)
  //req.session.키
  //req.sessionID: 현재 세션의 ID (서버가 클라이언트를 구별하기 위해 부여하는 고유값)
  //-> 브라우저 단위
  res.send({
    id: req.sessionID,
    name: req.session.name,
  });
});

app.get("/destroy", (req, res) => {
  //req.session.destroy(세션 삭제시 호출할 콜백함수)
  //-> 세선 완전히 삭제하고, 웹사이트 접속할 때마다 새로운 seeionID할당
  //새로 확인하면 새로운 ID, name은 삭제됨
  req.session.destroy((err) => {
    if (err) {
      throw err;
    }
    res.send("세션 삭제 완료!");
  });
});