Nuxt.js – 자주 헷갈리는 쿠키의 클라이언트측 사용법과 서버측 사용법

예전에 PHP 로 작업할 당시에는 자바스크립트 쿠키 처리는 무조건 클라이언트측 처리이고 서버측은 PHP 영역이기때문에 그다지 사용법에 헷갈리는 경우가 없었는데요.

하지만 Nuxt 나 Vue 등 Node.js 웹서버와 클라이언트 자바스크립트 코드가 섞이는 현재 환경에서는 사용법을 헷갈릴 수 있으니 주의해야 합니다.

1. 서버측 쿠키 처리

Nuxt.js 의 서버측 코드는 보통 asyncData() 에 등록해 둡니다. 이 때 쿠키 읽기와 저장은 현재 접속의 컨텍스트(context)를 통해 수행해야 하며 다음과 같은 형식이 되죠. (여기서는 Nuxt.js 에 express 웹서버를 별도로 사용하는 형태입니다. 따라서 cookie-parser 모듈이 추가되어 있어야 합니다. 공식웹사이트 관련 예제: https://nuxtjs.org/examples/auth-external-jwt/ )

export default {
  asyncData(context) {
    // 서버측에서 쿠기 읽기
    let value = context.req.cookies['key']

    // 서버측에서 쿠키 저장하기 
    // js-cookie 모듈은 클라이언트용이므로 여기서는 사용할 수 없다.
    context.res.cookie('key', value)
  }
}

2. 클라이언트측 쿠키 처리

클라이언트측은 직접 document.cookie 를 사용하거나 좀 더 편리하게 사용할 수 있는 js-cookie 모듈을 추가해 사용할 수도 있는데요. 여기서는 js-cookie 를 사용한 예를 들어보도록 하겠습니다.

import Cookie from 'js-cookie'

export default {
  mounted() {
    // 클라이언트측에서 쿠키 읽기
    let value = Cookie.get('key')

    // 클라이언트측에서 쿠키 저장하기
    Cookie.set('key', value)
  }
}

이상으로 서버와 클라이언트 각 환경에 따라 쿠키를 다루는 방법을 알아봤습니다.