[세션 / 토큰 로그인 프로젝트] 고도화(3) 쿠키를 통한 팝업 관리

계기

쿠키를 통해 로그인하여 인증정보를 주고받을 때, 쿠키를 효율적으로 사용할 수 있는 것이

무엇이 있을지 생각해보다가 팝업을 구현해보기로 하였다. 

전부 다 프론트에서 처리할 수도 있겠지만, 팝업 구현이 목적이 아니라

프론트와 백이 쿠키를 주고 받는 것을 확인하고 쿠키가 오고가는 것을 확실히 공부하기 위함이다. 

목표

구현 목표는 간단하게 3일간 보지 않기 기능을 가진 체크박스와 닫기 버튼으로 이루어진 팝업창을 만들고,

기본적으로 로그인할 때 팝업창을 띄우지만, 체크박스에 체크를 하면 3일간 팝업창을 무시하도록 하려 한다.

 

방법

기본적으로 서버에서 html파일을 보내주면 클라이언트측에서 받아서 띄워주는데, 

서버에서 보내주는 기준은 쿠키의 유무로 한다. 

팝업창이 확인되었을 때 체크박스를 클릭하고 닫게 되면 쿠키를 생성해주도록 해서 서버에서 해당 쿠키가 있을 경우

보내주지 않도록 하고, 쿠키가 없을 경우 보내주도록 하였다. 

 

 

구현

1. 먼저 로그인을 한다. 

 

2. 아직 쿠키가 없는 상태이므로 팝업창을 확인할 수 있다. 

이때까지도 쿠키는 확인할 수 없다. 

(sessionID는 로그인시 생성되는 세션데이터고, iKey는 멱등성을 검사하기 위한 다른 쿠키이다.)

 

3. 3일간 보지 않기 체크한 후 닫기를 하면 다음과 같이 그대로 다음 서비스를 이용하면 되는데,

로그아웃을 했을 때 다음 우측과 같이 reappear이라는 쿠키를 넣어준다. 

만료기간을 3일로 두었기 때문에 3일동안은 서버에서 팝업을 보내주지 않는다. 

 

 

4. reappear쿠키가 있는 상태에서 로그인하면 직전 스크린샷의 좌측 화면처럼

팝업이 뜨지 않은 상태가 된다. 다음은 서버에서 구현한 내용이다.

export const sendPopup = (req, res, next) => {
  try {
    const reappearCookie = req.cookies.reappear;

    if (!reappearCookie) {
      // popup.html 파일을 읽어서 응답으로 전송
      const __filename = fileURLToPath(import.meta.url);
      const __dirname = path.dirname(__filename);
      const popupFilePath = path.join(__dirname, '../../public', 'popup.html');
      fs.readFile(popupFilePath, 'utf8', (err, data) => {
        if (err) {
          console.error('Failed to read popup.html:', err);
          throw new AppError(CommonError.UNEXPECTED_ERROR,'popup.html을 불러오는데 실패했습니다.',500)
        } else {
          res.send(data);
        }
      });
    } else {
      next();
    }
  } catch (error) {
    console.error(error);
    next();
  }
};

req.cookies로 reappear 쿠키를 찾고, 없을 경우 popup.html을 보내주었다. 

에러가 나면 서버 내의 오류이므로 500으로 보냈고, 에러 메세지는 서버에서만 확인할 수 있도록 하였다.

reappear 쿠키가 있을 경우 다음 미들웨어로 넘겼다. 

 

 

 

코멘트

이번 구현은 어렵지 않게 금방 진행되었다. 

어떻게 구현할지 기획하고 방법이 머릿속에 잘 정리되어 있을 때 구현하면 정말 금방 구현해내는 것 같다.

반대로 그때그때 생각해내려고 하면 아무래도 방법이 아예 갈피가 잡히지 않을 때도 있고,

방법이 한 가지는 아닐테니, 하면서도 여러 갈래로 생각들이 나뉘는 것 같다. 

 

잘 정리해서 콤팩트하게 끝내고, 중간중간에 다른 방법으로도 구현할 수 있겠다 싶은건

기록해두고 다음에 다른 방식으로 구현해보면 좋을 것 같다.