โหมดมืด
Full-Stack
ส่วนหนึ่งของ Beginner Book
📚 ต้องผ่านเล่มอื่นก่อน (เปิดสารบัญเช็คสถานะ):
- Spring Boot Book — เนื้อหา backend (REST, JPA, Security)
- React Book — เนื้อหา frontend (component, hook, TypeScript)
ถ้ายังไม่เคยอ่าน 2 เล่มข้างบน แนะนำเริ่มที่ Spring Boot ก่อน (เพราะ API จะถูกเรียกจาก React ทีหลัง) แล้วค่อยมา full-stack เล่มนี้
หนังสือเล่มนี้พาคุณไปถึงไหน
อ่านจบ + ทำ checkpoint หมด คุณจะ:
- ต่อ React frontend กับ Spring Boot backend ได้จริง
- เข้าใจ CORS, proxy, environment variable
- เข้าใจ JWT auth flow แบบ end-to-end (login → token → protected API)
- Upload file จาก React → Spring Boot → disk/cloud
- Handle error แบบ consistent ทั้ง stack
- Deploy ทั้งคู่ด้วย Docker Compose
- เข้าใจ pattern ที่ production ใช้จริง
💡 เจอคำย่อภาษาอังกฤษในตารางข้างล่าง (CORS, JWT, CRUD, ฯลฯ) แล้วยังไม่คุ้น? ไม่ต้องกังวล — แต่ละบทจะกางคำเต็ม + อธิบายภาษาไทยให้ตอนเจอครั้งแรกเสมอ และดู mini-glossary ข้างล่างได้เลย
Mini-glossary — คำย่อที่จะเจอบ่อย
| ย่อ | เต็ม | คำอ่าน | ความหมายสั้น |
|---|---|---|---|
| CORS | Cross-Origin Resource Sharing | คอร์ส | กฎเรียก API ข้าม origin |
| JWT | JSON Web Token | จ๊อต / เจ-ดับเบิ้ลยู-ที | บัตรผ่านดิจิทัลหลัง login |
| CRUD | Create, Read, Update, Delete | ครัด | สร้าง/อ่าน/แก้/ลบ |
| API | Application Programming Interface | เอ-พี-ไอ | ช่องทางให้โปรแกรมเรียกกัน |
| REST | Representational State Transfer | เร็สท์ | สถาปัตยกรรม API ผ่าน HTTP |
| JSON | JavaScript Object Notation | เจ-สัน | รูปแบบข้อความส่งข้อมูล |
| DTO | Data Transfer Object | ดี-ที-โอ | object ส่งข้อมูลเข้า-ออก API |
| SPA | Single Page Application | เอส-พี-เอ | เว็บหน้าเดียว |
| CDN | Content Delivery Network | ซี-ดี-เอ็น | กระจายไฟล์ static ใกล้ผู้ใช้ |
| HTTP | HyperText Transfer Protocol | เอช-ที-ที-พี | โปรโตคอลคุยกันบนเว็บ |
| LTS | Long Term Support | แอล-ที-เอส | เวอร์ชันซัพพอร์ตยาว |
ดูคำเต็มในบทที่ 0 §"คำย่อที่จะเจอบ่อยในเล่มนี้"
บทเรียน
| # | บท | สอนอะไร |
|---|---|---|
| 0 | ภาพรวม Full-Stack | Architecture, request flow, เครื่องมือ, project structure |
| 1 | เชื่อม React กับ Spring Boot | CORS, proxy, axios/fetch, API layer, env config |
| 2 | Auth Flow แบบ End-to-End | Login form → JWT → store token → attach header → protected route |
| 3 | CRUD + Optimistic UI | Full CRUD flow, error handling, optimistic update, real-time feedback |
| 4 | File Upload | Upload จาก React → Spring Boot, progress bar, validation, preview |
| 5 | Deploy ด้วย Docker | Docker multi-stage, nginx reverse proxy, docker-compose, env management |
เครื่องมือที่ใช้ในเล่มนี้ (2026)
| เครื่องมือ | เวอร์ชัน | หมายเหตุ |
|---|---|---|
| Java | 25 LTS (แนะนำ) — min 21 | JDK 25 = LTS ปัจจุบัน (ก.ย. 2025) · Eclipse Temurin |
| Spring Boot | 3.4+ | 2026 GA (3.5 ถ้า GA แล้วตอนอ่าน) |
| React | 19 | with TypeScript |
| Vite | 7+ | build tool (Vite 7 ออกปี 2025) |
| TanStack Query | v5 | data fetching + cache |
| React Hook Form + Zod | latest | form validation |
| React Router | v7 | routing — 2026 alternatives: TanStack Router, Next.js App Router |
| PostgreSQL | 16+ | database |
| Node.js | 22 LTS | run Vite/React (Node 20 เข้า maintenance ปี 2026) |
| Docker | 27+ | deployment |
🌐 2026 stack ที่นิยมในวงกว้าง (ไม่ครอบในเล่มนี้แต่ดีรู้ไว้):
- Auth: OAuth 2.1 (PKCE), Passkeys/WebAuthn 2.0, Auth.js (NextAuth v5), Clerk, Better Auth
- DB hosting: Neon, Supabase, Turso, CockroachDB Serverless
- Edge runtime: Cloudflare Workers, Vercel Edge, Deno Deploy, Bun
- Deploy: Vercel, Netlify, Cloudflare Pages, Fly.io, Coolify (self-host)
- Frontend alt: Next.js 15, Vue 3.5, Svelte 5 (runes), Angular 19, Server Components / Server Actions