지난 여름방학에 알고리즘을 공부하면서 틈틈이 간단한 웹IDE를 만들어봤습니다.
계기는 아이패드로 알고리즘 공부를 하기 위함이었고, 이제 알고리즘 공부를 이 웹IDE로 하고 있으니 일단 개인적인 목표는 달성했다고 볼 수 있겠습니다.
물론 본격적인 개발툴은 아니기에 일반 개발용은 절대 아닙니다.
목적부터가 PS나 CP 를 염두에 두고 만들었기 때문입니다.
기능으로는 코드 단축어, 괄호 자동화, 블록 인덴트 및 블록 주석, 자동 변수 생성, 컴파일, 코드 컬러테마, 코드 및 출력파일 저장이 있습니다.
나름 개발툴이어서 다크모드도 넣어봤습니다.
코드 단축어
가장 먼저 추가하기로 생각했던 기능이고 가장 핵심이라고도 볼 수 있습니다.
타이핑하기 귀찮은 코드를 대충쓰면 자동으로 완성되는 기능입니다.
물론 자동으로 완성되면서 커서의 위치가 가장 필요한 곳으로 알맞게 이동하게 됩니다.
예시로 반복문을 들 수 있겠습니다.
@fori 라고 4글자만 입력하면 i를 기준으로 작동하는 for문이 완성됩니다.
꼭 i여야할 필요는 없습니다.
@for 뒤에 문자를 하나 더 입력하면 그 문자를 기준으로 for 문을 만들어 줍니다.
일단 반복문이 작성이 되면,
for(int i = 0; i < ; i++)
의 형태가 될 텐데 이 때의 커서의 위치를 i 의 한도를 정하는 영역 (부등호의 뒤) 에 위치시키게 했습니다.
그리고 이어지는 { } 중괄호는 띄어쓰기와 알맞은 들여쓰기가 알아서 맞춰지게 했습니다.
반복문이 아니더라도 내가 자주 쓰는 문법들에 대해서 자동으로 변환할 수 있도록 만들어 두었고, 사용자가 커스텀하여 추가할 수도 있게 할 것입니다.
한편 치환해주어야 하는 문자가 많아지면 많아질수록 속도의 저하가 일어날 수 있을 것이라고 생각해서 Trie 구조를 적용하였습니다.
블록 인덴트 및 블록 주석
대다수의 IDE 에서 이미 있는 기능이기도 합니다.
영역을 선택하고 TAB키를 누르면 해당 블록 인덴트를 한단계 높이고, SHIFT-TAB을 눌러서 인덴트를 한단계 낮출 수 있습니다.
유사하게 영역을 선택 후 / 키를 눌러서 해당 블록을 주석으로 만들고, SHIFT-/ 를 눌러서 주석을 해제할 수도 있습니다.
자동 변수 생성
cin을 통해 입력받을 때, 타입을 지정해주면 전역변수를 자동으로 만들어 주는 기능입니다.
알고리즘 문제들은 스택메모리를 아끼기 위해 혹은 단순히 편리성 때문에 힙메모리에 변수들을 올리는 경우가 많은데, cin 을 작성할 때 전역변수 선언을 함께 시키면 편하겠다는 생각에 만들었습니다.
cin >> int N >> int M;
과 같이 입력하면 정수형 전역변수 N, M 이 자동으로 생성이 되어 따로 만들어 줄 필요가 없어집니다.
컴파일
jdoodle에서 제공하는 컴파일 rest API를 이용했습니다.
https://www.jdoodle.com/
JS 단에서는 CORS 제약으로 인하여 API 연결이 되지않아 무료웹호스팅의 유일한 희망인 php를 이용했습니다.
사용해보기
아래 링크를 통해 사용할 수 있습니다.
http://godjh.dothome.co.kr/quickcoder/
알아두면 편리한 단축키 기능도 있습니다.
ctrl + E 또는 command + E 키를 누르면 stdin을 입력하는 창이 뜨게 되고, 다시 한번 더 단축키를 누르면, 컴파일이 진행된다.
ctrl + S 또는 command + S 키를 누르면 코드를 저장할 수 있고, shift 키를 함께 누른다면 output.txt 을 받을 수 있습니다.
기존 파일을 열고자 한다면, ctrl + O 또는 command + O 를 누르고 파일을 선택하면 됩니다.
