Vue.js 완벽 가이드 - API 구현
===

###### tags: `석기`

---

## API 구현

### 구성팁

- views 폴더에 컴포넌트에는 라우팅 정보만 있는게 좋다.
- 페이지 역할을 하는 컴포넌트에 데이터 fetch가 들어가는건 **비추천**한다.
- 그렇지 않으면 api 설계가 바뀐다면 수정하기 어렵다.
- view에 있는 컴포넌트는 라우팅만 담당하자!

:::success
view 단에는 api 콜을 부르지 않는 방향으로.
:::

<template>
  <div>
      <div v-for="user in users" v-bind:key="user">{{user.title}}</div>
  </div>
</template>

<script>
import { fetchNewsList } from '../api'

export default {
  data() {
    return {
      users: []
    }
  },
  created() {
    fetchNewsList()
    .then(res => {
      console.log(res);
      this.users = res.data;
      })
    .catch()
  }
}
</script>

<style>

</style>

- created === react의 useEffect 같은 개념. / useEffect보다 더 빠르게하는 것일지도?