바이브 코딩으로 프로그램을 만들고 코드를 편집하려고 보니, 뭔가 마음에 드는 에디터가 있으면 좋겠다는 생각이 들었다.
https://sciencej.cafe24.com/html5/htmlediter/htmlediter.html
<사용방법>
1. 에디터를 실행하고 코드 입력창에 바이브 코딩으로 만든 코드를 붙여 넣기 하면 된다.
(단 html과 자바스크립트로 만들어진 코드만 된다. 바이브 코딩에서 코드를 만들때 html 과 자바스크립트로 만들어 달라고 요구하자)
그럼 미리보기 창에 결과 화면이 나온다.
코드 입력창에서 내용을 수정하면 바로 미리보기 창에 반영되는 걸 볼 수 있다.
아래 그림은 코드 입력에서 배경색을 파란색으로 바꾼 후 미리보기 창에 배경색이 파란색으로 바뀐 모습이 나타나는 그림이다.
2. 수정하고 나서 저장하기를 누르면 html 파일로 저장이 된다. 그럼 인터넷 연결 없이도 프로그램 처럼 가지고 다니면서 사용이 가능하다.
3. 코드 입력창에서 원하는 명령어나 변수를 드래그 하면, 위쪽에 그 변수가 몇개가 있는지 확인이 가능하다. 이전, 다음을 눌러 코드 입력창에서 그 변수가 있는 위치로 계속 이동해 가면서 살펴 볼 수 있다.
4. 변수 찾기 또는 함수 찾기를 누르면 정확하지는 않지만 코드에 사용된 변수나 함수를 확인할 수 있다. 코드 분석할 때 도움이 된다.
찾은 변수를 누르면 그 코드입력 창에서 그 변수가 있는 위치로 이동한다.
5. 수정을 하고 나면, 수정기록에 수정한 내용들이 기록된다. 따라서 다시 원래 상태로 되돌리고 싶으면 수정기록을 살펴 보면 된다. 방금전 수정한 내용이면 되돌리기를 통해 방금 전으로 되돌릴 수 있다.
또 수정기록을 클릭하면 코드 입력 창에서 그 위치로 이동한다.
6. 콘솔보기를 누르면 콘솔창이 나타나 코드 중간에 넣어둔 메시지를 확인할 수 있다.
완성된 코드를 좀 더 쉽게 수정할 수 있기를 바란다.
