캐모마일 Fetch 모듈 사용법 및 가이드

개요

ChmmFetch는 Nuxt 환경에서의 useFetch Composable 함수를 커스텀한 라이브러리입니다.

ChmmFetch는 프론트엔드와 백엔드 간 통신을 지원하며, Auth 정보를 핸들링할 수 있습니다.

주요 특징

1. useFetch

   • Server Side Rendering 지원

   • Client Side Rendering 지원

2. Auth

   • Jwt Token 정보 저장소

사용법

1. 설치

   • repository 설정

   // .npmrc 파일 registry=http://10.131.7.138:9090/repository/npm-public/

   • 라이브러리 추가

   npm i chmmfetch --save-dev

2. 설정

   • .env 설정

   // base API URL NUXT_PUBLIC_API_BASE=http://localhost:23636 // refresh 버튼 사용여부 INFO_REFRESH=true // sessionStorage 사용여부, false 인 경우 localStorage 사용 SESSION=false // Token 만료 체크 시간 (예) 360000 => 만료 6분전 체크) CHECK_TIME=360000 // Authentication 체크가 필요없는 API 리스트 NO_AUTH_API=security/jwt/authenticate,chmm/user/update-password,rsa/public-key,security/jwt/refresh-token

   • nuxt.config.ts 설정

   // nuxt.config.ts 파일 export default defineNuxtConfig({ ... modules: ['@pinia/nuxt', 'chmmfetch'], ... runtimeConfig: { // Private keys are only available on the server // Public keys that are exposed to the client public: { apiBase: '', infoRefresh: process.env.INFO_REFRESH, session: process.env.SESSION, checkTime: process.env.CHECK_TIME, noAuthAPi: process.env.NO_AUTH_API, ... }, }, ...

3. 사용

   // useFetch는 4가지 옵션을 제공 (useGetFetch, usePostFetch, usePutFetch, useDeleteFetch) // useGetFetch 예 const { data, pending, error } = await useGetFetch( `/chmm/common-code/category/list`, categoryVo, ) // usePostFetch 예 const { data, pending, error } = await usePostFetch( `/chmm/common-code/category/delete`, selectedCategory, ) // Auth Store 사용 예 const { authenticateUser, logUserOut, getTokenValidTime, checkTokenTimeout, renewRefreshToken } = useAuthStore() // use auth store // 로그인 await authenticateUser({ username: id.value, password: encRSA(password.value, config.public.rsaPublicKey), }) // 로그아웃 logUserOut() // 토큰 시간 확인 getTokenValidTime() // 토큰 만료 시간 체크 및 갱신 checkTokenTimeout() // Token 갱신 renewRefreshToken()