여둘까 Office Layout 18

여둘까 Office Layout 바로가기 ↗

이 글은 여둘까 Office Layout 시리즈의 19번째 기록입니다. (총 22개)

오늘 한 일

백로그를 정리하고 방향을 확정
- 동시 편집은 접었다 — 파일을 옆에 띄워 두고 쓰는 방식으로 충분하다
- 가구 프리셋 확장보다 도형 프리셋(임의로 그린 모양을 저장)이 더 필요하다는 쪽으로 방향을 바꿨다. 당장은 착수 안 함
- react-konva 이전은 하지 않기로 정하고, 얻는 것·치르는 값·다시 검토할 신호를 문서에 남겼다
화면을 실제로 눌러 보는 자동 점검을 저장소에 넣음
- 명령 하나로 서버와 브라우저를 띄워 40항목을 훑는다. 설치가 필요 없다
- 표본 파일은 저장소에 두지 않고 검사할 때 페이지 안에서 만든다(평면도 이미지는 캔버스로 그리고, 여러 쪽 PDF는 이미 불러와 있는 PDF 도구로 만든다)
2491줄 한 파일을 기능별 모듈 18개로 나눔
- 진입점은 678줄로 줄고, 가장 큰 모듈이 248줄이다
- 단계마다 자동 점검을 돌리고 커밋했다(상태 정리 4단계 + 분리 8단계)
- 빌드는 여전히 없다. 브라우저가 모듈을 그대로 읽는다

막힌 부분

파일을 쪼개기 전에 상태를 먼저 옮겨야 했다

모듈로 나누려는데 곧바로 막혔다. 한 파일 안에서는 축척 = 새 값처럼 그냥 바꿔 쓰던 값들이, 파일을 나누면 바꿀 수 없게 된다. 다른 파일에서 가져온 이름은 읽기 전용이기 때문이다.

그래서 여러 곳에서 바꿔 쓰는 값 스물여덟 개를 상태 객체 하나에 모으는 것부터 했다. 축척 = 새 값이 상태.축척 = 새 값이 되면 어느 파일에서든 바꿀 수 있다.

부수 효과가 하나 있었다. 무엇이 진짜 공유되는 값인지가 드러났다. 옮기다 보니 드래그 중인 시작점, 찍어 둔 측정점, 그리기 시작점처럼 “임시로만 쓴다”고 생각했던 여섯 개가 실은 모듈 경계를 넘나들고 있었다.

해결: 경계를 넘는 것만 상태 객체로 올리고, 한 모듈 안에서만 쓰는 것은 그 파일에 남겼다

서로 부르는 모듈은 억지로 끊지 않았다

도형을 만드는 곳, 선택을 다루는 곳, 실행취소를 쌓는 곳은 서로를 부른다. 도형을 다시 만들면 선택을 갱신해야 하고, 선택이 바뀌면 기록을 쌓아야 한다.

이걸 한 방향으로 펴려면 중간 계층을 새로 만들거나 콜백을 등록하는 구조를 넣어야 하는데, 파일 스무 개짜리 도구에 그런 장치는 배보다 배꼽이다. 서로 가져오게 두고, 대신 “모든 참조가 함수 안에 있을 것”만 지켰다. 파일을 읽어들이는 순간에는 서로의 값을 쓰지 않으니 문제가 없다.

판단: 순환 참조를 허용하고 그 이유를 문서에 남겼다. 다음 사람이 “이거 잘못됐다”고 고치려 들지 않게

기계적으로 이름을 바꾸면 엉뚱한 곳까지 바뀐다

스물여덟 개를 손으로 바꿀 수는 없어 스크립트로 치환했는데, 함정이 네 군데 있었다.

문자열 안의 요소 이름까지 바뀌어 화면을 찾지 못하게 됐다(요소찾기("단위") → 요소찾기("상태.단위"))
객체를 축약해 쓴 자리({ 축척, 격자 })가 문법 오류가 됐다
전개 연산자(...선택목록) 앞의 점 세 개를 속성 접근으로 오해해 그냥 지나쳤다
정규식 안의 따옴표를 문자열 시작으로 잘못 읽어, 그 뒤 구간의 치환이 통째로 빠졌다

넷 다 자동 점검이 바로 잡아냈다. 첫 번째는 화면이 아예 안 뜨는 수준이었는데, 사람이 눌러 보는 방식이었다면 어느 단계에서 깨졌는지 되짚어야 했을 것이다.

교훈: 넓게 훑는 수정은 안전망을 먼저 만들고, 단계마다 돌린다. 문법 검사만으로도 축약 붕괴는 즉시 드러난다

다음에 할 일

파일 선택창 저장은 자동 검사로 안 덮이므로 사람이 확인

Series: 여둘까 Office Layout