121. Main Page - 학습 노트 조회 API 함수 구현 | v-for로 Data 바인딩

1. axios 모듈화 시킨 index.js에 학습 노트 데이터 조회 API 추가

import axios from 'axios';

// interceptors.js 에서 setInterceptors 함수 받아오기
import { setInterceptors } from './common/interceptors';

// 액시오스 초기화 함수
// createInstance 함수로 하나로 묶기.
// 이렇게 하면 이 함수의 결과는 instance를 셋업하고 interceptors를 설정하게됨
function createInstance() {
  // axios.create 할때 주입한 속성은 인스턴스로 데이터 요청 할때마다 무조건 이 속성들이 정의된 상태로 수행된다.
  const instance = axios.create({
    baseURL: process.env.VUE_APP_API_URL,
  });
  // setInterceptors 함수에 instance 보내기
  return setInterceptors(instance);
}

// createInstance함수 값 받아오기
const instance = createInstance();

// 회원가입 API
function registerUser(userData) {
  // 첫번째 인자는 API 명, userData는 Request값
  // axios.post(`signup/${username?aa&password?bb&nickname?cc}`)
  return instance.post('signup', userData);
}

// 로그인 API
function loginUser(userData) {
  return instance.post('login', userData);
}

// 학습 노트 데이터 조회 API
function fetchPosts() {
  return instance.get('posts');
}

export { registerUser, loginUser, fetchPosts };

---

2. MainPage Methods에 fetchposts 함수 Data 받아오기

<template>
  <div>
    <div class="main list-container contents">
      <h1 class="page-header">Today I Learned</h1>
    </div>
  </div>
</template>

<script>
import { fetchPosts } from '@/api/index';

export default {
  methods: {
    async fetchData() {
      const responce = await fetchPosts();
      console.log(responce);
    },
  },
  created() {
    // 라이프 사이클 훅 컴포넌트 생성 되자마자 데이터 호출
    this.fetchData();
  },
};
</script>

<style></style>

---

3. Data 바인딩

<template>
  <div>
    <div class="main list-container contents">
      <h1 class="page-header">Today I Learned</h1>
      <ul>
        <li v-for="postsItems in postsItems" :key="postsItems._id">
          {{ postsItems.title }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { fetchPosts } from '@/api/index';

export default {
  data() {
    return {
      postsItems: [],
    };
  },
  methods: {
    async fetchData() {
      const { data } = await fetchPosts();
      this.postsItems = data.posts;
    },
  },
  created() {
    // 라이프 사이클 훅 컴포넌트 생성 되자마자 데이터 호출
    this.fetchData();
  },
};
</script>

<style></style>