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

🚩 목표

🦴 구조

• 검색창 (header)

• 검색 결과

• 상세 페이지

🤙 API 호출

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

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

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

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

⛓️ 라우팅

• import router from "~/routes";

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

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

🔄 로딩바

1. 로딩 컴포넌트 생성.

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,});