cookie의 필수요소
20단원 01 실습문제에서...
Q1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>20-02</title>
<style>
.popup{
border: 1px solid black;
background-color: #eee;
box-shadow: 0 0 10px #000000;
padding: 15px;
position: absolute;
width: 280px;
height: 300px;
left: 50%;
top : 50%;
transform: translate(-50%, -50%);
z-index: 9999999;
/\* 기본적으로 팝업을 숨김....아잌....\*/
display: none;
}
</style>
</head>
<body>
<h1>팝업창 열기</h1>
<div class = "popup">
<h2>이 부분은 팝업창 영역입니다.</h2>
<hr />
<label>
<input type = "checkbox" id = "no-open" value = "Y" />
15초간 이 창 열지 않음
</label>
<button type ="button" id = "close-popup">닫기</button>
</div>
<!--쿠키 관련 기능을 재사용하기 위한 함수-->
<script>
const getCookie = (name) => {
// 주어진 이름에 대해 "; name = <value>" 패턴을 찾아 <value> 부분만 반환함
const regex = new RegExp("(?:^|; )" + name.replace(/(\[\\.$?\*|{}\\(\\)\\\[\\\]\\\\\\/\\+^\])/g, "\\\\$1") + "=(\[^;\]\*)");
let matches = document.cookie.match(regex);
// 반환할 값이 있다면 decoding을 수행하고 없다면 undefined를 반환함
return matches ? decodeURIComponent(matches\[1\]):undefined;
};
const setCookie = (name, value, maxAge) => {
// "이름=값" 형식으로 저장된 문자열을 만듦
const encName = encodeURIComponent(name);
const encValue = encodeURIComponent(value);
let updatedCookie = \`${encName}=${encValue};\`;
// 유효 경로 설정
updatedCookie += "path=/;";
// 유효 시간은 파라미터가 전달된 경우만 설정
// 파라미터가 전달 안 된 경우 설정되지 않기 때문에 브라우저를 닫기 전까지 유지
if (maxAge !== undefined){
updatedCookie += \`max-age=${maxAge}\`;
}
// 저장
document.cookie = updatedCookie;
};
</script>
<script>
// 쿠키가 저장되어 있지 않다면 레이어 팝업을 화면에 표시함
// --> 쿠키가 저장되어 있다면 이 if문은 건너뛰므로 팝업을 표시하지 않을 것이다.
if (!getCookie("no-popup")){
document.querySelector('.popup').style.display = "block";
}
console.log(getCookie("no-popup"));
// 닫기 버튼에 대한 클릭 이벤트
document.querySelector('#close-popup').addEventListener('click', e =>{
// 일단 팝업을 닫는다
document.querySelector(".popup").style.display = "none";
// 체크가 되었다면 쿠키를 생성 -> 새로고침 되었을 때 47 라인의 코드가 실행되지 않을 것이다.
if (document.querySelector("#no-open").checked){
setCookie("no-popup","Y", 15);
// 오늘 하루 이 창을 열지 않음인 경우 24시간으로 설정
// setCookie("no-popup","Y", 60\*60\*24);
}
});
</script>
</body>
</html>다시 이 함수에서,
const setCookie = (name, value, maxAge)
이 함수의 2번째 파라미터는 꼭 있어야 하는거야?
A1.
답안 표시
네, setCookie 함수의 두 번째 파라미터 value는 꼭 있어야 합니다.
value는 쿠키에 저장될 실제 데이터를 나타내기 때문에, 이 값이 없으면 쿠키에 아무런 정보도 저장되지 않습니다.
현재 코드에서는 value에 "Y"라는 값을 저장하여 팝업을 닫았을 때 사용자가 "15초간 이 창 열지 않음" 체크박스를 선택했는지 여부를 나타내는 플래그 역할을 합니다.
만약 value를 생략하거나 undefined를 전달하면, 쿠키에는 아무 값도 저장되지 않거나 예상치 못한 값이 저장될 수 있습니다. 이 경우 나중에 getCookie 함수를 호출하여 쿠키 값을 가져올 때 문제가 발생할 수 있습니다.
따라서 setCookie 함수를 사용할 때는 항상 두 번째 파라미터 value에 쿠키에 저장할 값을 명시적으로 전달해야 합니다.
Q2.
setCookie 함수의 2번째 파라미터가 필요한 이유가, document.cookie에 들어가야 할 값이 "이름"="값" 형태라서 그런거야?
A2.
네, 정확합니다.
setCookie 함수는 웹 브라우저의 document.cookie 속성을 사용하여 쿠키를 설정합니다. document.cookie는 문자열 형태로 쿠키 정보를 저장하며, 각 쿠키는 ;로 구분됩니다. 각 쿠키는 "이름=값" 형태를 가지고, 추가적인 속성들(예: 만료 날짜, 경로)은 ;로 구분하여 추가할 수 있습니다.
따라서 setCookie 함수의 두 번째 파라미터 value는 쿠키에 저장될 실제 데이터를 나타내며, 이 값이 없으면 "이름=값" 형태를 만들 수 없기 때문에 쿠키를 제대로 설정할 수 없습니다.