// 이 파일이 하는 일: "메모리와 저장장치 깊이 보기" 코스 — RAM이 데이터를 기억하는 원리에서
// 출발해 SSD 내부 구조, 램 부족이 PC를 느리게 만드는 연쇄 반응까지 8개 섹션으로 안내하는
// 정적 학습 페이지. (RAM 동작 → 용량 체감 → 듀얼채널 → SSD 내부 → NVMe vs SATA
// → 스왑의 연쇄 → 리소스 모니터 실습 → 개발 PC 권장 사양)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

import { Link } from 'react-router-dom';

// ── 텍스트 다이어그램 · 표 상수들 ──

const CODE_RAM_ADDRESS = `RAM = 번호가 붙은 거대한 사물함 벽

주소(번호)     내용물 (1칸 = 1바이트)
─────────────────────────────────────
0x0000        01001000   ← 'H'
0x0001        01101001   ← 'i'
0x0002        00100001   ← '!'
...
(8GB 램이면 이런 칸이 약 86억 개!)

CPU: "0x0001번 사물함 내용물 줘"  → 즉시 꺼내 줌
어느 칸이든 똑같은 속도로 접근 가능 — 그래서 이름이
Random Access Memory (아무 데나 바로 접근하는 메모리)`;

const CODE_VOLATILE = `휘발성이란? — 전원이 꺼지면 전부 증발

          RAM (휘발성)          SSD/HDD (비휘발성)
────────────────────────────────────────────────
비유       책상 위               책장/서랍
속도       매우 빠름             상대적으로 느림
전원 OFF   전부 사라짐 ⚡        그대로 남음
역할       "지금 작업 중"인 것    "보관"하는 것

작업 흐름: 파일을 열면 → 책장(SSD)에서 꺼내 책상(RAM)에 펼침
저장(Ctrl+S)하면 → 책상 위 내용을 책장에 다시 꽂음
저장 안 하고 정전되면? → 책상 위 내용만 날아감 (겪어봤죠...)`;

const CODE_CAPACITY = `램 용량별 체감 — "책상 크기" 비교

 8GB — 학생용 1인 책상
   브라우저 탭 10개 + 문서 작업 정도는 OK
   IDE + 브라우저 + Docker 띄우면 이미 꽉 참

16GB — 넉넉한 사무용 책상
   VSCode/IntelliJ + 브라우저 탭 수십 개 + Docker 컨테이너
   두세 개까지 무난. 개발 입문의 현실적인 최소선

32GB — 회의실 대형 테이블
   프론트(React 개발 서버) + 백엔드(Spring Boot) +
   PostgreSQL + Docker 여러 개 + 브라우저 전부 동시에.
   우리 회사 풀스택 개발 환경이 여유 있게 돌아가는 크기

핵심: 램이 크다고 '속도'가 빨라지는 게 아니라,
      '동시에 펼쳐놓을 수 있는 일'이 많아지는 것!`;

const CODE_DUAL_CHANNEL = `듀얼채널 — 램을 2개로 나눠 꽂으면 길이 2배

싱글채널 (16GB 1개)          듀얼채널 (8GB 2개)

CPU ══════ [16GB]           CPU ══════ [8GB]
     1차선                       ══════ [8GB]
                                  2차선!

같은 16GB라도 2개로 나눠 꽂으면 CPU↔램 사이가
왕복 2차선 도로가 돼서 데이터 전송 대역폭이 최대 2배.

메인보드 램 슬롯이 4개라면 보통 1-3번 또는 2-4번처럼
같은 색 슬롯에 짝지어 꽂아야 듀얼채널이 활성화돼요.
(메인보드 설명서에 짝이 표시되어 있습니다)`;

