기술을 정의 암기가 아니라 예측 → 실행 관찰 → 증거 비교 → 인과 설명 → 새 사례 전이로 깊이 학습하는 첫 번째 완성형 딥다이브입니다. 공개 범위는 Transaction Isolation / Lost Update 하나이며, 실제 장애나 특정 데이터베이스의 동작을 진단한다고 주장하지 않습니다.

바로 확인하기

Node.js 18 이상에서 별도 설치 없이 실행됩니다.

cd hyeonworks/app
npm run dev

브라우저에서 http://127.0.0.1:4173을 엽니다. 포트를 바꾸려면 npm run dev -- --port 8080처럼 실행합니다.

확인할 핵심 흐름은 다음과 같습니다.

첫 화면에서 개념을 알고 있어요 또는 증상만 알고 있어요 중 하나를 선택합니다.
서로 다른 준비 화면이 동일한 Lost Update Lab으로 합쳐지는지 확인합니다.
Predict에서 먼저 가설을 고르고, Observe에서 6개 실행 이벤트를 한 단계씩 진행합니다.
Compare에서 기대값 120과 관찰값 70을 대조합니다.
Explain에서 같은 100 → B의 마지막 write 70 → A의 +50 소실을 구성합니다.
Transfer에서 새 재고 사례의 사라진 변화까지 찾아 완료합니다.

증상 입구는 디버거처럼 관찰값에서 후보 메커니즘을 좁히지만, 실제 로그 분석·AI 장애 진단·원격 데이터베이스 실행 기능은 아닙니다. 제품 화면에도 이 경계를 명시했습니다.

검증하기

npm test

npm test는 두 검증을 순서대로 수행합니다.

npm run test:static: 승인된 R4 산출물 해시, zero runtime dependency, 로컬 자산, 시맨틱 셸과 디자인 토큰을 확인합니다.
npm run test:e2e: Chrome에서 360/768/1280px, 두 입구, 전체 5단계 루프, 키보드 조작, skip link 상태 보존, 한국어 줄바꿈, 가로 overflow 격리, 오류 후 재시도, 대비 수치를 검증합니다.

Production revision verification-hardening-2는 승인 R4를 기반으로, 진행 중인 부드러운 스크롤 도중 skip link를 눌러도 현재 main을 즉시 완전히 노출하고 짧은 안정화 구간 동안 이전 스크롤이 재개되지 않도록 보강했습니다. 변경 이유와 원본·현재 해시는 verification/approved-r4.json에 함께 기록돼 있습니다.

E2E는 로컬 puppeteer-core와 Chrome을 사용합니다. 필요하면 PUPPETEER_CORE_PATH와 CHROME_BIN으로 위치를 지정할 수 있습니다. 실행 중 생성되는 화면은 verification/screenshots/에서 확인할 수 있습니다.

구조

dist/: 그대로 배포 가능한 정적 HTML/CSS/JavaScript
scripts/serve.cjs: 외부 의존성 없는 로컬 정적 서버와 보안 헤더
scripts/verify_static.cjs: 승인 기준선 및 정적 품질 검사
scripts/verify_flow.cjs: 실제 브라우저 전체 흐름 검사
verification/approved-r4.json: 승인된 디자인 프로토타입과의 무결성 계약
verification/screenshots/: E2E 상태별 확인 화면

검증용 #/lab/tx-lost-update-inventory-fixture route는 화면에서 노출하지 않습니다. 동일한 학습 엔진이 다른 데이터 record와도 섞이지 않는지 확인하는 회귀 fixture이며, 공개 콘텐츠의 두 번째 주제가 아닙니다.