Baekjoon Online Judge 문제의 Debug 사이트를 제작하고 있다. WebAssembly를 활용하였고, C++ 기반으로 작성하고 있다. 처음에는 JavaScript 기반으로 작성하려고 했으나, 제약 조건이 많아서 WebAssembly와 C++ 기반으로 작성하기로 하였다.
BOJ Debug 사이트 제작 과정
WebAssembly 지원을 위하여 Windows가 설치된 컴퓨터에 WSL(Windows Subsystem for Linux, Linux용 Windows 하위 시스템)을 설치하였고, 관련 개발 환경을 설정하였다. 필자는 대부분 문제 해결에 C++ 언어를 사용하므로 emcc(Emscripten Compiler Frontend)도 함께 설치하였다. emcc 컴파일 출력으로 JavaScript 파일(*.js), WebAssembly 파일(*.wasm)이 생성된다.
MariaDB에 접속하기 위하여 PHP를 활용하였다. 동적 웹 페이지를 보여주기 위한 Template 라이브러리로 Smarty를 사용하였다. 사용자 관리를 위하여 Firebase도 연결하였다. 아래에서 언급할 사용자 포인트 관리 등을 위함이다.
WebAssembly 코드 작성
코드 작성은 C++ 작성과 비슷했다. 다른 점이 있다면 ‘<emscripten/emscripten.h>’ 헤더 파일과 JavaScript 부분에서 호출하는 함수에 추가하는 ‘EXTERN EMSCRIPTEN_KEEPALIVE’ 부분, 컴파일 옵션 등이 있었다. 특히 JavaScript에서 ccall 호출을 위한 ‘-sEXPORTED_RUNTIME_METHODS=ccall’ 옵션과 메모리 할당 함수 호출을 위한 ‘-sEXPORTED_FUNCTIONS=_malloc,_free,_main’ 옵션이 있었다.
WebAssembly 코드를 작성하면서 문자열 반환 부분에서 고민을 하였다. C++ string 객체를 직접 반환하면 JavaScript에서 인식이 어려웠다. 그래서 char pointer 형식으로 반환하려고 하였다. 문제는 컴파일 경고였는데, ‘return-stack-address’ 문구가 나타났다. 그래서 그런지 가끔 이상한 문자열이 나타나는 경우도 있었다. Google 검색을 통하여 찾아본 결과, 포인터 주소의 값을 정수로 변환하여 반환하였다. JavaScript에서 이를 문자열로 변환해주는 기능이 있었고, 어렵더라도 이 방법을 사용하기로 하였다.
입출력을 처리하는 부분도 고민되었다. 표준 입출력을 문자열로 처리하기 위하여 stringstream을 사용하였다. 문제에 주어진 입력 조건을 검증하는 부분도 작성하였다. 이 과정에서 오류가 발생하면 상세 정보를 제공하려고 한다.
사용자 관리 및 포인트
개인적으로 알고리즘을 공부하는 데 있어서 문제를 풀기 전에 먼저 풀이를 검색하지 않는 것이 더 많은 성취감을 얻은 것 같았다. 하지만 아무리 고민해도 풀이가 떠오르지 않을 때가 있을 것이다. 필자가 제작하고 있는 BOJ Debug 사이트 또한 이러한 부분을 고려하여 사용자에게 ‘포인트’를 부여하기로 하였다.
입력 데이터와 함께 실행 버튼을 누르면 일정 포인트가 차감되면서 출력 데이터를 보여주는 방식이다. 이는 과거에 Baekjoon Online Judge의 디버그 기능과 유사한 방식이다. 차감되는 포인트의 양은 문제의 난이도를 고려하였다. 또한 일일 출석으로 포인트를 획득할 수 있도록 기능을 추가할 예정이다. 물론 포인트는 일정량 이상을 보유할 수 없도록 하려고 한다.
추후 계획
BOJ Debug 사이트를 제작하기 위해 앞으로 더 많은 문제를 해결하려고 한다. 현재 Baekjoon Online Judge에는 25,000개 이상의 문제가 등록되어 있어서 수작업으로 입력하기에는 시간이 매우 오래 걸린다. 그래도 최대한 열심히 만들어서 알고리즘 문제를 풀어보는 사용자에게 조금이나마 도움이 되었으면 한다.