const CODE_SSD_INSIDE = `SSD 뚜껑을 열면 — 부품은 딱 두 종류가 핵심

┌─────────────────────────────────┐
│  [컨트롤러]   [NAND] [NAND]     │
│   (사서)      [NAND] [NAND]     │
│               (책장들)          │
└─────────────────────────────────┘

NAND 플래시: 전기를 가둬서 0/1을 기억하는 칩. 전원이
  꺼져도 갇힌 전기가 유지돼서 데이터가 남아요(비휘발성).

컨트롤러: NAND를 관리하는 작은 CPU(도서관 사서).
  - 어느 칸에 뭘 쓸지 배치 (같은 칸만 닳지 않게 순환 배치)
  - 지우고 다시 쓰기 관리 (NAND는 덮어쓰기가 안 되고
    블록째 지운 뒤 써야 함 — 사서가 이걸 숨겨서 처리)

수명(TBW, Total Bytes Written): NAND 한 칸은 쓰고 지우기를
반복하면 닳아요. "총 몇 TB까지 쓸 수 있는지"가 TBW 스펙.
예) TBW 300TB = 매일 80GB씩 써도 10년 이상 — 일반 사용은
걱정 X. 다만 로그를 초당 수백 MB씩 쓰는 서버는 계산 필요!`;

const CODE_NVME_SATA = `NVMe vs SATA — 같은 SSD인데 '도로'가 다르다

              SATA SSD          NVMe SSD
──────────────────────────────────────────────
연결 통로     SATA (구형 규격)   PCIe (CPU 직행로)
순차 읽기     ~550 MB/s          3,500~7,000+ MB/s
생김새        2.5인치 네모 박스   껌처럼 얇은 M.2 스틱

체감 비유 — 10GB 게임 설치 파일 복사:
  HDD(~150MB/s)  : 약 67초   시내버스
  SATA(~550MB/s) : 약 18초   지하철
  NVMe(~5GB/s)   : 약 2초    KTX

단, '작은 파일 수천 개'나 프로그램 실행 체감은
순차 속도만큼 차이 나지 않아요 — 부팅이 2초 만에
끝나지 않는 이유. 스펙표의 최고 속도는
"뻥 뚫린 고속도로에서의 최고 속도"라고 이해하면 됩니다.`;

const CODE_SWAP_CHAIN = `램 부족 → 스왑 → 느려짐의 연쇄 반응

1) 램(책상)이 꽉 참
2) OS: "당장 안 쓰는 것들, 책상에서 치우자"
   → 램의 일부 내용을 SSD의 '스왑 공간'(임시 창고)으로 옮김
3) 그런데 그 프로그램을 다시 클릭하면?
   → 창고에서 도로 책상으로 가져와야 함
4) 램은 나노초(ns), SSD는 마이크로초(µs) 단위
   → 수백~수천 배 느린 창고를 계속 왕복
5) 책상↔창고 왕복만 하느라 정작 일을 못 함
   = "컴퓨터가 미친듯이 느려졌는데 CPU는 놀고 있는" 그 상태!

증상 체크리스트:
- 창 전환할 때마다 1~2초 멈칫
- 디스크 사용률이 100%에 붙어 있음
- 램 사용률 90%↑ 인데 CPU는 한가함
→ 셋 다 해당되면 범인은 십중팔구 램 부족(스왑)입니다.`;

const CODE_RESOURCE_MONITOR = `# 실습 1 — 작업 관리자로 내 램 상태 읽기
Ctrl + Shift + Esc → [성능] 탭 → [메모리]

읽을 것:
  사용 중 / 전체     예) 12.3/16.0GB — 지금 책상이 얼마나 찼나
  속도               예) 3200MHz — 램의 클럭
  슬롯 사용됨        예) 2/4 — 듀얼채널인지 힌트! (섹션 3)
  커밋됨             실제 램보다 크면 스왑을 쓰고 있다는 뜻

# 실습 2 — 리소스 모니터로 더 깊이
Win + R → resmon 입력 → [메모리] 탭

  '하드 폴트/초' 그래프 주목!
  하드 폴트 = "찾는 데이터가 램에 없어서 디스크(스왑)까지
  다녀온 횟수". 이 그래프가 계속 치솟으면
  섹션 6에서 배운 스왑 연쇄가 지금 일어나는 중이에요.

# 실습 3 — 범인 잡기
[프로세스] 탭에서 메모리 열을 클릭해 정렬 →
브라우저를 20탭쯤 열었다 닫으며 숫자 변화를 관찰해 보세요.`;

