{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"image","attrs":{"src":"https://r2.owlblog.org/nuxt.jpg","alt":"nuxt.jpg","title":"nuxt.jpg","width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"heading","attrs":{"textAlign":"left","level":2},"content":[{"type":"text","text":"프론트 만들기"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"API도 다 만들었으니 이제 실제 글을 작성할 웹을 만들어야 합니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"웹에서 글을 작성하기 위해서 먼저 웹을 만들어야겠죠."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"제 블로그의 구조는 다음과 같습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"image","attrs":{"src":"https://r2.owlblog.org/dir.png","alt":"dir.png","title":"dir.png","width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"애초에 페이지가 적으니 몇개 없이 간단한 모습입니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"이 Owlblog는 Nuxt3로 만들어졌고, Nuxt 이외에 세가지의 프레임 워크를 사용했습니다. "}]},{"type":"bulletList","attrs":{"tight":true},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Pinia"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Tailwind-css"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Tiptap"}]}]}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Pinia"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Vue2에서는 vuex가 쓰였고, Vue3가 업데이트 되서도 많은 사람들이 vuex를 많이 사용했었습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"저는 composition API의 문법을 그대로 사용 할 수 있는거에 매력을 느껴 Vue3의 초창기부터 Pinia를 사용했습니다. "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Vue 공식 문서에서도 Pinia를 권장하니 요즘 많은 사람들이 vuex대신 Pinia를 사용하는 추세인 것 같습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Tailwind-css"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"원래 vuetify를 주로 사용하여 개발을 했습니다만, 이번에는 요즘 핫한 tailwind-css로 작업을 했습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"tailwind-css를 처음 사용하는 것이기에 공식 문서에서 검색하면서 작업을 하니 익숙한 vuetify에 반해 시간이 조금 더 걸리긴 했습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"그래도 veutify 같은 경우에는 커스터마이징에 상당한 노력이 필요한데 반해 tailwind는 사용법도 유사하고 내가 처음부터 만드는 것이니 나중에 tailwind로 제작한 컴포넌트들을 모아 모듈화를 시켜서 사용한다면"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"커스터마이징도 쉽고 매우 좋을 것 같습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Tiptap"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"블로그에서 가장 중요한 부분인 위즈윅 에디터 입니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"여러가지 에디터가 있죠. Toast, Quill, Rich, Tiptap, Jodit 등등등..."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"어떤걸 사용할지 고민하다가 Tiptap이 커스터마이징에 대한 자유도가 높다고 생각이 들었고 많은 사람들이 Tiptap을 사용하고 입맛대로 만들 수 있기에 Tiptap을 선택했습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"정확히는 Tiptap 기반으로 만들어진 Novel라는 프레임워크를 사용했습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/naveennaidu/novel-vue","target":"_blank","rel":"noopener noreferrer nofollow","class":"text-stone-400 underline underline-offset-[3px] hover:text-stone-600 transition-colors cursor-pointer"}}],"text":"https://github.com/naveennaidu/novel-vue"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"그래서 Tiptap과 동일하기 때문에 원하는 익스텐션을 추가할 수 있습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"개인적으로 이곳 저곳 익스텐션들을 참고하고, 수정하여 Youtube 영상을 추가하게 해주는 익스텐션, 이미지나 영상 등 iframe의 크기 조정, 드래그앤 드롭 추가 등 몇가지 익스텐션을 만들어서 추가하고 개인적으로 사용하고 있습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"에디터 부분이 가장 오래 걸리고 볼륨이 컸습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"center"}},{"type":"image","attrs":{"src":"https://r2.owlblog.org/code.png","alt":"code.png","title":"code.png","width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":"center"},"content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(168, 162, 158)"}}],"text":"Media 요소 Resize Extentsion 일부"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"heading","attrs":{"textAlign":"left","level":2},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"글쓰기와 글 조회하기"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"heading","attrs":{"textAlign":"left","level":3},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"Composable"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"이제 글쓰기와 글 조회를 해야합니다. 우선 저는 API를 공통적으로 호출할 수 있게 만들었습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"항상 api를 호출할때마다 header에 무언가를 추가하고, 통신 설정을 하는건 너무 번거로우니까요."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"바로 composable로 만든 getApi와 useApi 두가지 인데요."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":" "}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"GetApi.ts\n\nexport default (url: string, params?: any) => {\n const config = useRuntimeConfig();\n const baseURL = config.public.baseUrl;\n // const baseURL = \"http://localhost:8080/v1\";\n const userStore = useUserStore();\n\n return useAsyncData(url, () =>\n $fetch(baseURL + url, {\n params,\n onRequest({ request, response, options }) {},\n onResponse({ request, response, options }) {},\n })\n );\n};\n\n\nuseApi.ts\n\nexport default async (method: Method, url: string, params?: any) => {\n const config = useRuntimeConfig();\n const baseURL = config.public.baseUrl;\n const uiStore = useUIStore();\n const userStore = useUserStore();\n\n // if (!accessToken) {\n // await userStore.refresh();\n // }\n uiStore.startLoading();\n try {\n const res: responseObj = await $fetch(baseURL + url, {\n headers: {\n Authorization: userStore.accessToken\n ? `Bearer ${userStore.accessToken}`\n : \"\",\n },\n method: method,\n body: params,\n credentials: \"include\",\n });\n uiStore.finishLoading();\n return res;\n } catch {\n uiStore.finishLoading();\n return { data: undefined, statusCode: 400, message: \"Fail\" };\n }\n};\n\n "}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"이렇게 두가지를 만들었습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"nuxt.config.ts에서 runtimeConfig을 이용해 baseUrl을 먼저 작성서 서버의 주소를 불러옵니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"조회만 하는 api인 getApi에서는 권한이 필요하지 않기 때문에 header를 따로 보내지 않지만"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"글을 작성하거나 수정하고, 지우는 useApi에서는 권한 검사가 필요하기 때문에 header에 accessToken을 담아서 보냅니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"header에 aceessToken이 오지 않는다면 서버에서는 401 에러를 return합니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"사실 getApi와 useApi를 두개로 나눌 필요 없이 "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"axios로 composable을 하나만 만들어서 사용할까 했었습니다만,"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"Nuxt에는 axios도 사용 할 수 있지만 공식적으로 지원하는 3가지의 http 통신 방법이 있습니다. "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"useAsyncData, useFetch,$fetch 이렇게 세가지 입니다. ofetch로 만들어졌다고 합니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"Nuxt에서 axios를 공식 채택하지 않는 이유를 Nuxt에서 설명하기도 했고, axios에 익숙하기 때문에 axios보다는 이럴때 공부 해야지라고 생각하여 제공하는 API를 사용하기로 했습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"그런데 세가지가 나뉘어 있어 무엇을 선택해야 할지 고민을 했습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"공식 문서를 살펴보니 useAsyncData와 useFetch는 Get으로 사용하게 되어있고, $fetch는 조회가 아닌 post put patch delete 등을 위해 주로 사용합니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"원래는 useFetch가 조회 뿐만 아닌 작성 수정 삭제 등 다른 method를 모두 지원을 하기 때문에 useFetch 하나로 처리할까 생각을 했었지만, "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"useFetch는 이전 버전에서는 get 이외의 method를 지원하지 않았고 최근에야 지원을 하게 되었다고 하는 정보를 알게되어"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"나중에 업데이트가 더 된 이후는 몰라도 우선 현 시점에서는 Nuxt의 의도에 맞게 2가지로 나누자 생각을 했습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"useFetch와 useAsyncData는 비슷해보이지만 차이점이 있는데 저는 useAsyncData를 선택했습니다. 자세한 차이점은 좋은 글이 있어 첨부 하겠습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"link","attrs":{"href":"https://jongmin4943.tistory.com/entry/Nuxt3-fetch-useAsyncData-useFetch-%EC%9D%98-%EC%B0%A8%EC%9D%B4","target":"_blank","rel":"noopener noreferrer nofollow","class":"text-stone-400 underline underline-offset-[3px] hover:text-stone-600 transition-colors cursor-pointer"}},{"type":"strike"}],"text":"https://jongmin4943.tistory.com/entry/Nuxt3-fetch-useAsyncData-useFetch-%EC%9D%98-%EC%B0%A8%EC%9D%B4"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"strike"}],"text":"사용을 할 때는 이런 식으로 사용을 합니다."}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"\nconst { data, pending, refresh, error, status } = await getApi<{ data: Posts[] }>('/posts');\n\nconst data = await useApi(`DELETE`, `/posts/${route.params.postId}`)\n"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"heading","attrs":{"textAlign":"left","level":2}},{"type":"heading","attrs":{"textAlign":"center","level":1},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Nuxt3의 UseAsyncData와 $fetch를 하나의 composable로 사용해보자. - "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://www.owlblog.site/posts/112","target":"_blank","rel":"noopener noreferrer nofollow","class":"text-stone-400 underline underline-offset-[3px] hover:text-stone-600 transition-colors cursor-pointer"}}],"text":"https://owlblog.site/posts/112"}]},{"type":"heading","attrs":{"textAlign":"left","level":2}},{"type":"heading","attrs":{"textAlign":"center","level":2},"content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"#FFA500"}},{"type":"bold"}],"text":"수정되었습니다. 이 글을 참고해주세요"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"heading","attrs":{"textAlign":"left","level":3},"content":[{"type":"text","text":"글 조회하기"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"이제 진짜 글 조회를 해보겠습니다."}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"pages/posts/list.vue\n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"composable로 만든 getApi을 호출해서 렌더링이 되기 전에 미리 서버에서 데이터를 받아옵니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"그 데이터를 기반으로 카테고리를 만들고, 미리 만들어둔 Cards 컴포넌트에 데이터를 전달하여 포스트를 렌더링 합니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"category는 그냥 같은것 끼리 묶어서 보여주도록 간단하게 구현했습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"이제 포스트 중 하나를 클릭해서 들어가겠습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"pages/posts/[postId].vue\n\nconst { data, pending, error, refresh } = await getApi<{ data: Posts }>(`/posts/${route.params.postId}`)\n\nconst contents = computed(() => data.value ? JSON.parse(data.value.data.contents) : {});\n\nif (!data.value) {\n router.push({ name: \"posts-list\", });\n}\n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Nuxt3는 Route를 자동적으로 만들어주기 때문에 우리가 따로 route를 만들지 않아도 됩니다. [xxx].vue 라는 이름으로 vue 파일을 만드는 의미는"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"기존 vueRoute에서 url params으로 넘길때 path: \"posts/:postId\" 이런식으로 지정해주는 것과 동일하게 작동합니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"이제 본문 내용이 필요하기 때문에 전편에 작성했던 getPost API를 호출합니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"여기까지가 글을 조회하는 부분입니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"heading","attrs":{"textAlign":"left","level":3},"content":[{"type":"text","text":"글쓰기"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"이제 글 쓰기를 해야겠죠. 글 쓰기는 새 글 작성과 수정을 같이 하도록 만들었습니다. "}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"posts/[postId]-write.vue\n\n\n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"로그인 했을때만 보이는 버튼을 통해 포스트를 작성하거나 수정하는 페이지에 진입 할 수 있습니다. "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"[postId]-write.vue는 글 조회와 비슷한데 -write가 붙었습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"새 글 작성과 수정을 한번에 하려고 만들었습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"url params가 new라는 스트링으로 들어온다면 /new-write 라는 url로 페이지에 접근을 할 것이고, 에를들어 1번인 아이디가 있다면 /1-write 라는 url로 페이지에 접근을 하도록 만들어서"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"생성인지 수정인지를 판단합니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"그래서 수정이라면 기존 데이터가 있기 때문에 받아서 화면에 보여주고, 없다면 빈값으로 렌더가 됩니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"center"}},{"type":"image","attrs":{"src":"https://r2.owlblog.org/C3ACC28AC2A4C3ADC281C2ACC3ABC2A6C2B0C3ACC283C2B7202024-03-1820163524.png","alt":"C3ACC28AC2A4C3ADC281C2ACC3ABC2A6C2B0C3ACC283C2B7202024-03-1820163524.png","title":"C3ACC28AC2A4C3ADC281C2ACC3ABC2A6C2B0C3ACC283C2B7202024-03-1820163524.png","width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":"center"}},{"type":"image","attrs":{"src":"https://r2.owlblog.org/C3ACC28AC2A4C3ADC281C2ACC3ABC2A6C2B0C3ACC283C2B7202024-03-1820163312.png","alt":"C3ACC28AC2A4C3ADC281C2ACC3ABC2A6C2B0C3ACC283C2B7202024-03-1820163312.png","title":"C3ACC28AC2A4C3ADC281C2ACC3ABC2A6C2B0C3ACC283C2B7202024-03-1820163312.png","width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":"center"},"content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(168, 162, 158)"}}],"text":"노션과 흡사하게 글을 작성하거나 수정하는 UI입니다."}]},{"type":"paragraph","attrs":{"textAlign":"center"}},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"heading","attrs":{"textAlign":"left","level":2},"content":[{"type":"text","text":"인증"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"인증 부분 프로세스는 간단하기에 짧게 설명하겠습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"우선, userStore에서 refresh 함수를 만들어서 첫번째로 페이지가 마운트 되면 쿠키에 있는 만료일을 검사합니다. "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"만료일이 지나지 않았다면, refresh API를 호출해서 액세스 토큰을 받아옵니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"액세스 토큰이 정상적으로 발급되었다면 메모리(userStore)에 액세스 토큰을 할당합니다. "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"발급되지 않았다면 refreshToken을 쿠키에서 삭제합니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"만약 accessToken이 메모리에 존재하지 않는 유저가 작성이나 수정 등 특수한 페이지에 진입할때 middleWare에 등록된 route.global.ts를 통하여 메인페이지로 보내는 guard를 작성했습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"vueRouter의 beforeEach의 동작을 middleWare에 등록된 route에서 한다고 보면 됩니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"heading","attrs":{"textAlign":"left","level":2},"content":[{"type":"text","text":"Vercel"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"백엔드와 동일하게 버셀로 배포를 해줍니다. NestJS와 다르게 Nuxt를 잘 잡아주니 다른 설정은 해줄 필요 없습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"이제 블로그가 완성 되었으니 다음편은 SEO에 설정에 대한 내용으로 찾아뵙겠습니다."}]}]}

\n {{ data.data.title }}\n

Owlblog 개인 블로그 개발기 - 3 : Nuxt JS