Web IDE 개발 시작
CRDT 기술을 다뤄보고 싶어서 코드 편집 페이지를 담당하게 되었다.
이 프로젝트를 개발하면서 IDE를 쓰는데..
내가 사용하고 있는 기능들은 API 만이 아니라 UI 상의 기능도 많다는 것을 인지했다.예를 들면 이런거..
- 사이드 바의 파일 트리 UI 구현
- 파일 노드 오른쪽 클릭 시 컨텍스트 메뉴 UI 렌더링
- 파일 트리 모두 접기
- 드래그로 넓이 조절이 가능한 다단
- 다양한 단축키
- 등
이 시점에 인지한 것도 사실 잘못됐다고 생각했다.
내가 이 페이지에 만들 기능들을 제대로 정의하지 않았기 때문이다.과거에는 이러지 않았는데 지금 이러고 있는 것 보면
익숙치 않은 도메인을 개발해서 그런지 매사 긴장 상태여서
이런 사태를 계속 만든느 것 같다.
사이드 바의 파일 트리 와 컨텍스트 메뉴 UI 렌더링을 제외한
나머지 기능들은 MVP 에 속하지 않았다.하지만 드래그로 넓이 조절이 가능한 다단은 사이드 바와 코드 편집기 사이에서도 사용하고
코드 편집기 내부에서도 파일들을 다단으로 관리하기 때문에
사용할 곳이 많을 것이라고 판단했다.라이브러리를 사용할 생각이었고 나중에 수정하면 꽤나 복잡할 것 같다는 생각에
페이지 프레임워크를 만들 때 바로 넣어야겠다는 생각을 했다.
React 18에 호환되는 라이브러리의 부재
React 18 및 Typescript 를 사용해서 개발하고 있다.
찾은 라이브러리는 대부분 낮은 버전(16)의 React 에 호환된다고 했다.강제로 집어 넣으니 eslint가 일을 너무 열심히 했다..
그래서 React의 버전과 각종 라이브러리의 버전을 낮췄는데
다른 팀원이 개발한 코드가 React 18 전용 코드여서 빌드되지 않았다.진퇴양난 이었다.
필요한 라이브러리 자체 개발
라이브러리를 찾는 시간이 얼마나 더 필요할지도 가늠이 안되고
React 18 버전에 맞는 라이브러리를 찾더라도
그 라이브러리의 대한 러닝 커브가 반드시 필요하기 때문에 직접 만들기로 했다.
내가 원하는 라이브러리의 기능은 다음과 같았다.
- 컴포넌트의 세로 border를 드래그하여 넓이 변경 기능
- 다단에 할당될 각 컴포넌트의 초기 넓이 지정 기능
- 단의 개수는 2개 이상일 수 있음
결과물
맨 마지막 기능을 제외한 나머지 기능은 제대로 동작한다.
하지만 `단의 개수가 3개 이상일 때 원하는 대로 동작하지 않았다.세로줄 드래그시 양 옆 컴포넌트의 가로만 영향을 끼쳐야하는데
다른 컴포넌트의 가로 길이에도 영향을 끼쳤다.그리고 방금 발견한 버그인데 드래그할 때마다 텍스트도 같이 드래그가 된다.
이 버그는 CSS 에 한 줄만 추가하면 해결할 수 있을 것 같다.
프론트엔드 팀장님에게 보고하고 3개 이상의 다단 기능은 나중에 해결하기로 했다.
일단 MVP 를 기준으로 우선순위를 지정해서 필요기능을 먼저 구현하고자 한다.
3중 이상 다단 기능을 해결하면 원본 코드와 해결 과정을 포스팅해놔야겠다.
