오늘 Node JS를 공부하면서 쿠키에 대해서 알게되었다. 크롬에 쿠키를 지운다는 것을 보고 쿠키라는 것의 존재는 알았지만 정확히 무슨 값을 가지고 무슨 동작을 하는지는 오늘에서야 알게되었다.

쿠키는 웹 브라우저에 저장되어있는 키-값 형식의 데이터입니다. 웹 서버가 Response를 보낼때 Set-Cookie 헤더를 통해서 생성됩니다. Cookie 헤더를 받은 웹 브라우저는 저장장치에 쿠키 데이터를 생성하고 저장합니다. 이후 웹 브라우저가 Request를 보낼 때, 웹 서버의 도메인에 해당되는 모든 쿠키값이 Cookie 헤더를 통해 함께 절달됩니다!

만일 Django를 이용해서 NightMode를 구현하려고 하였다면 데이터베이스 안의 사용자의 테이블에 무슨 테마를 사용중인지 기록했을 것이다. 사용자가 쿠키를 지워도 테마는 계속 유지 될테고 선택한 테마에 따라서 완성도 있는 모습을 보여줄 수 있겠다.

하지만 백앤드가 없는 정적인 사이트에 이 기능을 넣고 싶었다. (깃허브 블로그 같은) 그 동안에 이 기능을 구현할 별다른 방도가 없어 보였으나 오늘 학습한 Cookie를 사용하면 될 것 같았다.




자바스크립트에서 이 쿠키라는 것에 접근할 수 있는데 쿠키에 대한 모든 정보는 document.cookie에 들어있다. 먼저 접근하는 방법과 쿠키의 값을 얻는 방법은 다음과 같다.

1
document.cookie = 'theme=night_mode';

위와같이 쿠키를 생성할 수 있는데 theme가 키가 되고 night_mode가 값이 된다. 실제로 필자가 사용할 정보는 사용자에게 theme라는 키 값이 있는지 검사할 것이며 안에 내용은 무의미하다. 여하지간 이 키 값이 존재하는지 검사하는 기능은 별도로 없기 때문에 다음 함수를 작성하여 불러오는 것이 편리하다.

1
2
3
4
5
function getCookie(name) {
    var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return value? value[2] : null;   
}
getCookie('theme');

쿠키가 생성되었다면 night_mode 라는 값을 없다면 null을 반환할 것이다.




버튼을 눌러 쿠키를 생성하고 제거하는 방법은 다음과 같다.

1
<button onclick="ReverseTheme();">ReverseTheme</button>
1
2
3
4
5
6
7
8
function ReverseTheme() {
    if(!getCookie('theme')) {
        document.cookie = 'theme=night_mode';
    } else {
        document.cookie = 'theme=; expires=Thu, 18 Dec 2013 12:00:00 UTC';
    }
    checkTheme();
}

쿠키를 제거하는 방법에 대해서는 아직 자세히 모르겠다. 보던 자료에서 나와있던 방식을 그대로 사용한 것이다. 여하지간 정상적으로 작동하여 그대로 이용중이다.




이제 쿠키를 생성하거나 삭제하는 기능을 만들었으니 테마를 변경하는 기능을 만들어야 한다. 일일이 아이디를 찾아서 스타일을 변경하거나 클래스를 추가할 수 있겠지만 jQuery를 사용하면 훨씬 간단하다.

1
2
3
4
5
6
7
8
9
10
<style>
    .night-mode {
        background-color: #000;
        color: #fff;
    }
</style>
<div class="target">
    ...
</div>
<textarea class="target"></textarea>

target 이라고 적혀진 클래스를 가진 모든 개체에 대해서 night-mode라는 클래스를 적용할 것이다.

1
2
3
4
5
6
7
function checkTheme() {
    if(getCookie('theme')) {
        $('.target').addClass('night-mode');
    } else {
        $('.target').removeClass('night-mode');
    }
}

아래는 적용된 모습이다. 완성된 코드는 여기서 확인할 수 있다.

적용 이미지

WRITTEN BY

배진오

소비적인 일보단 생산적인 일을 추구하며, 좋아하는 일을 잘하고 싶어합니다 :D
im@baejino.com

comments powered by Disqus