라이브러리 개발기 (1) — 주제 선택

라이브러리를 직접 만들어보고 싶다는 생각은 꽤 오래전부터 있었다.

npm install 한 줄로 무언가를 가져다 쓸 때마다 "이걸 만든 사람은 어떻게 만든 거지?" 하는 궁금증이 생기곤 했는데,

이번에 편의성을 증진시킬 방법을 떠올리게 되면서 제대로 배워보고자 기획하게 되었다.

개발 계기

여러 React 프로젝트를 거치며 Redux와 Context API말고도 Zustand를 꽤 자주 사용했었다.

Redux보다 가볍고 보일러플레이트도 간단하고 적어서 마음에 들었는데, 한 가지 불편한 점이 있었다.

상태가 복잡해지면 디버깅과 관리가 은근히 브라우저와 IDE를 오고가며 번거로웠던 것.

Redux DevTools처럼 Zustand도 DevTools 미들웨어가 있긴 한데, 막상 쓰다 보면 그냥 상태값을 보여주기만 한다.

"이 값이 지금 왜 이렇게 바뀌었지?" 를 추적하려면 결국 console.log를 뿌려가며 앱 전체를 다시 조작해야 한다.

특정 상태만 딱 꺼내서 값을 바꾸고 바로 테스트하고 싶은데, 그게 여간 손을 많이 탔다.

그러다가, redux Devtools처럼 그래프나 상태값 추적을 편하게하고, 가시성있게 보면서도, 이를 GUI로 편하게 생성 과정을 추상화하면 DX로도 훌륭한 툴이 되지 않을까 라는 발상을 하였다.

또 UI툴인 Storybook이 UI 컴포넌트를 격리해서 여러 상황에 맞게 독립적으로 테스트하듯이, 상태 로직 또한 격리해서 독립적으로 수정이나 조작할 수 있는 도구가 있으면 좋겠다고 생각했다.

기획 첫단계 - 아이디어 구체화

이름은 일단 Z-UI 라고 붙였다. (Zustand + UI)

GUI와 같이 "Zustand 상태를 GUI로 편하게 보고 실시간으로 함께 편집-확인 및 테스트 할 수 있는 개발자 도구" 다.

구체적인 기능 아이디어는 다음과 같다.

• Store Registry — Zustand 스토어를 등록하면 상태와 액션을 함께 내보내게 하여 development 환경에서 개발자가 선택적으로 스토어를 관리하게끔 한다.
• State Tree — 등록된 상태들을 트리 형태로 시각화
• Real-time 편집 — GUI에서 값이나 store를 바꾸면 즉시 앱과 로컬에 반영
• State Snapshot — 원하는 상황에 맞는 상태를 저장했다가 이후 스냅샷 별로 확인할 수 있는 기능

앱을 켜놓고 브라우저 GUI 패널에 Z-UI를 띄워두면, 특정 상태를 직접 조작하면서 UI 변화를 확인할 수 있는 그런 환경을 만들고 싶었다.

기존 도구와 다른 점

Zustand DevTools가 있는데 굳이 이걸 만드는 이유를 스스로에게 물어봤다.

가장 큰 차이는 읽기 전용이냐 쓰기 가능이냐 의 차이다.

기존 DevTools는 상태를 관찰하는 데 초점이 맞춰져 있다.

값이 어떻게 변했는지 로그를 보여주는 것까지는 잘 해준다.

반면 내가 만들고 싶은 건 상태를 직접 주입하고 조작하는 것, store, state를 GUI에서 별도 코드 복사없이 생성하는 것이다.

특정 노드 값을 클릭해서 수정하고, 그 변경이 앱에 즉시 반영되는 경험.

GUI에서 store와 state 설정과 입력을 간단하게 한 뒤 빠르게 앱에서 state 시뮬레이션을 하는 경험.

Redux DevTools에서 "Dispatch" 탭으로 액션을 직접 날리는 것과 비슷한 느낌이지만, 훨씬 더 직관적이고 쉬운 인터페이스를 만들고자 한다.

솔직한 걱정

이미 비슷한 게 있으면 어떡하지? 라는 걱정도 있었다.

찾아보니 비슷한 개념의 도구가 아예 없는 건 아니었다. 그래도 Zustand에 특화되어 있고, 스토리북의 구동 형식으로 별도의 서버로 뜨는 형태는 딱히 없어 보였다.

설령 비슷한 게 있다 하더라도 직접 라이브러리 하나를 만들어보는 과정 자체가 목적이라 크게 상관없다고 생각했다.

라이브러리 구조를 어떻게 잡아야 하는지, 번들러는 어떻게 설정하는지, 사용자 앱과 어떻게 통신하는지... 이런 것들을 배우는 게 이번 기획의 진짜 목표이다.

다음 포스팅에서는 모노레포 구조를 어떻게 잡았는지, 어떤 라이브러리를 썼는지 정리해볼 예정이다.