두번째 삽질 - 잘못 된 정답

난 자율주행 차량들의 9분 데이터를 받아와서 appData를 appDataMovingMarker에 담았다 그리고 이안엔

각 id가 나뉘어진 각 자동차들의 데이터들이 있었고 이 데이터를 그려내기 위해서 아래의 코드를 작성했다.

<l-feature-group v-if="isAppOn">
      <l-moving-rotated-marker
        v-for="appDataMovingMarker in appData"
        :key="appDataMovingMarker.id"
        :lat-lng="appDataMovingMarker.carInfo[count].latLng"
        :duration="1000"
        :icon="appDriverIcon(appDataMovingMarker.carInfo[count].speed)"
      >
      <l-tooltip v-if="isVehicleIdOn" v-bind:class="getColorId(appDataMovingMarker.carInfo[count].speed)" :options="{ permanent: true, direction: 'top' }">
          {{ appDataMovingMarker.id }}
      </l-tooltip>
        <l-popup class="movingPopup">
          <div class="movingPopupLeft">
            <div class="movingPopupMenu">Vehicle ID</div>
            <div class="movingPopupMenu">Speed</div>
            <div class="movingPopupMenu">주행링크 ID</div>
            <div class="movingPopupMenu">링크 진입 경과시간</div>
            <div class="movingPopupMenu">링크 내 정지횟수</div>
          </div>
          <div class="movingPopupRight">
            <div class="movingPopupData">{{ appDataMovingMarker.id }}</div>
            <div class="movingPopupData">{{ appDataMovingMarker.carInfo[count].speed + ' km/h'}}</div>
            <div class="movingPopupData">{{ appDataMovingMarker.carInfo[count].appLinkID }}</div>
            <div class="movingPopupData">{{ appDataMovingMarker.carInfo[count].createDate }}</div>
            <div class="movingPopupData">{{ countNum }}</div>
          </div>
        </l-popup>
      </l-moving-rotated-marker>
    </l-feature-group>

그러자 오류가 빵빵 터지기 시작했다.

 

이유는 뭐였을까... 친구에게 물어보니 내가 잘못 된 정답을 기입했었다.

이유는 각 자동차들이 끝나는 시점이 다 다르다는것.

 

:lat-lng="appDataMovingMarker.carInfo[count].latLng"

 

난 이렇게 좌표값을 찍어주었고 이것은 정답이 아니었다.

아래에서 count를 증가시키는 방식을 사용했는데

 

  data() {
    return {
      count: 0,
    }
}

  mounted() {
    setInterval(() => {
      this.count++
    }, 4000);
 }

 

변수로 count에 0을 지정하고 setInterval() 함수로 4초마다 업데이트를 해주었다.

이건 문제가 발생하게 했다. 좌표가 끝나는 시점이 동일하지 않는다는점;

 

그렇기에 난 초보 개발자로 새로운 정답을 찾아내야한다.

생각하자... 젠장