학생별 컨테이너 실습 웹 IDE

학생이 좌측 파일 트리에서 파일을 생성·이름변경·삭제하고, 중앙 Monaco 에디터에서 Python 코드를 작성할 수 있는 실습 워크스페이스를 제공합니다.

• Monaco Editor를 Python 언어 서비스로 구성하고 Debounce 자동 저장(2초)을 적용합니다
• 파일 트리 CRUD를 React Query 뮤테이션으로 처리하고 낙관적 UI 업데이트를 적용합니다
• 단축키(Ctrl+S 저장, Ctrl+Enter 실행)를 커맨드 팔레트와 연결해 조작 흐름을 단축합니다

Monaco Editor의 언어 서비스와 파일 시스템 상태를 단일 소스로 통합해, 편집·저장·실행 흐름이 끊김 없이 이어지는 구조를 설계합니다

실행 버튼을 누르면 print·오류 메시지가 콘솔에 실시간으로 표시되고, 학생이 만든 Streamlit 앱이 우측 패널 iframe에서 바로 동작합니다.

• Socket.io 네임스페이스를 학생별 컨테이너 ID로 분리해 콘솔 스트림 혼선을 방지합니다
• stdout/stderr를 색상 구분된 로그 라인으로 렌더링하고 자동 스크롤을 적용합니다
• Streamlit 내부 포트를 리버스 프록시로 매핑해 iframe src를 컨테이너별 고유 경로로 발급합니다

실행 로그와 Streamlit 미리보기를 하나의 WebSocket 세션에서 함께 관리해, 코드 수정 후 재실행까지의 흐름을 하나의 화면에서 처리하는 구조를 구현합니다

강의실 입장 시 학생별로 격리된 Docker 컨테이너가 자동 생성되고, 연결 상태와 볼륨 마운트 진행 상황을 화면에서 확인할 수 있습니다.

• Dockerode API로 학생 ID 기반 컨테이너 네이밍과 볼륨 마운트를 자동화합니다
• 미접속 학생은 컨테이너 생성을 건너뛰는 지연 프로비저닝(lazy provisioning) 전략을 적용합니다
• 컨테이너 생성 진행 상태(대기·생성중·준비완료)를 상태 머신으로 관리하고 UI에 반영합니다

컨테이너 생성부터 볼륨 복원까지의 과정을 상태 머신으로 설계해, 학생이 재접속했을 때 이전 작업 환경을 그대로 이어갈 수 있는 구조를 구현합니다

WebSocket 연결이 끊겨도 자동으로 재연결을 시도하고, 컨테이너가 비정상 종료되면 학생 모르게 자동으로 재생성해 실습이 끊기지 않도록 합니다.

• Socket.io 재연결 옵션에 지수 백오프(1초~30초)를 적용하고 재연결 시도 상태를 UI에 표시합니다
• 컨테이너 헬스체크를 주기적으로 수행하고 비정상 종료 감지 시 동일 볼륨으로 컨테이너를 재생성합니다
• 재연결 성공 시 파일 저장 상태와 실행 세션을 재동기화하는 핸드셰이크 로직을 구현합니다

연결 끊김부터 컨테이너 재생성, 상태 재동기화까지의 전체 복구 흐름을 하나의 파이프라인으로 설계해 학생이 별도 조치 없이 실습을 이어갈 수 있도록 구현합니다