jquery-cookie 플러그인을 사용해서 오늘 하루동안 이창을 열지 않기 기능 간단하게 구현해보기

블로그 목적 

jquery-cookie 플러그인을 이용한 오늘하루동안 이창을 열지 않기 구현방법에 대해서 공부및 정리후 나만의 노하우와 지식을 공유한다.

블로그 요약

1. jquery-cookie 플러그인 에 대해서 알아본다.
2. 간단한 샘플코드를 작성해서 "오늘하루동안 이창을 열지 않기" 기능을 구현 해본다. 

블로그 상세내용

우선, jquery-cookie에 대해서 알아볼까요?

jquery-cookie 플러그인은 간편하게 쿠키(cookie) 를 생성하고 쿠키 만료일을 설정할 수 있는 플러그인을 말하는데요...

참고로, 쿠키(cookie)에 대해서 정리해보자면요..
쿠키는 웹사이트를 방문한 사용자의 소량의 브라우저 정보를 저장할 수 있는 영역 또는 공간을 말합니다. 
즉, 소량의 데이터를 저장할 수 있는 저장소를 쿠키 조각에 비유해서 이렇게 부르고 있다고 하고요...

참고로, 쿠키는 하나의 도메인당 최대 20개를 생성할 수 있고, 최대 4KB까지 저장할 수 있다고 하네요...

현재 기준(2022/10/18) 최신버전은 1.4.1 이고요...
아래와 같이 소개하고 있군요..
A simple, lightweight jQuery plugin for reading, writing and deleting cookies.
(쿠키를 읽고 쓰고 삭제를 위한 간단하고 가벼운 jQuery 플러그인.)

한마디로, 해당 플러그인을 잘 이용하면 웹사이트의 쿠키를 핸들링할 수 있다? 정도로 머릿속에 넣어두시면 좋을것 같네요..

그럼, "오늘하루동안 이창을 열지 않기" 에 대해서 간단한 샘플코드를 사용해서 구현을 해볼까요?

우선, 제가 자주 이용하는 웹사이트가 있는데요..
바로 cdnjs 사이트 입니다. 구글에서 아래와 같이 검색해봅니다. 

그리고, 해당 URI 를 클릭하시면 아래와 같이 cdnjs 웹사이트에 접속하실 수 있고요..

해당 cdnjs 사이트는 무려 4,328개의 라이브러리를 검색할 수 있다고 하네요...
해당 웹페이지에서는 아래와 같이 설명하고 있고요..
---
Simple. Fast. Reliable.
Content delivery at its finest.

cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare.

We make it faster and easier to load library files on your websites.
---

다시말해서, 단순한. 빠른. 믿을 수 있는. 최상의 콘텐츠 전달한다는 모토를 가지고 있고요..
그리고 cdnjs는 모든 웹사이트의 12.5% 이상이 신뢰하는 무료 오픈 소스 CDN 서비스로, Cloudflare에서 제공하는 매월 2,000억 건 이상의 요청을 처리한다고 하네요...
또한, 웹사이트에서 라이브러리 파일을 더 빠르고 쉽게 로드할 수 있다고 소개하고 있고요..

그럼, 아래와 같이 "jquery-cookie" 를 검색해 봅니다. 
검색해보니 아래와 같이 바로 나오는군요..

클릭해 보시면 아래와 같이 나오고요..

보아하니, MIT 라이센스군요...
참고로, MIT 라이센스에 대해서 알아보면요..
(미국의 매사추세츠 공과대학교에서 자기 학교의 소프트웨어 공학도들을 돕기 위해 개발한 라이센스라고 보시면 되고요..MIT라이센스를 따르는 소프트웨어를 개조한 제품을 반드시 오픈 소스로 배포해야 한다는 규정이 없고, GNU General Public License의 엄격함을 피하려는 사용자들에게 인기가 있다고 하네요..
MIT 라이센스는  GNU General Public License (GPL)등과 달리 Copy left는 아니며, 오픈 소스 여부에 관계없이 재사용을 인정하고 있다고 하네요.
그리고, BSD 라이선스를 기초로 작성된 BSD계열 라이선스 중의 하나라고 보시면 되고요..)

