딱 필요한 만큼 시리즈의 실습 페이지 모음. 한 가지 도구를 30분 안에 익히도록 만든 단편 실습장들이 한 곳에 모여 있습니다.

배포: https://just.weniv.co.kr/

루트는 책 선택 허브이고, 각 책마다 별도 폴더에 실습장이 들어 있습니다.

• 좌측 입력 / 우측 미리보기 실시간 렌더링
• 자동 저장 (LocalStorage), 다크 모드, 도구 모음, 예제 9종
• 머메이드 다이어그램, 코드 하이라이팅, 프론트매터 카드, GitHub 알림박스
• MD / HTML 복사, .md 저장

• 좌측 JSON 입력 / 우측 트리 시각화
• 타입별 색상, 펼치기·접기, 컨테이너 요약 (3 keys, 5 items)
• 노드 클릭 시 JSONPath ($.users[0].name) 즉시 표시·복사
• 정렬·압축 버튼, 라인/열 단위 에러 메시지, 예제 5종

• 컬러 피커 + hex / rgb / hsl 양방향 변환
• HSL 슬라이더, 명도 단계 (10%~90%), 자동 팔레트 (유사·삼각·보색)
• WCAG 명도 대비 체크 (AA / AAA · 본문 / 큰 글씨)
• 프리셋 (Tailwind 시그니처 색), CSS 변수 형식 출력

• Unix 초 / 밀리초 / ISO 8601 / 사람 형식 양방향 동기화
• 6개 시간대 동시 보기 (서울·도쿄·런던·뉴욕·LA·UTC)
• 지금과의 상대 시간, 요일·해의 며칠째·UTC 오프셋
• 자주 쓰는 형식 8종 (RFC 2822, 한국어, 파일명용 등) — 클릭 시 복사

• HTML / CSS / JS 세 탭에 별도 버퍼 + sandbox iframe 라이브 미리보기
• 자동 갱신 토글, JS 오류는 미리보기 안에서 감싸서 표시
• 예제 6종: 기본 페이지, 플렉스 카드, 그리드 레이아웃, 폼+검증, 호버/트랜지션, 반응형

• 구분자 자동 감지 (쉼표·탭·세미콜론·파이프)
• 컬럼 타입 추론 (number / boolean / date / string), 헤더 클릭 정렬
• 차트 뷰: X축(범주) + Y축(숫자) + 집계 (sum/avg/count/max/min) → SVG 막대 차트
• 예제 4종: 출석부, 월별 매출, 한국 도시, 베스트셀러

• 메서드 + URL + 헤더 리스트 + 바디 빌더
• 위니브 eduAPI 프리셋 9종 (회원가입·로그인·토큰 확인·사용자 목록 + 블로그 CRUD)
• 응답: 상태 코드 색상, 시간/크기 표시, JSON 트리, 헤더, 원문 탭
• 로그인 응답의 access_token 자동 저장 → "토큰 사용" 버튼 한 번으로 다른 요청에 주입

• JWT 분해 (헤더 / 페이로드 / 서명) + alg·iss·sub·aud·iat·nbf·exp 사람 시간으로
• 만료 여부 / 아직 유효 X 같은 상태 배지
• Base64 ↔ Base64URL ↔ 평문 양방향 동기화 (한글 포함)
• URL 인코딩, HTTP 실습장에 저장된 토큰 가져오기
• 예제 토큰 4종 (HS256, RS256, 만료, OAuth)

• 5필드 표현식 분해 (분 / 시 / 일 / 월 / 요일) + 사람 말 풀이
• 선택한 시간대(서울·UTC·뉴욕·LA·런던·도쿄) 기준 다음 실행 시각 5개
• DOM/DOW OR 시맨틱, */n step, 1-5 범위, mon/jan 별칭, @daily 매크로 지원
• 자주 쓰는 프리셋 9종 (매분 / 평일 9시 / 매월 1일 / 매년 등)

• 패턴 + 플래그(g/i/m/s/u) → 테스트 문자열에서 매치 라이브 하이라이트
• 캡처 그룹과 이름 있는 그룹((?<year>\d{4}))을 인덱스·값으로 표 출력
• 토글로 플래그 직관적 조작, 시작·끝 인덱스 표시, 0-너비 매치 안전 처리
• 자주 쓰는 패턴 8종 (이메일·URL·휴대폰·날짜·IPv4·hex 컬러·한글·이름 그룹)

just/
├── index.html # 허브 (책 선택)
├── style.css # 공통 스타일 (테마, 토픽바, split, toast 등)
├── hub.css # 허브 전용 스타일
├── books.js # 책 메타데이터
├── script.js # 허브 스크립트 (테마, 카드 렌더)
├── markdown/ # 마크다운 실습장
├── json/ # JSON 실습장
├── color/ # 색상 실습장
├── time/ # 타임스탬프 실습장
├── html-css/ # HTML / CSS 실습장
├── csv/ # CSV 실습장
├── http/ # HTTP 실습장 (위니브 eduAPI 연결)
├── auth/ # JWT / 인증 실습장
├── cron/ # Cron 실습장
├── regex/ # 정규식 실습장
└── README.md

각 실습장 폴더는 index.html / style.css / script.js 세 파일로 구성되어 있고, 공통 스타일은 루트 style.css 를 재사용합니다.

새 책을 더하려면:

1. books.js 에 메타데이터 한 항목 추가 (slug · title · 책 URL · 상태)
2. 같은 slug 이름의 폴더에 index.html / style.css / script.js 생성
3. index.html 에서 ../style.css 와 자체 ./style.css 를 함께 로드
4. 좌상단 .brand 와 좌하단 .bottombar 패턴은 기존 책을 참고

CDN으로만 로드하며 빌드 단계가 없습니다.

• 마크다운: marked, DOMPurify, highlight.js, mermaid
• 그 외 실습장: 외부 의존성 없음

python -m http.server 8000
# → http://localhost:8000

딱 필요한 만큼 은 한 가지 도구·주제를 30분 분량으로 빠르게 익히는 단편 실용서 시리즈입니다.

• 타겟: 바이브 코더 (AI와 함께 코딩하지만 도구·기초 지식이 얕은 사람들)
• 포지셔닝: 두꺼운 입문서 대신, "AI와 일할 때 막히는 지점" 만 얇고 빠르게 메우는 책
• 공통 표지 라인: 딱 필요한 만큼 / 바이브 코딩을 위한 / {주제}

만든 곳: 위니브 (Weniv) — 위니북스 시리즈