[node.js] Cookie - 팝업 창 하루동안 보지 않기

Notice

Recent Posts

Recent Comments

Link

« 2025/04 »
일	월	화	수	목	금	토
		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

Tags more

Archives

Today

Total

관리 메뉴

🌱 → 🌳

[node.js] Cookie - 팝업 창 하루동안 보지 않기 본문

Server/Node.js

[node.js] Cookie - 팝업 창 하루동안 보지 않기

thals0 2022. 9. 24. 15:49

728x90

📌 Cookie

: HTTP 쿠키는 서버가 사용자의 웹 브라우저에 전송하여 저장하는 작은 데이터 저장소

JS의 객체처럼 key 값과, data가 들어 있음
브라우저는 쿠키로 데이터를 저장해 두었다가, 동일한 서버에 다시 요청을 보내게 될 때 쿠키에 저장된 정보를 함께 전송
서버에서는 쿠키를 통해 요청이 어떤 브라우저에 들어왔는지(혹은 요청이 동일한 브라우저에서 들어왔는지) 등을 파악할 수 있음
서버에 저장해야 할 정보를 관리 -> 로그인 정보, 장바구니, 팝업 하루 동안 안 보기 등
중요한 정보(이름, 데이터, 만료일, 경로 등)는 로컬에 남게 되므로 절대 저장해서는 안됨

✅ Cookie의 동작 방식

✅ 프론트에서 쿠키 사용하기

(사용 X, 편법)

document.cookie로 사용

<script>
    console.log(document.cookie);
    document.cookie = "user=test1; expires=19 Sep 2022 13:00:00 GMT; path=/";
    document.cookie = "test=test2; expires=19 Sep 2022 13:00:00 GMT; path=/";
    console.log(document.cookie);
</script>

expires값과 브라우저의 시간을 비교해서 쿠키가 해당 시간이 되면 자동으로 삭제 처리

window.onload = () => {
   if (document.cookie) alert(`쿠키 팔아요! ${document.cookie}`);
};

Front JS 코드를 통해 특정 상황에서 페이지가 새로 고침 해도 저장이 필요한 정보를 쿠키에 저장하여 DB처럼 활용도 가능

(하지만, 딱히 쓸 일은 많지 않음)

📍 브라우저에서 쿠키 확인하기

개발자 도구 -> Application -> Storage -> Cookies 에 가면 쿠키 정보 확인 가능

✅ 백엔드(express)에서 쿠키 사용하기

cookie-parsser 모듈 사용

npm i cookie-parder -s

메인 서버에 쿠키 모듈 호출 및 미들웨어 등록

const cookieParser = require('cookie-parser');
app.use(cookieParser());

쿠키를 사용할 곳에서 res.cookie('쿠키 이름', '데이터', '옵션 객체'); 를 써서 사용

res.cookie('alert', true, {
    expires: new Date(Date.now() + 1000 * 60),
    httpOnly: true,
});

🔍 옵션의 의미

expires: 쿠키가 자동으로 삭제되는 일자 지정
httpOnly: 해당 쿠키는 서버와의 http 통신에서만 읽을 수 있음을 표시, 프론트에서처럼 JS로 해당 쿠키를 읽으려 하면 웹브라우저가 이를 차단

📍 실제로 쿠키가 잘 동작하는지 확인하기

index.ejs에서 cookie가 서버에서 잘 전송되었는지 확인

(프론트에서 쿠키 발행한 코드 주석 처리 + 기존에 발행된 쿠키도 삭제 처리)

window.onload = () => {      
   if (document.cookie) alert(`쿠키 팔아요! ${document.cookie}`);
};

-> httpOnly 옵션 때문에 document.cookie의 값을 읽으려고 하는 것을 브라우저가 차단하기 때문에 alert창 안 뜸

따라서, httpOnly 옵션을 false로 바꾸고 실행하면 작동하는 것을 확인할 수 있음

📍 쿠키 값 전달

쿠키를 생성하면서 쿠키의 값을 res.render에 담에 같이 전달해서 사용 가능

생성된 쿠키에 대한 접근: req.cookies.쿠키이름

res.cookie('alert', true, {
    expires: new Date(Date.now() + 1000 * 60),
    httpOnly: true,
  });
res.render('index', { alert: req.cookies.alert });

// index.ejs
<script>
  window.onload = () => {
      if ('<%= alert %>' === 'true') alert(`쿠키 팔아요! ${document.cookie}`);
    };
</script>

-> httpOnly 옵션이 켜져 있음에도 값을 전달하였기 때문에 alert창이 잘 뜨는 것을 확인할 수 있음

(단, 쿠키 내용은 안 뜸)

📌 팝업 창 하루 동안 보지 않기

: 팝업이 뜬 상황에서 오늘 하루 안보기를 체크하고 닫기를 누르면 쿠키를 발행하고, 해당 쿠키에 의해 팝업이 하루 동안 안보이도록 구현

(반드시, app.js에서 index.ejs 라우팅보다 cookie-parser 불러오는 것을 먼저 해야 작동한다)

(나도 알고 싶지 않았음)

📍index.ejs

<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">
          <h5 class="modal-title" id="exampleModalLabel">cookie 실습</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          쿠키 실습
          <div class="text-end mt-3">
            <input type="checkbox" id="cookie"> <label for="cookie" style="cursor: pointer;">오늘 하루 안보기</label>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" onclick="modalClose();">닫기</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    const myModal = new bootstrap.Modal('#exampleModal');
    if ('<%= popup %>' !== 'hide') myModal.show();

    function modalClose() {
      // 하루 동안 안보기 기능 구현하기
      const cookie = document.getElementById("cookie");
      if (cookie.checked == true) {
        fetch('/cookie', {
          method: 'post',
          headers: {
            'Content-type': 'application/json'
          },
        }).then((res) => {
          console.log(res.data);
        }).catch((err) => {
          console.log(err);
        })
      }
      myModal.hide();
    }
  </script>

  <div class="container mt-5">
    <h1 class="text-center">Hello, Express Service</h1>
    <h2 class="mt-5 text-center"><a href="/login">로그인 바로가기</a></h2>
  </div>

</body>

📍index.js

// @ts-check

const express = require('express');

const router = express.Router();

router.get('/', (req, res) => {
  res.render('index', { popup: req.cookies.popup });
});

router.post('/cookie', (req, res) => {
  res.cookie('popup', 'hide', {
    expires: new Date(Date.now() + 1000 * 60 * 60 * 24),
    httpOnly: true,
  });
  res.send('쿠키 생성');
});

module.exports = router;

728x90

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

[node.js] passport(local 로그인, 로그아웃 구현) (0)	2022.09.24
[node.js] Session으로 로그인 구현하기 (0)	2022.09.24
[node.js] Front에서 Back으로 데이터 전송 (0)	2022.09.24
[node.js] Error Handling (1)	2022.09.24
[node.js] View Engine(ejs, pug, nunjucks) (0)	2022.09.24

'Server/Node.js' Related Articles

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

🌱 → 🌳

🌱 → 🌳

[node.js] Cookie - 팝업 창 하루동안 보지 않기 본문

[node.js] Cookie - 팝업 창 하루동안 보지 않기

📌 Cookie

✅ Cookie의 동작 방식

✅ 프론트에서 쿠키 사용하기

📍 브라우저에서 쿠키 확인하기

✅ 백엔드(express)에서 쿠키 사용하기

📌 팝업 창 하루 동안 보지 않기

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

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역