dev flow
심심할 때 스마트폰 브라우저로 열어서 짧게 몰입하는 개발 기본기 학습 웹앱.
- 적응형 난이도: 주제별 실력 레벨(1
5)을 두고, 최근 정답률이 7085%(경험칙)에 머물도록 다음 문제 난이도를 자동 조절
- 세션 단위 학습: 5/10/15문제 또는 5/10분 목표, 문제마다 즉시 피드백·해설
- 막힘/지루함 감지: 오래 걸리면 힌트를 권하고, 빠르게 연속 정답이면 난이도를 바로 올림
- 이완·메모 단계: 세션 후 1/3/5분 멍때리기 타이머 → 떠오른 생각 메모
- 복습: 틀린 문제는 라이트너 상자 방식으로 다시 등장
- 저장: 기기 로컬(localStorage)에 먼저 저장, Neon DB가 연결되어 있으면 자동 동기화. 설정의 "동기화 코드"로 여러 기기에서 이어서 학습
학습 범위 (콘텐츠 팩 software-essentials)
Git · HTTP/웹 · DB/SQL · 자료구조/알고리즘 · 배포/인프라 · 보안 · 테스트 · 설계/아키텍처 — 8개 주제, 각 주제 난이도 1~5 문제.
구조
src/
core/ 프레임워크 독립 도메인 로직 (순수 함수, 테스트 대상)
content/ 콘텐츠 팩 스키마, 카탈로그, 문제 유형별 채점/배치
engine/ 난이도(skill), 속도 판정(pace), 복습(memory), 문제 선택(selector)
learner/ 이벤트 정의와 이벤트 → 학습자 상태 계산(fold)
session/ 세션 상태 머신 (question → feedback → summary → relax → memo)
sync/ 클라이언트·서버 공유 동기화 프로토콜(zod)
content/packs/ 실제 문제들. 새 팩은 src/content/index.ts 에 등록
storage/ 기기 로컬 이벤트 저장소, outbox, 서버 동기화, UI용 스토어
server/ Neon(Drizzle) 스키마와 동기화 저장소
app/ Next.js 라우트 (화면은 얇게, 로직은 ui/·core/에)
ui/ 화면 컴포넌트와 훅
학습 기록은 이벤트 로그(풀이·세션·메모)로 저장하고, 실력 레벨은 로그를 접어서 계산한다. 그래서 어느 기기든 같은 로그면 같은 상태가 나오고, 오프라인에서 쌓인 기록도 나중에 그대로 합쳐진다.
확장 포인트
| 하고 싶은 것 | 고칠 곳 |
|---|
| 새 주제/팩 추가 | src/content/packs/… 작성 후 src/content/index.ts에 등록 |
| 새 문제 유형(예: 순서 맞추기) | core/content/types.ts 타입, core/content/kinds.ts 채점·배치, ui/session/question-views.tsx 렌더러 |
| 목표 정답률·조절 폭 | core/engine/config.ts |
| 로컬 저장을 IndexedDB로 | storage/kv.ts의 KeyValueStore 구현 추가 후 ui/learner/runtime.ts에서 교체 |
| 서버 저장소 교체 | server/sync/repository.ts의 SyncRepository 구현 |
개발
npm install
npm run dev # http://localhost:3000
npm test # 엔진·세션·동기화·콘텐츠 무결성 테스트
npm run lint
DB 없이도 그대로 동작한다(기기 로컬 저장 모드). DB를 붙이려면 .env에 DATABASE_URL을 넣고 npm run db:migrate.
스키마를 바꾸면 npm run db:generate로 drizzle/에 마이그레이션을 만들어 커밋한다. 배포 빌드(npm run build)가 시작 전에 마이그레이션을 적용한다.
배포 (Vercel + Neon)
- Vercel에서 이 저장소를 Import → 그대로 Deploy (DB 없이도 동작)
- Vercel 프로젝트 → Storage → Neon(Postgres) 생성/연결 →
DATABASE_URL이 자동 등록됨
- Redeploy → 빌드 중 테이블이 자동 생성되고, 앱 설정 화면에 "서버와 동기화됨"이 표시됨