const CODE_DEV_SPEC = `AWESOMEDEV 개발 PC 권장 사양 (2026 기준)

부품     최소          권장          이유
─────────────────────────────────────────────────────
RAM     16GB          32GB          IDE+Docker+브라우저 동시
                      (듀얼채널)     (섹션 2·3에서 배운 그대로)
SSD     NVMe 512GB    NVMe 1TB      Docker 이미지·node_modules가
                                    수십 GB를 순식간에 먹음
CPU     6코어         8코어↑        빌드·컨테이너는 코어를 다 씀

왜 이 조합인가? — 우리 스택을 전부 띄워 보면:
  IntelliJ/VSCode      ~2-4GB
  React 개발 서버       ~1-2GB
  Spring Boot          ~1-2GB
  PostgreSQL(Docker)   ~0.5-1GB
  Docker 엔진+기타      ~2GB
  브라우저(탭 20개)     ~3-6GB
  Windows 자체         ~4GB
  ──────────────────────────
  합계                 ~14-21GB  ← 16GB면 이미 스왑 직전!

교훈: "개발 PC는 CPU보다 램에서 먼저 병목이 온다."`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. props만 바꿔 재사용.
function Section({ n, title, sub, children }) {
  return (
    <section className="step-card" id={`sec-${n}`}>
      <div className="step-head">
        <span className="step-num">{n}</span>
        <div>
          <h3>{title}</h3>
          {sub && <span className="step-sub">{sub}</span>}
        </div>
      </div>
      <div className="step-body">{children}</div>
    </section>
  );
}

function Code({ children }) {
  return <pre className="code-block"><code>{children}</code></pre>;
}

const SECTIONS = [
  { n: 1, label: 'RAM의 동작' },
  { n: 2, label: '용량별 체감' },
  { n: 3, label: '듀얼채널' },
  { n: 4, label: 'SSD 내부와 수명' },
  { n: 5, label: 'NVMe vs SATA' },
  { n: 6, label: '스왑의 연쇄' },
  { n: 7, label: '리소스 모니터 실습' },
  { n: 8, label: '개발 PC 사양' },
];

