[Code Runner] #0 Web에서 알고리즘 문제를 풀어보자

왜 만들었나...?

학교에서 실습을 하거나 알고리즘 문제를 풀 때 리눅스 환경이나 윈도우 vscode에서 소스코드를 컴파일하고 실행하는데 상당히 귀찮다.. 심지어 자리를 옮기거나 다른 PC 환경을 사용하면 환경이 일정치 않아 다시 세팅을 해야줘야 한다. 

 

웹으로 만들어볼까?

 

 

 

설계

필요 기능

• 알고리즘 문제 풀이 대표언어 C, C++, Java, Python 컴파일
• 원할한 소스코드 작성을 위한 snippet, theme, autoComplete 
• 사용자가 기호에 따라 editor 세팅값을 변경 가능
• client에서 code를 받아 컴파일 후 output 보내주기

 

Frontend

기존에 웹으로 만들어본건 Django밖에 없었는데 api서버를 만들거나 주식 정보 사이트 같이 MPA 웹서버여서 이번 프로젝트에 적당하지 않았다. 한 페이지에 Editor, Input-Field, Output-Field 이렇게만 있으면 되기 때문에 SPA 기반 CSR 웹이 가장 적합한거 같아 React를 골랐다. 

https://cocopam.tistory.com/13?category=900603

SSR, CSR 차이

UI 디자인에는 정말 초보여서 bootstrap으로 간단하게 layout을 그렸다.

 

Backend

server side의 필요한 기능은 client side에서 code,input 을 받아서 컴파일 후 ouput이나 error 을 보내는 것이다. REST api로 구현하고 프레임워크를 이참에 node.js 기반 javascript로 짜볼까 하다가 음... 파일처리, subproecessing 처리가 상당히 귀찮아서 FastAPI 기반으로 python으로 하기로 했다. (처음 써보았는데 코드도 간결하고 무엇보다 django보다 훨씬 빠르다!)

 

결국 코드 실행은 서버에서 진행하게 되는데 input도 노출되어 있기 때문에 파일 실행과정에 BufferOverflow을 발생시킬 가능성이 있으니 보안을 위해 api 서버는 docker화 시켜서 리소스를 분리했다. 

 

 

 

Release : https://code.cspc.me

 

github : https://github.com/ljy2855/code_runner

GitHub - ljy2855/code_runner: Web Code Runner for ps built with React, FastAPI