[JS] 오늘 하루 동안 이 창을 열지 않음!

2022년 시즌 이벤트 모달창을 개발하던 중이었다.
개발을 하면서 페이지로 이동할 때마다 열리는 모달창 때문에 사용자 경험 측면에서 조금 거슬릴 것 같다고 생각을 했다.
디자인 시안과 기획안 모두에 "오늘 하루 동안 이 창을 열지 않음"이라는 기능은 없었지만!!!
기획팀에 해당 기능 추가에 대한 의견을 남기어 개발하게 되었다.

해당 프로젝트는 레거시 코드이기 때문에 라이브러리(리액트, 뷰, 앵귤러 등)를 사용하지 않고 순수 자바스크립트로만 개발하였다.

---

🍪 document.cookie를 사용한 기능 개발

<div id="parent">
  <div class="modalWrap" onclick="closeModal()"></div>
  <div id="modal">
    <button onclick="closeModalDuringOneday()">오늘 하루 동안 이 창을 열지 않음</button>
  </div>
</div>

구조 & 스타일 간단 설명

1. parent는 모달창이 띄어질 페이지의 상위 요소이다.
2. modalWrap은 모달창이 띄어질 때 모달창 외 페이지를 가리는 부분이며, 해당 영역을 클릭 시 모달창이 닫힌다.
3. modal은 모달창이며 button 태그 '오늘 하루 동안 이 창을 열지 않음'을 클릭하면 브라우저 cookie를 사용하여 하루 동안 dom에서 사라진다.

const getCookie = (name) => {
    const value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return value ? value[2] : null;
}

const closeModal = () => {
	document.querySelector('div.modalWrap').style.display = 'none';
	const modal = document.getElementById('modal');
	document.querySelector('#parent').removeChild(modal);
}

const closeModalDuringOneday = () => {
    let date = new Date(Date.now() + 86400e3);
	date = date.toUTCString();
	document.cookie = `modalClose=T; expires=${date}`
	closeModal();
}

(function() {
    if (getCookie('modalClose')) closeModal();
}());

함수 설명

1. getCookie
   • 브라우저 쿠키에 name이 있는지 확인한다.
   • 브라우저 쿠키의 name에 value가 있다면 value[2]에 우리가 지정한 document.cookie에서 name의 value값이 나온다.
2. closeModal
   • 모달 노드를 dom에서 삭제한다.
3. closeModalDuringOneday
   • 현재 시간에서 하루 후의 date값을 생성하며, document.cookie의 expires(만료) 값이 된다. 이때 주의할 점은 toUTCString 혹은 toGMTString메서드를 사용하여 포맷을 변경해 주어야 브라우저 쿠키에서 정상 동작하며, 브라우저는 설정된 유효 일자까지 쿠키를 유지하다가 해당 일자가 도달하면 쿠키를 자동으로 삭제한다.
   • document.cookie는 key=value뒤에 나열하고 ;로 구분한다.
4. 즉시실행함수 (Immediately-invoked function expression)
   • 해당 프로젝트는 위에서 설명했던 것과 같이 라이브러리를 사용하지 않은 순수 자바스크립트 코드로 이루어져 있다. 그렇기 때문에 웹 사이트를 로드했을 때 브라우저 쿠키의 popupClose(name)값이 있는지 확인하여 모달을 띄울 지 말지 판별하여 동작하여야 하는데, react의 useEffect같은 기능을 사용할 수 없기에, 처음엔 window.onload 안에서 실행되도록 했는데, 이슈사항은 말 그대로 dom이 다 로드되었을 때 동작하기 때문에 사용자 측면에서 매우 느리고, 모달이 처음엔 켜져 있다가 브라우저 쿠키의 값을 보고 꺼지기 때문에 오류처럼 보인다는 것이다. 따라서 어떤 방법이 있을까 고민하다, 생각보다 정말 간단하게 브라우저에서 해당 프로젝트 코드를 읽을 때 바로 실행할 수 있는 즉시실행함수로 동작하게 하면 되겠다는 생각을 하여 적용해 보았고, 생각했던 대로 정상 동작하였다. (주절주절)

---

혹시 내용에 오류가 있다면 피드백 부탁드립니다. 🙇🏻‍♀️

[참고]

• https://ko.javascript.info/cookie