ux
-
Zustand stale 플래그와 변경 직전 pre-fetch로 VERSION_CONFLICT 숨긴 작업기React 2026. 7. 13. 19:23
프로젝트 소스 패널에서 폴더를 삭제했을 뿐인데 "잠시 후 다시 시도해 주세요"라는 빨간 토스트가 떴다. 코드를 따라가 보니 서버 응답은 400 VERSION_CONFLICT였다. 우리 서버는 폴더 변경에 낙관적 동시성 제어를 쓴다. 폴더마다 version: number를 들고 있고, 삭제·이름 변경·이동 요청에 내가 알고 있는 expectedVersion을 실어 보내면 서버가 현재 버전과 비교한다. 어긋나면 거부한다. 문제는 사용자 모르게 그 버전이 올라가는 경로가 있었다는 것이다. 외부 소스를 폴더로 적재하는 백그라운드 "불러오기" 작업이 끝나면 서버 폴더 버전이 오른다. 그런데 브라우저 캐시는 옛 버전 그대로다.재현 경로는 이랬다. 사용자가 불러오기를 시작하고, 모달을 닫거나 새로고침하고, 백그라운드..
-
Next.js에서 페이지 전환 효과 간단하게 적용하기Next.js 2023. 9. 4. 17:40
Next.js는 페이지 전환 효과를 기본적으로 제공하지 않지만, framer-motion 라이브러리를 사용하면 쉽게 적용할 수 있습니다. 1. framer-motion 설치 우선, framer-motion을 설치해야 합니다. 다음 명령어를 실행하여 설치합니다. npm install framer-motion // or yarn add framer-motion 2. 페이지 전환 효과 적용 framer-motion을 설치했으면, 페이지 전환 효과를 _App.tsx 페이지에 적용하면 간단하게 끝납니다. import React from 'react'; import { AppProps } from 'next/app'; import { motion } from 'framer-motion'; import { useRo..
-
버튼의 크기는 고정한 채 선택 영역만 늘리기CSS 2022. 10. 26. 17:00
프로젝트를 진행할 때 버튼의 사이즈는 무척 중요한 요소입니다. 특히 모바일이나 태블릿의 경우에는 그 중요성이 더 커진다고 생각합니다. 왜냐하면 PC의 경우 작은 사이즈의 버튼이라도 마우스라는 도구를 이용하기 때문에 상대적으로 정확한 위치를 선택하기 편한 반면 모바일이나 태블릿의 경우 선택의 주체가 대부분 손가락이기 때문입니다. 물론 버튼의 사이즈 자체를 키우는 것이 가장 이상적인 방법이지만 그렇지 않은 경우에 자주 사용하는 팁에 대해 설명해 보겠습니다. const Button = styled.button` position: relative; width: 20px; height: 20px; border-radius: 10px; background: tomato; &::after { content: ""; ..