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

스트링·2024년 4월 2일

instagram vue

vue 인스타그램

목록 보기

3/14

더보기 버튼 만들거임

근디 이거 맹들려면 ajax라는걸 알아야함

서버에서 더보기 게시물을 가져와서 그 데이터를 HTML로 보여주는 방식

서버는 그냥 단순히 데이터를 요청하면 주는 거임

여기서 GET 요청과 POST 요청이 따로 있는디

일반적으로 get post요청을 하면 브라우저가 새로고침됨

form 태그도 get요청을 하는 방식이긴함

ajax를 쓰면 새로고침 없이도 get post 요청이긴함

(https://codingapple1.github.io/vue/more0.json)

다음 주소로 GET 요청을 하면 더보기용 게시물이 하나 생성된다.

그냥 가져다 쓰기만 하면댐

ajax 요청

axios 라이브러리 사용
기본 fetch 함수 사용

근디 호환성 때문에 1방법 사용하긴함

이제 설치 ㄱㄱ

터미널 당장켜

❯ yarn add axios

npm 써도 되는디 그냥 yarn 쓰는게 오류도 덜나고 좋음 ㄱㄱ

이러고 npm run server 해서 에러가 안나면 성공적임!

import axios from 'axios'
axios.get()

그 다음 내가 axios를 사용하고자 하는 vue 파일에 임포트 해주면 된다.

axios.get 이런식으로 요청하면 댐

axios.post하면 됨

근디 오늘 주제가 뭐냐?

더보기버튼임

근데 더보기 버튼이 없네…

만들어

더보기 버튼 만들기

  <button> 더보기 </button>

끗

이런식으로 맹들고

우리가 원하는 기능은 다음과 같다

서버에서 추가 게시물을 가져옴
그걸 post 태그로 보여줄 것

  <button @click="more"> 더보기 </button>

그 기능을 만드려면 코드가 매우 길어질것 같으니 …. more이라는 함수로 따로뺌

서버에서 추가 게시물 가져옴

 methods : {
    more(){
      axios.get('https://codingapple1.github.io/vue/more0.json')
      .then(function(결과){
        console.log(결과);
      })
    }
  }
  
  //function 대신에 ()=>{} 이런식으로도 작성 가능함
  //=> 이런식으로 하는게 너무 좋다 this. 사용하기에 오류도 안나고 그럼

\서버로 부터 GET 요청해서 주소에 있는 데이터를 가져오고

가져오기를 성공하면 콘솔로그가 돌아가는 코드임

그러고 웹페이지에서 콘솔창 열어보면 잘 작동하는걸 볼수 있음

console.log(결과).data; 처리를 해주면

우리가 원하는 인스타용 게시물 데이터만 볼수 있다.

그걸 포스트 태그로 보여줄것

그렇다고 합니다…

우리는 게시물을 3개로 고정시켜둠

근데 태그를 누르면 게시물 자체가 늘어나니

저 게시물에 대한 for문 형식을 고쳐주면 됨(아마도…)

 methods : {
    more(){
      axios.get('https://codingapple1.github.io/vue/more0.json')
      .then((결과)=>{
        console.log(결과.data);
        this.게시물.push(결과.data);
      })
    }
  }
}

코드 설명
1. methods: Vue 구성요소가 함수를 정의하는 데 사용하는 객체입니다. 여기에서 정의한 함수는 구성 요소의 템플릿(예: 구성 요소의 HTML 부분)에서 사용하거나 다른 기능이나 수명 주기 후크에서 내부적으로 호출할 수 있습니다.
2. more() {...}:
  - more라는 메소드입니다. Vue의 메소드는 이벤트(예: 사용자의 버튼 클릭)에 대한 응답으로 작업을 수행하거나, 데이터를 가져오거나, 데이터를 조작하는 데 사용됩니다.
  - 요소에 연결된 @click="more"와 같은 이벤트 핸들러를 사용하여 구성요소의 템플릿에서 이 메소드를 호출할 수 있습니다. 이 핸들러는 요소를 클릭할 때 more 메소드를 트리거합니다.
