프로젝트를 진행하였습니다.
https://github.com/kasterra/KOJ-client
경북대학교 프로그래밍 실습 시간에 사용하고 있는 Online Judge 시스템
개발 기간 : 2024.01 ~ 2024.07
IBM Carbon Design System의 깔끔한 Look and feel의 일부를 차용하며, 기존 개발되었던 UI 시스템을 사용하던 사용자가 새로운 시스템에 문제 없이 적응할 수 있도록 주안점을 두고 UI/UX 기획을 진행하였습니다.
프로그래밍 기초 수업 등에서 코드에 빈칸이 주어지고, 요구사항에 맞는 빈칸을 채우는 유형의 문제가 있었습니다. 더 나은 코드 가독성을 위해서 Syntax Highlighting을 유지하면서 빈칸을 렌더링 했어야 했고, 실제로 DOM을 화면에 렌더링 하지 않으면서 DOM을 파싱 할 수 있는 DOMParser API를 활용하여 HTML <code> 로 결과물이 나오는 prism.js의 결과물을 사용할 수 있는 형태로 파싱할 수 있었습니다.
KOJ 시스템의 UI/UX 피그마 기획
Syntax Highlighting이 직용된 CodeHole 컴포넌트
인증된 사용자만 사용할 수 있는, 서비스이니 만큼, API 호출에 auth 정보가 반드시 포함되어야 하고, 최근 접근한 강의에 따라서 로직이 달라져야 하는 부분들이 있었습니다. 이러한 로직들을 custom hook으로 묶고, useEffect를 활용하여 sessionstorage를 통한 backup도 진행 할 수 있었습니다.
API 서버에 데이터를 전송하기 이전에 데이터를 표준에 알맞은 형태로 전송해야 했었고, 이진 데이터도 포함되어 있었습니다. 특히 Visual Studio를 사용해서 진행하는 프로그래밍 기초 수업에서, 기본적으로 Visual Studio가 저장하는 파일 형식이 UTF-8이 아닌, MS specific한 cp949 인코딩으로 파일을 저장하고 있어, 정상적인 코드 실행 결과를 보장할 수 없었습니다.
파일 인코딩 등의 이진 데이터를 다루 라이브러리들(iconv-lite등)은 Node의 Buffer를 입력으로 받고 있고, 이는 Browser의 ArrayBuffer와는 일치하지 않아서, Typescript error를 발생시켰습니다.
브라우저에서도 Node의 Buffer를 사용할 수 있게 하는 buffer라는 라이브러리를 찾을 수 있었고, Typescript의 Duck typing을 활용해서 실제로는 다른 타입이지만 인터페이스를 일치 시켜서 문제를 해결하는 실제의 예를 볼 수 있었습니다.
(연구실 정책상 코드는 private 입니다)
개발기간 : 2023.09.01 ~ 2023.11.14