프론트엔드 데브코스 5기 TIL 44(2) - Vue과제 영화검색 사이트 (1)

김영현·2023년 11월 30일

TIL

목록 보기

53/129

서론

역시 트러블슈팅이 많다! 기록으로 남겨보자!
또한 구조 짠것도 기록으로 남겨보자!

구조

검색하면 영화 카드들이 나오고 영화 카드를 선택하면 그 영화의 자세한 설명이 들어있는 페이지로 이동하게 만들것이다.

재사용 가능하게 만들어야겠지?

MovieCards : 검색했을때 나오는 영화 목록
MovieRating : 평점. 영화목록에서도 보여주고싶은데 api구조상 될지 모르겠다.

이렇게 해놓고...UI도 한번 생각해보자

UI설계

UI설계도 은근 까다롭다. 어쩌면 내겐 컴포넌트 설계보다 더 어려운...ㅠㅠ

트러블슈팅 - axios

응답체크

res.ok가 아니라

  const response = await axios({
....
  });

이렇게 받아오면 response.status === 200으로 확인
내부 데이터는 response.data에 있음

post

axios.post로 보내는 것에 유의하자!

트러블슈팅 - TS

여기가 제일 많을 것 같긴했는데, 역시나...! 하나씩 차근차근 해결해보자

빈 객체

빈 객체로 선언한 뒤 api호출로 불러와서 사용하다가, 컴포넌트가 언마운트되면 비워줘야하는 상황이 생겼다. $reset는 OptionsAPI에서 사용하는거니까 기각...
그냥 할당연산자로 빈 객체를 넣었더니, 선언한 타입이 없는 객체를 할당하니 타입 오류가남.
그래서 빈 객체를 유니온타입으로했더니 역시나 안됨.

selectedMovie: movieResponse | Record<string, never>;

요래하니까 됐다. Record의 기능은뭘까? 그리고 왜 빈객체는 안되는걸까?
Record는 객체의 타입을 명시적으로 지정하기위한 유틸리티 타입이다.

트러블 슈팅 - Vue

compositionAPI의 라우터

기본적으로 $달러사인 프로퍼티로 사용하던건 거의 다 함수로 사용한다고 보면됨.

import { useRoute } from 'vue-router';
const route = useRoute();
const router = useRouter();
console.log(route.params.id);
router.push('...')

이런식으로 사용한다!

v-if, v-show

<TheLoader v-if="movieStore.isLoading" />
<RouterView else/>

이렇게 사용했는데, 특정컴포넌트에서 로더와 컴포넌트를 왔다갔따 렌더링발생.
자세히보니 created시점때 movieStore.isLoading = true하는 로직이 존재해서
다시 렌더가 되지 않았던것ㅋㅋ
멍청하다...
그래서 else를 v-show로 바꾸어서씀.
v-show는 display:none만 적용하는 디렉티브다