실시간 저지 및 웹 IDE를 갖춘 온라인 저지 시스템
개발기간: 2024.09 ~ 2024.12
프론트엔드 1명, 백엔드 3명
사용 기술
- Next.js (ver.14)
- TypeScript
- TailWind CSS
- Zustand
- react-query(v.5)
조선대학교 온라인 저지 시스템은 학생, 교수, 관리자용 페이지를 포함한 종합 온라인 저지 플랫폼입니다.
웹 기반의 IDE를 통해 코드 작성 및 실시간 컴파일이 가능하며, 과제 제출, 대회 참여, Q&A, 공지사항 확인, 랭킹 시스템을 제공합니다.
모든 CRUD 기능은 React Query를 사용해 효율적으로 최적화되었으며, 로그인상태를 Zustand를 통해 전역으로 관리하였습니다.
2025년 일부 프로그래밍 수업에 실 사용 예정이며 현재 교내 베타테스트 진행 중입니다.
- 웹에서 코드를 작성하고 제출하면 실시간으로 컴파일 결과를 확인할 수 있습니다.
- 다양한 프로그래밍 언어를 지원하며, 사용자 친화적인 UI/UX를 제공합니다.
- 교수와 관리자가 등록한 문제를 학생들이 필터링 및 검색하여 풀 수 있습니다.
- 학생 페이지: 과제 제출, 랭킹 확인, 대회 참여, 공지사항 확인 등.
- 교수 페이지: 과제 및 대회 관리, 학생 관리 기능.
- 관리자 페이지: 시스템 전반 관리 및 데이터 모니터링.
---
- 학생들의 저지 시스템 활동에 따라 실시간으로 랭킹이 업데이트됩니다.
- 랭킹은 획득 점수를 기준으로 산정됩니다.
- Q&A: 학생 및 교수 간 질문 및 답변을 주고받을 수 있는 페이지.
- 공지사항: 과제, 대회 등과 관련된 최신 공지를 확인 가능합니다.
기존에는 API 요청들이 순차적으로 호출되어 각 요청이 완료될 때까지 대기해야 했습니다. 이로 인해 총 API 요청 시간이 354.12ms에 달하며 성능 저하가 발생했습니다.
React Query를 도입하여 독립적인 API 요청들을 병렬 처리하고, 자동 캐싱 및 재검증 기능을 활용하여 네트워크 요청을 최적화했습니다.
기존 354.12ms가 소요되던 API 요청 시간이 약 67% 단축되어 115.71ms로 개선되었고, 페이지 로딩 속도가 크게 향상되었습니다.
웹 IDE에서 작성된 코드에 한글이 포함될 경우, 코드가 정상적으로 실행되지 않는 문제가 발생했습니다.
Base64로 코드를 인코딩하여 서버에 전송한 뒤, 실행 결과를 디코딩하여 사용자에게 반환하는 방식을 도입했습니다.
- Node.js
- npm
$ git clone https://github.com/mmm7k/chosun-oj.git
$ npm install
$ npm run dev