Skip to content
Park Hyoin

플레이그라운드

용어 정리 글의 부록으로 만든 인터랙티브 데모. 글로만 보면 추상적인 개념을 직접 만져보면서 익힐 수 있습니다.

UI 용어 playground

열기 →

버튼 상태(default/hover/active/disabled/loading), 애니메이션 property·duration·easing, 모달/토스트/툴팁을 직접 호버·클릭으로 체험.

버튼 상태위계input/card/modal/toast애니메이션durationeasing

DB 용어 playground

열기 →

정규화 Update Anomaly, 1:N·N:M 관계, B-tree 검색 단계, 트랜잭션 rollback, Dirty Read, expand-and-contract 마이그레이션을 시뮬레이션.

정규화관계인덱스 B-tree트랜잭션격리 수준마이그레이션

API 설계 playground

열기 →

REST 메서드와 URL 매핑, 상태 코드 대역, 멱등성 시뮬레이션(POST 재시도), Offset vs Cursor 페이지네이션, 인증(401) vs 인가(403) 흐름, CORS preflight 를 직접 클릭으로 체험.

REST상태 코드멱등성페이지네이션인증/인가CORS

상태 관리 playground

열기 →

Client vs Server state 차이 (새로고침 동작), 장바구니로 derived 상태 자동 계산, 좋아요 버튼으로 optimistic update + 실패 시 롤백, 4가지 캐시 무효화 트리거(이벤트/시간/포커스/수동) 를 직접 클릭으로 체험.

Client/ServerDerivedOptimistic UpdateCache Invalidation