스토리북 상태 변경 이번 팀 프로젝트를 하면서 미루고 미루던 공통 UI 컴포넌트들을 스토리북을 통해 제공을 하기로 마음을 먹었습니다. 단순하게 컴포넌트에 대한 UI 적인 스토리북을 만드는 것은 정말 많은 곳에서 찾아볼 수 있는데 Controls를 통해 제공하는 상태값을 통해 화면을 핸들링할 수 있는 요소에 대한 예제는 정말 없는 것 같아서 이번 기회를 통해 정리를 해두려고 합니다 😃 1. 컴포넌트 준비하기 일단 요번 예제에서 사용될 컴포넌트 입니다. 토글 형식으로 ON, OFF 상태를 바꿀 수 있는데요 아래의 코드를 보고 어떤 UI를 가지는지 혹시 예상이 가시나요? interface Props { offText: string; onText: string; isToggle: boolean; setToggl..

스켈레톤 UI에 대하여 우리가 흔히 웹사이트나 앱들을 이용하면 서버에서 필요한 응답을 받아오기 까지 시간이 걸리기 때문에 본문 내용 대신 애니메이션이 포함된 로딩되는 화면을 바라볼 때가 많습니다. 지나가며 본 글로 사용자는 3초 이상 빈 화면을 바라보게 되면 페이지를 이탈하게 된다는데 어찌 보면 저도 "이거 왜 이래" 하면서 껐다 켜는 경우가 많은 것 같네요🧐 이를 개선하는 과정에서 SSR, SSG, ISR 같이 여러 노력이 있었지만 결국 클라이언트에서 비동기 데이터가 필요한 시점에서는 이를 해결할 무언가가 필요한 거죠. 로딩 상태를 표현하는 법 우리가 흔히 봐왔었던 로딩 표시는 어떤 것들이 있을까요? 1. 로딩 스피너 2. 프로그래스 바 3. 스켈레톤 UI 그럼 WHY 스켈레톤? 일단 제 마음에 들었습..