이번에는 SweetAlert를 사용하여 쿠키를 생성하고 삭제하는 기능을 구현해보려고 합니다. SweetAlert는 사용자에게 예쁜 디자인의 팝업 창을 보여주는 라이브러리로, 사용자 경험을 향상시킬 수 있는 강력한 도구입니다.
SweetAlert 설치하기
먼저, SweetAlert를 사용하기 위해서는 라이브러리를 설치해야 합니다. npm을 통해 설치할 수 있습니다.
npm install sweetalert
쿠키 생성하기
쿠키를 생성하기 위해서는 document.cookie를 사용합니다. document.cookie는 현재 페이지의 쿠키를 나타내는 문자열이 포함되어 있습니다. 다음은 쿠키를 생성하는 함수의 예시입니다.
function setCookie(name, value, days) {
const expires = new Date();
expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
document.cookie = `${name}=${value};expires=${expires.toUTCString()}`;
}
위의 함수는 name, value, days 값을 인자로 받아와서 해당 이름과 값을 가지는 쿠키를 생성합니다. expires 변수를 사용하여 쿠키의 만료 날짜를 설정합니다. toUTCString() 메서드를 사용하여 날짜를 문자열로 변환한 뒤, document.cookie에 할당하여 쿠키를 생성합니다.
쿠키 삭제하기
쿠키를 삭제하기 위해서는 쿠키의 만료 날짜를 설정하여 쿠키를 무효화해야 합니다. 쿠키를 삭제하는 함수의 예시는 다음과 같습니다.
function deleteCookie(name) {
document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;`;
}
위의 함수는 name 값을 인자로 받아와서 해당 이름을 가진 쿠키를 삭제합니다. expires 값을 1970년 1월 1일로 설정하여 쿠키를 무효화하고, path=/;를 추가하여 현재 페이지의 모든 경로에서 쿠키를 삭제합니다.
SweetAlert와 쿠키 생성, 삭제 연동하기
이제 SweetAlert와 쿠키 생성 및 삭제 기능을 연동하여 예쁜 팝업 창에서 쿠키를 생성하고 삭제하는 기능을 추가해보겠습니다. 아래의 코드를 참고하십시오.
function showAlert() {
Swal.fire({
title: '쿠키 생성',
text: '쿠키를 생성하시겠습니까?',
icon: 'question',
showCancelButton: true,
}).then((result) => {
if (result.isConfirmed) {
setCookie('exampleCookie', 'exampleValue', 7);
Swal.fire('성공', '쿠키가 생성되었습니다.', 'success');
}
});
}
function showDeleteAlert() {
Swal.fire({
title: '쿠키 삭제',
text: '쿠키를 삭제하시겠습니까?',
icon: 'warning',
showCancelButton: true,
}).then((result) => {
if (result.isConfirmed) {
deleteCookie('exampleCookie');
Swal.fire('성공', '쿠키가 삭제되었습니다.', 'success');
}
});
}
위의 코드는 SweetAlert를 사용하여 쿠키를 생성하고 삭제하는 기능을 연동한 예시입니다. showAlert() 함수는 “쿠키 생성” 팝업 창을 보여주고, 확인 버튼을 누르면 setCookie() 함수를 호출하여 쿠키를 생성합니다. showDeleteAlert() 함수는 “쿠키 삭제” 팝업 창을 보여주고, 확인 버튼을 누르면 deleteCookie() 함수를 호출하여 쿠키를 삭제합니다.
위의 코드를 원하는 위치에 추가하여 SweetAlert와 쿠키 생성/삭제 기능을 구현해보세요.