기초 개발 노트

최근 POS 시스템을 개발하면서 Zustand를 상태 관리 라이브러리로 사용했다. 이 과정에서 특정 상황에서 메뉴 데이터가 제대로 로드되지 않는 문제를 발견했다. 특히, 스토어 전환 후 currentMenus가 빈 배열로 남아 있거나, 결제 후 /pos 페이지로 돌아올 때 카테고리와 메뉴가 사라지는 현상이 발생했다. 이 문제를 해결하기 위해 캐시 로직을 점검하고 수정했다. 이번 글에서는 그 과정을 정리하고, Zustand 캐시 문제를 해결한 방법을 공유하고자 한다. 문제 상황POS 시스템에서 사용자는 로그인 시 storeId를 선택하고, 해당 스토어의 카테고리와 메뉴를 로드한다. Zustand 스토어(usePosStore)에서 fetchMenusByCategory 함수를 통해 메뉴 데이터를 가져오고, 이..

Kanban 보드에서 editMode, deleteMode, errorMode를 버튼(✏️, 🗑️, ⚠️)으로 전환할 때, editMode가 켜진 상태에서 다른 모드를 클릭하면 editMode가 꺼지지 않고 유지되었다. 또한, deleteMode나 errorMode에서 다른 모드로 전환할 때 editMode가 불필요하게 켜지는 현상이 발생했다.원인 분석Zustand 스토어의 toggleEditMode, toggleDeleteMode, toggleErrorMode 함수는 개별적으로 상태를 토글하도록 설계되었으나, KanbanHeader의 onClick 핸들러에서 다른 모드를 명시적으로 끄는 로직이 불완전했다. 예를 들어, toggleDeleteMode 호출 시 if (errorMode || editMod..

React에서 상태를 관리할 때 useState나 useStore(Zustand)를 사용할 경우, 브라우저 새로고침 후 상태가 초기화되는 문제가 발생할 수 있다. 특히, Supabase와 같은 외부 데이터베이스에서 데이터를 불러와 Zustand에 저장한 후 사용할 때, 새로고침을 하면 UI에는 데이터가 없지만, Supabase에서 데이터를 다시 불러와야 하는 상황이 반복될 수 있다.이 문제는 클라이언트 사이드에서만 데이터를 가져오도록 설정했기 때문에 발생했다. Next.js의 App Router에서는 클라이언트 컴포넌트가 처음 렌더링될 때 상태가 초기화되며, 서버에서 데이터를 미리 가져오지 않으면 클라이언트가 비어 있는 상태로 시작하게 된다.발생한 문제Zustand를 이용해 보드 목록을 상태로 저장하고 ..

React에서 상태를 관리할 때 useState를 사용하면 비동기 업데이트로 인해 최신 값이 반영되지 않는 경우가 있다. 특히, 디바운싱을 적용한 비밀번호 입력에서 setState가 지연되면서 서버로 전송되는 값이 최신 값이 아니라 이전 값(3글자)만 전송되는 문제가 발생했다. 처음에는 setTimeout을 추가해서 상태가 업데이트될 시간을 주려고 했지만, 여전히 최신 값을 보장하지 못했다. 그래서 Zustand를 활용하여 전역 상태로 관리하면 해결될 것 같았다. 하지만 처음 시도한 방식으로는 상태가 여전히 클로저에 묶여 있고, 제출 시점에서 최신 상태를 반영하지 못하는 문제가 있었다.  비밀번호 입력 로직에서 useState를 사용하면 다음과 같은 문제가 발생한다.setPassword(val) 호출 시..

최근 프로젝트에서 헤더에 있는 플러스 버튼으로 그리드 레이아웃(예: 9열, 3열, 1열)을 전환하는 기능을 구현하려고 했다.처음에는 Home 컴포넌트 내부 상태만 바꾸면 되겠다고 생각해서 Home 컴포넌트에서 gridState라는 useState를 만들어 관리했는데, 막상 헤더에서 plus 버튼을 누르면 이 상태가 업데이트되지 않아 그리드 전환이 되지 않았다.처음엔 Prop Drilling으로 해결할까 했지만 구조가 복잡해질 것 같았다. 차라리 글로벌 상태 관리 라이브러리를 써보자 싶어서 Zustand를 도입했다. 써보니 Redux처럼 많은 보일러플레이트가 필요 없고, 훨씬 간단했다.대략적인 구현 과정은 이랬다:useGridStore.ts 파일을 만들고, gridState(예: "grid9", "grid..