Project URL
Github Repository
Description
기능
Trump card를 랜덤하게 섞을 수 있고, 한 장씩 뽑을 수 있는 앱입니다. 이전에 뽑은 카드로 돌아갈 수도 있습니다.
개발 목적
운동 루틴을 찾아보다가 Deck of pain rep이라 불리는 운동 세트법을 알게 됐습니다.
Trump Card를 섞은 후 한 장씩 뽑으면서 나온 카드대로 운동을 수행 하는 운동법인데, 집에 trump card가 없어서 trump card를 섞고 한 장씩 뽑을 수 있는 앱을 간단하게 만들어 봤습니다.
Tools
- React
- Typescript
최근에 typescript를 공부하고 싶어서 일부러 이번 앱은 react, typescript를 사용하여 개발해봤습니다.
구현
시작 전에는 간단하게 생각했는데, 예상보다 막히는 부분이 많았습니다.
카드를 뒤집는 애니메이션
카드를 뒤집는 애니메이션을 구현하는 부분이 꽤 까다로웠는데, 이번에 처음으로 css의 ‘backface-visibility : hidden‘이라는 기능을 알게 됐습니다. 이 기능은 element가 rotate되면 보이지 않도록 하는 기능입니다.
카드뒷면의 패턴과 카드 앞 이미지를 postion absolute로 겹친 상태로 놓은 후, 앞면과 뒷면에 모두 backface-visibility:hidden 속성을 부여해줍니다. 이때 앞면은 기본적으로 180도 rotate 시켜놓아 보이지 않게 해주고, 버튼을 클릭했을 때 뒷면을 rotate하고 앞면을 0도로 돌려놓게 코딩해주면 자연스럽게 카드가 뒤집어지는 애니메이션을 구현할 수 있습니다.
54장의 카드 렌더링
트럼프 카드는 조커 2장을 포함해서 총 54장입니다.
저는 각 카드마다 css의 z-index 값을 설정하여 54장의 카드들이 겹쳐져 있도록 만들었습니다. 그런데 여기에 뒷면의 이미지까지 포함하면 총 108개의 image element들이 겹쳐있는 상태가 됩니다. 이 부분이 비효율적이라고 느껴서 7장의 카드를 뽑을 때 마다 뽑힌 카드 더미 중 가장 아래에 있는 카드를 hidden하도록 코딩했습니다. 그래서 뽑힌 카드 더미는 항상 7장의 카드만 겹쳐있도록 하여 속도를 높였습니다.
