2022-12-08 Session, Cookie

Notice

Recent Posts

Recent Comments

Link

« 2025/08 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Tags more

Archives

Today

Total

관리 메뉴

생각기록

2022-12-08 Session, Cookie 본문

SeSAC 풀스택/Nodejs

2022-12-08 Session, Cookie

끼록관 2022. 12. 8. 19:21

둘은 비슷한 개념이지만 차이점이 있다.

쿠키란?

웹브라우저에 저장되는 작은 저장 공간

저장된다는 것은 웹브라우저 상에서 볼 수 있다는 말

웹브라우저(클라이언트에) 저장되는 키와 값이

쿠키의 동작 방식

1. 클라이언트가 페이지 접속 = 요청 ( 서버로 요청 )

2. 서버에서 쿠기를 생성

3. HTTP 헤더에 쿠키를 포함 시켜 응답

*요청에 따라 쿠키 생성

4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면, 클라이언트에서 보관하고 있음

5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄

6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를

HTTP 헤더에 포함시켜 응답

6번에 그 키에 해당하는 쿠키값을 변경할 일이 생기는데

클라이언트의 리퀘스트 > 쿠키 요청

서버가 응답했을때 만료기간 그 기간까지는 클라이언트는 계속 서버에 쿠키랑 함께 요청하게 될 것

쿠키는 어디 사용되나?

팝업창

자동 로그인 기능

이것을 보고싶지 않아서 3일동안 보지 않기 하면

쿠키가 생기면서 새로고침해도 사라진다.

nodejs와 사용법

모듈 설치

npm install cookie-parser

쿠키 모듈 불러오고, 사용

const cookieParser = require('cookie-parser');

app.use(cookieParser());

쿠키 만들기

응답요청으로

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

옵션 설정

httpOnly : true ,

클라이언트가 document.cookies(js) 접근할 수 없게 한다.

maxAge : 60*60*24*1000 //24시간

만들어진 순간부터 초만큼 뒤에 만료(ms단위) ex) 30000 -> 30초 뒤 만료

expires : "2022-12-08T09:00:00"

GMT 시간 2022-12-08T09:00:00 2022-12-08 아침 9시 만료 / 만료일

path : "/visitor"

localhost:8000 쿠키가 없음 > localhost:8000/visitor/~~~ visitor뒤의 모든경로에만 쿠키가 있음/ 기본값 "/"

secure : false

http -> true라고 할 경우 보안서버에만 적용됨(false가 기본값) /http, https(secure=보안서버)

signed : true

쿠키의 암호화(true), 기본값 false

8000번에는 쿠키가 없다

8000/set

set에는 있다.

옵션에서 설정한 만큼 쿠키가 클라이언트에 저장되어 있을것이다.

만료기간이 끝나면, 쿠키가 사라진다.

서버에서 쿠키 사용하려면

쿠키는 클라이언트에게 저장되어있다.

req.cookies 라는 객체에 쿠키들이 저장되어있다.

예) req.cookies.test test라는 쿠키 객체 불러오기

쿠키는 브라우저에 저장되기때문에

서버를 껏다 키는 동작과 상관이 없다

/set을 한다음 서버를 껏다 키면, 다시 set을 하지 않아도 get에서 조회가 가능하다 (30초가 지나지 않았기 때문)

실습1 cookie 연습

힌트

쿠키이름이 제대로 있다면, ejs파일을 렌더하고, popup : none

그렇지 않으면 ~ 랜더해라 ejs 파일을 popup display

동적 폼전송을 위한 axios cdn 가져오기

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

부트스트랩 모달 띄우는 방법

일단 부트스트랩 cdn

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

부트스트랩 모달중 하나를 가져오고

passing aption을 js에 넣어주고

사용법 method가 밑에 있으니 참고한다.

파일 참고

//ejs 파일
<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          cookie modal 뜨나요?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" onclick="popupClose()">오늘 하루 보지 않기</button> 
        </div>
      </div>
    </div>
  </div>
    
</body>
<script>
  // 모달을 만든다음에 해야 함 / 아이디 선택
    const myModal = new bootstrap.Modal('#exampleModal');
    //팝업을 띄우는 코드 myModal.show();
    // ejs 변수 popup을 이용해서 모달 열지 말지 결정
    //팝업이란 변수가 none이 아니면,myModal show 하겠다.
    if("<%=popup%>" !== "none" ) myModal.show();
    //팝업에 1이 없으면 트루가 되서 쇼우가 됨


    //동적 폼전송(새로 고침 하지 않고 서버와 통신)
    function popupClose(){
      axios({
        method : 'post', //쿠키 생성, 생성은 post가 좋다.
        url : "/set_popup"//js에서
      }).then((result)=>{
        //modal hide
        console.log(result.data);
        myModal.hide();
      })
    }

</script>
</html>

//js 파일
const express = require('express');
// 쿠키 모듈 불러오기
const cookieParser = require('cookie-parser');
const app = express();
const port = 8000;

