ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [포스코x코딩온] Cookie(쿠키), Session(세션)
      [포스코x코딩온] 웹개발자 풀스택 부트캠프8기 2023. 8. 11. 21:02
      728x90

      Cookie, Session

       

      Cookie

      • 웹 브라우저(클라이언트)에 저장되는 키와 값이 들어있는 작은 데이터 파일
      • 이름, 값, 만료일, 경로 정보로 구성되어 있다. 
      쿠키는 사용자가 방문한 웹사이트에서 사용자의 브라우저에 전송하는 작은 텍스트 조각입니다. 쿠키가 있으면 웹사이트에서 사용자의 방문에 관한 정보를 기억하여 다음번에 사이트에 방문했을 때 번거로운 작업을 피하고 더 유용하게 사이트를 활용할 수 있습니다. 브라우저, 앱 또는 기기, 픽셀, 로컬 저장소를 식별하는 데 사용되는 고유 식별자 같은 기타 기술도 이 목적으로 사용될 수 있습니다. 이 페이지에 설명된 대로 쿠키 및 기타 기술은 아래에 설명된 목적으로 사용될 수 있습니다.
      https://policies.google.com/technologies/cookies?hl=ko#types-of-cookies
       

      Google의 쿠키 사용법 – 개인정보 보호 및 약관 – Google

      브라우저 쿠키 관리 대부분의 브라우저에서는 사용자가 인터넷을 탐색하는 동안 쿠키가 설정 및 사용되는 방식을 관리하고 쿠키와 인터넷 사용 기록을 삭제할 수 있습니다. 사이트별로 쿠키를

      policies.google.com

      Cookie의 동작 방식

      1. 클라이언트가 페이지를 요청
      2. 서버에서 쿠키를 생성
      3. HTTP 헤더가 쿠키를 포함시켜 응답
      4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
      5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
      6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요가 있을 때 쿠키를 업데이트하여 변경된 쿠키를 HTTP헤더에 포함시켜 응답

      Cookie 사용하기

      npm install cookie-parser
      const cookieParser = require("cookie-parser")
app.use(cookieParser());


