쿠키란 무엇이며 JavaScript를 사용하여 작업하는 방법

? ? ? 그렇지 않아요… ??? 더 좋아요! 쿠키 ?는 웹에서 가장 인기 있는 이모지 중 하나이며 웹에서 가장 중요한 기술 중 하나입니다.

이 모든 것이 무엇인지 살펴보겠습니다, 알겠습니까?

브라우저 쿠키의 기본

브라우저 쿠키는 사용자에 대한 지속적인 정보를 유지하기 위해 웹에 도입되었습니다. 첫 번째 사용 사례는 사용자가 이미 Netscape의 웹 사이트를 방문했는지 확인하는 것이었습니다.

쿠키는 이름 필드, 값 필드 및 추가 선택적 속성을 가진 문자열입니다. 값은 문자열이며 응용 프로그램에 가장 적합한 것으로 생각하는 것을 저장할 수 있습니다. Google Analytics의 _ga는 아마도 가장 일반적인 쿠키 중 하나이며 일반적으로 다음과 같이 보입니다:

• 이름: _ga
• 값: GA1.3.210706468.1583989741
• 도메인: .example.com
• 경로: /
• 만료 / 최대-나이: 2022-03-12T05:12:53.000Z

쿠키는 최대 4096 바이트의 데이터를 저장할 수 있습니다 (이에는 이름, 값, 도메인, 만료 날짜 및 그 외의 내용이 포함됩니다). 브라우저에 따라 달라지는 도메인당 추가할 수 있는 쿠키의 제한된 수를 추가할 수 있습니다.

쿠키는 어떻게 생성되나요?

쿠키를 만드는 주요한 두 가지 방법이 있습니다:

• HTTP를 사용하면 HTTP 응답 헤더에 Set-Cookie를 보낼 수 있습니다. 웹 서버에 사용하는 기술에 따라 쿠키 헤더를 관리하기 위해 다양한 도구와 라이브러리를 사용할 수 있습니다. 이러한 도구를 사용하면 대략 다음과 같은 HTTP 응답이 생성됩니다:

HTTP/2.0 200 OK
Content-type: text/html
Set-Cookie: alligator_name=barry
Set-Cookie: tasty_cookie=strawberry
... More http Content

쿠키에 만료 날짜 및 Secure 지시문 및 HttpOnly 플래그와 같은 보안 기능과 같은 정보를 추가할 수 있습니다.

Set-Cookie: cookie_name=cookie_value; Expires=Wed, 17 Sep 2021 07:00:00 GMT; Secure; HttpOnly

HttpOnly 플래그는 쿠키를 브라우저에서 읽거나 수정할 수 없음을 의미합니다. 그리고 Secure는 쿠키가 HTTPS를 통해서만 전송될 수 있음을 의미합니다. 이는 응용 프로그램을 보호하는 데 매우 중요합니다.

• Javascript를 사용하면 쿠키를 관리하는 것이 조금 더 까다롭습니다. 우리에게는 쿠키를 저장하고 다시 할당할 수 있는 document.cookie와 같은 하나의 인터페이스가 있습니다. 예를 들어 Google 애널리틱스가 설치된 사이트에서 개발자 콘솔에서 다음과 같이 할 수 있습니다:

console.log(document.cookie)
// "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741"와 같은 내용을 로그에 기록합니다.

// 이 등호는 예상대로 작동하지 않습니다.
document.cookie = "alligator=alligator_cookie_content;"
console.log(document.cookie)
// "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; alligator=alligator_cookie_content"를 로깅합니다.
// 이전 코드 조각이 새로 생성한 쿠키를 추가한다는 것에 유의하세요.

// 쿠키 인터페이스의 대략적인 구현은 다음과 같을 수 있습니다.
const createCookie = (name, value) => document.cookie = name + '=' + value + ';'
// 실제 업데이트를 위해 먼저 쿠키가 있는지 확인해야 합니다.
const updateCookie = (name, value) => document.cookie = name + '=' + value + ';'
const deleteCookie = (name) => document.cookie = name + '=; Max-Age=-1;';  

쿠키 유형

세션 쿠키

세션 쿠키는 종료될 때까지 존재하는 쿠키 유형을 일반적으로 가리킵니다. 세션 쿠키를 설정하려면 만료 날짜를 지정하지 않으면 됩니다.

예를 들어, 쿠키에 사용자 이름을 저장할 수 있습니다. 쿠키에 액세스할 수 있는 사람은 사용자 이름에 액세스할 수 있습니다. 쿠키에 있으므로 요청에 추가할 필요가 없습니다.

지속적인 쿠키

지속적인 쿠키는 사용자가 브라우저를 닫아도 삭제되지 않습니다. 이러한 쿠키에는 서버에서 설정할 수 있는 만료 날짜가 있습니다. 쿠키의 만료 날짜를 하루 또는 열 년으로 설정할 수 있습니다.

타사 쿠키

동일한 도메인에서 가져온 쿠키와 타사 공급자에서 가져온 쿠키를 구분할 수 있습니다. 이전에 제공한 Google Analytics 예제는 타사 쿠키의 예입니다. 타사 쿠키는 사용자 활동을 추적하는 데 사용될 수 있습니다. 타사 쿠키를 설정하려면 ';domain=thirdpartydomain.com'을 설정해야 합니다.

쿠키 Max-Age 대 만료

쿠키는 일반적으로 일시적이므로 정확한 만료 날짜를 설정하고 싶을 것입니다. 두 가지 전략이 있습니다:

• Expires를 사용하여 고정된 만료 날짜를 설정하십시오. 날짜는 HTTP 날짜 형식을 사용합니다: <요일>, <일> <월> <년> <시간>:<분>:<초> GMT. 예를 들어, 2020년 9월 17일에 쿠키가 만료되도록하려면 다음과 같이 할 수 있습니다:

const jacksBirthday = new Date(2020, 8, 17);
document.cookie = 'jacksage=27; expires =' + jacksBirthday.toUTCString() + ';';

• ‘Max-Age’를 사용하는 것은 모든 브라우저에서 지원되지 않습니다. 하지만 이것이 가장 안전한 해결책입니다. 이것은 클라이언트가 쿠키를 받은 후 일정 시간 (초 단위) 후에 쿠키가 만료되도록 강제합니다:

// 하루 후 만료
const oneDayToSeconds = 24 * 60 * 60;
document.cookie =  'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';

? 이게 다에요! 이제 JavaScript로 클라이언트 측에서 쿠키를 사용하는 방법에 대해 더 잘 이해하시기를 바랍니다. 궁금한 점이 있으시면 Twitter에서 문의해주세요. 다음에는 쿠키와 Express.js를 사용하여 세션을 관리하는 방법을 살펴보겠습니다.