{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"heading","attrs":{"textAlign":"left","level":2}},{"type":"image","attrs":{"src":"https://r2.owlblog.org/composable.png","alt":"composable.png","title":"composable.png","width":null,"height":null}},{"type":"heading","attrs":{"textAlign":"left","level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Data fetching"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"블로그 개발기 3편에서 다뤘던 내용이지만, 한번 더 얘기를 해보겠습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Nuxt3는 UseAsyncData와 useFetch, $fetch 이 3가지의 전역 메서드를 지원합니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"$fetch는 ofetch 라이브러리를 사용했으며, useAsyncData와 useFetch는 $fetch를 기반으로 만든 컴포저블입니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"보통 http 통신을 위해서 axios를 많이 사용하는데 nuxt에서는 채택하지 않았습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"그 이유는 다음과 같다고 합니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Indeed it is not that hard to make axios just working with nuxt3 and I suppose it should already work if you import it! (see *) But please consider that Axios is built on top of very legacy API with XMLHttpRequest and Node.js API that cannot run in the workers easily. We are doing everything to move projects to leverage native Fetch API that is the modern and universal way to fetch in web applications."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"\""},{"type":"text","marks":[{"type":"bold"}],"text":"Axios 를 Nuxt3 에 넣는건 어렵지 않은 일이고 사실 개개인이 import 해서 사용하기도 쉽다. 하지만 Axios 는 XMLHttpRequest 기반의 아주 낡은 API 모듈이라 Node.js 에서 사용하기 쉽지 않다.\""}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"해당 내용은 와잼님의 게시글을 참고했습니다. "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"useAsyncData와 useFetch $fetch의 차이점도 자세히 나와있으니 읽어보시면 좋을 것 같습니다."}]},{"type":"heading","attrs":{"textAlign":"left","level":1},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Nuxt3 $fetch, useAsyncData, useFetch 의 차이 - "},{"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"}}],"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","text":"저는 개발기 3편에서 작성한 것 처럼 공식문서와 와잼님의 글을 참고하여 axios를 채택하지 않았습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"useAsyncData와 $fetch를 사용하기로 했었고, getApi와 useApi 두가지의 composable로 나눠서 작성을 했었습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"getApi는 useAsyncData로 SSR에서 데이터를 Get할때 쓰는 composable이고, "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"useApi는 로딩이 끝난 후 client-side에서 $fetch를 사용하여 Post나 Patch, Delete 등 데이터를 조작할때 사용하고 있었습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"두가지로 사용 했었던 이유는 useAsyncData와 $fetch가 return 구조가 다르기 때문에 타입스크립트에서 오류가 발생해 두가지로 나눠놨었던 것인데요. "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"사용하다 보니 너무 불편하여 하나의 컴포저블로 묶어서 사용하기로 했습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"아래가 기존의 코드입니다."}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"getApi.ts\n\nimport { useUserStore } from \"~/store/useUserStore\";\n\nexport default (url: string, params?: any) => {\n const config = useRuntimeConfig();\n const baseURL = config.public.baseUrl;\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"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"useApi.ts\n\nimport { useUIStore } from \"../store/useUIStore\";\nimport { useUserStore } from \"~/store/useUserStore\";\ninterface responseObj {\n data: any;\n statusCode: number;\n path: string;\n message: string;\n timestamp: string;\n}\ntype Method =\n | \"POST\"\n | \"PATCH\"\n | \"PUT\"\n | \"DELETE\"\n | \"post\"\n | \"patch\"\n | \"put\"\n | \"delete\"\n | undefined;\n\nexport default async (method: Method, url: string, params?: any) => {\n const config = useRuntimeConfig();\n const baseURL = config.public.baseUrl;\n\n const userStore = useUserStore();\n\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 \n return res;\n } catch {\n return { data: undefined, statusCode: 400, message: \"Fail\" };\n }\n};\n"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"위 코드에서 getApi는 baseUrl을 설정해주는거 말고는 아무런 의미를 하지 않습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"블로그기 때문에 조회는 인증이 필요없이 누구나 글을 조회해야하기 때문이죠."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"useApi에서 글을 작성하고 수정,삭제 할때 권한을 체크하며 http method를 인수로 넘겨 어떤 메서드를 사용할지 판단하여 실행하는 방식으로 하고 있었습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"사용하기 불편하고, 조잡하여 불만이 많았는데 이제 하나의 composable로 통합을 해보겠습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"heading","attrs":{"textAlign":"left","level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"UseAsyncData와 $fetch를 useApi.ts로 한번에 사용해보자"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"공식 문서에 Custom을 어떻게 하는지 알려주는 문서가 있습니다."}]},{"type":"heading","attrs":{"textAlign":"left","level":1},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Custom useFetch in Nuxt - "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://nuxt.com/docs/guide/recipes/custom-usefetch","target":"_blank","rel":"noopener noreferrer nofollow","class":"text-stone-400 underline underline-offset-[3px] hover:text-stone-600 transition-colors cursor-pointer"}}],"text":"https://"},{"type":"text","marks":[{"type":"link","attrs":{"href":"http://nuxt.com/docs/guide/recipes/custom-usefetch","target":"_blank","rel":"noopener noreferrer nofollow","class":"text-stone-400 underline underline-offset-[3px] hover:text-stone-600 transition-colors cursor-pointer"}}],"text":"nuxt.com/docs/guide/recipes/custom-usefetch"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"첫번째로 plugins/api.ts를 만들라고 하네요."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"저는 다음과 같이 작성했습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"plugins/api.ts\n\nimport { useUserStore } from \"~/store/useUserStore\";\n\nexport default defineNuxtPlugin((nuxtApp) => {\n const config = useRuntimeConfig();\n const baseURL = config.public.baseUrl;\n const userStore = useUserStore();\n\n const api = $fetch.create({\n baseURL: baseURL,\n onRequest({ request, options, error }) {\n if (options.method && options.method.toUpperCase() !== \"GET\") {\n options.headers = {\n ...options.headers,\n Authorization: `Bearer ${userStore.accessToken}`,\n };\n }\n },\n onResponse({ request, response, options }) {},\n async onResponseError({ response }) {},\n });\n\n return {\n provide: {\n api,\n },\n };\n});\n"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"아까 getApi와 useApi에 중복적으로 있었던 BaseUrl을 설정하는 부분을 여기 한곳으로 통합시켰고,"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"요청을 보낼때 method가 GET이 아닌 경우 header에 accessToken을 넣어서 보내도록 했습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"공식 문서에서는 error가 발생했을때 login 페이지로 돌려보내도록 코드를 작성한 것 처럼 에러가 발생했을떄도 여기서 여러가지 처리를 하면 좋을 것 같습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"이제 기본이 되는 $api를 만들었으니 useApi.ts 만들어야 합니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"composable/useApi.ts\n\ntype HttpMethod =\n | \"GET\"\n | \"HEAD\"\n | \"PATCH\"\n | \"POST\"\n | \"PUT\"\n | \"DELETE\"\n | \"CONNECT\"\n | \"OPTIONS\"\n | \"TRACE\";\n\ninterface Response {\n data: T | any;\n statusCode: number;\n path: string;\n message: string;\n timestamp: string;\n}\n\nclass useApi {\n private static instance: useApi;\n\n private constructor() {}\n\n public static createInstance() {\n if (!useApi.instance) {\n useApi.instance = new useApi();\n }\n return useApi.instance;\n }\n\n public async get(\n url: string,\n params?: any\n ): Promise | null, NuxtError | null>> {\n const { $api } = useNuxtApp();\n //@ts-ignore\n const response = await useAsyncData>(url, () => $api(url, { body: params }));\n\n return response;\n }\n\n private async request(\n method: HttpMethod,\n url: string,\n params?: T | any\n ): Promise, NuxtError | null>> {\n const { $api } = useNuxtApp();\n //@ts-ignore\n const response = await $api>(url, { method: method, body: params });\n const data = {\n data: ref>(response),\n };\n return data as AsyncData, NuxtError | null>;\n }\n\n public async post(url: string, params: T | any) {\n return await this.request(\"POST\", url, params);\n }\n public async put(url: string, params: T | any) {\n return await this.request(\"PUT\", url, params);\n }\n\n public async patch(url: string, params: T | any) {\n return await this.request(\"PATCH\", url, params);\n }\n\n public async delete(url: string, params: T | any) {\n return await this.request(\"DELETE\", url, params);\n }\n}\n}\n\nexport default useApi.createInstance();\n"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Singleton patten을 사용하여 useApi를 만들었습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"싱글톤이니 private를 지정하여 외부에서 접근할 수 없게 만들었습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"get이 아닌 method를 호출했을때 각각의 method는 request를 호출하게 만들었습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"저는 response를 공통된 구조로 사용하는 것을 좋아하여 request method에 조금 변형을 했는데요."}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"const { data, refresh, error, status, clear, execute } = await useApi.get(\"/posts\");"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"useAsyncData는 위의 구조로 return을 해줍니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"그에반해 $fetch는 refresh, error, status 등이 없이 useAsyncData와는 다른 구조로 return이 오기 때문에 "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"구조분해할당이 되지 않아 사용하는 방법이 달라지게 됩니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"예를들면 get은 data.value.statusCode 이렇게 접근을 할 수 있습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"data.value 안에 들어있는 것이 백엔드에서 보내주는 데이터인거죠."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":" const data = await useApi.post(\"/posts/save\", {\n ...postData,\n });\n "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"그에 반해 $fetch는 바로 백엔드에서 호출한 데이터를 return해주기 떄문에 data.statusCode 이런식으로 접근을 하게 됩니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":" const data = {\n data: ref>(response),\n };\n return data as AsyncData, Error>;\n"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"하나의 구조로 통일하고자"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"이렇게 한번 더 묶어주고, 타입을 as AsyncData로 지정하여 리턴해줬습니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":" const { data } = await useApi.post(\"/posts/save\", {\n ...postData,\n });\n if (data.value.statusCode == 200) {\n router.push({ name: \"posts-list\" });\n }"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"그러면 위와같이 get method와 동일하게 구조 분해 할당으로 가져올 수 있고, data.value.statusCode로 접근을 할 수 있게 됩니다."}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"사실 엄밀히 따지면 return하는 값이 다르기 때문에 좋은 방법이 아닐거라 생각하고는 있습니다만, useAsyncData와 $fetch를 useApi에서 한번에 호출하기 위해서는 구조를 맞춰서 return 해주는거 말고는 아직 방법이 떠오르지 않네요."}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"시간이 나면 조금 더 고민을 해봐야 할거 같습니다."}]}]}

Nuxt3의 UseAsyncData와 $fetch를 하나의 composable로 사용해보자.