json-editor 1.0 🪴 붉은거위 노트 / GoOSe Note

json 에디터가 어짜피 필요한 모듈이고하니 리메이크 하고자 한다.
저장소는 그대로 사용하고 버전은 1.x대로 판올림할 생각이다.

새로운 버전의 목표

새로 만들면서 개선같은 수준으로 만들 요소들은 다음과 같다.

UI가 나아질 수 있는지 찾아보기
자식이 여러가지 요소가 있으면 범위가 어디까지인지 알아볼 수 있으면 좋겠다.
타입이 어떤건지 알아보기 쉬웠으면 좋겠다.
편집의 완성도가 좀더 올라갔으면 좋겠다.
웹 컴포넌트 (다양한 환경에서 사용 가능했으면 좋겠다.)

기술스택

현재 버전은 jquery 베이스로 만들어졌는데 이번에는 결과물을 웹컴포넌트로 만드는게 최우선이다.
아무래도 컴포넌트 크기가 클거 같은데 이것들을 파일 하나로 압축하고 외부에서 사용할 수 있어야 하는것이 목표다. 그래서 일단은 svelte로 만들어 보고자 한다.

3개의 댓글

작업중 근황..

svelte로 웹 컴포넌트 만드는 방법에 대하여 상당히 많이 이해하게 되었다. ㅎㅎ
이런게 웹 컴포넌트로 사용할 수 있으면 상당히 가치있을 것이다.
최근에 json-editor들을 좀 찾아보니 에디터가 죄다 못생겼던데 이건 예전에 만들었던 시절이랑 별반 차이도 없더라..

https://github.com/fabiospampinato/cash

순수하게 자바스크립트로만 dom을 조작하기 힘들어서 결국 jquery 같은것을 쓰고만다.
처음 svelte로 웹 컴포넌트로 제작해보려고 시도했지만 결국 빌드된 용량문제에서 좌절..

svelte가 기초적인 용량이 높은 상태에서 시작하면 그런대로 괜찮겠지만 컴포넌트가 늘어날때마다 늘어나는 용량폭이 커진다는걸 깨닫고는 일반적인 자바스크립트로 다시 작성할까 고민을 많이하게 되었다.

현재는 cash-dom 정도만 사용하는 수준으로 다시 코드를 작성하고 있다.

기초적인 부분은 대부분 작업 끝냈다.
이제 sort 기능을 구현해야 하는데 이게 상당히 공을 들여야 할법하다. 아직 본격적으로 손대보진 못했지만 꽤 복잡할지도..
가장 큰 관건이 드래그하고 드롭할 위치를 표시하는 것이다. ㅠㅠ