app.set('view engine', 'ejs');
// 쿠키 미들웨어 사용
app.use(cookieParser());
app.use('/satatic', express.static(__dirname+'/static'));
app.use(express.urlencoded({extended:false}));
app.use(express.json());

// 변수로 만든다 (옵션객체)
const option = {
    httpOnly : true , // 클라이언트가 document.cookies(js) 접근할 수 없게 한다.
    maxAge : 60*60*24*1000, //24시간 //만들어진 순간부터 초만큼 뒤에 만료(ms단위) ex) 30000 -> 30초 뒤 만료
    // expires : "2022-12-08T09:00:00", //GMT 시간 2022-12-08T09:00:00 2022-12-08 아침 9시 만료 / 만료일 
    // path : "/visitor", // //localhost:8000 쿠키가 없음. localhost:8000/visitor/~~~ visitor뒤의 모든경로에만 쿠키가 있음/ 기본값 "/"
    // secure : false, //http -> true라고 할 경우 보안서버에만 적용됨(false가 기본값) /http, https(secure=보안서버)
    // signed : true // 쿠키의 암호화(true), 기본값 false
}

//기본 라우터
//실습 모달 쿠키
app.get('/', (req, res)=>{
    // req.cookies.popup 값을 비교해서  "none"
    // 쿠키 팝업이 1이면, none처리 하겠다. 그렇지 않으면 block 처리를 하겠다.
    //팝업이란 쿠키는 안보여줄경우에만 생성한다!!!
    if(req.cookies.popup == "1"){
    res.render('popup', { popup : "none"});}
    else
    {res.render('popup', { popup : "block"});}
});


app.post('/set_popup', (req,res)=>{
    //1. 쿠키를 만든다. 오늘 하루 열지 않음을 클릭했음을 구분하는 쿠키 생성 > 서버의 응답이 X 서버의 응답에 가져갈 객체를 설정하는 것
    res.cookie('popup', '1', option);
    // => { popup : 1 } 즉, 체크를 안하면 ~ > 1이 아니면, 팝업을 보여줘야 함
    //2. 서버 응답 (res.cookies 서버안의 헤더를 변경 시키는 것)
    res.send("true");
})


// 쿠키를 만들어 응답 보내기 
app.get('/set',(req, res)=>{
    //res.send("key", "value", 옵션객체);
    //res 서버가 클라이언트한테 보내는 응답. req가 서버에게 보내는 요청
    //res.cookie 서버에서 쿠키를 만들어서 보내준다 => 서버의 응답
    res.cookie('test', '1', option );
    res.send("쿠키 생성 성공!!");
});

//서버에서 쿠키를 가져오려면?
app.get('/get', (req,res)=>{
    console.log(req.cookies); //클라이언트에게 저장되어있다. 즉 req 객체로 쿠키에게 접근 가능
    console.log(req.cookies.test); //콘솔에 {test:'1'}로 찍히니까 test를 이런식으로 가져올 수 있다.
    res.send(req.cookies); //req객체에 쿠키 저장공간이 있다
})

app.get('*', (req,res)=>{
    res.send('주소가 존재하지 않습니다.'); // *모든 라우터를 정의한 후 제일 마지막에 써야함
})

app.listen(port, ()=>{
    console.log( "Server Port : ", port );
});

접속하면

모달창이 뜨고,

쿠키 팝업에는 아무것도 없다

오늘 하루 보지 않기 버튼을 누르면!

쿠키가 새로 생성된다.

그 상태에서 새로 고침을 해보면

계속 모달이 뜨지 않습니다.

쿠키를 지우고 새로고침 하면

다시 뜨네요! 쿠키의 기능

쿠키가 있으면 1값 = none 이라고 생각하면 편하다

1. 기본페이지

쿠키가 있으면 1값

1. 쿠키가 없는 채로 페이지 접속 => 모달이 보이게 해라

2. 체크버튼을 누르면, popupClose 함수 발동

post /set_popup 요청

해당 라우터에서는 popup 쿠키를 1값으로 만들었다. 옵션은 24시간 기간 지정

res.send 할거 없으니 true 지정

큰틀로 이렇게 이해하자

Session 이란?

웹 서버에 저장 되는 쿠키

백엔드 딴에서 가지고 있음

세션의 유효기간

사용자가 웹 브라우저를 접속한 시점부터 연결을 끝내는 시점까지의 시간 동안 일련의 요구를

하나의 상태로 보고 그 상태를 유지 시킨다. > 로그인 유지

종료 시킨다는 건 아얘 브라우저 자체를 꺼야함 ( 창 하나를 삭제하는게 아님 ! 모든 창을 다 꺼야 함 )

세션의 동작 방식

1. 클라이언트가 서버에 접속 시 세션 ID를 발급받습니다. (클라이언트별로 고유의 세션 아이디가 있다)

2. 클라이언트는 세션 ID에 대해 쿠키(개인 브라우저를 통해)를 사용해서 저장하고 가지고 있다.

쿠키에 고유 세션 ID가 있다. 그것으로 판단

3. 클라이언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 서버에 전달해서 사용합니다.

