52 lines
3.3 KiB
Markdown
52 lines
3.3 KiB
Markdown
# Technology Atlas · Lost Update
|
|
|
|
기술을 정의 암기가 아니라 **예측 → 실행 관찰 → 증거 비교 → 인과 설명 → 새 사례 전이**로 깊이 학습하는 첫 번째 완성형 딥다이브입니다. 공개 범위는 `Transaction Isolation / Lost Update` 하나이며, 실제 장애나 특정 데이터베이스의 동작을 진단한다고 주장하지 않습니다.
|
|
|
|
## 바로 확인하기
|
|
|
|
Node.js 18 이상에서 별도 설치 없이 실행됩니다.
|
|
|
|
```bash
|
|
cd hyeonworks/app
|
|
npm run dev
|
|
```
|
|
|
|
브라우저에서 <http://127.0.0.1:4173>을 엽니다. 포트를 바꾸려면 `npm run dev -- --port 8080`처럼 실행합니다.
|
|
|
|
확인할 핵심 흐름은 다음과 같습니다.
|
|
|
|
1. 첫 화면에서 **개념을 알고 있어요** 또는 **증상만 알고 있어요** 중 하나를 선택합니다.
|
|
2. 서로 다른 준비 화면이 동일한 `Lost Update` Lab으로 합쳐지는지 확인합니다.
|
|
3. Predict에서 먼저 가설을 고르고, Observe에서 6개 실행 이벤트를 한 단계씩 진행합니다.
|
|
4. Compare에서 기대값 `120`과 관찰값 `70`을 대조합니다.
|
|
5. Explain에서 `같은 100 → B의 마지막 write 70 → A의 +50 소실`을 구성합니다.
|
|
6. Transfer에서 새 재고 사례의 사라진 변화까지 찾아 완료합니다.
|
|
|
|
증상 입구는 디버거처럼 관찰값에서 후보 메커니즘을 좁히지만, 실제 로그 분석·AI 장애 진단·원격 데이터베이스 실행 기능은 아닙니다. 제품 화면에도 이 경계를 명시했습니다.
|
|
|
|
## 검증하기
|
|
|
|
```bash
|
|
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이며, 공개 콘텐츠의 두 번째 주제가 아닙니다.
|