무한루프가 발생했다

나는 반복문도, recursion도 쓴적이 없다.

그저 vue 페이지 하나를 로딩할 뿐이었다.

랜더링에 포함된 데이터를 랜더링 중에 수정하지 말자
수정하면 데이터가 수정됐으니 vue는 그 페이지를 다시 랜더링 해줄거다
그러면 이제 서버가 멈추지 않고 일을해서 초과수당을 요구하게된다
초과수당을 지급하다가 파산하고 싶지않다면 이렇게 하지말자.

<template>
<div class="reply-body">
  {{getReply(letter.replied)}}
  {{replyObject.text}}
</div>
</template>

이렇게 렌더링 하려고했다.
3번째 줄에서 method하나 실행해주고
4번째 줄에서 어떤 오브젝트를 보여줄거다.

<script>
  getReply(id) {
  axios({
    method: 'get',
    url: `/api/letter/${id}`,
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`,
    },
  })
    .then((result) => {
    this.replyObject = result.data;
    console.log(result);
  })
    .catch((error) => {
    console.log(error);
  })
}
</script>

getReply method는 요렇게 생겼다
axios 요청이 응답을 받아오면 결과물을 this.replyObject에 넣어준다.
근데 이 replyObject를 템플릿에 넣어줬다.

그러면 무한히 랜더링 한다.

단점만 있는건 아니다.
무한랜더링을 하면 노트북 팬이 무한히 돌게되고
이렇게 하면 노트북을 이륙시킬 수 있다.
그래서 나는 지금 해발 2000m에서 포스팅을 하고있다.
그럼 이만.