Vue로 영화 검색 페이지 만들기 학습을 하며 어려웠던 점 모음

https://omdbapi.com/
위 사이트의 API를 이용해 영화 검색 웹을 만들고 있는 중이며 어려웠던 점을 하나씩 기록하려 한다.

Key 은닉을 위해 서버리스 함수 사용을 위해 vercel이용!

만약에 key 은닉을 하지 않는다면....
network를 살펴보면 내가 사용한 key가 그대로 드러남을 알 수 있다.. 😭

원래는 서버에서 처리를 해줘야하지만 현재로선 서버에서 처리해줄 수 없기 때문에 vercel을 대신 사용했다.

이때 나는 axios 사용을 했다.
get에 데이터를 전송해야했기 때문에 처음엔 get에 데이터를 어떻게 넣지...? 하며 아무것도 모르는 상태라 검색을 해봤더니
params를 이용해 전송함을 알고 적용해보았다.
완성된 코드는 아래와 같다.

//src/store/movie.vue
import axios from "axios";
import { defineStore } from "pinia";

export type searchResult = Search[];
export type totalMovies = Movie[];
export interface Movie {
  Search: Search[];
  totalResults: string;
  Response: string;
}
export interface Search {
  Title: string;
  Year: string;
  imdbID: string;
  Type: string;
  Poster: string;
}

export const useMovieStore = defineStore("movie", {
  state: () => ({
    movies: [] as searchResult,
    total: [] as totalMovies
  }),
  getters: {},
  actions: {
    async fetchMovies(title: string) {
      const { data } = await axios.get("/api/movie", {
        params: {
          title: title
        }
      });
      this.total = data;
      this.movies = data.Search;
    }
  }
});

//api/movie.vue
import axios from "axios";
import type { VercelRequest, VercelResponse } from "@vercel/node";

const { APIKEY } = process.env;
interface RequestBody {
  title: string;
  page: number;
}

export default async function (req: VercelRequest, res: VercelResponse) {
  const { title = "", page = "1" } = req.query as Partial<RequestBody>;

  const { data } = await axios.get(
    `https://omdbapi.com/?apikey=${APIKEY}&s=${title}&page=${page}`
  );
  console.log(data);
  res.status(200).json(data);
}

반응형으로 포스터 자유롭게 줄어들게 만들기!

display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

auto-fill이 핵심.
https://goddino.tistory.com/246

footer 하단 고정이 잘 안된다..!!

아래의 블로그 링크를 통해 해결 완료
https://velog.io/@gomiseki/footer-%ED%95%98%EB%8B%A8-%EA%B3%A0%EC%A0%95

이미지가 존재하지 않을 때

삼항 연산자로 이미지 링크가 "N/A"일 때 이미지가 존재하지 않는 이미지 링크 제공

이미지 리사이징 관련 자료

https://medium.com/daangn/lambda-edge%EB%A1%9C-%EA%B5%AC%ED%98%84%ED%95%98%EB%8A%94-on-the-fly-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%A6%AC%EC%82%AC%EC%9D%B4%EC%A7%95-f4e5052d49f3

페이지네이션 참고

https://19-97.tistory.com/130