<aside> 💡 지금 진행중인 프로젝트 Git Challenge는 Git 문제를 풀면서 Git을 학습할 수 있는 서비스다. 사용자 경험과 프로젝트의 완성도를 위해서 터미널 환경과 그래프를 제공하기로 했다.
</aside>
git commit이나 git rebase -i와 같은 명령어를 입력하면 터미널이 vi로 바뀌면서 내용을 수정하고 닫을 수 있는 편집기 기능을 구현해야 했다.
아래 사진과 같이 사용자가 만약에 git commit을 입력한다면, 서버는 편집기에 들어갈 초기 데이터를 보내주고, 프론트에서는 이를 가상으로 만든 vi에 커밋 메시지를 작성해서(초기 데이터를 수정해서) 다시 서버에 전송할 수 있도록 구현해야 하는 것이였다.
vi가 지원하는 기능은 정말 정말 많다. 하지만 우리는 주어진 시간이 한정적이라 주요 기능들만 지원하기로 했다. (i, esc, :, q, q!, wq, wq!)
위에 vi의 동작을 보면 편집할 수 있는 공간(파란색 박스)은 Textarea로, 명령을 입력할 수 있는 공간(보라색 박스)는 Input으로 HTML 요소를 정하고, 사용자로부터 입력을 받는 데 사용하기로 했다.
그렇게 감지해야 하는 키보드 이벤트들을 정리하고 열심히 구현했다. 커서 위치나 수정 가능 여부 그리고 에러처리까지 신경써야하는 경우의 수가 정말 많았다.
