history 관련 mathquill이 undefined되던 이슈 - boostcamp-2020/Project15-A-Client-Based-Formula-Editor GitHub Wiki

구현했던 redo, undo가 간혹 undefined를 발생하는 문제가 있어서 해당 로직을 새로 작성했습니다.

기존 로직

history : string[]
historyIdx : number

기존 mathquill에는 hitory와 historyIdx를 두어 지금까지의 history를 저장해두고 idx를 조절하여 redo, undo 기능을 구현했습니다.

원인

undo, redo 기능이 동작하여 새로운 latex를 mathquill에 전달하면서, editable mathquill의 onchange가 동작하게 됩니다. 이 때, redux의 change action이 전달되면서 historyIdx가 증가하는 현상이 원인이었습니다.
이를 해결하기 위해서는 hitoryIdx를 사용하지 않도록 history 로직을 다시 작성해야했습니다.

해결

현재 latex를 가리키는 latex, undo 기능을 위해 이전 latex를 저장해두는 preLaTex 배열, redo 기능을 위해 이후 latex를 저장해두는 nextLaTex 배열을 두었습니다.

// clear 시
preLaTex: [...state.preLaTex, state.latex]
latex: '',
nextLaTex: [],

// redo 시 `array.pop()` 으로 현재 latex를 nextLaTex의 마지막으로 되돌리고 nextLaTex를 배열제거
preLaTex: [...state.preLaTex, state.latex]
latex: nextLatex.pop(),
// nextLaTex는 pop을 했으니 배열이 한개 제거된 상태

//undo 시 `array.pop()` 으로 현재 latex를 preLaTex의 마지막으로 되돌리고 preLaTex를 배열제거
nextLaTex: [...state.nextLaTex, state.latex]
latex: preLatex.pop(),
// preLaTex는 pop을 했으니 배열이 한개 제거된 상태

// change(새로운 latex 추가) 시, preLaTex에 현재 latex 추가, latex: 새로운 latex, nextLaTex로 돌아갈 일이 없으니 빈배열로 초기화
preLaTex: [...state.preLaTex, state.latex]
latex: newLaTex,
nextLaTex: [],

로직 구현에 참고한 사이트