Project SW Test Forum 6. CRUD 게시판 구현 및 오류 해결(프론트엔드) - 1

<module-app-web\front\src\components\cwe\cwe\CweList.vue>

// ...

// onBeforeMount, init
onBeforeMount(async () => {
 fireSuccessToast("cwe");

 await searchList({"page": 1});

 await axios.get(process.env.VUE_APP_MODULE_APP_API_URL + "/api/cwe/list-access-authority",
     {},
 )
     .then((response) => {
       access.value = response.data;
     })
     .catch((error) => {
       parseErrorMsg(error.response);
     })
     .then(() => {
     });
})

// ...

<module-app-web\front\vue.config.js>

module.exports = {
   css: {
       loaderOptions: {
           sass: {
               prependData:
                   `
                       @import "@/assets/css/variable.scss";
                       @import "@/assets/css/general.scss";
                       @import "@/assets/css/layout.scss";
                   `
           }
       }
   }
}

<module-app-web\front\src\main.js>

// axios 설정
axios.defaults.xsrfCookieName = 'XSRF-TOKEN' // csrf 기본 설정을 명시적으로 선언
axios.defaults.xsrfHeaderName = 'X-XSRF-TOKEN' // csrf 기본 설정을 명시적으로 선언
axios.defaults.withCredentials = true; // 다른 origin에 JWT를 전달하기 위한 설정
// axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*'; // cors 설정
// axios.defaults.headers.common['Access-Control-Allow-Headers'] = 'Origin, Content-Type, X-Auth-Token'; // cors 설정

// 요청 인터셉터 추가
axios.interceptors.request.use(
   (config) => {
       // 요청을 보내기 전에 수행할 일
       document.getElementById("loading-wrapper").style.visibility = "visible";
       return config;
   },
   (error) => {
       // 오류 요청을 보내기전 수행할 일
       document.getElementById("loading-wrapper").style.visibility = "hidden";
       return Promise.reject(error);
   });

// 응답 인터셉터 추가
axios.interceptors.response.use(
   (response) => {
       document.getElementById("loading-wrapper").style.visibility = "hidden";
       // 응답 데이터를 가공
       return response;
   },
   (error) => {
       // 오류 응답을 처리
       document.getElementById("loading-wrapper").style.visibility = "hidden";
       return Promise.reject(error);
   });

<module-app-web\front\src\components\common\FileUpload.vue>

const tag = '<div id="uploadFileId' + tempUploadFileId + '" + class="d-flex">'
   + '<span class="d-flex align-items-center">'
   + file.name + ",&nbsp; 파일 크기: " + convertFileSize(file.size)
   + '</span>'
   + '<img id="cancelFileIcon' + tempUploadFileId + '" src="/x-circle-main-black.svg" class="ms-2">'
   + '</div>';

 await axios.get(process.env.VUE_APP_MODULE_APP_API_URL + "/api/misra-cpp/list-access-authority",
     {},
 )
  .then(function (response) {
    // ...
  })
  .catch(function (error) {
    // ...
  })
  .then(function () {
    // ...
  });

 await axios.get(process.env.VUE_APP_MODULE_APP_API_URL + "/api/misra-cpp/list-access-authority",
     {},
 )
     .then((response) => {
    // ...
     })
     .catch((error) => {
    // ...
     })
     .then(() => {
    // ...
     });
})

<module-app-web\front\src\router\index.js>

const routes = [
   {
       path: '/login',
       name: 'Login',
       component: Login,
       meta: {title: 'SW Test Forum - 로그인', layoutView: false, authRequired: false}
   },
   {
       path: '/dashboard',
       name: 'Dashboard',
       component: Dashboard,
       meta: {title: 'SW Test Forum - 대시보드', layoutView: true, authRequired: true}
   },

// ...
]

router.beforeEach(async function (to, from, next) {
   // page title 설정
   //nextTick은 Dom이 업데이트 된 후 실행
   nextTick(() => {
       document.title = to.meta.title;
   });

   // 잘못된 URI로 매핑되는 경우, Error404
   if (to.name === 'Error404') {
       await error.fire({
           text: "페이지를 찾을 수 없습니다.",
       });

       router.go(-1);
   }
   // to: 이동할 url에 해당하는 라우팅 객체
   else if (
       to.matched.some((routeInfo) => {
           return routeInfo.meta.authRequired;
       })) {
       if (vueCookies.get('isHasToken')) {
           next();
       }
       // 권한이 없는 경우, Error401
       else {
           await error.fire({
               text: "로그인이 필요합니다.",
           });

           next('/login');
           //router.go(-1);
       }
   } else {
       if (vueCookies.get('isHasToken')) {
           await warning.fire({
               text: "로그아웃을 하신 다음, 다른 계정으로 로그인 해주세요.",
           });

           next('/dashboard');
       } else {
           next();
       }
   }
});

export default router

<module-app-web\front\src\router\index.js>

const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
   routes,
   scrollBehavior(to, from, savedPosition, popstate) {
       //브러우저 뒤로가기 버튼을 클릭하는 경우, scroll 위치를 변경하지 않음
       if (isEmpty(savedPosition)) { // isEmpty는 사용자 정의 함수로 savedPosition 객체가 비어있는 경우 최상단으로 scroll 이동
           return new Promise((resolve, reject) => {
               resolve({left: 0, top: 0})
           })
       } else {
           return new Promise((resolve, reject) => {
               behavior: 'smooth', resolve({left: savedPosition.left, top: savedPosition.top})
           })
       }
   }
})

<module-app-web\front\src\utils\validation-util.js>

// ...

/* 길이 및 공백 validation */
const validateLengthAndIsEmpty = (name, value) => {
   let result;
   let errorMessage = document.getElementById(name + "ErrorMessage");

   if (!validateWhiteSpace(value)) {
       result = "공란이 될 수 없습니다.";
       document.getElementsByName(name)[0].focus();
   } else if (value.length > 255) {
       result = "길이는 255 보다 작아야 합니다. \n"
           + "(현재 입력된 길이: " + value.length + ")";
       document.getElementsByName(name)[0].focus();
   } else {
       result = "";
   }

   errorMessage.innerText = result;

   return isEmpty(result);
}

// ...