오징어게임 프로젝트

라우터 뷰 페이지 트랜지션

<router-view v-slot="{ Component }">
  <transition name="fade">
    <component :is="Component"></component>
  </transition>
</router-view>

.fade-enter {
  opacity: 0;
  transform: translateX(100px);
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease-out;
}

.fade-leave-to {
  opacity: 0;
  transform: translateX(-100px);
}

원래는 <transition> 태그 안에 <router-view>가 들어가야한다.
이유를 찾지 못했지만 트랜지션이 작동을 안해서 <router-view> 안에 빈 <component>를 넣어 뷰 라우터와 연결시켜 트랜지션 효과를 주었다.

작동 안한 이유를 찾기 위해 시도해봐야 하는 것!

vue-cli 버전과 router-view 버전 맞추기

현재 vue-cli는 2.x 버전, router-view는 4.x 버전
vue-cli 3.x 버전으로 업데이트해서 다시 시도해 볼 것!!!

회고

3일 내내 트랜지션이 왜 안되는지 고민했는데 팀원과 코드리뷰를 통해 힌트를 얻었다. 버전 문제일거라고 생각도 못했는데 팀원의 말을 듣고나니 시도해볼만 했다.
확실히 모르는게 너무 많다 하하..
또한 깃 공부를 확실히 해야할 것 같다. CLI로 다루는 법을 아예 몰라서 너무 부끄러웠다.
이번 주말에 리액트 강의 완강, 깃 공부 두 개를 목표로 불태워야지🔥