자바스크립트 팁 (2) - (1)을 활용하여 배열에서의 undo, redo 기능 만들기

https://github.com/SoftwareDevJake/JS_UndoRedo/blob/master/UndoRedo.html

지금 구현하는 기능은 사용하는 배열에 변화를 주는 코드를 사용할 때 실행 취소 Undo 와 다시 복구 Redo 기능입니다.

같은 로직을 사용하면 다른 곳에서도 활용을 할 수 있겠죠?

 

저는 간단한 예시를 위해 배열에 값을 넣는 add,

배열에 넣은 마지막 값을 빼는 delete,

핵심 내용인 Undo, Redo 이렇게 네가지 기능을 만들었습니다.

기본 선언 예시

기본적으로 필요한 세가지 입니다.

현재 배열 상태인 array,

실행취소로 돌아갈 형태를 저장하는 pastArray

배열에 넣을 값을 대신할 index

이렇게 세가지를 선언 해주고

add 기능 예시

명령어 command는 위와 같이 prompt를 이용하여 받아줍니다.

그리고 add라는 명령어를 받으면 pastArray에 현재형태의 array를 앞에서 배운 팁을 이용하여 배열안에 배열 형태 그대로 넣어줍니다.

https://soja-dev.tistory.com/12

자바스크립트 팁 (1) - 배열 안에 배열 저장

delete 기능 예시

delete의 명령일때도 구현해 줍시다.

한번 테스트를 해볼까요?

결과 예시

콘솔에 보이도록 했기 때문에 결과는 웹페이지의 개발자 모드에서 보겠습니다.

아래 사진 처럼 개발자 모드를 열어주세요.

웹페이지 개발자 모드 예시

열었다면 add와 delete 할 때의 결과를 보도록 하겠습니다.

개발자 모드 콘솔의 결과 예시

위와 같이 잘 작동 한다면 Undo 기능을 넣어봅시다.

추가 선언 예시

먼저 추가로 필요한 선언을 해줍니다.

undoArray는 나중에 redo 기능을 위한 또 다른 배열이구요.

undoIndex는 기존의 index를 사용하게 되면 delete를 한 후 undo를 하게 될 경우 기존의 배열에 직접적인 영향을 주기 때문에 따로 만들어 줍니다.

undoCount는 비교 형식으로 undo기능을 썼는지, 얼마나 썼는지 등을 확인하는 용도로 사용됩니다.

undo기능 예시

undo 명령어를 입력 했을 때 만약 더 이상 undo 할 게 없다면 실행되면 안되겠죠?

if로 위와 같이 구별 해주고, undoArray에 현재 상태를 넣음으로써 나중에 redo할 때 사용할 수 있도록 해줍니다.

undoIndex의 경우에는 저장되어 있던 배열의 크기에서 undo를 한 횟수를 빼게되면 현재 바로 이전의 상태를 찾을 수 있죠.

주의 할 점!

지금 상태에서 undo 기능 후에 add를 하게되면 기존에 pastArray에는 undo 하기 전의 상태 또한 저장되어 있기 때문에 pastArray에서 undo기능을 사용한 이후의 배열들은 삭제 해줍니다.

 

pastArray 값 정리 예시

저 같은 경우는 위 처럼 함수로 빼서 선언 한 후 불렀습니다.

함수를 대신 넣은 후의 예시

위와 같이 다 바꾸었다면 마지막으로 Redo 기능을 넣겠습니다.

redo 기능 예시

 redo 기능의 경우는 undo를 하지 않았다면 사용할 일이 없기 때문에 if문으로 조치를 취한 후

 undo를 한다면 undoArray에 그 형태가 저장이 되기 때문에 undoArray에서 가장 위에 있는 값을 가져옵니다.

(스택 형식과 비슷하다 생각하면 됩니다. 그렇기에 마지막 값을 뺄 때 pop을 사용하였습니다.)

 

이제 모든 준비는 마쳤고 잘 작동되는지 확인해 봅시다.

add 후 undo, redo 기능 결과 예시

add를 사용하고 undo, redo를 사용한 경우입니다.

delete 사용 한 후의 undo, redo 예시

delete를 사용한 후에도 문제 없는걸 보여줍니다.