Python 및 C#용 웹 기반 코드 실행기 만들기

Source: Dev.to

작동 방식

이 프로젝트는 Fastify + TypeScript 백엔드와 간단한 HTML/JS 프론트엔드로 구성됩니다.

프론트엔드

• 사용자는 드롭다운에서 언어(Python 또는 C#)를 선택합니다.
• 에디터는 자동으로 언어별 함수 템플릿을 채워줍니다.
• 사용자는 함수를 작성하고 Run 버튼을 클릭합니다.

백엔드

• POST /run 요청을 통해 코드와 선택된 언어를 받습니다.
• 사용자의 코드를 테스트 러너에 감싸서 미리 정의된 테스트 케이스를 실행합니다.
• 코드를 Docker 컨테이너 안에서 실행해 안전성을 확보합니다.
• 프론트엔드에 사람이 읽을 수 있는 통과/실패 결과를 반환합니다.

테스트 러너

• Python – 제출된 함수를 테스트 케이스와 함께 호출하고 결과를 출력하는 스크립트를 동적으로 생성합니다.
• C# – 임시 폴더에 콘솔 앱을 생성하고 Docker를 통해 실행한 뒤 출력을 캡처합니다.

왜 Docker인가

사용자 코드를 서버에서 직접 실행하면 위험합니다. Docker는 각 실행마다 격리된 샌드박스를 제공해 시스템 접근이나 손상을 방지합니다. 또한 필요한 환경을 갖춘 다양한 Docker 이미지를 띄우면 나중에 언어를 추가하기도 쉽습니다.

배운 점

• Docker를 이용한 안전한 코드 실행 및 샌드박싱.
• Fastify + TypeScript 백엔드 구축.
• 여러 언어에 대한 테스트 러너를 동적으로 생성.
• 언어별 템플릿을 갖춘 간단하고 인터랙티브한 프론트엔드 제작.
• 백엔드와 프론트엔드가 구조화된 인간 친화적인 출력을 반환하도록 조율.

MathHacks에 활용 계획

MathHacks는 컴퓨터 과학 × 수학 코딩 챌린지를 풀 수 있는 웹사이트입니다. 이 코드 러너는 플랫폼의 핵심 요소가 되어 사용자가:

• 여러 언어로 챌린지를 해결할 수 있게 합니다.
• 자동화된 테스트 케이스를 통해 즉시 피드백을 받습니다.
• 로컬에 아무것도 설치하지 않고도 안전하게 실험할 수 있습니다.

궁금하고 조기 접근을 원한다면 대기자 명단에 가입하세요: mathhacks waitlist

목표는 프로그래밍 학습을 인터랙티브하고, 재미있으며, 안전하게 만드는 것입니다.

다음 단계

• 더 많은 언어 추가(예: JavaScript, Java).
• 챌린지별 맞춤 테스트 케이스 허용.
• 구문 강조와 풍부한 에디터 기능을 갖춘 프론트엔드 UX 개선.
• 러너를 MathHacks 플랫폼에 완전 통합.

기능

• 브라우저에서 바로 Python 및 C# 함수 실행.
• 자동 테스트 케이스와 인간 친화적인 통과/실패 출력.
• Docker 컨테이너 내부에서 안전하게 실행.
• 가벼운 API를 위한 Fastify 사용.
• 언어별 템플릿을 갖춘 인터랙티브 프론트엔드.

도구 및 기술

• Node.js & Fastify – 백엔드 API.
• Docker – 샌드박스된 코드 실행.
• TypeScript – 타입 안전 백엔드 코드.
• HTML/JS – 간단한 인터랙티브 프론트엔드.
• (선택 사항) 향후 UI 강화를 위한 React 등 프레임워크.

요구 사항

• Docker 설치.
• Node.js ≥ 20.
• npm 또는 yarn.

설치

git clone https://github.com/VulcanWM/code-runner.git
cd code-runner
npm install

서버 실행

npm start
# The server will run on http://[::1]:8080

사용법

1. 브라우저에서 http://[::1]:8080을 엽니다.
2. 드롭다운에서 언어(Python 또는 C#)를 선택합니다.
3. 에디터에 함수 코드를 작성합니다.
4. Run 버튼을 클릭해 미리 정의된 테스트 케이스에 대한 통과/실패 결과를 확인합니다.