본문 바로가기
728x90

TECH49

useOptimistic: React 19의 새로운 기능 🆕 React 19에서 새로 추가된 기능 중 useOptimistic이 있다. useOptimistic는 낙관전 UI 업데이트 (Optimistic UI Update)를 쉽게 구현할 수 있는 훅이다. 이 기능은 서버 응답을 기다리지 않고 UI를 먼저 업데이트하여 사용자 경험 (UX)을 개선하는 데 초점을 맞춘다. 예를 들면, 좋아요 버튼을 클릭했을 때 서버 응답이 느리더라도 UI는 즉시 반응하도록 하는 방식이다. useOptimistic란? 목적: 비동기 작업 (예: 네트워크 요청)이 완료되기 전에 UI를 예상 결과로 업데이트 자동 롤백: 요청이 실패하면 낙관적 상태는 원래 상태로 자동 복구const [optimisticState, addOptimistic] = useOptimistic( state, .. 2025. 12. 17.
검색 파라미터 🔍 검색 파라미터는 사실상 UI 상태를 직렬화한 표현이다.예를 들어, 사용자가 상품 목록을 보고 있을 때 필터: filter=active 정렬: sort=asc 페이지네이션: page=2 이 값들이 URL에 들어가면 아래와 같은 장점이 생긴다. 브라우저 히스토리 지원: 뒤/앞으로 가기 시 동일한 상태를 복원할 수 있다.딥링크 가능: 특정 상태를 URL로 공유하면 다른 사용자가 동일한 화면을 볼 수 있다.공유 가능: URL을 복사하여 다른 사용자에게 보내면 동일한 필터와 정렬 상태가 유지된다. 왜 대부분의 앱은 문자열 파싱에 의존할까? window.location.search나 URLSearchParams로 접근하는 방식이 대부분이다.이 방식은 단순하지만 한계/문제가 있다. 타입 안전성 부족 모든 값이 문.. 2025. 12. 15.
5가지 노드 버전 관리자 비교 현재 기준, 많이 사용되거나 한 번쯤 들어봤을 노드 버전 관리자 NVM (Node Version Manager) N FNM (Fast Node Manager) PNPM Volta 내가 프로젝트 도중 투입이 되어 GIT에서 코드를 PULL 받고 실행해보려고 하는데 Node 버전 관련해서 오류가 뜨면서 실행하는 데 오래걸렸던 기억이 있다. 이유는 Node 버전이 안맞아서 (내가 낮은 버전을 사용하고 있어서) 그런거였는데 사소한 거지만 개발하는데 귀찮은 요소 중 하나이긴 하다. 검색을 하다 노드 버전 관리자를 알게 되었는데 Node.js의 버전을 쉽게 전환할 수 있도록 도와주는 셸 도구이다.그때에만 해도 NVM만 알고 있었지 이렇게 많은 종류가 있는지는 PNPM으로 프로젝트를 작업하게 된 후 알게 되어 이 .. 2025. 12. 4.
아이콘 현지화 (localization) 각 나라마다 제스처가 다른 의미를 가질 수 있다. 예를 들면, 손을 흔드는 행위 👋🏻 즉, 안녕/잘가의 의미인 이 제스처는 대부분의 나라에서는 인사의 제스처로 통하지만 그리스와 나이지리아, 인도에서는 모욕적인 의미와 경고/주의, 그리고 상대를 내쫓는 의미를 담고 있다. 문화적 차이처럼, 시각적 상징이 지역마다 전혀 다른 의미를 가질 수 있다.즉, 단순한 아이콘조차 국가/문화에 따라 인사 -> 모욕 -> 추방의 의미까지 바뀔 수 있다. 이렇게 되면 사업을 하는 사람이면 수입이 감소할 것이고, 국가적인 행사라면 국가의 체면이 깎이게 될 것이다. 언어나 행동, 텍스트, 번역 등은 그나마 신경쓰고 있지만, 아이콘은 이들보다 훨씬 간과된다.하지만, 아이콘이야 말로 사용자 경험과 브랜드 인식에 매우 큰 영향.. 2025. 12. 2.
728x90

티스토리툴바