프로세스 스케줄링 시뮬레이터 구축: TypeScript 재학습 및 AI 의존도 감소

발행: (2026년 3월 14일 오전 11:49 GMT+9)
9 분 소요
원문: Dev.to

Source: Dev.to

몇 주 동안 나는 AI 도구에 크게 의존하지 않고 실제 Next.js나 TypeScript 코드를 작성하지 못했다. 운영체제 수업에서 CPU 스케줄링 알고리즘을 공부하면서, 나는 이를 위한 시각화 도구를 만들기로 결심했다. 이것은 내가 다시 수동 코딩으로 돌아가게 하는 완벽한 프로젝트가 되었다.

문제

  • 나는 기본 Next.js 보일러플레이트만 관리할 수 있었다.
  • 더미 데이터 객체를 만들고, 도착 시간에 따라 프로세스를 정렬하는 간단한 작업조차도 난관이었다.
  • 최근 과제는 C++/Java였기 때문에 TypeScript에서 int 대신 number를 입력했다.

깨달음: 연습을 멈추면 기술이 사라진다.

리셋

간단한 규칙을 정했습니다: 핵심 로직에 AI를 사용하지 않기.
무언가를 잊어버렸다면, 저는 다음을 했습니다:

  1. 공식 문서를 확인한다.
  2. Stack Overflow를 검색한다.
  3. 전통적인 방법으로 참고 자료를 살펴본다.

처음엔 느리고 답답하게 느껴졌지만, 점차:

  • TypeScript 타입과 배열 메서드가 다시 떠올랐다.
  • TypeScript 인터페이스 설계가 빠르게 떠올랐습니다 (구조적 사고가 문법 세부사항보다 오래 남는다).

AI 사용 조정

AI를 완전히 거부하는 것은 현실적이지 않으며, 현대 개발은 AI를 포함한 도구들을 활용합니다.
전체 앱을 AI가 생성하도록 두는 대신, 나는 다음과 같이 활용했습니다:

  • 컴포넌트 구조와 인터페이스 설계 논의.
  • 이미 작성한 코드 검토.
  • 네이밍 선택과 아키텍처 결정에 대한 질문.
  • 더 명확한 변수, 타입, 함수 이름 제안.
  • 커밋하기 전 설계 트레이드‑오프 탐색.

결과: 제가 코드를 작성했고, AI가 검토했습니다. 이 차이가 중요했습니다—코드는 더 깔끔해지고, 네이밍이 개선되며, 학습을 희생하지 않으면서도 폴더 구조가 더 체계적으로 정리되었습니다.

프로젝트: 인터랙티브 프로세스 스케줄링 시뮬레이터

사용자가 할 수 있는 일

  • Enter 프로세스 목록(도착 시간, 실행 시간, 선택적 우선순위)을 입력합니다.
  • Run 여러 스케줄링 알고리즘을 실행합니다.
  • View 결과를 Gantt 차트와 상세 메트릭 테이블을 통해 즉시 확인합니다.

지원되는 알고리즘

AlgorithmDescription
FCFS – First Come First Serve간단한 비선점 방식입니다.
SJF – Shortest Job First (non‑preemptive)가장 짧은 실행 시간을 가진 작업을 선택합니다.
SRTF – Shortest Remaining Time First (preemptive)매 단계마다 남은 실행 시간을 추적합니다.
Priority Scheduling – preemptive & non‑preemptive프로세스 우선순위를 사용합니다.
Round Robin – configurable time quantum준비 큐와 시간 할당량을 유지합니다.

계산된 메트릭 (알고리즘별)

  • Completion Time (완료 시간)
  • Turnaround Time (턴어라운드 시간)
  • Waiting Time (대기 시간)
  • Response Time (응답 시간)

평균값도 함께 계산됩니다.
작지만 중요한 세부 사항: 시뮬레이터는 CPU 유휴 시간을 올바르게 처리합니다. 이는 스케줄링을 처음 배울 때 간과하기 쉬운 부분입니다.

Source:

기술 스택

  • 프레임워크: Next.js (App Router)
  • 언어: TypeScript 5
  • UI 컴포넌트: shadcn/ui + Radix UI
  • 스타일링: Tailwind CSS v4
  • 폼 및 검증: React Hook Form + Zod
  • 아이콘 및 테마: Lucide React, next-themes

아키텍처 하이라이트

  • 관심사의 분리: 알고리즘 로직을 UI와 별도로 두어 테스트와 이해가 쉬워집니다.
  • 검증: Zod + React Hook Form가 동적인 프로세스 수와 필드 간 제약 조건까지 깔끔하게 검증합니다.
  • 엄격한 타입 지정: 알고리즘 전반에 걸친 일관성을 보장합니다.

알고리즘 중복을 줄이기 위해 공유 추상화를 잠시 고려했지만, 결국 별도로 유지했습니다. 목표는 각 알고리즘을 이해하는 것이었으며, 공통 추상화를 강요하면 파악해야 할 미묘한 차이를 감추게 될 수 있었습니다.

  • 명시적인 코드 > 학습 시의 교묘한 추상화
  • 상수 (fcfs, sjf, srtf, …)는 매직 문자열을 대체해 자동 완성과 타입 안전성을 제공합니다.

Lessons Learned

Technical

  • Deepened understanding of scheduling concepts:
    • Preemption → 선점
    • Context switching → 컨텍스트 스위칭
    • Starvation (especially in SJF) → 기아 현상 (특히 SJF에서)
    • Impact of time quantum in Round Robin → 라운드 로빈에서 시간 할당량의 영향

Personal

Extreme ApproachOutcome
AI writes the whole project작동하는 코드, 학습은 최소.
No AI at all고귀하지만, 현대 개발에서는 비현실적.

Middle ground that worked: 직접 로직을 작성하고, AI가 다듬게 하세요. 이것은 내 사고 과정을 유지하면서도 추가적인 시각의 이점을 얻을 수 있게 했습니다.

오픈 소스

프로젝트는 GitHub에서 확인할 수 있습니다:

🔗 (repository name truncated for brevity)

자유롭게 탐색하고, 포크하거나, 기여하세요!

Cess 스케줄링 시각화

실시간 데모:
🔗

운영체제를 공부하고 있고 실제로 스케줄링 알고리즘이 어떻게 동작하는지 보고 싶다면, 이 도구가 도움이 될 수 있습니다.

향후 아이디어

  • 다단계 큐 스케줄링
  • 다단계 피드백 큐 스케줄링
  • 타임라인 애니메이션
  • 자동화 테스트
  • 입력의 CSV 가져오기 및 결과 내보내기
  • 설명과 함께 단계별 실행

가장 좋은 학습 프로젝트는 시작할 때 약간 너무 어려운 느낌이 드는 것들입니다. 첫 줄부터 모든 것이 편안하게 느껴진다면, 아마도 성장하고 있지 않은 것입니다.

0 조회
Back to Blog

관련 글

더 보기 »