Vue로 영화 검색 사이트 만들기

🚩 목표

🦴 구조

• 검색창 (header)

• 검색 결과

• 상세 페이지

🤙 API 호출

async function _fetchMovieByTitle(options) {
  try {
    const { methods, title } = options;
    const res = await fetch(`${BASE_URL}/?apikey=${API_KEY}&s=${title}`, {
      methods,
    });
    return res.json();
  } catch (error) {
    alert(error.message);
  }
}

async function _fetchMovieById(options) {
  try {
    const { methods, id } = options;
    const res = await fetch(
      `${BASE_URL}/?apikey=${API_KEY}&i=${id}&plot=full`,
      {
        methods,
      }
    );
    return res.json();
  } catch (error) {
    alert(error.message);
  }
}

• input에 클릭 또는 엔터 이벤트가 발동하면 getMovies함수 실행.

• store/workspace 내 value를 전달하여 제목을 불러옴(API 호출).

• actions → mutations → state 순서로 결과를 result에 담음.

• result 배열에 담긴 결과 값을 computed 디렉토리에서 불러옴.

⛓️ 라우팅

import { createRouter, createWebHistory } from "vue-router";
import Result from "./Result";
import NotFound from "./NotFound";
import Search from "../components/Search";

export default createRouter({
  history: createWebHistory(),
  scrollBehavior: () => ({ top: 0 }),
  routes: [
    {
      path: "/",
      component: Search,
    },
    {
      path: "/Result",
      component: Result,
    },
    {
      path: "/:notFound(.*)",
      component: NotFound,
    },
  ],
});

• import router from "~/routes";

• router.push로 path를 명시하여 이동하고자 하는 페이지 지정. 이때 id가 필요하다면 query속성을 사용하여 전달.

• detail 페이지에서 x표시를 눌렀을 때 홈으로 가는 경로와 함께 push.

🔄 로딩바

1. 로딩 컴포넌트 생성.

<template>
  <img
    src="https://thumbs.gfycat.com/BackIllinformedAsianelephant-size_restricted.gif"
  />
</template>

<style lang="scss" scoped>
img {
  position: absolute;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  opacity: 0.5;
}
</style>

2. 로딩바가 등장해야 하는 컴포넌트에 loading 컴포넌트를 import하여 template에 돔 객체로 만듦.

3. workspace.js에서 state에 isLoading을 false로 지정하고 api가 호출될 때 true로 변경, 호출이 끝난 후 다시 false로 변경해줌.

🤔 헷갈렸던 점

• App.vue에 <router-view />만 넣어도 됨.

• workspace.js에서 state에 데이터를 전달할 때, 전달받는 대상을 있는 대상으로 명시해야 함. ex) commit("assignState", {result: res,});