JavaScript에서 AJAX 요청으로 쿠키 값을 설정하는 방법

AJAX 요청을 통해 쿠키를 설정하거나, 모든 AJAX 요청이 해당 쿠키를 서버로 전송하도록 만들어야 하는 경우가 있습니다. 이번 글에서는 JavaScript로 쿠키를 설정하고, 네트워크 요청 시 자동으로 서버에 전달되는 원리와 구현 방법을 알아보겠습니다.

AJAX 요청과 쿠키의 기본 동작 원리

먼저 중요한 점 하나를 짚고 넘어가겠습니다. 브라우저는 원격 서버로 보내는 모든 AJAX 요청에 대해 개발자가 별도의 작업을 하지 않아도 자동으로 현재 도메인의 모든 쿠키를 해당 서버에 전송합니다.

따라서 우리가 할 일은 매우 간단합니다. JavaScript를 사용해 document 객체에 특정 키(쿠키)를 설정하기만 하면 됩니다. 이후 네트워크 호출이 발생할 때마다 그 쿠키는 요청 대상 서버로 자동으로 전송됩니다.

JavaScript로 쿠키 설정하기

쿠키를 설정하는 코드는 다음과 같습니다.

const token = 'some 323 very 535 random 5445 value';
document.cookie = `token=${token}`;

document.cookie 속성에 키=값 형태의 문자열을 할당하면 쿠키가 생성됩니다. 위 예제에서는 'token'이라는 이름의 쿠키에 임의의 값을 저장했습니다.

만료 시간이 있는 쿠키 설정하기

특정 미래 시점에 만료되는 쿠키를 만들고 싶다면 expires 옵션을 함께 지정하면 됩니다. 코드는 다음과 같습니다.

const token = 'some 323 very 535 random 5445 value';
const expiry = 'Wed, 4 Feb 2021 12:00:00 UTC';
document.cookie = `token=${token}; expires=${expiry}`;

만료일은 GMT/UTC 형식의 문자열로 지정하며, 설정된 시간이 지나면 브라우저가 해당 쿠키를 자동으로 삭제합니다. 참고로 여러 속성을 지정할 때는 세미콜론(;)으로 구분하는 것이 올바른 문법입니다.

정리

이렇게 쿠키를 설정해 두면, 이후 어떤 네트워크 요청을 보낼 때든 'token' 쿠키가 별도의 추가 작업 없이 자동으로 서버에 전송됩니다. 이는 인증 토큰 관리나 사용자 상태 유지 등에 유용하게 활용할 수 있습니다.