[SeSACX코딩온] Cookie & Session

JUHEE·2024년 2월 22일
0

SeSACX코딩온

목록 보기
12/26

- 웹 브라우저(클라이언트)에 저장되는 키와 값이 들어있는 데이터파일
- 이름, 값, 만료일, 경로정보로 구성되어 있다
- 동작방식: 클라이언트 요청 - 서버 쿠키 생성 - 헤더에 쿠키와 응답 - 클라이언트보관 - 쿠키 가진 상태로 요청 - 서버 응답
- 개발자 도구에서 확인 가능

- npm install cookie-parser 설치
- app.js코드 작성

const cookieParser = require("cookie-parser");
app.use(cookieParser());
//app.use(cookieParser("secretKey"));

- cookieParser() 내부에 임의의 문자열 작성 시 암호화된 형태의 쿠키를 사용할 수 있다

- res.cookie(쿠키이름, 쿠키값, 옵션)으로 생성
- 옵션은 배열 형태로 작성해야 한다
- cookieConfig 배열 객체를 생성하여 넣어서 사용하면 편하다
- cookie옵션
1) maxAge: 쿠키 수명, 밀리초
2) expires: 만료날짜, GMT 형식
3) httpOnly: http통신만 접근 허용 (T or F)
4) path: '/abc' 해당 경로와 그 하위경로만 쿠키접근 허용
5) secure: https로만 통신해야 쿠키 전송 허용 (T or F)
6) signed: 쿠키 암호화 (T or F), app.use에 문자열 작성시 signed true로 설정하기

const cookieConfig = {
	maxAge: 60 * 1000, //1s * 60 = 1m
  	httpOnly: true,
  	signed: true,
}
res.cookie("myCookie", "cookieVal", cookieConfig);

- req.cookies or req.signdCookies로 확인 가능
- 쿠키 값에 곧바로 접근은 req.cookies.name 으로 접근
- 클라이언트의 요청에 따라 send시 해당 정보를 보내줄 수 있다

res.send(req.signedCookies);

- res.clearCookie(쿠키이름, 쿠키값, 옵션);
- res.cookie()와 동일한 값을 적어야 올바른 쿠키가 삭제된다

꼭 기억하자!!!
생성, 삭제 = res. + cookie() or clearCookie()
가져오기 = req. + cookies or signedCookies

참고) View에서 Cookie생성

- document.cookie를 사용
- document.cookie = "user=sesac; expires=21 Feb 2024 /12:00:00 GMT path=/";
- "키 = 이름; 만료일 = GMT path = 경로"

Session

- 웹 서버에 저장되는 쿠키
- 보안 성능이 업그레이드 된 쿠키의 한 종류라고 생각하면 된다
- 속도는 쿠키가 더 빠르고 보안은 세션이 더 좋다

(1) Session모듈 설치

- npm install expres-session
- session은 use메소드 사용 시 배열형태의 옵션을 작성하여 넣어준다!
- Session Option
1) secret: 안전한 쿠키 전송을 위한 서명값, 필수작성한다
2) resave: 수정사항없어도 요청마다 세션을 다시 저장할지(false권장)
3) saveUninitialized: 저장내용없어도 처음부터 세션 생성할지(false권장)
4) cookie: 세션 쿠키에 대한 설정(cookie옵션)
5) secure: https에 대한 세션 설정 (T or F)
6) name: 세션 쿠키 이름(default = connect.sid)
- app.js코드 작성

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

const sessionConfig = {
  secret: "secretKey", //필수, 임의의 문자열
  resave: false,
  saveUninitialized: false,
  cookie: {
    maxAge: 60 * 1000,
    httpOnly: true,
  },
}
app.use(session(sessionConfig));

(2) Session 생성

- req.session.이름 = "값"; 형태로 작성하면 바로 생성된다

req.session.id = "userId";

(3) Session 확인

- req.session으로 session전체 정보 확인 가능
- req.session.name 으로 특정 세션의 값 바로 접근가능

//생성된 세션값을 변수에 넣고 세션이 존재할 경우와 그렇지 않을 경우
//각각다른 값을 전달하는 코드 작성
app.get("/", (req, res) => {
  const user = req.session.user; //cocoa
  if (user) {
    res.render("index", { isLogin: true, user: user });
  } else {
    res.render("index", { isLogin: false });
  }
});

(4) Session 삭제

- req.session.destroy((err)=>{});
- err를 받는 함수를 매개변수로 받는 destroy메소드를 사용한다
- 함수 내부에는 if문을 통해 err가 있을 경우의 코드를 작성하고 res로 응답한다
- session을 삭제하면 브라우저의 개발자도구에서는 세션 쿠키의 이름은 보이고 session.이름 = "값"으로 설정한 세션 정보만 삭제된 상태로 남는다

req.session.destroy((err) => {
    if (err) {
      res.status(500).send("server err");
      throw err;
    }
    res.redirect("/name");
  });

꼭 기억하자!!!
생성, 확인, 삭제 모두 req.로 접근
session.이름 = "값"
session or session.이름
session.destroy((err)=>{})
config는 use선언시!!

profile
초보개발자

0개의 댓글