[Vue.js] 서버로 ajax 요청하는 더보기 버튼 만들기

💡 실습 포인트!

---

💜 Ajax 알아보기

• ajax 에 대한 설명 및 axios 설치 및 사용 방법은 이전에 React 프로젝트를 만들 때 정리해둔 게 있는데, 거의 동일해서 설명은 생략한다.
  (혹시 ajax 에 대해 궁금하거나 axios 설치 및 사용 방법이 궁금하다면 클릭!)

---

💜 axios 를 이용하여 GET 요청하기

import axios from 'axios';

axios.get('URL').then( result => {
  // GET 요청 성공할 경우 실행할 코드 작성하기
  console.log(result);
}).catch(()=>{
  // GET 요청 실패할 경우 실행할 코드 작성하기
})

• 위와 같이 코드를 작성하면 원하는 서버의 URL 로 GET 요청을 할 수 있다.
• .then() 안에는 function(){ } 과 같이 콜백함수를 추가해준 다음, GET 요청이 성공할 경우에 실행할 코드를 작성해주면 된다.
• GET 요청을 통해 가져온 데이터는 result 라는 파라미터에 담겨있으므로, 궁금하다면 console.log()로 출력해보면 된다.
• ajax 요청이 실패할 경우에 특정 코드를 실행하고 싶다면 .catch() 안에 콜백함수를 추가해준 다음 실행할 코드를 작성해주면 된다.
• 보통 ajax 요청이 실패하는 경우는 URL 을 잘못 쓰거나, 서버가 다운되는 경우 등이 있다.

---

💜 axios 를 이용하여 POST 요청하기

import axios from 'axios';

axios.post('URL', '보낼_데이터').then( result => {
  // POST 요청 성공할 경우 실행할 코드 작성하기
  console.log(result);
}).catch(()=>{
  // POST 요청 실패할 경우 실행할 코드 작성하기
})

• ajax 에 POST 요청도 할 수 있는데, POST 요청이란 서버로 원하는 데이터를 전송하는 것이다.
• 이 때, 전송할 수 있는 데이터로는 문자열이든 object 자료형이든 모두 가능하다.

---

💜 "더보기" 버튼으로 가져온 데이터를 Post.vue 로 보여주기

// 전체 코드 미리보기
// 전체 코드의 내용이 길어 css 부분은 제외했다.

<template>
  <div class="header">
    <ul class="header-button-left">
      <li>Cancel</li>
    </ul>
    <ul class="header-button-right">
      <li>Next</li>
    </ul>
    <img src="./assets/logo.png" class="logo" />
  </div>

  <Container :posts="posts" />

  <button class="btn" @click="more">더보기</button>
  <div class="footer">
    <ul class="footer-button-plus">
      <input type="file" id="file" class="inputfile" />
      <label for="file" class="input-plus">+</label>
    </ul>
  </div>
</template>

<script>
import Container from "./components/Container.vue";
import posts from "./assets/posts";
import axios from "axios";
export default {
  name: "App",
  data() {
    return {
      posts: posts,
      moreCnt: 0,
    };
  },
  methods: {
    more() {
      axios
        .get(`https://codingapple1.github.io/vue/more${this.moreCnt}.json`)
        .then((result) => {
          this.posts.push(result.data);
          this.moreCnt++;
        })
        .catch(() => {
          console.log("GET 요청을 실패했습니다.");
        });
    },
  },
  components: {
    Container: Container,
  },
};
</script>

<style>
</style>

• "더보기" 버튼을 누르면 강사님이 준비해오신 URL 로 GET 요청을 한 후, Post.vue 로 보여주어야 한다.
• 먼저, "더보기" 버튼을 만든 다음, 해당 버튼을 클릭하면 more 이라는 method 가 실행되도록 코드를 작성해주었다.
• 그러고 나서, methods 에 more() 함수를 추가해주었는데 코드를 해석하자면 다음과 같다.
  • https://codingapple1.github.io/vue/more0.json 에 GET 요청을 하여 데이터를 받아온다.
  • 받아온 데이터를 result 에 저장한 다음 내가 필요로 하는 객체 형체의 데이터인 result.data 를 현재 data 보관함의 posts 에 push 한다.
    (현재 posts 라는 데이터의 앞부분에 추가할 경우 unshift(), 뒷부분에 추가할 경우 push() 를 사용한다.)
• 위 코드는 "더보기" 버튼을 통해 GET 요청을 할 URL 이 하나인 경우이고, 보통은 "더보기" 버튼을 계속해서 누르면 서버에서 새로운 데이터를 더 불러와야한다.
• 강사님의 경우 두번째 서버URL 을 https://codingapple1.github.io/vue/more1.json 로 알려주셨는데, 첫번째 서버URL 과 비교했을 때 more 뒤에 숫자만 증가한다는 것을 알 수 있다.
• 따라서, "더보기" 버튼을 클릭할 때마다 0에서부터 숫자가 1씩 증가하도록 한 다음, 해당 숫자를 서버URL 에 데이터바인딩을 해줌으로서, 매번 다른 데이터를 불러올 수 있게 되었다.