Colin's Blog
자바스크립트 쿠키와 세션 관리

자바스크립트를 이용한 웹 개발에서 쿠키와 세션은 사용자 정보를 유지하고 인증 및 상태 관리를 위해 중요한 요소입니다. 이번 글에서는 자바스크립트를 사용하여 쿠키와 세션을 어떻게 관리할 수 있는지 알아보겠습니다.

쿠키(Cookies)

쿠키는 일반적으로 웹 브라우저에 저장되는 작은 데이터 조각입니다. 쿠키를 사용하면 웹 사이트는 사용자의 인증 정보, 선호 설정 등을 저장하고, 그 정보를 추후에 사용자에게 제공할 수 있습니다.

자바스크립트를 사용하여 쿠키를 생성하고 접근하기 위해서는 document.cookie 프로퍼티를 사용해야 합니다. 예를 들어, 다음은 이름과 값이 “username”과 “John”인 쿠키를 생성하는 코드입니다.

document.cookie = "username=John";

쿠키는 문자열 형태로 저장되어 있으며 세미콜론을 사용하여 각각의 쿠키 속성을 구분합니다. 만약 여러 개의 쿠키를 저장하려면 세미콜론으로 구분된 문자열을 설정해야 합니다.

쿠키의 속성들은 다음과 같습니다.

자바스크립트를 사용하여 쿠키의 값을 가져오거나 설정할 수 있으며, 쿠키를 만료시키기 위해서는 만료일을 설정해야 합니다.

// 쿠키 가져오기
const cookieValue = document.cookie;

// 쿠키 설정
document.cookie = "username=John; expires=Sun, 31 Dec 2023 23:59:59 UTC; path=/";

// 쿠키 삭제 (만료일을 과거로 설정)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

세션(Session)

세션은 서버 측에서 사용자에 대한 정보를 저장하는 방법입니다. 세션은 쿠키를 기반으로 하지만 서버에 저장되므로 보안적인 이점이 있습니다. 세션은 사용자가 웹 사이트에 접속하고 있는동안에만 유지되며, 세션이 만료되면 사용자 정보는 삭제됩니다.

자바스크립트로 세션을 관리하기 위해서는 위에서 언급한 쿠키와 마찬가지로 document.cookie를 사용할 수 있습니다. 세션을 생성하거나 확인하기 위해서는 서버와의 통신이 필요하므로 AJAX나 Fetch API를 사용하여 데이터를 주고받아야 합니다.

// 서버와 세션 생성 요청하기
fetch('/session', {
  method: 'POST',
  credentials: 'include' // 쿠키를 함께 전송하도록 설정
}).then(response => {
  // 세션이 생성되었을 때 처리할 코드
});

// 서버와 세션 상태 확인 요청하기
fetch('/session', {
  method: 'GET',
  credentials: 'include'
}).then(response => {
  // 세션이 유효한 경우 처리할 코드
});

위 예시는 Fetch API를 사용하여 서버에 세션 생성 및 상태 확인 요청을 보내는 코드입니다. credentials 옵션을 include로 설정하여 쿠키를 요청에 포함시킵니다.

결론

자바스크립트를 사용하여 쿠키와 세션을 관리하는 것은 웹 개발에서 중요한 부분입니다. 이를 통해 사용자 정보를 유지하고 인증 및 상태 관리를 수행할 수 있습니다. 쿠키는 클라이언트 측에서 저장되는 작은 데이터 조각이며, 세션은 서버 측에서 사용자 정보를 저장합니다. 자바스크립트를 통해 이러한 쿠키와 세션을 생성, 접근, 삭제할 수 있으며, 서버와의 통신을 통해 세션의 상태를 확인할 수 있습니다.

참고 자료:

© 2018 Colin. All rights reserved.