백오피스에서 기존 HTML 렌더링 방식에서 react-quill 텍스트 에디터 도입 과정에서 마주한 예상치 못한 문제들과 해결 과정을 공유한다. 텍스트 에디터 도입 배경현재 백오피스에서는 서버에서 HTML 태그를 함께 내려주는 화면이 존재했다. 기존 방식은 조회 시에는 프론트에서 HTML을 렌더링하지만, 수정 시에는 HTML 태그가 그대로 노출된 상태로 편집해야 하는 불편함이 있었다.해당 공통 컴포넌트는 다른 곳에서도 사용되고 있었는데, 조회 후 수정하는 방식이 아닌 새로 작성하는 템플릿에 대해서 텍스트 에디터가 필요하다는 니즈가 생겼다. 기본 기능들만 필요했고, 개발자가 사용하기 편리한 rich text editor 중 하나인 react-quill을 도입하게 되었다. 첫 번째 이슈: "들여쓰기가 안되었..

모달 내에서 조회 API를 호출하며, 확인 버튼 동작에 invalidateQueries를 넣어두었다. 원래 의도는 새모달을 열 때마다 새로운 GET API 호출을 보장하는 것이었지만, 실제로는 확인 버튼 직후 곧바로 API가다시 fetch되는 의도하지 않은 동작이 발생했다. 이 과정을 통해 TanStack Query의 캐시 전략에 대해자세히 이해하는 과정이 되었다.결국 invalidateQueries, refetchQueries, removeQueries가 단순히 “다시 불러오기”가 아니라 각기다른 캐시 동작을 가진다는 걸 알게 되었고, 그 차이를 비교하게 되었다. invalidateQueries단순히 “쿼리를 무효화해서 다시 호출한다” 정도로만 이해했는데, 핵심은 stale 표시라는 걸 알게• 특정 q..

프로젝트 내 모달을 닫을 때 useOverlay로 만든 컴포넌트가 언마운트되지 않아, invalidateQueries가 즉시 실행되는 문제가 있었다. 사용처 코드를 손대지 않고 기존 구조를 유지하면서, close 시점에 overlay를 바로 제거하도록 수정해 원하는 동작(닫을 때 언마운트 → 다시 열릴 때 refetch)을 만들었다. 작업 배경모달을 닫을 때 invalidateQueries를 호출하도록 했다. 의도는 이랬다.모달을 닫으면 쿼리를 stale 상태로 만든다.이후 모달이 다시 열려 컴포넌트가 마운트될 때 자동으로 refetch가 실행된다.하지만 실제 동작은 예상과 달리, 모달을 닫는 순간 refetch가 바로 실행되었다. 문제 원인useOverlay 훅을 디버깅해보니, close를 호출해도..

해외주식 백오피스를 개발하면서 사용된 Server Driven User Interface (SDUI)의 개념, 예시, 개발자 관점, 활용 경험에 대해 정리했다. SDUI는 화면 구조와 속성을 서버에서 정의하고 클라이언트가 해석하여 UI를 렌더링하는 방식으로, 웹/앱 배포 없이 서버 수정만으로 UI 변경이 가능하다. 1. SDUI란? (Server Driven UI)SDUI는 화면 구조와 속성을 서버에서 정의하고, 클라이언트가 해석하여 UI를 렌더링하는 방식이다. 웹/앱 배포 없이도 서버 수정만으로 UI 변경이 가능하다.서버가 JSON 스키마를 내려주면, 프론트엔드는 이를 컴포넌트로 매핑해 화면을 그린다.앱 배포 없이 서버 수정만으로 UI 변경이 가능하고, 동일 API를 여러 플랫폼에서 재사용할 수 있다...