[스켈레톤 UI] - 화면 깜빡거림 해결 (3차 팀프로젝트 리팩토링 #첫 번째) ⚙️
- 프로젝트/팀프로젝트
- 2024. 10. 10.
간략한 팀프로젝트 소개
- 카카오 지도 api를 이용한 등산 관련 커뮤니티 플랫폼
- 특정 산에 같이 등산할 사람을 모집하고, 신청할 수 있다. (벙개)
💡 화면 깜빡거림
벙개 상세페이지에서 필요한 api 데이터는 다음과 같다.
- 상세 페이지 데이터
- 상세 페이지 데이터에 등록된 산 데이터
- 상세 페이지 데이터에 등록된 신청자 목록
총 3번의 네트워크 요청을 필요로 한다. 신청자 목록(3번) 같은 경우 join 으로 불러오려 했으나 `json-server`를 사용했고 공식문서를 참조하여 join을 시도해봐도 빈 배열로만 데이터를 불러와지고 해결이 안되어 어쩔 수 없이 한 번 더 불러오는 과정을 거쳤다.
🚨문제점
사용자가 상세페이지를 들어오면 네트워크 요청이 처리되고 리렌더링이 발생하면서 화면이 깜빡거리는 모습을 볼 수 있다. 별거 아닐 수도 있지만 보다보면 생각보다 많이 거슬린다.
💡 해결 방법
생각보다 매우 간단하게 해결했다. 상세페이지와 동일한 UI의 `스켈레톤UI`를 만들어 놓고 `pending` 상태 동안 `스켈레톤UI` 를 렌더링 시켜주었다. 동일한 UI를 뿌려주게 됨으로서 깜빡거리는 현상은 완전히 사라졌다.
📍 변경 목적
실제 서비스처럼 완벽한 웹서비스를 제공할 수는 없었지만 최소한의 디테일은 챙기고 싶었다. 아주 잠깐 깜빡거린다고 서비스에 문제가 생기지는 않지만 당장 개발자인 내 눈에도 거슬리는데 실제 사용자라면 많이 거슬릴 것 같아 해결해보았다.
`로딩 스피너`는 적용해본적이 있지만 `스켈레톤UI`를 적용하는건 처음이다. 하지만 아주 짧은 시간이라면 `로딩 스피너`보다 훨씬 효과가 좋은 것 같다. (스피너는 깜빡거림이 생김) 어떤 상황에 어떤 기법을 사용해야 하는지 바로 감이 와서 만족했던 작업이다.
'프로젝트 > 팀프로젝트' 카테고리의 다른 글
[prefetch] - 화면 깜빡거림 해결 (3차 팀프로젝트 리팩토링 #두 번째)⚙️ (0) | 2024.10.11 |
---|---|
[state 분리] - setState안되는 문제 #React + JS (0) | 2024.10.04 |
[고정값 상수로 만들기] - 1차 팀프로젝트 리팩토링 #다섯 번째 (0) | 2024.08.23 |
[spread & rest] - 1차 팀프로젝트 리팩토링 #세 번째 (0) | 2024.08.21 |
[중복되는 매개변수 제거] - 1차 팀프로젝트 리팩토링 #두 번째 (0) | 2024.08.12 |