한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online를 들으며 정리한 내용입니다.

Search - 버튼

실제로 검색이 가능하도록 Apply버튼을 만들어보려고 합니다.

1. 버튼 생성

1-1. button태그 추가

부트스트랩에서 제공하는 class=btn btn-primary를 가지고 있는 버튼을 만들어줍니다. 또한 그 버튼을 클릭시 apply라는 메소드가 실행될 수 있도록 설정해줍니다.

또한 이 apply메소드가 input창에서 엔터키를 눌렀을 때도 실행될 수 있도록 아래와 같이 작성을 해줍니다.

<template>
  <div class="container">
    <input...
      @keyup.enter="apply" />  //(2)
    <div class="selects">
      <select...
       </select>
        <option...
        </option>
        <option...
        </option>
      </select>
    <button
      class="btn btn-primary"
      @click="apply">  //(1)
      Apply
    </button>
  </div>
</template>

1-2. apply메소드 정의

<script>
  methods : {
    async apply() {

    }
  }
}
</script>

1-3. 스타일지정

<style>
...
  .btn {
    width: 120px;
    height: 50px;
    font-weight: 700;
    flex-shrink: 0; ✅point!
  }
}
</style>

2. API요청

2-1 파라미터 확인

`https://www.omdbapi.com/?apikey=${OMDB_API_KEY}&s=${this.title}&type=${this.type}&y=${this.year}&page=1`

• s : 필수적 사용, 검색하고자 하는 영화의 제목
• type: movie, series, episode
• y : 연도
• r : json사용 예정
• page : OMDB API의 경우 요청한 정보를 10개까지 내보내기에 추가로 필요하다면 page기능 사용

2-2 axios 패키지

$ npm i axios

<script>
import axios from 'axios'

export default {
  methods : {
    async apply() {
      const OMDB_API_KEY = '1111'
      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>  
...