스켈레톤 UI 구현하기!

🚀 스켈레톤 UI 구현하기

• 해당 컴포넌트들이 데이터를 받아오고, 다 받아온 뒤 렌더링하기 전까지 youtube의 회색화면처럼 구현하기

🚀 어떻게 구현할 것인가?

기본적으로 미리 보여줄만한 것들은 카드UI들과 디테일 페이지 이 2가지가 전부다 React-query로 데이터를 전부 받아온 뒤에 보여주고자 했던 것들을 보여주게끔 만들면 될 것 같다. 기본적으로는 스켈레톤이라는 컴포넌트를 만들고, props값으로 css를 설정해보겠다.

라는 생각을 했었는데, 각각 UI가 다르기 때문에 공용컴포넌트를 사용할 수 가 없었고 개별 컴포넌트를 만들어 적용시켰다.

🤔 적용 과정

처음에 진행할때는, 회색 화면만 나오게 하면 되겠다 라는 생각에 진행을 했었는데 그러다보니 나온 결과의 UI와 맞지 않는 상황이 발생해 버렸다.

이런식으로 스켈레톤에서는 작고 실제에서는 커지는 상황이 발생해버려서, 아예 원본 것과 같지만 내용만 없게끔 적용하여 만들었다. 그러다보니 컴포넌트를 나누는 것 이것 저것 신경쓸게 많아졌고, 실제로 tailwindcss로 하다보니 className가 신경쓰여서 움직이는 봉을 아예 컴포넌트화 시켜버렸고, 애니메이션 효과는 tailwindcss config에 등록해서 적용시켰다.

✅ 완성모습!

이렇게 적용을 해보았는데, 아무래도 카드UI쪽은 개별적으로 데이터를 받아와 실행하기 때문에 시간차가 생긴 것 같다. 이 부분은 전체적으로 한번에 묶어서 코드를 짜보면 좋을 것 같다.