• 서버에서 데이터를 가져와서 HTML로 보여준다.
• 더 보기 버튼을 만들어서 가져와보자 ! 이를 위해서 ajax를 알아야한다.

Server에 요청

• Get, POST
  • POST : 서버로 데이터 보낼 때
  • GET : 서버에서 데이터 가져올 때

Ajax

• Ajax : GET, POST 시 새로고침 발생, ajax는 새로고침 없이 렌더링해주는 내장함수
• axios 라이브러리 사용
• fetch API 사용
  • 브라우저 최신 기본 기능 : 호환성 문제

axios

npm install axios

<script>
  import axios from 'axios'
</script>

  methods: {
    more() {
      axios.post("URL", {name: 'kin'}).then().catch((err)=>{
        console.log(err);
      })
      
      axios.get('https://codingapple1.github.io/vue/more1.json').
        then((result) => {
          this.instaDatus.push(result.data);
        })
    }
  },

• method를 정의해서 callback으로 사용해볼 수도 있다.
• then은 해당 get, post method가 성공했을 때 실행되는 콜백이고, catch는 에러 발생 시 수행되는 구문인데, 해당 err를 인자로 받을 수도 있다.

• 더보기를 눌러서 데이터를 받아온 후 Display해줄 수 있다.