Hành Trang Cần Chuẩn Bị 🎒¶
Hướng dẫn (guide) này sẽ không dạy bạn lập trình lại từ con số 0. Để theo kịp nhịp độ, bạn nên làm quen trước với những kiến thức dưới đây. Nếu thấy phần nào còn lạ lẫm — đừng lo lắng, chỉ cần mở thêm một tab để tra cứu nhanh là đủ, không cần phải cày cuốc quá sâu ngay từ đầu đâu nhé!
Bắt Buộc Phải Biết 🛑¶
JavaScript Hiện Đại (ES2020+)¶
Bạn cần quen với các cú pháp viết code gọn gàng của JS đời mới:
// Viết hàm ngắn gọn (Arrow function), tách biến (destructuring), gộp object (spread)
const sum = (a, b) => a + b;
const { name, age } = user;
const merged = { ...obj1, ...obj2 };
// Xử lý bất đồng bộ (đợi data về rồi mới chạy tiếp)
async function getUser(id) {
const res = await fetch(`/api/users/${id}`);
return res.json();
}
// Kiểm tra null an toàn (Optional chaining) & fallback giá trị (nullish coalescing)
const city = user?.address?.city ?? 'Unknown';
// Nối chuỗi tiện lợi không cần dấu cộng (Template literals)
const greeting = `Hello, ${name}!`;
Nếu bạn chưa quen mấy món này, hãy lướt qua trang JavaScript.info — đọc phần "JavaScript Fundamentals" và "Promises, async/await" là tự tin chiến được.
Giao Tiếp HTTP Cơ Bản¶
Cách trình duyệt nói chuyện với server:
- Hành động (Methods):
GET(xin dữ liệu),POST(gửi dữ liệu mới),PUT/PATCH(cập nhật),DELETE(xóa). - Mã trạng thái (Status codes):
200Mọi thứ ô-kê,201Đã tạo thành công,400Gửi sai thông tin,401Chưa đăng nhập,403Đăng nhập rồi nhưng không có quyền,404Không tìm thấy,500Lỗi do server. - Tiêu đề (Headers): Các thông tin kẹp theo như
Authorization(chứng minh bạn là ai),Content-Type(định dạng dữ liệu),Cookie. - Nơi chứa dữ liệu:
body(thường nằm trong POST/PUT) vàquery string(nằm ngay trên thanh địa chỉ kiểu?key=valuedùng cho GET).
Quản Lý Thư Viện với npm / package.json¶
Các lệnh cơ bản để gọi và cài đặt thư viện ngoài:
npm init -y # Khởi tạo nhanh file package.json
npm install <package> # Tải một thư viện về dùng
npm install -D <package> # Tải thư viện chỉ dùng trong lúc code (dev)
npm run <script> # Chạy các lệnh tự định nghĩa trong package.json
Git Cơ Bản¶
Biết cách lưu lại lịch sử code và đồng bộ lên mạng:
Dùng Terminal (Cửa Sổ Lệnh) Căn Bản¶
Biết gõ mấy lệnh này để sinh tồn:
cd (đổi thư mục), ls (xem danh sách file), mkdir (tạo thư mục), cat (xem nội dung file), mv (di chuyển/đổi tên), rm (xóa file).
Biết cách đặt biến môi trường (export FOO=bar), nối lệnh (|), và ghi kết quả ra file (>, >>).
Biết Thì Tốt (Vừa Đọc Vừa Học Cũng Được) 💡¶
TypeScript¶
Đừng sợ hãi, bạn không cần phải là cao thủ TypeScript mới đọc hiểu được. Chỉ cần nắm ý tưởng:
// Gắn mác kiểu dữ liệu cho biến
let count: number = 0;
const name: string = 'Alice';
// Định nghĩa cấu trúc của một object
interface User { id: string; name: string; age?: number; }
// Generic (kiểu dữ liệu linh hoạt, gọi là gì thì nó là cái đó)
function first<T>(arr: T[]): T | undefined { return arr[0]; }
// Union type (Biến chỉ được nhận một trong các giá trị này)
type Status = 'idle' | 'loading' | 'success' | 'error';
React (Viết bằng Hàm & Hooks)¶
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
Lưu ý: Chúng ta sẽ chia tay với Class components, trong guide này KHÔNG xài đến nó nhé.
Truy Vấn Cơ Sở Dữ Liệu SQL Cơ Bản¶
Cách ra lệnh cho database:
-- Đọc dữ liệu
SELECT * FROM users WHERE email = 'alice@test.com';
-- Thêm dữ liệu mới
INSERT INTO users (id, email, name) VALUES (?, ?, ?);
-- Cập nhật dữ liệu
UPDATE users SET name = ? WHERE id = ?;
-- Xóa dữ liệu
DELETE FROM users WHERE id = ?;
-- Lấy dữ liệu từ nhiều bảng kết hợp lại (Join)
SELECT u.name, g.name as group_name
FROM users u JOIN group_members gm ON u.id = gm.user_id
JOIN groups g ON gm.group_id = g.id;
Bảng Tra Cứu Thuật Ngữ (Glossary) 📖¶
Những từ lóng bạn sẽ hay gặp trong nghề:
| Thuật ngữ | Giải thích dân dã |
|---|---|
| SPA | Single Page App — Web chỉ tải HTML đúng 1 lần đầu, sau đó mọi thứ hiển thị mượt mà do JS tự vẽ ra. |
| Edge | Đem code của bạn copy ra hàng trăm máy chủ (data center) trên toàn cầu, user ở đâu thì chạy code ở máy chủ gần nhất cho lẹ. |
| Serverless | Không cần nuôi một server chạy tốn điện 24/7. Khi nào có khách ghé thăm (có request) thì code mới thức dậy để chạy. |
| JWT | JSON Web Token — Tấm vé thông hành mã hóa, chứa thông tin của user (như userId, quyền hạn) để đi lại trong app. |
| PBKDF2 | Cách băm (hash) mật khẩu cố tình làm cho cực chậm để mấy tay hacker nản chí, không rảnh mà thử từng mật khẩu một (brute-force). |
| HMAC | Đóng dấu bảo mật vào dữ liệu bằng một mã bí mật, để lúc nhận biết chắc là hàng chuẩn, chưa bị ai sửa trên đường đi. |
| base64url | Một kiểu mã hóa chữ cái sao cho nhét vừa vào thanh địa chỉ URL mà không bị lỗi (thay + / bằng - _ và bỏ dấu =). |
| CORS | Chính sách bảo vệ của trình duyệt, ngăn không cho web nhà này tự tiện gọi sang API của nhà người khác nếu chưa xin phép. |
| CSRF | Trò lừa đảo: Hacker lừa bạn (khi đang đăng nhập sẵn) bấm nhầm vào một nút để tự động làm việc xấu (chuyển tiền, xóa bài...) mà bạn không hề hay biết. |
| XSS | Trò lừa đảo: Hacker nhét code mã độc thẳng vào trang web của bạn để theo dõi hoặc cắp thông tin người dùng. |
| Hot Module Replacement (HMR) | Cứ lưu code là web tự cập nhật thay đổi ngay tắp lự mà không cần bạn phải bấm F5 (reload) lại trang. |
| Tree-shaking | Tính năng dọn rác của trình gom code: Code nào bạn viết ra mà không xài tới, nó tự động chặt bỏ cho nhẹ web. |
| Reconciliation | Cách React làm việc: Nó so sánh bản vẽ UI cũ và mới xem có gì thay đổi không, rồi mới lôi đúng chỗ đó ra để cập nhật lên màn hình. |
| Stale-while-revalidate | Chiến thuật hiển thị: Cứ ném ra dữ liệu cũ cho user xem liền cho nhanh, rồi âm thầm đi lấy dữ liệu mới ở background để cập nhật sau. |
| Migration | File kịch bản ghi lại các bước thay đổi cấu trúc của database (thêm cột, bỏ bảng...), chạy lần lượt theo thứ tự thời gian. |
| Binding | (Trong Cloudflare Workers) Cầu nối để code của bạn "chạm" được vào Database hay ổ cứng ảo thông qua biến env.X. |
| Isolate (V8) | Một môi trường chạy JS siêu nhẹ, cô lập hoàn toàn. Các nền tảng như Workers dùng cái này để chạy code cực nhanh thay vì bật cả một hệ điều hành to bự. |
| nanoid | Công cụ tạo mã ID ngẫu nhiên siêu tốc — an toàn khi làm link và không ai đoán mò được. |
| Soft delete | "Xóa giả vờ" — thay vì xóa mất tích luôn khỏi database, ta chỉ đánh dấu cột deleted_at là đã xóa để sau này còn đường mà khôi phục. |
Lên Đồ Trước Khi Vào Việc 🛠️¶
Đảm bảo máy bạn đã cài sẵn những "đồ nghề" sau:
# Node.js (phiên bản từ 18 trở lên)
node --version
# npm (công cụ quản lý thư viện)
npm --version
# Cài đặt Wrangler (công cụ để làm việc với Cloudflare)
npm install -g wrangler
wrangler --version
# Tạo một tài khoản Cloudflare (Miễn phí hoàn toàn)
# Link đăng ký: [https://dash.cloudflare.com/sign-up](https://dash.cloudflare.com/sign-up)
# Đăng nhập vào Cloudflare trên cửa sổ lệnh
wrangler login
Mọi thứ đã sẵn sàng? Cùng bắt đầu thôi! 🚀