{"componentChunkName":"component---src-templates-blog-post-js","path":"/vue/vue-js-jwt-기반-사용자-인증/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"ba21efd4-2e7c-5fda-8bd5-fa6200e7f052","excerpt":"Vue Js 뷰 JWT 기반 사용자 인증 JWT ( JSON WEB TOKEN ) 이란? JWT 는 JSON Web Token의 약자로 전자 서명 된 URL-safe (URL로 이용할 수있는 문자 만 구성된)의 JSON이다. 전자 서명은 JSON…","html":"

$\"Vue$

\n

JWT ( JSON WEB TOKEN ) 이란?

\n

JWT 는 JSON Web Token의 약자로 전자 서명 된 URL-safe (URL로 이용할 수있는 문자 만 구성된)의 JSON이다. 전자 서명은 JSON 의 변조를 체크 할 수 있게되어 있다. JWT는 속성 정보 (Claim)를 JSON 데이터 구조로 표현한 토큰으로 RFC7519 표준 이다. JWT는 서버와 클라이언트 간 정보를 주고 받을 때 Http 리퀘스트 헤더에 JSON 토큰을 넣은 후 서버는 별도의 인증 과정없이 헤더에 포함되어 있는 JWT 정보를 통해 인증한다. 이때 사용되는 JSON 데이터는 URL-Safe 하도록 URL에 포함할 수 있는 문자만으로 만든다. JWT는 HMAC 알고리즘을 사용하여 비밀키 또는 RSA를 이용한 Public Key/ Private Key 쌍으로 서명할 수 있다.

\n

토큰 구성

\n

$\"JWT$

\n

JWT는 세 파트로 나누어지며, 각 파트는 점로 구분하여 xxxxx.yyyyy.zzzzz 이런식으로 표현된다. 순서대로 헤더 (Header), 페이로드 (Payload), 서명 (Sinature)로 구성한다. Base64 인코딩의 경우 “+”, “/”, “=”이 포함되지만 JWT는 URI에서 파라미터로 사용할 수 있도록 URL-Safe 한 Base64url 인코딩을 사용한다. Header는 토큰의 타입과 해시 암호화 알고리즘으로 구성되어 있습니다. 첫째는 토큰의 유형 (JWT)을 나타내고, 두 번째는 HMAC, SHA256 또는 RSA와 같은 해시 알고리즘을 나타내는 부분이다. Payload는 토큰에 담을 클레임(claim) 정보를 포함하고 있다. Payload 에 담는 정보의 한 ‘조각’ 을 클레임이라고 부르고, 이는 name / value 의 한 쌍으로 이뤄져있다. 토큰에는 여러개의 클레임 들을 넣을 수 있다. 클레임의 정보는 등록된 (registered) 클레임, 공개 (public) 클레임, 비공개 (private) 클레임으로 세 종류가 있다. 마지막으로 Signature는 secret key를 포함하여 암호화되어 있다.

\n

PROCESS

\n

$\"JWT$

\n

사용자가 username(id)와 password를 입력하여 로그인을 시도한다.
서버는 요청을 확인하고 secret key를 통해 Access token을 발급합니다.
JWT 토큰을 클라이언트에 전달 합니다.
클라이언트에서 API 을 요청할때 클라이언트가 Authorization header에 Access token을 담아서 보낸다.
서버는 JWT Signature를 체크하고 Payload로부터 사용자 정보를 확인해 데이터를 반환한다.
클라이언트의 로그인 정보를 서버 메모리에 저장하지 않기 때문에 토큰기반 인증 메커니즘을 제공한다.

\n

인증이 필요한 경로에 접근할 때 서버 측은 Authorization 헤더에 유효한 JWT 또는 존재하는지 확인한다. JWT에는 필요한 모든 정보를 토큰에 포함하기 때문에 데이터베이스과 같은 서버와의 커뮤니케이션 오버 헤드를 최소화 할 수 있다. Cross-Origin Resource Sharing (CORS)는 쿠키를 사용하지 않기 때문에 JWT를 채용 한 인증 메커니즘은 두 도메인에서 API를 제공하더라도 문제가 발생하지 않는다. 일반적으로 JWT 토큰 기반의 인증 시스템은 위와 같은 프로세스로 이루어진다. 처음 사용자를 등록할 때 Access token과 Refresh token이 모두 발급되어야 한다.

\n

장점

\n

URL 파라미터와 헤더로 사용
수평 스케일이 용이
디버깅 및 관리가 용이
트래픽 대한 부담이 낮음
REST 서비스로 제공 가능
내장된 만료
독립적인 JWT

\n

단점

\n

토큰은 클라이언트에 저장되어 데이터베이스에서 사용자 정보를 조작하더라도 토큰에 직접 적용할 수 없다.
더 많은 필드가 추가되면 토큰이 커질 수 있다.
비상태 애플리케이션에서 토큰은 거의 모든 요청에 대해 전송되므로 데이터 트래픽 크기에 영향을 미칠 수 있다.

\n

Vue Router Guards

\n

vue-router가 제공하는 네비게이션 가드는 주로 리디렉션하거나 취소하여 네비게이션을 보호하는 데 사용된다. 라우트 탐색 프로세스에 연결하는 방법에는 전역, 라우트별 또는 컴포넌트가 있다.

\n

네비게이션 가드의 종류

\n

네비게이션 가드의 종류는 아래와 같이 3가지가 있습니다.

\n

애플리케이션 전역에서 동작하는 전역 가드
특정 URL에서만 동작하는 라우터 가드
라우터 컴포넌트 안에 정의하는 컴포넌트 가드

\n

전역 가드

\n

router.beforeEach를 사용하여 보호하기 이전에 전역 등록을 할 수 있다.

\n

const router = new VueRouter({ ... })\n\nrouter.beforeEach((to, from, next) => {\n  // to : 이동할 url\n  // from : 현재 url\n  // next : to에서 지정한 url로 이동하기 위해 꼭 호출해야 하는 함수\n})

\n

네비게이션이 트리거될 때마다 가드가 작성 순서에 따라 호출되기 전의 모든 경우에 발생한다. 가드는 비동기식으로 실행 될 수 있으며 네비게이션은 모든 훅이 해결되기 전까지 보류 중 으로 간주된다.

\n

모든 가드 기능은 세 가지 전달인자를 받는다.

\n

to : 이동할 url 정보가 담긴 라우터 객체
from : 현재 url 정보가 담긴 라우터 객체
next : to에서 지정한 url로 이동하기 위해 꼭 호출해야 하는 함수

\n

router.beforeEach()를 호출하고 나면 모든 라우팅이 대기 상태가 된다. 원래 url이 변경되고 나면 해당 url에 따라 화면이 자연스럽게 전환되어야 하는데 전역 가드를 설정했기 때문에 화면이 전환되지 않는다. 여기서 해당 url로 라우팅 하기 위해서는 next()를 호출해줘야 한다. next()가 호출되기 전까지 화면이 전환되지 않는다.

\n

var router = new VueRouter({\n  routes: [\n    {\n      path: \"/login\",\n      component: () => import(\"컴포넌트\"),\n    },\n    {\n      path: \"/register\",\n      component: () => import(\"컴포넌트\"),\n    },\n  ],\n})\n\nrouter.beforeEach(function (to, from, next) {\n  console.log(\"라우딩 대기\")\n\n  // code ..\n\n  next() // 원하는 url로 이동하고 싶으면 next()를 호출하면 된다.\n})

\n

전역 가드로 페이지 인증하기

\n

var router = new VueRouter({\n  routes: [\n    {\n      path: \"/login\",\n      component: () => import(\"컴포넌트\"),\n    },\n    {\n      path: \"/register\",\n      component: () => import(\"컴포넌트\"),\n    },\n    {\n      path: \"/mypage\",\n      component: () => import(\"컴포넌트\"),\n      meta: { authRequired: true },\n    },\n  ],\n})\n\nrouter.beforeEach(function (to, from, next) {\n  console.log(\"라우딩 대기\")\n\n  if (\n    to.matched.some(function (routeInfo) {\n      return routeInfo.meta.authRequired\n    })\n  ) {\n    // 인증이 필요한 페이지일 경우 인증 체크\n    if (isAuth) {\n      next() // 페이지 전환\n    } else {\n      alert(\"로그인 필요\")\n    }\n  } else {\n    next() // 페이지 전환\n  }\n})

\n

라우터 가드

\n

전체 라우팅이 아니라 특정 라우팅에 대해서 가드를 설정하는 방법은 아래와 같다.

\n

var router = new VueRouter({\n  routes: [\n    {\n      path: \"/mypage\",\n      component: () => import(\"컴포넌트\"),\n      beforeEnter: function (to, from, next) {\n        // 인증 값 검증 로직 추가\n      },\n    },\n  ],\n})

\n

컴포넌트 가드

\n

라우터로 지정된 특정 컴포넌트에 가드를 설정하는 방법은 아래와 같다.

\n

// view/Mypage.vue ( Mypage Components )\nexport default {\n  name: \"Mypage\",\n  beforeRouteEnter(to, from, next) {\n    // Login 컴포넌트가 화면에 표시되기 전에 수행될 로직\n    // Login 컴포넌트는 아직 생성되지 않은 시점\n  },\n  beforeRouteUpdate(to, from, next) {\n    // 화면에 표시된 컴포넌트가 변경될 때 수행될 로직\n    // `this`로 Login 컴포넌트를 접근할 수 있음\n  },\n  beforeRouteLeave(to, from, next) {\n    // Login 컴포넌트를 화면에 표시한 url 값이 변경되기 직전의 로직\n    // `this`로 Login 컴포넌트를 접근할 수 있음\n  },\n}\n\n// route.js\nvar router = new VueRouter({\n  routes: [\n    {\n      path: \"/mypage\",\n      component: () => import(\"컴포넌트\"),\n    },\n  ],\n})

\n

PHP, Vue 를 활용한 JWT 인증

\n

PHP JWT 생성 함수는 아래와 같다.

\n

PHP JWT 생성 및 인증

\n

class Jwt {\n  protected $alg;\n  function __construct() {\n    //사용할 알고리즘\n    $this->alg = 'sha256';\n  }\n\n  function hashing(array $data) {\n    // 토큰의 헤더\n    $header = json_encode(array(\n      'alg'=>$this->alg,\n      'typ'=>'JWT'\n    ));\n\n    // 전달할 데이터\n    $payload = json_encode($data);\n\n    // 시그니처 토큰 확인에서 제일 중요\n    // 충분히 복잡하게 구현해야함\n    $signature = hash($this->alg, $header.$payload);\n\n    return base64_encode($header.'.'.$payload.'.'.$signature);\n  }\n\n  function dehashing($token) {\n    // 토큰 만들때의 구분자 . 으로 나누기\n    $parted = explode('.', base64_decode($token));\n    $signature = $parted[2];\n\n    // 위에서 토큰 만들때와 같은 방식으로 시그니처 만들고 비교\n    if(hash($this->alg, $parted[0].$parted[1]) == $signature) {\n      return '\\n\\ngood\\n\\n';\n    } else {\n      return '잘못된 signature 입니다';\n    }\n    /*\n\n          만료 확인 등 값 검사\n\n    */\n    $payload = json_decode($parted[1],true);\n    return $payload;\n  }\n}

\n

Vue JWT 인증

\n

Vue 는 로그인, 회원가입, 홈, 마이페이지로 구성 했다.

\n

Structure

\n

src\n├── views\n│   ├── Home.vue\n│   ├── Login.vue\n│   ├── Mypage.vue\n│   └── Register.vue\n├── common\n│   └── jwt.js\n├── http\n│   └── index.js\n├── router\n│   └── index.js\n├── store\n│   └── index.js\n├── main.js\n└── App.vue

\n

Home

\n

<template>\n  <div>\n    <h1>JWT 홈 화면 입니다.</h1>\n    {{ isAuthenticated ? \"로그인됨\" : \"로그인 안됨\" }}\n  </div>\n</template>\n\n<script>\n  import { mapGetters } from \"vuex\"\n\n  export default {\n    name: \"JwtHome\",\n    components: {},\n    computed: {\n      ...mapGetters([\"isAuthenticated\"]),\n    },\n    methods: {},\n  }\n</script>\n\n<style scoped></style>

\n

isAuthenticated 를 로그인 여부를 체크한다.

\n\n

<template>\n  <div>\n    <h1>JWT 회원가입 화면 입니다.</h1>\n    <ValidationObserver>\n      <form @submit.prevent=\"formSubmit\" method=\"post\">\n        <ValidationProvider ref=\"refEmail\" rules=\"required|email\">\n          <div>\n            <label for=\"email\">email</label>\n            <input id=\"email\" type=\"text\" v-model=\"email\" />\n          </div>\n        </ValidationProvider>\n        <ValidationProvider\n          ref=\"refPassword\"\n          rules=\"required|min:8|max:20|alpha_dash\"\n        >\n          <div>\n            <label for=\"password\">password</label>\n            <input id=\"password\" type=\"text\" v-model=\"password\" />\n          </div>\n        </ValidationProvider>\n        <button type=\"submit\">Register</button>\n      </form>\n    </ValidationObserver>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: \"JwtResiter\",\n    components: {},\n    data() {\n      return {\n        email: \"\",\n        password: \"\",\n        name: \"\",\n      }\n    },\n    computed: {},\n    methods: {\n      async formSubmit() {\n        const refEmail = await this.$refs.refEmail.validate()\n        if (!refEmail.valid) {\n          alert(refEmail.errors[0])\n          return false\n        }\n        const refPassword = await this.$refs.refPassword.validate()\n        if (!refPassword.valid) {\n          alert(refPassword.errors[0])\n          return false\n        }\n\n        this.$store\n          .dispatch(\"login\", {\n            email: this.email,\n            password: this.password,\n          })\n          .then(response => {\n            if (response.status == 200) {\n              this.$router.push({\n                name: \"JwtMypage\",\n              })\n            }\n          })\n          .catch(({ message }) => alert(message))\n\n        return true\n      },\n    },\n  }\n</script>\n\n<style scoped></style>

\n

Vuex Actions 을 사용하여 로그인 요청을 비동기 처리 한다.

\n

Mypage

\n

<template>\n  <div>\n    <h1>JWT 마이페이지 화면 입니다.</h1>\n    <button @click=\"logout()\">Logout</button>\n  </div>\n</template>\n\n<script>\n  import { mapGetters } from \"vuex\"\n\n  export default {\n    name: \"JwtMypage\",\n    components: {},\n    computed: {\n      ...mapGetters([\"isAuthenticated\"]),\n    },\n    methods: {\n      redirect() {\n        console.log(\"redirect\")\n        console.log(\"isAuthenticated : \" + this.isAuthenticated)\n        if (!this.isAuthenticated) {\n          this.$router.push({\n            name: \"JwtHome\",\n          })\n        }\n      },\n      logout() {\n        this.$store\n          .dispatch(\"logout\", {})\n          .then(() => this.redirect())\n          .catch(({ message }) => alert(message))\n      },\n    },\n  }\n</script>\n\n<style scoped></style>

\n

마이페이지 이며 로그아웃 버튼이 존재 한다.\n로그아웃시 Vuex Actions 을 사용하여 비동기 처리 한다.

\n

Register

\n

<template>\n  <div>\n    <h1>JWT 회원가입 화면 입니다.</h1>\n    <ValidationObserver>\n      <form @submit.prevent=\"formSubmit\" method=\"post\">\n        <ValidationProvider ref=\"refEmail\" rules=\"required|email\">\n          <div>\n            <label for=\"email\">email</label>\n            <input id=\"email\" type=\"text\" v-model=\"email\" />\n          </div>\n        </ValidationProvider>\n        <ValidationProvider\n          ref=\"refPassword\"\n          rules=\"required|min:8|max:20|alpha_dash\"\n        >\n          <div>\n            <label for=\"password\">password</label>\n            <input id=\"password\" type=\"text\" v-model=\"password\" />\n          </div>\n        </ValidationProvider>\n        <ValidationProvider ref=\"refName\" rules=\"required\">\n          <div>\n            <label for=\"name\">name</label>\n            <input id=\"name\" type=\"text\" v-model=\"name\" />\n          </div>\n        </ValidationProvider>\n        <button type=\"submit\">Register</button>\n      </form>\n    </ValidationObserver>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: \"JwtResiter\",\n    components: {},\n    data() {\n      return {\n        email: \"\",\n        password: \"\",\n        name: \"\",\n      }\n    },\n    computed: {},\n    methods: {\n      async formSubmit() {\n        const refEmail = await this.$refs.refEmail.validate()\n        if (!refEmail.valid) {\n          alert(refEmail.errors[0])\n          return false\n        }\n        const refPassword = await this.$refs.refPassword.validate()\n        if (!refPassword.valid) {\n          alert(refPassword.errors[0])\n          return false\n        }\n        const refName = await this.$refs.refName.validate()\n        if (!refName.valid) {\n          alert(refName.errors[0])\n          return false\n        }\n\n        this.$store\n          .dispatch(\"register\", {\n            email: this.email,\n            password: this.password,\n            name: this.name,\n          })\n          .then(response => {\n            if (response.status == 200) {\n              this.$router.push({\n                name: \"JwtMypage\",\n              })\n            }\n          })\n          .catch(({ message }) => alert(message))\n\n        return true\n      },\n    },\n  }\n</script>\n\n<style scoped></style>

\n

회원가입 화면이다. Vuex Actions 을 사용하여 회원가입 요청을 비동기로 처리 하낟.

\n

router

\n

import Vue from \"vue\"\nimport VueRouter from \"vue-router\"\n\nimport store from \"../store\"\n\nconst beforeAuth = isAuth => (from, to, next) => {\n  const isAuthenticated = store.getters[\"isAuthenticated\"]\n  if ((isAuthenticated && isAuth) || (!isAuthenticated && !isAuth)) {\n    return next()\n  } else {\n    // 홈 화면으로 이동\n    next(\"/jwt/home\")\n  }\n}\n\nVue.use(VueRouter)\n\nconst routes = [\n  // code..\n  {\n    path: \"/jwt/home\",\n    name: \"JwtHome\",\n    component: () => import(\"../views/jwt/Home.vue\"),\n  },\n  {\n    path: \"/jwt/login\",\n    name: \"JwtLogin\",\n    component: () => import(\"../views/jwt/Login.vue\"),\n    beforeEnter: beforeAuth(false),\n  },\n  {\n    path: \"/jwt/register\",\n    name: \"JwtRegister\",\n    component: () => import(\"../views/jwt/Register.vue\"),\n    beforeEnter: beforeAuth(false),\n  },\n  {\n    path: \"/jwt/mypage\",\n    name: \"JwtMypage\",\n    component: () => import(\"../views/jwt/Mypage.vue\"),\n    beforeEnter: beforeAuth(true),\n  },\n]\n\nconst router = new VueRouter({\n  mode: \"history\",\n  base: process.env.BASE_URL,\n  routes,\n})\n\nexport default router

\n

beforeAuth 지역 라우터 가드를 사용하여 화면접근 예외처리를 한다.

\n

store

\n

import Vue from \"vue\"\nimport Vuex from \"vuex\"\n\nVue.use(Vuex)\n\nimport jwt from \"../common/jwt\"\nimport http from \"../http\"\n\nexport default new Vuex.Store({\n  // count state 속성 추가\n  state: {\n    count: 0, // count 를 0 으로 초기화\n    token: {\n      accessToken: jwt.getToken(),\n    }, // 토큰정보\n    isAuthenticated: !!jwt.getToken(),\n  },\n  getters: {\n    getAccessToken: function (state) {\n      return state.token.accessToken\n    },\n    isAuthenticated: function (state) {\n      return state.isAuthenticated\n    },\n  },\n  mutations: {\n    logout: function (state, payload = {}) {\n      state.token.accessToken = \"\"\n      state.isAuthenticated = false\n      jwt.destroyToken()\n    },\n    login: function (state, payload = {}) {\n      state.token.accessToken = payload.accessToken\n      state.isAuthenticated = true\n      jwt.saveToken(payload.accessToken)\n    },\n  },\n  actions: {\n    logout: function (context, payload) {\n      return new Promise(resolve => {\n        setTimeout(function () {\n          context.commit(\"logout\", payload)\n          resolve({})\n        }, 1000)\n      })\n    },\n    register: function (context, payload) {\n      let params = {\n        email: payload.email,\n        password: payload.password,\n        name: payload.name,\n      }\n      return new Promise((resolve, reject) => {\n        http\n          .post(\"/api/sample/register\", params)\n          .then(response => {\n            const { data } = response\n            context.commit(\"login\", {\n              accessToken: data.accessToken,\n            })\n\n            resolve(response)\n          })\n          .catch(error => {\n            reject(error)\n          })\n      })\n    },\n    login: function (context, payload) {\n      let params = {\n        email: payload.email,\n        password: payload.password,\n      }\n      return new Promise((resolve, reject) => {\n        http\n          .post(\"/api/sample/login\", params)\n          .then(response => {\n            const { data } = response\n            context.commit(\"login\", {\n              accessToken: data.accessToken,\n            })\n\n            resolve(response)\n          })\n          .catch(error => {\n            reject(error)\n          })\n      })\n    },\n  },\n  modules: { coffee, shop },\n})

\n

Vuex 로그인,회원가입,로그인 처리.

\n

common/jwt

\n

const ID_TOKEN_KEY = \"id_token\"\n\nexport const getToken = () => {\n  return window.localStorage.getItem(ID_TOKEN_KEY)\n}\n\nexport const saveToken = token => {\n  window.localStorage.setItem(ID_TOKEN_KEY, token)\n}\n\nexport const destroyToken = () => {\n  window.localStorage.removeItem(ID_TOKEN_KEY)\n}\n\nexport default {\n  getToken,\n  saveToken,\n  destroyToken,\n}

\n

token 정보를 유지하기 위해 localStorage 를 사용 한다.

\n

http

\n

import axios from \"axios\"\nimport store from \"../store\"\n\nconst http = axios.create({\n  baseURL: \"https://testrestapi.cafe24.com\",\n  headers: { \"content-type\": \"application/json\" },\n})\n\nhttp.interceptors.request.use(\n  config => {\n    const isAuthenticated = store.getters[\"isAuthenticated\"]\n    if (isAuthenticated) {\n      config.headers.common[\"Authorization\"] = store.getters[\"getAccessToken\"]\n    }\n    return config\n  },\n  error => {\n    // Do something with request error\n    Promise.reject(error)\n  }\n)\nhttp.defaults.headers.post[\"Content-Type\"] = \"application/x-www-form-urlencoded\"\n\nexport default http

\n

로그인이 되어 있을경우 모든 요청에 headers 에 Authorization 로 accessToken 을 담아서 보낸다.

\n

$\"Vue$

","tableOfContents":"

\n
JWT ( JSON WEB TOKEN ) 이란?
\n
- 토큰 구성
- PROCESS
- 장점
- 단점
\n
\n
Vue Router Guards
\n
- 네비게이션 가드의 종류
- 전역 가드
- 전역 가드로 페이지 인증하기
- 라우터 가드
- 컴포넌트 가드
\n
\n
PHP, Vue 를 활용한 JWT 인증
\n
- PHP JWT 생성 및 인증
- \n
  Vue JWT 인증
  \n
  - \n
    Structure
    \n
    - Home
    - Login
    - Mypage
    - Register
    - router
    - store
    - common/jwt
    - http
    \n
  \n
\n

","wordCount":{"words":726},"fields":{"slug":"/vue/vue-js-jwt-기반-사용자-인증/","image":"/assets/vue-logo.png","faq":[]},"frontmatter":{"title":"Vue Js 뷰 JWT 기반 사용자 인증","date":"2021년 5월 9일","dateISO":"2021-05-09T15:11:34.709Z","updatedISO":null,"category":"vue","description":"라우트에 연결하거나 탐색을 수행 할 때 이름이 있는 라우트를 사용할수 있다. 사용 법은 routes 에 name 옵션을 지정 하면 된다. 라우트 관리가 편리 하다 라는 장점이 있다.","tags":["vue","javascript","framework","frontend","web","router guards","jwt"]}}},"pageContext":{"slug":"/vue/vue-js-jwt-기반-사용자-인증/","previous":{"fields":{"slug":"/android/android-room/"},"frontmatter":{"title":"Android ROOM","tags":["android","kotlin","framework","room"]}},"next":{"fields":{"slug":"/vue/vue-js-서버-사이드-렌더링/"},"frontmatter":{"title":"Vue Js 서버 사이드 렌더링","tags":["vue","javascript","framework","frontend","web","ssr"]}}}},"staticQueryHashes":["213619243","3262363727"]}