JSON export/import

이번에는 저장입니다.

열심히 만든 에디터가 새로고침 한 번에 모든 것을 잃어버리면 꽤 슬픕니다. 그래서 모델을 JSON으로 내보내고 다시 불러올 수 있어야 합니다.

여기서 중요한 원칙이 하나 있습니다. 저장 포맷은 DOM이 아니라 모델을 기준으로 해야 합니다.

DOM이 아니라 의도를 저장한다

node = { id, type, parentId, transform, size, style }
matrix 또는 decomposed transform 중 하나를 canonical form으로 정한다.
versioned migration: v1 -> v2

저장은 DOM이 아니라 모델을 직렬화하는 일입니다. version, node id, parent, transform, style처럼 다시 렌더링 가능한 의도를 남깁니다.

DOM style은 렌더링 결과입니다. JSON에는 오브젝트의 구조와 의도를 저장해야 합니다.

좋은 저장값: id, type, parentId, transform, size, style
나쁜 저장값: DOM node reference, hover state, temporary drag state

matrix를 그대로 저장할지, x/y/rotation/scale로 분해해서 저장할지는 canonical form을 정해야 합니다. 둘을 섞으면 import/export 때 오차와 정책 충돌이 생깁니다.

저장 포맷은 바뀝니다. 기능이 늘어나니까요. 그래서 version 필드를 둡니다.

{ "version": 1, "nodes": [] }

나중에 v2가 되면 migration 함수를 추가합니다.

v1 -> v2
v2 -> v3

지금의 내가 version을 넣어두면 미래의 내가 고맙다고 합니다. 미래의 내가 직접 찾아와서 인사하진 않겠지만, 빌드가 덜 깨집니다.

데모에서는 현재 상태를 JSON으로 내보내고 다시 불러왔을 때 화면이 재현되는지 확인합니다.

오늘의 핵심은 JSON을 CSS 문자열 묶음으로 만들지 않는 것입니다. 내부는 구조화된 모델로 유지하고, CSS string은 렌더링 경계에서만 생성하는 편이 좋습니다.