[Udemy Vue 완벽가이드 Section16] 253. GET요청(HTTP) 전송으로 코치 데이터 가져오기

coaches 페이지를 방문하거나, Refresh 버튼을 클릭할 때, 데이터를 fetching해야한다.

→ 따라서 CoachesList.vue 컴포넌트가 화면에 로드될 때, 데이터 fetching이 시작되게 해야한다.

 

그렇다고 요청을 보내고 응답을 파싱하는 로직 전체를 수행해야한다는 뜻은 아니다.

대신에 Vuex를 활용할 수 있다.

 

# Vuex를 활용하여 코치데이터 fetching

coachData를 로컬앱에 저장하면 Vuex로 관리할 수 있다.

actions.js 파일에 데이터페칭 action을 추가하고, mutations.js 파일에서 사용하면 된다.

컴포넌트가 아니라, Vuex에서 HTTP요청을 보내고, 응답을 파싱하는 접근방식이다.

컴포넌트를 깔끔하게 유지하는게 좋다.

 

먼저, coaches의 mutations.js파일에 mutation을 추가하자.

setCoaches로 하자. Vuex state의 로컬 coaches를 Firebase에서 가져오는 coaches로 설정.

payload는 Firebase에서 가져온 coaches 목록이 된다.

//coaches>mutations
export default {
  //생략..
  setCoaches(state, payload) {
    //payload는 coaches 목록이 된다.
    state.coaches = payload;
  },
};

 

 

actions에서 새로운 액션을 만들고, Firebase에서 coaches를 로드하라는 요청을 보내보자.

이 액션은 이 로딩 프로세스를 트리거하려는 모든 컴포넌트에서 dispatch된다.

async loadCoaches(context, payload){
  const response = await fetch(`https://vue-main-prj-01-9bcae-default-rtdb.firebaseio.com/coaches.json`); //coaches노드에 있는 모든 코치를 페칭.
  const responseData = await response.json();
  
  if(!response.ok) {
  //..오류처리구문. 지금은 pass.
  }
  //여기서 요구하는 형식에 맞도록, 페칭하는 데이터를 변환해야한다.
  //Firebase에서 데이터를 가져올 때, 객체를 통째로 가져오는데,
  //하나로 된 큰 객체가 아닌 코치의 배열로 가져오고 싶으므로.
}

fetch함수에서 두번째 인자는 필요없다. GET요청으로도 충분하므로.

then블록 대신, async/await 구문을 사용해보자.

 

coaches노드에 있는 모든 코치를 fetching하자.

coaches는 커다란 하나의 객체이고, id 프로퍼티에 설정된 코치 id에는 coacheData가 중첩 객체로 들어가있다.

 

 

하지만 여기서 요구하는 형식이 아니므로 변환이 필요하다.

새로운 상수를 만들고, for문을 이용해 코치 데이터로 채워진 객체인 responseData 전체를 검토한다.

async loadCoaches(context){ //두번째인자인 payload는 사용하지 않으니 지워주기.
  const response = await fetch(`https://vue-main-prj-01-9bcae-default-rtdb.firebaseio.com/coaches.json`); //coaches노드에 있는 모든 코치를 페칭.
  const responseData = await response.json();
  
  if(!response.ok) {
  //..오류처리구문. 지금은 pass.
  }
  //여기서 요구하는 형식에 맞도록, 페칭하는 데이터를 변환해야한다.
  //Firebase에서 데이터를 가져올 때, 객체를 통째로 가져오는데,
  //하나로 된 큰 객체가 아닌 코치의 배열로 가져오고 싶으므로.
  
  const coaches = [];
  for(const key in responseData) { //{c3: {firstName: .., lastName: ..}}
    const coach = {
      id: key,
      firstName: responseData[key].firstName,
      lastName: responseData[key].lastName,
      areas: responseData[key].areas,
      description: responseData[key].description,
      hourlyRate: responseData[key].hourlyRate,
   };
    coaches.push(coach)
  }
  
  context.commit('setCoaches', coaches);
}

 

 

loadCoaches를 CoachesList.vue에서 dispatch할 수 있다.

컴포넌트가 로드할 때, 그리고 Refresh 버튼을 클릭할 때 dispatch해보자.

 

loadCoaches라는 새 메서드를 추가하자.

//CoachesList.vue
created(){
 this.loadCoaches();
},
methods: {
  setFilters(updatedFilters) {
    this.activeFilters = updatedFilters;
  },
  loadCoaches(){
   this.$store.dispatch('coaches/loadCoaches') //loadCoaches는 actions에서 정의한 액션이름.
  }
},

loadCoaches 메서드는 이 컴포넌트가 생성될 때 트리거되어야한다.

→ created 수명주기 훅을 추가해주면 된다.

이 컴포넌트가 생성될 때 Vue가 실행한다.

this.loadCoaches를 가리켜 실행할 수 있다.

Refresh 버튼을 누를 때도 dispatch해야한다.

<base-button mode="outline" @click="loadCoaches">Refresh</base-button>

 

앱을 로드하면 더미데이터가 잠시 표시되지만, 곧 실제 코치의 정보로 바뀌고 'Register as Coach'버튼도 사라진다.

화면 깜빡임은 원하던 결과는 아니다.

로딩아이콘 표시방법과 더 편리한 오류처리방법을 살펴보자.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.