OnMount의 fetch 바로 받아오게 하기

진짜 개같은 일이 벌어졌다.

겨우겨우 찾은 해결책

내 습관적인 큰따옴표 적지 않음이 문제가 아니었던 거 같다.

이 글을 작성하기 위해 큰따옴표를 지우고 돌려봤는데 잘 작동한다.

나는 무엇 때문에 4시간을 허비한 걸까?

 

더 큰 문제는 그게 원인이 아니었다면

나는 다음에 또 이 현상 때문에 4시간을 허비하게 되지 않을까 싶다는 점이다..

 

 

 

이 개 * 같은 문제 때문에 이번에도 네 시간을 허비했다.

 

우선 내 문제(?)였던 부분을 말하자면

let data = ref();
let data = ref("");

아래처럼 적어야 할 것을 위처럼 적어 4시간 정도를 찾아다녔었다.

 

---

이 문제로 말하자면 나와 역사가 깊다.

 

처음 만난 것은

우리의 파이널프로젝트 때였다.

 

그 당시 나는 해결할 수 없어서 onUpdated에서 1초마다 +1되는 것을 화면에 d-none으로 숨겨놓고 해결했었는데 

(사실 해결할 수 없다기 보다는 해결되는 지도 몰랐었다.)

 

이후 개인프로젝트를 했을 때는

무슨 차이가 있는지는 몰랐지만 내가 원하는 대로 동작을 했다.

 

이 개인프로젝트로인해 해결할 수 있다는 사실을 알게 되고,

뭔가 문제가 되는 내 코딩습관이 있다는 것을 인지하고 찾아내는 데 4 시간 정도가 걸렸다.

 

전체 문제 코드(?)와 화면을 첨부하자면

<script setup>
import {ref, reactive,onMounted, onUpdated } from 'vue';

let page = ref(0);
let data = ref();

function scrollToTop(){  // 스크롤을 맨 위로 올리는 함수
    window.scrollTo(0, 0)
}

onMounted(() => {
    var requestOptions = {
        method: 'GET',
        redirect: 'follow'
    };

    fetch(`http://localhost:8080/board/PaginatedBoard?page=${page.value}`, requestOptions)
        .then(response => response.json())
        .then(result => {
            data.value=result;
        })
        .catch(error => console.log('error', error));
})
</script>