최근 css/js로 애니메이션 효과를 넣는게 재미있어서 이것저것 만들어 보다가 리더보드를 만들면 어떨까 생각했다. 처음에는 깔끔한 UI로 구성된 Vue 컴포넌트를 만드려고 했는데 실시간 순위라는 주제가 공부해볼만한 내용인 것 같아 백엔드/프론트엔드 모두 구현해보려고 한다. 일단 어떻게 진행할지 간단히 기획해 봤다.
- 순위가 변하는걸 보여주는 Vue 컴포넌트 구현
- 유저, 점수 데이터를 조회하는 API 구현
- 실시간으로 점수 변동이 반영되도록 Vue 컴포넌트 수정
실시간에 대해서는 좀 더 시나리오를 고민해봐야겠다. 점수 변동이 있을 때마다 반영된 데이터를 보여줄지, 일정 시간마다 조회할지에 따라 백엔드 구현이 달라질 것 같다.
기술 스택은 Springboot, Vue.js를 사용하고 필요하면 redis를 추가할지도 모른다.
일단 프로젝트를 생성하고 간단히 순위 변동 애니메이션을 적용해봤다. 디자인은 다른 레퍼런스들 참고하면서 조금씩 수정해야겠다…
Vue의 Transition컴포넌트를 사용해서 애니메이션 효과를 추가했다.
다음 조건이 충족될 때 애니메이션이 발생한다.
- `v-if`를 통한 조건부 렌더링
- `v-show`를 통한 조건부 표시
- 스페셜 엘리먼트 `<component>`를 통해 전환되는 동적 컴포넌트
- `key`라는 특수한 속성 값 변경Transition 컴포넌트를 사용할 때는 진입/진출에 대해 이해하고 있어야한다. 엘리먼트가 표시되는 과정, 사라지는 과정에 대해 정의된 클래스들이 있다. 여기에 css로 애니메이션을 정의하면 엘리먼트가 등장하거나 사라질 때 애니메이션 효과가 발생한다.
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}트랜지션 효과의 이름을 지정해 적용할 수 있는데 자세한 내용은 공식 문서에 잘 설명되어있어서 도움이 많이 됐다.
리더보드에서 이름, 점수를 표시하는 컴포넌트를 만들고 v-for로 다중생성하는 형태로 구성했다. `Transition`은 하나의 엘리먼트에만 적용할 수 있어서 사용할 수 없고, 대신 사용할 수 있는 `TransitionGroup`이 있다.
<TransitionGroup name="slide">
<div v-for="row in rows"
:key="row.id">
<div>
{{ row.name }}
</div>
<div>
Score : {{ row.score }}
</div>
</div>
</TransitionGroup>
트랜지션을 넣어서 순위 변화 애니메이션을 추가했다.
 |
 |