export default function MemoryStoragePage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 컴퓨터 기초</div>
        <h1>메모리와 저장장치 깊이 보기</h1>
        <p>
          "램을 늘리면 빨라진다"는 말, 왜 맞고 언제 틀릴까요? RAM이 데이터를 기억하는
          원리부터 SSD 속 NAND 칩, 그리고 램 부족이 PC 전체를 마비시키는 연쇄 반응까지 —
          내 PC를 열어 보듯 하나씩 뜯어봅니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">실습 3개 (내 PC로 바로)</span>
          <span className="chip">준비물: Windows PC 하나</span>
        </div>
      </div>

      {/* 섹션 바로가기 */}
      <nav className="pill-nav">
        {SECTIONS.map((s) => (
          <a key={s.n} href={`#sec-${s.n}`}>
            <b>{s.n}</b>
            {s.label}
          </a>
        ))}
      </nav>

      <Section n={1} title="RAM은 어떻게 기억할까" sub="번호 붙은 사물함, 그리고 전원이 꺼지면 사라지는 이유">
        <p>
          RAM은 <strong>번호(주소)가 붙은 초소형 사물함 수십억 개</strong>가 늘어선 벽이에요.
          CPU가 "3번 사물함 내용 줘" 하면 즉시 꺼내 주죠. 1번부터 차례로 뒤질 필요 없이
          <strong> 어느 칸이든 같은 속도로 바로</strong> 접근할 수 있어서 이름이
          Random Access(임의 접근) Memory입니다.
        </p>
        <Code>{CODE_RAM_ADDRESS}</Code>
        <p>
          그런데 RAM에는 치명적인 성격이 하나 있어요 — <strong>휘발성</strong>.
          RAM의 각 칸은 아주 작은 축전지에 전기를 채워 0/1을 표현하는데, 이 전기가
          순식간에 새어 나가서 <strong>1초에 수천 번씩 다시 채워(리프레시)</strong> 줘야 해요.
          전원이 꺼지면? 다시 채워 줄 수 없으니 전부 증발합니다.
        </p>
        <Code>{CODE_VOLATILE}</Code>
        <svg className="diagram" viewBox="0 0 640 320" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="CPU, RAM, 저장장치의 속도 계층 피라미드. 위로 갈수록 빠르고 용량이 작으며, 아래로 갈수록 느리고 용량이 크다.">
          <rect x="240" y="36" width="160" height="62" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="320" y="62" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--ink)">CPU</text>
          <text x="320" y="82" textAnchor="middle" fontSize="12" fill="var(--muted)">일하는 곳 (계산 담당)</text>
          <rect x="170" y="112" width="300" height="72" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <text x="320" y="140" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">RAM — 책상</text>
          <text x="320" y="162" textAnchor="middle" fontSize="12" fill="var(--muted)">나노초(ns) · 휘발성 — 전원 꺼지면 증발</text>
          <rect x="90" y="198" width="460" height="72" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="2" />
          <text x="320" y="226" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">SSD / HDD — 책장</text>
          <text x="320" y="248" textAnchor="middle" fontSize="12" fill="var(--muted)">마이크로초(µs) 이상 · 비휘발성 — 꺼져도 그대로</text>
          <line x1="48" y1="270" x2="48" y2="72" stroke="var(--muted)" strokeWidth="1.5" strokeLinecap="round" />
          <polyline points="42,80 48,68 54,80" fill="none" stroke="var(--muted)" strokeWidth="1.5" strokeLinecap="round" />
          <text x="48" y="52" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">빠름</text>
          <text x="48" y="292" textAnchor="middle" fontSize="13" fill="var(--muted)">느림</text>
          <line x1="592" y1="72" x2="592" y2="270" stroke="var(--muted)" strokeWidth="1.5" strokeLinecap="round" />
          <polyline points="586,262 592,274 598,262" fill="none" stroke="var(--muted)" strokeWidth="1.5" strokeLinecap="round" />
          <text x="592" y="52" textAnchor="middle" fontSize="12" fill="var(--muted)">용량 작음</text>
          <text x="592" y="292" textAnchor="middle" fontSize="12" fill="var(--muted)">용량 큼</text>
          <text x="320" y="300" textAnchor="middle" fontSize="12" fill="var(--muted)">파일 열기 = 책장→책상 · 저장(Ctrl+S) = 책상→책장</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 속도 계층 피라미드 — 위로 갈수록 빠르고, 아래로 갈수록 용량이 크다</p>
        <div className="tip">
          <b>비유 하나로 정리</b> RAM은 <strong>책상</strong>, SSD는 <strong>책장</strong>이에요.
          책상은 손만 뻗으면 닿지만(빠름) 퇴근하면 치워지고, 책장은 걸어가야 하지만(느림)
          내일도 그대로 있죠. 과제하다 저장 안 하고 노트북이 꺼져서 울어 본 적 있다면 —
          그게 바로 휘발성을 몸으로 배운 겁니다.
        </div>
      </Section>

      <Section n={2} title="8GB vs 16GB vs 32GB" sub="용량이 크면 '빨라지는' 게 아니라 '안 느려지는' 것">
        <p>
          램 용량은 <strong>책상의 크기</strong>예요. 책상이 크다고 글씨를 빨리 쓰게 되진 않지만,
          책상이 작으면 책을 폈다 접었다 하느라 시간을 다 씁니다. 즉 램 증설의 효과는
          "속도 상승"이 아니라 <strong>"동시에 펼칠 수 있는 작업량의 상승"</strong>이에요.
        </p>
        <Code>{CODE_CAPACITY}</Code>
        <p>
          그래서 램이 <strong>남아도는</strong> 사람이 8GB→32GB로 올려도 체감이 없고,
          램이 <strong>모자라던</strong> 사람은 "새 컴퓨터 같다"고 느끼는 거예요.
          내가 어느 쪽인지는 섹션 7의 실습에서 숫자로 직접 확인합니다.
        </p>
        <div className="warn">
          <b>흔한 오해</b> "크롬이 램을 많이 먹는 건 나쁜 것"? — 절반만 맞아요.
          비어 있는 램은 그냥 낭비이기 때문에, OS와 프로그램은 <strong>남는 램을 캐시로
          적극 활용</strong>합니다. 문제는 램을 많이 '쓰는' 게 아니라, 다른 프로그램이
          필요할 때 <strong>내놓지 못하는</strong> 상황(진짜 부족)이에요.
        </div>
      </Section>

      <Section n={3} title="듀얼채널" sub="같은 16GB라도 1개보다 2개가 빠른 이유">
        <p>
          램 용량이 책상 크기라면, <strong>채널</strong>은 CPU와 책상 사이의
          <strong> 도로 차선 수</strong>예요. 램을 한 개 꽂으면 1차선, 두 개를 짝지어 꽂으면
          2차선 — 같은 시간에 오갈 수 있는 데이터가 최대 2배가 됩니다.
        </p>
        <Code>{CODE_DUAL_CHANNEL}</Code>
        <p>
          그래서 조립 PC를 맞출 때 "16GB 1개"보다 <strong>"8GB 2개"</strong>가 보통 더 나은
          선택이에요(나중에 증설 여유는 줄지만요). 특히 내장 그래픽을 쓰는 노트북은 그래픽
          메모리까지 램을 같이 쓰기 때문에 듀얼채널 여부가 게임 프레임에도 티가 확 납니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> <span className="kbd">Ctrl</span>+<span className="kbd">Shift</span>+<span className="kbd">Esc</span>로
          작업 관리자를 열고 [성능] → [메모리]에서 <strong>"슬롯 사용됨"</strong>을 보세요.
          <span className="icode">2/4</span>나 <span className="icode">2/2</span>면 듀얼채널일
          가능성이 높고, <span className="icode">1/2</span>면 싱글채널 — 램 한 개만 더 꽂아도
          대역폭이 늘어날 수 있는 PC라는 뜻이에요.
        </div>
      </Section>

      <Section n={4} title="SSD 내부 — NAND와 컨트롤러" sub="전기를 가둬 기억하는 책장과, 그걸 관리하는 사서">
        <p>
          SSD 안에는 모터도 원판도 없어요. <strong>NAND 플래시</strong>라는 메모리 칩과,
          그걸 지휘하는 <strong>컨트롤러</strong> 칩이 사실상 전부입니다. NAND는 아주 작은
          방에 전자를 가두는 방식으로 0/1을 기억하는데, RAM과 달리 <strong>전원이 꺼져도
          갇힌 전자가 그대로 유지</strong>돼요 — 그래서 저장장치가 될 수 있는 거죠.
        </p>
        <Code>{CODE_SSD_INSIDE}</Code>
        <p>
          NAND의 방은 <strong>쓰고 지우기를 반복하면 문이 닳는</strong> 소모품이에요.
          그래서 컨트롤러(사서)는 특정 방만 혹사당하지 않게 쓰기를 골고루 분산시키고
          (웨어 레벨링), 제조사는 "이 SSD는 총 몇 TB까지 쓸 수 있어요"라는
          <strong> TBW</strong> 수치로 수명을 보증합니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 내 SSD의 건강 상태는 스펙표가 아니라 SSD 스스로가
          기록하고 있어요(S.M.A.R.T. 정보). Windows에서
          <span className="kbd">Win</span>+<span className="kbd">R</span> →
          <span className="icode">cmd</span> →
          <span className="icode">wmic diskdrive get model,status</span>를 실행하면 디스크
          모델명과 상태(<span className="icode">OK</span>)를 볼 수 있고, 제조사 관리 도구를
          설치하면 지금까지의 총 쓰기량과 남은 수명 %까지 확인할 수 있습니다.
          내 노트북이 몇 TB나 썼는지 찾아보세요 — 생각보다 훨씬 적어서 놀랄 거예요.
        </div>
      </Section>

      <Section n={5} title="NVMe vs SATA" sub="같은 SSD, 다른 도로 — 시내버스와 KTX">
        <p>
          SSD의 속도는 NAND 자체보다 <strong>어떤 통로(인터페이스)로 연결되느냐</strong>가
          좌우해요. <strong>SATA</strong>는 HDD 시절부터 쓰던 구형 도로라 최고 속도가
          약 550MB/s에서 막히고, <strong>NVMe</strong>는 CPU로 직행하는 고속도로(PCIe)를
          써서 수천 MB/s를 냅니다.
        </p>
        <Code>{CODE_NVME_SATA}</Code>
        <svg className="diagram" viewBox="0 0 640 248" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="HDD, SATA SSD, NVMe SSD로 10GB 파일을 복사할 때 걸리는 시간 비교 막대 그래프. HDD 약 67초, SATA 약 18초, NVMe 약 2초.">
          <text x="320" y="24" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">10GB 파일을 통째로 복사하면? (순차 읽기 기준)</text>
          <line x1="170" y1="40" x2="170" y2="206" stroke="var(--line)" strokeWidth="1.5" />
          <text x="160" y="58" textAnchor="end" fontSize="13" fontWeight="600" fill="var(--ink)">HDD</text>
          <text x="160" y="74" textAnchor="end" fontSize="12" fill="var(--muted)">~150MB/s</text>
          <rect x="170" y="46" width="320" height="32" rx="6" fill="var(--rose)" />
          <text x="498" y="66" fontSize="13" fill="var(--ink)">약 67초 · 시내버스</text>
          <text x="160" y="118" textAnchor="end" fontSize="13" fontWeight="600" fill="var(--ink)">SATA SSD</text>
          <text x="160" y="134" textAnchor="end" fontSize="12" fill="var(--muted)">~550MB/s</text>
          <rect x="170" y="106" width="86" height="32" rx="6" fill="var(--amber)" />
          <text x="264" y="126" fontSize="13" fill="var(--ink)">약 18초 · 지하철</text>
          <text x="160" y="178" textAnchor="end" fontSize="13" fontWeight="600" fill="var(--ink)">NVMe SSD</text>
          <text x="160" y="194" textAnchor="end" fontSize="12" fill="var(--muted)">~5GB/s</text>
          <rect x="170" y="166" width="12" height="32" rx="6" fill="var(--teal)" />
          <text x="190" y="186" fontSize="13" fill="var(--ink)">약 2초 · KTX</text>
          <text x="320" y="234" textAnchor="middle" fontSize="12" fill="var(--muted)">막대 길이 = 걸리는 시간 · 짧을수록 빠르다 (스펙표의 최고 속도 기준)</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 10GB 파일 복사 시간 비교 — 막대가 짧을수록 빠른 저장장치</p>
        <p>
          다만 스펙표의 숫자는 <strong>큰 파일을 쭉 이어서 읽을 때</strong>의 최고 속도예요.
          개발할 때 자주 만나는 <span className="icode">node_modules</span>처럼
          <strong> 자잘한 파일 수만 개</strong>를 다루는 작업은 NVMe라도 스펙 속도가 안 나옵니다.
          KTX도 정거장(파일 하나하나의 처리)마다 서면 평균 속도가 뚝 떨어지는 것과 같아요.
        </p>
        <div className="warn">
          <b>구매 함정</b> M.2 슬롯에 꽂는 껌 모양 SSD라고 전부 NVMe는 아니에요 —
          모양은 M.2인데 속은 SATA인 제품도 있습니다. 스펙표에서
          <span className="icode">PCIe</span>/<span className="icode">NVMe</span> 표기를
          꼭 확인하세요.
        </div>
      </Section>

      <Section n={6} title="램 부족 → 스왑 → 느려짐" sub="'컴퓨터가 왜 이렇게 느리지'의 가장 흔한 범인">
        <p>
          책상(RAM)이 꽉 차면 OS는 일을 멈추는 대신, 당장 안 쓰는 것들을
          <strong> SSD 위의 임시 창고(스왑, 페이지 파일)</strong>로 옮겨서 자리를 만들어요.
          여기까지는 똑똑한 대처인데 — 문제는 그 다음입니다.
        </p>
        <Code>{CODE_SWAP_CHAIN}</Code>
        <p>
          RAM과 SSD의 속도 차이는 <strong>수백~수천 배</strong>예요. 책상 위 자료는 눈만
          돌리면 보이는데, 창고 자료는 매번 엘리베이터를 타고 내려가야 하는 셈이죠.
          창고를 뻔질나게 드나들기 시작하면(스래싱), 컴퓨터는 일 대신
          <strong> 짐 옮기기만 하는 상태</strong>가 됩니다. 이때 CPU 사용률은 오히려 낮아요 —
          CPU도 데이터가 도착하길 기다리며 놀고 있으니까요.
        </p>
        <div className="tip">
          <b>연결해서 생각하기</b> 스왑이 잦은 PC는 SSD에 쓰기가 계속 발생해요 —
          섹션 4에서 배운 <strong>TBW(수명)</strong>도 그만큼 빨리 깎이죠. 램 부족은
          속도만이 아니라 SSD 수명까지 갉아먹는, 이중으로 손해인 상태입니다.
        </div>
      </Section>

      <Section n={7} title="리소스 모니터 실습" sub="내 PC의 램 상태를 숫자로 진단하기">
        <p>
          이제 배운 걸 전부 내 PC에서 확인할 시간이에요. Windows에는 진단 도구가
          기본으로 두 개 들어 있습니다 — 간단한 <strong>작업 관리자</strong>와,
          더 깊이 보는 <strong>리소스 모니터(resmon)</strong>.
        </p>
        <Code>{CODE_RESOURCE_MONITOR}</Code>
        <p>
          핵심 지표는 <strong>하드 폴트/초</strong>예요. "필요한 데이터가 램에 없어서
          디스크까지 다녀온 횟수"니까, 섹션 6의 스왑 연쇄가 <strong>지금 일어나고 있는지</strong>를
          실시간 그래프로 보여 주는 셈이죠. 평소엔 잠잠하다가 프로그램을 잔뜩 열면
          치솟는 걸 직접 목격해 보세요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기 (미니 과제)</b> ① 리소스 모니터를 열어 둔 채로
          브라우저 탭을 20~30개 열고, IDE와 Docker Desktop까지 실행해 보세요.
          ② 램 사용률·하드 폴트 그래프가 어떻게 변하는지 관찰하고,
          ③ "내 PC는 몇 GB쯤에서 스왑이 시작되더라"를 한 줄로 기록해 보세요.
          그 한 줄이 다음 섹션(권장 사양)을 읽는 나만의 기준이 됩니다.
        </div>
      </Section>

      <Section n={8} title="개발 PC 권장 사양" sub="우리 스택을 다 띄우면 램이 몇 GB 필요할까">
        <p>
          어썸데브의 개발 환경은 React 개발 서버 + Spring Boot + PostgreSQL + Docker를
          <strong> 동시에</strong> 띄우는 풀스택이에요. 하나하나는 가벼워도, 다 더하면
          책상이 순식간에 찹니다. 실제로 합산해 볼까요?
        </p>
        <Code>{CODE_DEV_SPEC}</Code>
        <p>
          합계를 보면 16GB는 <strong>"띄울 수는 있지만 여유가 없는"</strong> 선이라는 게
          보이죠. 여기서 브라우저 탭 몇십 개(개발자의 숙명)가 더해지면 섹션 6의 스왑
          연쇄가 시작됩니다. 그래서 권장이 32GB — 사양표의 숫자는 외우는 게 아니라,
          이렇게 <strong>내 작업량을 합산해서 스스로 도출</strong>하는 거예요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 섹션 7에서 기록한 "내 PC의 스왑 시작 지점"과 위 합산표를
          비교해 보세요. 지금 내 장비로 우리 스택 전체를 띄울 수 있을지, 무엇을 줄여야
          할지(예: 브라우저 탭 정리, 안 쓰는 컨테이너 <span className="icode">docker stop</span>)
          판단할 수 있으면 이 코스는 합격입니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🧠 여기까지 왔다면</h3>
          <p className="muted">
            이제 "램을 늘리면 빨라져요?"라는 질문에 <strong>"네 상황엔 맞아/틀려"</strong>를
            근거와 함께 답할 수 있어요 — 책상과 책장, 스왑의 연쇄, 그리고 리소스 모니터의
            하드 폴트 그래프까지. 다음은 이 하드웨어 위에서 프로그램이 실제로 도는 과정 —{' '}
            <Link to="/learn/network"><strong>네트워크의 이해</strong></Link> 코스에서 데이터가
            내 PC 밖으로 나가는 여행을 이어서 배우고, 멘토에게 섹션 7의
            "내 PC 진단 한 줄"을 공유하는 것으로 과제를 마무리하세요.
          </p>
        </div>
      </div>
    </div>
  );
}