3. axios.get('URL'):
  - axios는 HTTP 요청을 만드는 데 사용되는 인기 있는 JavaScript 라이브러리입니다. 여기서는 ``https://codingapple1.github.io/vue/more0.json'' URL에 대한 GET 요청을 수행하는 데 사용됩니다.
  - GET 요청은 일반적으로 지정된 URL에서 데이터를 검색하는 데 사용됩니다.
4. .then((결과) => {...}):
  - .then()은 자바스크립트에서 Promise와 함께 사용되는 함수입니다. Promise는 비동기 작업의 최종 완료(또는 실패)와 그 결과 값을 나타내는 개체입니다.
  - GET 요청이 성공적으로 완료되면 .then()이 호출되고 GET 요청의 응답인 result 인수를 받습니다.
  - 이 '결과' 개체에는 서버 응답의 모든 세부정보가 포함되어 있습니다. 예를 들어 result.data에는 응답 본문, 즉 요청한 실제 데이터가 포함됩니다.
5. console.log(result.data);:
  - 이 줄은 GET 요청에서 검색된 데이터를 콘솔에 기록합니다. 이는 요청에서 반환된 데이터를 확인하기 위한 디버깅 목적에 도움이 됩니다.
6. this.post.push(result.data);:
  - 이 줄은 구성요소의 데이터를 업데이트합니다. 구성 요소(배열이어야 함)에 post라는 데이터 속성이 있다고 가정하면 이 줄은 GET 요청에서 검색된 새 데이터를 해당 배열에 추가합니다.
  - this는 Vue 인스턴스에 대한 참조이며 this.post를 사용하여 Vue 인스턴스의 데이터 객체에 정의된 post 배열에 액세스합니다.
  - .push(result.data)는 post 배열 끝에 새 데이터를 추가합니다.
  
  몇 가지 중요한 참고 사항:
- 이 설명에서는 this.post가 실제로 구성요소의 data 옵션에 정의된 배열이라고 가정합니다. 그렇지 않은 경우 this.post.push(result.data); 줄은 오류를 발생시킵니다. 왜냐하면 push는 배열 메서드이고 정의되지 않음이나 배열이 아닌 경우 호출할 수 없기 때문입니다.
- post 데이터 속성이 반응형인 경우(data 옵션에 정의된 경우 그래야 함) Vue는 새 항목이 푸시될 때 post가 사용되는 모든 DOM을 자동으로 업데이트합니다.
  
  이것이 바로 간단한 코드 블록에 포함된 기능입니다. 초보자의 경우 이를 이해하면 Vue가 메서드를 처리하고, API를 호출하고, 구성 요소 데이터를 반응적으로 업데이트하는 방법을 이해하는 데 도움이 됩니다.

그냥 게시물 push해서 더 생겼다고 이해 하겠습니다..

axios 사용법 몇 개 더

post 요청은 axios.post()를 하면 내가 원하는 URL로 전송할수 있다.

axios.post('URL', {name : 'kim'})

이런식으로 하면댐

axios.post('URL', {name : 'kim'}).then(성공시 실행할코드).catch(실패시 실행할 코드)

숙제 응응…

**오늘의 15분 숙제 :**

버튼을 한번 더 누르면 두번째 게시물을 가져와서 보여주도록 코드를 짜오십시오.

https://codingapple1.github.io/vue/more1.json으로 GET 요청하면 둘째 게시물을 줍니다.

그냥 버튼을 한번 누르면 more0.json

두번 누르면 more1.json으로 요청을 하라고 코드를 짰습니다.

근데 그러려면 당연히 버튼 누른 횟수를 어디다 기록해둬야하지 않을까요?

그래서 데이터로 만들어서 적어뒀습니다.

data(){
    return {
      게시물 : postdata,
      더보기 : 0,
    }
 },

그 다음 more() 함수를 이렇게 바꿨습니다.

more(){
      axios.get(`https://codingapple1.github.io/vue/more${this.더보기}.json`)
      .then( 결과 => {
        this.게시물.push(결과.data);
        this.더보기++;
      })
 }