JavaScript에서 이름으로 쿠키를 읽는 가장 간결한 함수는 무엇일까?

JavaScript에서 쿠키를 다룰 때 가장 먼저 알아야 할 것은 document.cookie 속성입니다. 이 속성은 현재 문서에 저장된 모든 쿠키를 "이름=값; 이름=값" 형태의 하나의 문자열로 반환합니다. 아래는 이 문자열을 파싱하여 각 쿠키의 이름과 값을 읽어내는 간결한 함수입니다.

function ReadCookie() {
    var allcookies = document.cookie;
    document.write("All Cookies : " + allcookies);

    // 모든 쿠키 쌍을 배열로 분리
    cookiearray = allcookies.split(';');

    // 배열에서 키와 값 추출
    for(var i = 0; i < cookiearray.length; i++) {
        name = cookiearray[i].split('=')[0];
        value = cookiearray[i].split('=')[1];
        document.write("Key is : " + name + " and Value is : " + value);
    }
}

코드 동작 방식

1. 전체 쿠키 문자열 가져오기: document.cookie는 세미콜론(;)으로 구분된 쿠키 목록을 문자열로 반환합니다. 예를 들어 "username=John; theme=dark"와 같은 형태입니다.

2. 문자열 분리: split(';') 메서드를 사용해 각 쿠키 항목을 배열 요소로 나눕니다. 실제 쿠키 문자열에는 공백이 포함될 수 있으므로, 실무에서는 trim()을 함께 사용하는 것이 안전합니다.

3. 키와 값 추출: 각 항목을 등호(=) 기준으로 다시 분리하면 첫 번째 요소가 쿠키 이름, 두 번째 요소가 값이 됩니다.

특정 이름의 쿠키만 읽고 싶다면?

모든 쿠키가 아니라 특정 이름의 쿠키 값만 필요한 경우라면, 위 로직을 활용해 다음과 같이 더 실용적인 함수를 만들 수 있습니다.

function getCookie(name) {
    const cookies = document.cookie.split(';');
    for(let i = 0; i < cookies.length; i++) {
        const [key, value] = cookies[i].trim().split('=');
        if(key === name) return decodeURIComponent(value);
    }
    return null;
}

// 사용 예시
console.log(getCookie("username"));

이처럼 document.cookie 문자열을 직접 파싱하는 것이 JavaScript에서 쿠키를 읽는 가장 기본적이면서도 널리 쓰이는 방법입니다. 참고로 최신 브라우저에서는 CookieStore API 같은 더 편리한 비동기 인터페이스도 제공되지만, 구형 브라우저와의 호환성을 고려한다면 위와 같은 파싱 방식이 여전히 가장 안정적인 선택입니다.