4. 서버는 세션 ID를 전달 받고, 별다른 작업 없이 세션 ID로 세션에 있는 클라이언트 정보를 가져옵니다.

클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답합니다.

쿠키 VS 세션

전체적인 역할과 동작 원리는 비슷 ( 세션 = 서버 쿠키 )

쿠키 : 로컬에 저장

세션 : 서버에 저장

보안력은?

클라이언트는 서버코드로 접속이 안된다. 세션이 당연히 좋다

속도는?

쿠키가 빠르다.

Session 사용하기

모듈 설치

npm install express-session

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

app.use(session('옵션객체'))옵션객체 부분에는 쿠키와 다르게 붙여서 쓴다.

세션 생성

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

클라이언트 공간의 세션 객체의 user라는 세션에

입력받은 id값을 넣는다.

세션 삭제

req.session.destroy(function(err){

if (err ) throw err ;

res.send (req.session);

});

실습2 session

로그인 한 상태 " 000님 환영합니다" 메세지와 로그아웃 버튼 보여주기
로그인을 하지 않은 상태라면 "회원가입", "로그인"버튼 보여주기

1. 메인페이지 만들고
로그인, 회원가입 버튼 만들기

그 페이지를 랜더하는 코드를 최상위 라우터로 작성

2. 로그인 버튼 > 로그인 페이지로 이동
get. 로그인 페이지 랜더

3. 회원가입은 버튼만 만들어놓고

4. 로그인 성공 > 세션 만들고 메인 페이지로 다시 이동 하면 로그아웃 버튼이 있어야 한다.

로그인의 경우 세션을 많이 사용한다.

로그인 회원가입 버튼이 뜨는 이유는 처음 접속햇고 로그인이 안됫기 때문이다

로그인을 하면,

그 순간부터 다르게 보이는데 ( 로그인, 회원가입 버튼 보이지 않는다 )

아무리 새로고침해도 같은 화면만 보임!

로그아웃을 해야 로그인 회원가입 버튼이 보인다.

로그인

1. 맞는 정보로 로그인햇는지를 판단 = if문

로그인 버튼 누르면

js 파일 > 서버에 요청하며 인풋 id,pw 값 보내주고

위의 정보로 id, pw값이 맞는지 검사하고

맞으면, 세션을 생성하게 한다.

로그인 실패

로그인 성공

우리는 로그인 햇을경우 브라우저가 종료되기 직전까지 이 로그인 상태를 유지 시키겟다.

2. req.session.user = req.body.id;

user라는 key값에 내 입력 정보 id를 저장하겠다 = 세션 생성

3. 세션이 있냐 없냐의 여부를 판단

서버 js 파일

req.session.user

세션아이디 중 user라는 아이디가 있으면

isLogin 값을 true

그리고 id 란 키에 값 user id를 보낸다.

아니면 false 값을

main.ejs 파일에 { 키 : 값 } 으로 보낸다.

4. 로그인, 회원가입, 로그아웃 버튼 스위치

main.ejs 파일

default-btn > 로그인, 회원가입

서버에서 isLogin이란 객체에 true값을 보내면,

default 버튼들은 가리고

새로고침해도 메인화면이 바뀌지 않는다.

이제 로그아웃 버튼만 보일텐데..

5. 로그아웃 버튼

main.ejs파일

페이지에 세션값이 있는지 궁금해서

세션값이 있는지 없는지 검증하는 곳에 콘솔을 찍어놨다.

메인 페이지 세션 체크 : a > undefined

로그아웃하면서 값이 없어졋다

6. req.session.destroy 세션삭제

js파일

ejs 파일에서

서버로 요청을 보내되

데이터를 보낼 필요는 없다.

axios 요청으로 delete 메소드 / logout 주소

서버는 이 요청을 받고, 세션을 삭제 한다

7. 그 응답을 받으면 "/" 이 주소로 돌아간다.

세션이 없는 채로 가서

이것에 대한 검사를 다시 받게 된다.

false 값

8. 즉 로그인, 회원가입 버튼이 보이고 / 로그아웃 버튼은 안보이게 된다.

같은 메인페이지지만,

세션이 있느냐 없느냐에따라

true, false값을 주어서

버튼 스위치가 가능합니다.

'SeSAC 풀스택 > Nodejs' 카테고리의 다른 글

시퀄라이즈 DB - find 할때 raw : true 하면 (0)	2023.02.20
2022-12-06 sequelize로 방명록, 회원가입 (0)	2022.12.06
2022-11-26 미들웨어, 파일 업로드 (0)	2022.11.26
2022_11_25_화면 출력 관련 / 참고 사이트 (0)	2022.11.25
2022-11-24 동적 form 전송 (0)	2022.11.24

'SeSAC 풀스택/Nodejs' Related Articles

생각기록

2022-12-08 Session, Cookie 본문

2022-12-08 Session, Cookie

쿠키란?

쿠키의 동작 방식

nodejs와 사용법

Session 이란?

Session 사용하기

'SeSAC 풀스택 > Nodejs' 카테고리의 다른 글

티스토리툴바