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

프로젝트 내 모달을 닫을 때 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를 여러 플랫폼에서 재사용할 수 있다...

회사에서 개인의 기술 성장을 위하여 3주에 1번씩 사내 기술 세션 발표가 열리는데, 비록 2주차였지만 더욱 몰두하고자 자원하여 발표한 사내 기술 세션 발표 내용입니다.최근에 회사에서 새로운 기능을 개발하면서, 자연스럽게 react-hook-form을 처음 접하게 되었습니다. 처음엔 단순히 폼 상태를 다루기 위한 도구 정도로 생각했지만, 실제로 기능을 만들다 보니 생각보다 많은 개념들이 녹아 있었고, 특히 "렌더링 최적화" 관점에서 매우 중요한 포인트들이 존재한다는 걸 알게 되었습니다. 이 최적화를 진행한 배경이 기능은 고객에게 직접적으로 맞닿는 인터페이스가 아니었기 때문에 백오피스 성능이 상대적으로 중요하지는 않았습니다. 하지만 react-hook-form 라이브러리를 사용하면서 고객의 데이터를 입력한 ..