Overview
Resizable split panels + Drag & Drop dynamic splits for React
@byeolnaerim/flex-layout은 리사이즈 가능한 분할 패널 UI와 Drag & Drop 기반의 동적 분할을 빠르게 구성하기 위한 React 컴포넌트입니다.
예를 들어 왼쪽은 상점 상품 목록 뷰, 오른쪽은 실제 착용 프리뷰를 보는 뷰로 화면을 구성하려는 요구가 있을 때, 그리고 각 뷰가 리사이즈 가능해야한다는 요구가 있을 때 이 라이브러리는 좋은 아이디어를 제공할 수 있습니다.
Origin story
최초의 @byeolnaerim/flex-layout은 제가 2년차 개발자였을 당시, 개인 프로젝트로 vanilla js 기반의 비즈니스용 메신저를 만드려고 했을 때 탄생했습니다.
저는 그것이 마치 슬랙이나 vscode처럼 각 구성간에 서로 리사이즈가 되길 원했습니다. 제게는 vscode의 왼쪽 뷰 구성이 멋있어 보였기 때문에 제가 만든 것이 vscode와 유사하게 동작하길 원했습니다.
시간이 지나, 저는 리엑트에 처음 입문하면서 이것을 typescript, rxjs, react 기반의 컴포넌트로 다시 만들었습니다. 드래그로 리사이즈 가능한 기존 레거시의 분할 뷰 기능에서, "마치 vscode와 거의 유사하게 동작하길 원한다."는 저의 과거 철학을 위해 Drag & Drop으로 동적 분할 뷰를 만드는 기능까지 확장시켰습니다.
Grow Normalization
@byeolnaerim/flex-layout을 처음 만들 당시 저는 flex-grow를 상위 레이아웃FlexLayout 기준으로 자식 컨테이너FlexLayoutContainer 개수를 전체 grow의 상한으로서maxGrow, 각 컨테이너의 비율을 그 안에서 정규화normalize해서 배분해야하는 개념으로 이해했었습니다. (이는 잘못된 해석이었습니다.)
예를 들어 자식 컨테이너가 2개면 max grow는 2, 비율이 30% / 70%라면 실제 grow는 0.668 / 1.332이어야 한다고 생각했었고 그 가정하에 보정 로직들이 쌓여 지금의@byeolnaerim/flex-layout이 되었습니다.