첨언을 잠시하자면요, 개발자는 오픈소스나 라이브러리를 사용할때 해당 소스의 라이센스는 꼭 확인하는 습관을 가져야합니다. 왜냐하면, 추후에 저작권 소송(?)에 휘말릴때를 대비하기 위해서죠!!

그럼, 차근차근 알아보시죠...
해당 플러그인을 사용하기위해서 jquery-cookie 플러그인의 URI 를 크롬 브라우저에서 붙여넣어서 아래와 같이 열고 난다음 "ctrl+s" 를 눌러서 보인의 js 폴더에 저장합니다. 

그러면 아래와 같이 저장이 되는데요..(참고로 저는 VSCode 로 샘플코드를 작성했습니다.)

그럼, 샘플코드를 작성하기 위한 환경을 세팅되었고요...
본격적으로 코딩을 해보죠....
(뚝딱뚝딱!! .....코딩중.....완성!!)

아래와 같이 저는 샘플코드를 차근차근 코딩을 했습니다. 

그리고, VSCode 는 정말 편한기능이 존재하는데요...
웹개발 하면서 자신이 프로그래밍한 코드가 어떤상태(?) 인지 실시간 확인이 가능한 부분이죠...
(바로 아래 Live Server 확장 플러그인을 사용해서 가능합니다. ㅎㅎ)

아래와 같이 Go Live 를 누르시면 됩니다.

바로 실행해보시면 아래와 같이 크롬 브라우져에서 확인할 수 있고요..

F12 키를 누르시면 아래와 같이 개발자도구가 뜨는데요...
(참고로 개발자도구는 웹개발자는 필수 아이템(?) 이죠 ㅋ)

Application > Cookies 를 확인해보니... (현재는 생성된 쿠키가 없네요...)

그럼, magic 쿠키를 생성해보겠습니다. 
(아래와 같이 1일동안 이 창 열지 않기를 선택하시고요. 닫기 버튼을 누르시면 됩니다. )

개발자도구(F12)를 보시면 아래와 같이 magic 쿠키가 생겼음을 알수 있습니다. 

해당 magic 쿠키가 존재함으로써, 아래 expires 를 1로 설정해서, 1일간 화면이 보이지 않게됩니다. 

아래와 같이 보이지 않죠...

그럼, 간단하게 쿠키 플러그인을 통해서 쿠키를 생성, 가져오고, 삭제하는 방법을 정리하고 오늘의 블로그를 마무리하도록 할께요~

구분	사용법	예시
쿠키생성	$.cookie("[cookie name]", "[cookie value]" , {expires:[expire date], path: "[save path]")	$.cookie("magic","none",{expires:1, path:"/"}) - 쿠키를 최상위 폴더에 저장하고, 1일후 자동 소멸
쿠키가져옴	$.cookie("[cookie name]")	$.cookie("magic") - "magic" 이라는 이름으로 저장된 쿠키의 값을 반환
쿠키삭제	$.removeCookie("[cookie name]")	$.removeCookie("magic") - "magic" 이라는 이름으로 저장된 쿠키를 삭제함

오늘의 블로그는 여기까지고요
항상 믿고 봐주셔서 감사합니다.

그럼 결론을 정리해보고, 블로그를 마치도록 할께요..

결론

하나, jquery-cookie 플러그인을 그냥 한마디로 설명드리자면...
jquery-cookie 플러그인은 간편하게 쿠키(cookie) 를 생성하고 쿠키 만료일을 설정할 수 있는 플러그인이라고 머릿속에 넣어두시면 될것 같습니다. 

참고로, jquery-cookie 플러그인을 사용하면 쿠키를 생성하고, 가져오고, 삭제할 수 있습니다.

둘, VSCode에는 정말 편한기능이 존재하는데요...
웹개발 하면서 자신이 프로그래밍한 코드가 어떤상태(?) 인지 실시간 확인이 가능한 부분이죠...
(Live Server 확장 플러그인을 사용해서 가능합니다. ㅎㅎ)

셋, 쿠키를 사용하면 "일주일간 창을 열지않기" 등등 기간을 설정해서 옵션화면(?)을 안볼 수 도 있습니다. 

오늘하루도 기쁘고 행복한 하루되세요~!!