Vue3 (사이트 제작 3 - Logo)

Logo 제작

component폴더안에 Logo.vue파일 생성
google.font를 이용하여 전역으로 설정하기위해 index.html에 link태그로 추가해준다.

Logo - RouterLink

RouterLink는 Vue에 제공해주는 라이브러리로 A태그로 출력된다. to="경로지정" 을 하게되며 왠만해서는 vue를 사용할땐 RouterLink를 사용하자!

<template>
  <RouterLink
    to="/"
    class="logo">
    <span>OMDbAPI</span>.COM
  </RouterLink>
</template>

Headline 제작

Headline 제작 시, OMDb API 사이트에 들어가서 텍스트를 긁어온다. components에 Headline.vue 파일을 제작 후, Home.vue에 import 할수있도록 제어한다.

<template>
  <div class="container">
    <h1>
      <span>OMDb API</span><br />
      THE OPEN<br /> MOVIE DATABASE
    </h1>
    <p>
      The OMDb API is a RESTful web service to obtain movie information, all content and images on the site are contributed and maintained by our users.<br />
      If you find this service useful, please consider making a one-time donation or become a patron.
    </p>
  </div>
</template>

<style lang="scss" scoped>
@import "~/scss/main";
  .container {
    padding-top: 40px;
      h1 {
        line-height: 1;
        font-family: "Oswald", sans-serif;
        font-size: 80px;
        span {
          color: $primary;
        }
      }
      p {
        margin: 30px 0;
        color: $gray-600;
      }
  }
</style>

Search

상당히 중요한 내용이다

Select

Search 필터를 만들기위해서 input를 사용!
v-model을 사용하여 양방향 데이터연결을 만들어서 title검색을 도아주고있고,
class는 부트스트랩을 사용하고있다.

selects에서 select는 각각 3가지를 만들어야해서 v-for를 사용하고있고, type,number,year을 만들어서 첫번째 들어갈 문자를 생성했다. 그리고 filters를 배열데이터로 만들어서 다시 {} 객체데이터로 Json파일 처럼 제작한다. name과 items로 나눠서
name에 대해 상응하는 items를 연결해주려고 제작했다.
각 select에 맞게 데이터를 넣어줘야하는데 v-model에서 양방향 데이터 전송을하기위해 v-model을 사용하게됩니다. $data는 스크립트의 data(){}를 호출하는것과 똑같은 효과이고 $data.??? 전송과 $data[] 똑같으며 우리는 3가지를 다 함께 출력해야하기 때문에 $data[filter.name]<< 을 사용하여 한번에 3가지를 호출하고있다.
year items부분은 따로 보도록하자

option

option에서는 v-for로 반복해서 name에 맞는 items를 제공해야하기 때문에 filter.items를 불러 객체데이터로 받아 item으로 사용한다. {{ item }} 내용에 넣어 반복하고있다.

All year 옵션은 select중 year에만 사용하고있으므로 v-if를 활용하여 표시한다.

<template>
  <div class="container">
    <input
      v-model="title"
      class="form-control"
      type="text" 
      placeholder="Search for Movies, Series & more" />

    <div class="selects">
      <select
        v-for="filter in filters"
        v-model="$data[filter.name]"
        :key="filter.name"
        class="form-select">
        <option
          v-if="filter.name === 'year'"
          value="">
          All Years
        </option>
        <option
          v-for="item in filter.items"
          :key="item">
          {{ item }}
        </option>
      </select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      type: 'movie',
      number: 10,
      year: '',
      filters: [
        {
          name: 'type',
          items: ['movie', 'series', 'episode']
        },
        {
          name: 'number',
          items: [10, 20, 30]
        },
        {
          name: 'year',
          items: (() => {
            const years = []
            const thisYear = new Date().getFullYear() // 2022

            for (let i = thisYear; i >= 1985; i -= 1) {
              years.push(i)
            }

            return years
          })()
        }
      ]
    }
  }
}
</script>

Search - Btn 제작

npm i axios << 다운로드한다.

axios를 사용하여 api를 사용한다. OMDb api 에서 api에 대해 사용법을 보고 작성한다.
클릭했을때 대한 정보를 console로그로 찍어볼수있고 network를 통해서 통신이 어떻게 이뤄지는지도 볼수있다.

<template>
    <button
      class="btn btn-primary"
      @click="apply">
      Apply
    </button>
 </template>
 
 <script>
  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>

내일은 영화리스트를 형제요소 컴포넌트로 만들어서 데이터 교환을 할껀데 형제컴포넌트끼리는 상당히 데이터교환이 제한적이라서 공식 라이브러리인 vueX를 사용할 예정이다.