Vue 프로젝트 Search - 버튼

 

Vue 프로젝트 Search - 버튼

 

 

Vue 프로젝트 Search - 버튼 순서

 

1. /src/components/Search.vue 버튼 디자인 추가

<!-- Search.vue -->

<template>
  <div class="container">
    <input
      ...생략
      placeholder="Search for Movies, Series & more" 
      @keyup.enter="apply" />
    <div class="selects">
      <select
        ...생략
      </select>
    </div>
    <button
      class="btn btn-primary"
      @click="apply">
      Apply
    </button>
  </div>
</template>

<script>
export default {
  data() {
    ... 생략
  },
  methods: {
    apply() {
      // Search movies..
    }
  }
}

<style lang="scss" scoped>
.container {
  ... 생략
  .btn {
    width: 120px;
    height: 50px;
    font-weight: 700;
    flex-shrink: 0;
  }
}
</style>

 

2. npm i axios 설치 (HTTP 비동기 통신 라이브러리)

3. /src/components/Search.vue 버튼 OMDb API 테스트

<script>
import axios from 'axios'

export default {
  data() {
    ... 생략
  },
  methods: {
    async apply() {
      // Search movies..
      const OMDB_API_KEY = '7035c60c'
      const res = await axios.get(`https://www.omdbapi.com/?apikey=${OMDB_API_KEY}&s=${this.title}&type=${this.type}&y=${this.year}&page=1`)
      console.log(res)
    }
  }
}
</script>

 

결과

영화 제목(결과에서는 frozen)을 입력하고 Apply 버튼을 누르면

해당 제목을 가진 영화 데이터를 객체(Object) 데이터로 받아온다

 

---

 

개발자 도구 참고

 

(개발자 도구 - Network) XHR 은 XMLHttpRequest의 약어

- 웹 브라우저와 웹 서버 간에 데이터 전송 API를 의미

- 페이지에서 발생하는 데이터 요청은 XHR 메뉴로 필터링 가능