[Nuxt.js] Fetch Data undefined 오류

서론

서버에서 데이터를 받아와서 화면에 표시해줄 때, 종종 undefined 변수명 현상이 일어난다.

이런 현상이 발생하는 이유와 나름의 해결 방법 대해서 작성해보려고 한다.

본론

작성한 코드를 살펴보자.

        <div class="table__title">
          <a :href="project.doc.file" download>{{ project.doc.title }}</a>
        </div>

...

  computed: {
    projectspage() {
      return this.$store.state.projectspage.page
    },
    project() {
      return this.$store.state.projectspage.item
    },
  },

async fetch를 사용하여 서버에서 데이터를 받아오고 store에 저장한 뒤, store에 저장되어 있는 데이터를 가져와서 화면에 출력해준다.

{
    "id": 2,
    "title": "테스트",
    "content": "<p data-block-key=\"6ditw\">제대로 표시 되나 확인해보는 테스트입니다.</p><p data-block-key=\"1sctm\"></p><img class=\"richtext-fullwidth\" src=\"https://hyojung-backend.s3.amazonaws.com/original_images/KaebCheo.PNG\" alt=\"캡처\" /><p data-block-key=\"677kp\"></p>",
    "date": "2022-03-22",
    "video_url": "test",
    "doc": {
        "id": 2,
        "title": "수료증",
        "file": "https://something.s3.amazonaws.com/documents/수료증.pdf"
    }
}

console.log를 찍어서 확인해보니 정상적으로 데이터를 가져온다.

그런데 이상하다.

html 태그를 지워보면서 테스트를 해보니 content나 date등은 잘 출력이 되는데 doc에 정의 되어 있는 속상 값, 즉 doc.title, doc.file등을 사용하면 문제가 생기는 것이다.

왜 이런일이 발생할까?**

참고 블로그

가져온 데이터를 HTML에서 읽으려고 할 때, 데이터는 아직 undefined 상태이다. 다만 undefined 상태에서는 오류가 발생하지 않지만 undefined된 데이터의 속성 값, 즉 doc.title이나 doc.file등을 가져올 때 문제가 생기는 것이다.

그렇다면 해결은?

참고 블로그에서 3가지 방법을 소개해주었는데 나 같은 경우에는 그냥 data()에 default 변수를 설정해놓고 fetch.then에서 정의 해주는 방법으로 사용하고 있다.

  data() {
    return {
      doc: {file: '', title: ''},
    }
  },

  async fetch() {
    await this.$store.dispatch(`projectspage/getItem`, this.$route.params.id)
    .then((response)=> {
      this.doc.file = response.data.doc.file;
      this.doc.title = response.data.doc.title;
    })
  },

결론

Vue와 Nuxt를 처음 배울 때, 왜 이런 오류가 발생하는지 도저히 몰랐지만 계속 개발을 하다보니 어디서 오류가 발생하는지 왜 발생하는지 짐작을 할 수 있고 해결할 수 있는 것 같다.