Fixer

Algorithm Learning & Visualization Web Tool

프로젝트 개요

Fixer는 알고리즘 학습 과정에서 발생하는 이해의 어려움을 줄이기 위해 제작된
웹 기반 알고리즘 학습 보조 도구입니다.

그래프, 트리, 동적 계획법과 같이 내부 상태 변화가 복잡한 알고리즘을
보조 도구와 함께 학습할 수 있도록 설계되었습니다.

코드를 직접 실행해 보고 AI 기반 힌트와 테스트 케이스 생성을 활용하며 학습 과정을 계정별로 정리할 수 있는 통합 학습 환경을 제공합니다.

---

프로젝트 목표

• 알고리즘 동작 과정을 직관적으로 이해할 수 있는 학습 환경 제공
• 입력 데이터 구성 → 실행 → 분석 → 기록의 학습 흐름 통합
• 코드 실행, 힌트 제공, 테스트 케이스 생성을 하나의 서비스로 제공
• 웹프로그래밍 과목에 맞는 실제 서비스 형태의 프로젝트 구현

---

주요 기능

1. 알고리즘 시각화 도구

• 그래프·트리 구조를 직접 생성하고 수정 가능
• 정점 추가/삭제, 간선 연결, 가중치 및 방향 설정 지원
• 입력 구조가 알고리즘 실행에 미치는 영향을 직관적으로 확인 가능

2. 테스트 케이스 생성기 (AI 기반)

• 문제 설명을 입력하면 자동으로 테스트 케이스 생성
• 다양한 입력을 빠르게 실험 가능
• 생성된 케이스를 코드 실행기 및 시각화 도구와 연동

3. 코드 실행기

• 여러 프로그래밍 언어 선택 가능
• 외부 컴파일 서버(JDoodle API)를 통한 코드 실행
• 표준 출력과 에러 출력 분리 표시

4. 풀이 힌트 생성기 (AI 기반)

• 문제 해결에 필요한 알고리즘 종류 및 접근 방향 제시
• 정답 코드가 아닌 핵심 아이디어 중심의 힌트 제공
• 학습자의 사고 과정을 보조하는 역할에 집중

5. 학습 기록 관리

• 문제 풀이 과정과 실험 결과를 계정별로 저장
• 기록 작성, 수정, 삭제 지원
• 태그를 활용한 학습 내용 정리

---

화면 구성

• 회원제 서비스
  • Google OAuth 로그인 지원
  • 관리자용 로컬 로그인 제공
• 좌측 사이드바 + 우측 콘텐츠 영역 구조
• 기능별 탭 전환 방식의 단일 페이지 애플리케이션(SPA)

---

기술 스택

Frontend

• HTML / CSS / JavaScript
• SPA 구조로 구성
• 기능별 컴포넌트 분리 및 상태 관리

Backend

• Node.js + Express
• RESTful API 구조
• SQLite (better-sqlite3)

External APIs

• JDoodle API: 코드 컴파일 및 실행
• OpenAI API:
  • 테스트 케이스 생성
  • 풀이 힌트 생성

Authentication

• Google OAuth (Passport.js)
• 관리자용 로컬 로그인
• 세션 기반 인증

---

안정성 및 보안 고려

• API 키는 서버 환경 변수로 관리 (클라이언트 노출 방지)
• 생성형 AI 요청에 대해 프론트엔드 + 백엔드 이중 입력 검증
• 의미 없는 입력이나 악의적 요청 차단
• 로그인 필수 API 보호 미들웨어 적용

---

주요 구현 특징

• 라우터 / 서비스 / 미들웨어 계층 분리
• 외부 API 연동 로직 모듈화
• 계정별 데이터 관리 구조
• 공통 에러 처리 미들웨어 적용
• 개발 환경과 배포 환경(Render)에서 동일한 코드베이스 유지

---

디렉토리 구조

Fixer/
├─ docs/ # 프론트엔드 (정적 배포)
│ ├─ index.html # 로그인 페이지
│ ├─ app.html # 메인 앱
│ ├─ script.js # 클라이언트 로직
│ └─ style.css # 스타일
│
└─ server/ # 백엔드
├─ .env
├─ package.json
├─ data/
│ └─ fixer.db # SQLite DB
│
└─ src/
├─ server.js # 서버 진입점
├─ config/ # 환경 변수, DB, OAuth 설정
├─ middlewares/ # 인증, 에러 처리
├─ routes/ # API 라우터
└─ services/ # 비즈니스 로직