res.cookie('쿠키이름','쿠키값',;옵션객체');

      예시

      index.ejs

      • 간단한 화면 구성
      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="/setCookie">쿠키 설정하기</a>
    <a href="/getCookie">쿠키 확인하기</a>
    <a href="/clearCookie">쿠키 제거하기</a>
  </body>
</html>

      cookie.js

      • require("cookie-parser")을 통해 쿠키 불러오기
      • cookie 옵션
        • httpOnly: 웹 서버를 통해서만 쿠키에 접근이 가능하다.
          • 자바스크립트에서 document.cookie를 이용해서 쿠키에 접속하는 것을 차단
        • maxAge: 쿠키의 수명(ms단위)
        • expire: 만료날짜를 GMT 시간 설정
        • path: 해당 디렉터리와 하위 디렉터리에서만 경로가 활성화되고 웹 브라우저는 해당하는 쿠키만 웹 서버에 전송
          • 쿠키가 전송될 URL 특정이 가능하다(기본값: '/')
        • domain: 쿠키가 전송될 도메인을 특정 가능(기본값: 현재 도메인)
        • secure: 웹브라우저와 웹서버가 https로 통신하는 경우만 쿠키를 서버에 전송
        • signed: 쿠키의 암호화결정(req,signedCookies 객체에 들어있다.)
      const express = require("express");
const cookieParser = require("cookie-parser");
const app = express();
const PORT = 8000;

app.set("view engine", "ejs");

//cookie-parser 사용.
//일반쿠키
// app.use(cookieParser());
//암호화된 쿠키
app.use(cookieParser("abcdef"));

//cookie 옵션 객체
const cookieConfig = {
  //httpOnly: 웹 서버를 통해서만 쿠키에 접근가능
  //=> (자바스크립트에서 document.cookie를 이용해서 쿠키에 접속하는 것을 차단)
  //maxAge: 쿠키의 수명( ms단위 )
  //expires: 만료날짜를 GMT 시간 설정
  //path: 해당 디렉터리와 하위 디렉터리에서만 경로가 활성화되고 웹 브라우저는 해당하는 쿠키만 웹 서버에 전송
  //=> 쿠키가 전송될 URL 특정 가능(기본값: '/')
  //domain: 쿠키가 전송될 도메인을 특정 가능(기본값: 현재도메인)
  //secure: 웹브라우저와 웹서버가 https로 통신하는 경우만 쿠키를 서버에 전송
  //signed: 쿠키의 암호화결정(req.signedCookies 객체에 들어있음)
  httpOnly: true,
  maxAge: 60 * 1000, //1분
  signed: true,
};

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

app.get("/setCookie", (req, res) => {
  //쿠키이름, 쿠키값, 옵션객체
  res.cookie("myCookie", "myValue", cookieConfig);
  //페이지 열기 위해 보냄.
  res.send("set cookie");
});
app.get("/getCookie", (req, res) => {
  res.send(req.cookies); //일반 쿠키 일때
  res.send(req.signedCookies); //암호화 쿠키 일때
});
app.get("/clearCookie", (req, res) => {
  res.clearCookie("myCookie", "myValue", cookieConfig);
  res.send("clearCookie");
});

app.listen(PORT, () => {
  console.log(`http://localhost:${PORT}`);
});

      이처럼 myCookie 쿠키가 암호화되어서 생성된다.

      Session

      • 웹 서버에 저장되는 쿠키
      • 사용자가 웹 브라우저를 통해 접속한 시점부터 연결을 끝내는 시점까지의 시간 동안 일련의 요구를 하나의 상태로 보고 그 상태를 유지시킨다.

      Session의 동작 방식

      1. 클라이언트가 서버에 접속 시 세션 ID를 발급받습니다.
      2. 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있습니다.
      3. 클라이언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 서버에 전달해서 사용합니다.
      4. 서버는 세션 ID를 전달받아서 별다른 작업 없이 세션 ID로 세션에 있는 클라이언트 정보를 가져옵니다.
      5. 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답합니다.

      Session 사용하기

      npm install express-session
      const session = require("express-session");
app.use(session('옵션객체'));

req.session.id = req.body.id;

      예시

      session.js

      • require("express-session")을 통해 가져온다.
      • Session 옵션
        • httpOnly: 값을 true로 하면 사용자가 자바스크립트를 통해서 세션을 사용할 수 없도록 강제
        • secure: 값을 true로 하면 https에서만 세션을 주고받음
        • secret: 안전하게 쿠키를 전송하기 위해 쿠키 서명 값(세션을 발급할 때 사용되는 키)
          • 가장 중요하다. 거의 필수로 사용해야 한다.
        • resave: 세션에 수정사항이 생기지 않더라도 매 요청(req)마다 세션을 다시 저장할 것인지 물어본다.
          • 덮어쓰기가 가능하게 하는지 물어본다.
        • saveUninitialized: 세션에 저장할 내역이 없더라도 처음부터 세션을 생성할지 설정
      const express = require("express");
const session = require("express-session");
const app = express();
const PORT = 8000;

//세션
//옵션객체
//httpOnly: 값을 true로 하면 사용자가 자바스크립트를 통해서 세션을 사용할 수 없도록 강제
//secure: 값을 true로 하면 https에서만 세션을 주고받음
//secret: 안전하게 쿠키를 전송하기 위해 쿠키 서명 값(세션을 발급할 때 사용되는 키) => 가장 중요! 거의 필수로 써야함!
//resave: 세션에 수정사항이 생기지 않더라도 매 요청(req)마다 세션을 다시 저장할 것인지 물어봄(덮어쓰기 가능하게 하기 물어봄)
//saveUninitialized: 세션에 저장할 내역이 없더라도 처음부터 세션을 생성할지 설정

app.use(
  session({
    secret: "mySessionKey",
    resave: false,
    saveUninitialized: true,
  })
);

app.get("/", (req, res) => {
  //세션 설정
  req.session.name = "홍길동";
  res.send("세션설정 완료");
});

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

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

app.listen(PORT, () => {
  console.log(`http://localhost:${PORT}`);
});

      홍길동이라는 세션이름이 생성되고 암호화되어서 세션에 저장된다.

      https://github.com/DongHo-Kang/KDT-8-web/tree/7af4cf879f05e1eca125dd5b3a95eb8d6f4d7e6f/230811_cookie

       

       

      다음글에서는 쿠키와 세션을 이용하여 각각 서비스를 만들면서 코드 리뷰를 해보겠습니다.

      728x90

      '[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글

      [포스코x코딩온] AWS-EC2 서버 설정(with Apache)  (0) 2023.08.15
      Cookie를 활용한 예시(모달창 생성 여부)  (0) 2023.08.11
      Relationship(관계)(1:1, 1:다, 다:다)(데이터베이스 응용)  (0) 2023.08.11
      Join (조인) (SQL 응용)  (0) 2023.08.11
      [포스코x코딩온] Sequelize 사용하기  (0) 2023.08.11

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바