vue.js 라이프 사이클 훅 문제

1. 기존 구현 흐름은 mounted가 된 후 DOM이 다 불러와 진 상태에서 setTimeOut을 줘야 잔 버그가 발생하지 않게 구현되어 있었다.

mounted() {
    setTimeout(() => {
      this.fn_selPreprocessingList();
      this.fn_getMrtTableList(this.bizCode);
    }, 100);
  },

1. 100 밀리 세컨즈 텀을 주는 부분을 삭제 해야하는 상황에서 vue nextTick 기능을 사용하여 변경 진행하려 하였다.

mounted() {
    this.$nextTick(() => {
      this.fn_selPreprocessingList();
      this.fn_getMrtTableList(this.bizCode);
    });
  },

1. 간혈적으로 아래와 같은 오류가 발생하였다.

• Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length') at Proxy.render
• [Vue warn]: Computed property "alertModalMsg" is already defined in Data. at <PreprocessingInfo ref="sysPrgmInfo" onFn_getTreeItems=fn<bound fn_getTreeItems> > at <PreprocessingMgmt onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > at <RouterView> at <RouterSection onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {…} > > at <RouterView> at <DefaultLayout key=1 > at <App>
• [Vue warn]: Property "prgmCd" was accessed during render but is not defined on instance. at <PreprocessingInfo ref="sysPrgmInfo" onFn_getTreeItems=fn<bound fn_getTreeItems> > at <PreprocessingMgmt onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > at <RouterView> at <RouterSection onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {…} > > at <RouterView> at <DefaultLayout key=1 > at <App>
• 기타 등…

1. tbody DOM을 불러올 때 data field의 요소가 온전히 init되지 못하여 생기는 오류라 추리했다. 실제로 해당 요소는 data field에 [] 빈 배열로 초기화해둔 상태

<tbody>
	<template v-if="mrtTableList.length !== 0">
     <tr v-for="(row, index) in mrtTableList" :key="`${row}` + index">
       <td class="text-start">
         <a href="#" class="daisy_link" @click="fn_getMrtTableDetail(row)">{{ row.TABLE_NM }}</a>
       </td>
       <td class="text-start">{{ row.CMMNT }}</td>
     </tr>
   </template>
    <template v-else>
       <tr>
         <th colspan="2" style="text-align: center;">테이블 데이터가 없습니다.</th>
       </tr>
     </template>
</tbody>                      

TO-BE

<template v-if="mrtTableList != null && mrtTableList.length !== 0">

1. 해당 조건을 추가하여 DOM을 렌더한 후 function을 호출하니 정상적으로 진행된다.