useState / setState แล้ว component re-renderuseState — เก็บค่าที่เปลี่ยนแล้วต้อง render ใหม่useEffect — ทำ side effect (เรียก API, subscribe, จัดการ DOM ภายนอก)useMemo / useCallback — จำผลคำนวณ / จำ reference ของฟังก์ชัน เพื่อลด re-renderuseRef — เก็บค่าที่เปลี่ยนแต่ "ไม่ต้อง" render ใหม่ เช่น ชี้ DOM, เก็บ timer iduseContext — อ่านค่าจาก Context โดยไม่ต้อง drill props[] = รันครั้งเดียวหลัง mount[x] = รันใหม่เมื่อ x เปลี่ยนuseEffect(() => { const t = setInterval(...); return () => clearInterval(t); }, [])useMemo(fn, deps) — จำ ค่าผลลัพธ์ ใช้เมื่อคำนวณหนัก เช่น filter/sort list ใหญ่useCallback(fn, deps) — จำ ตัวฟังก์ชัน (reference) ใช้เมื่อส่ง callback ให้ child ที่ถูก React.memo ครอบ หรือเป็น dependency ของ hook อื่นReact.memo ครอบ component ที่ render แพง + parent ส่ง props ที่ reference คงที่ (ใช้ useMemo/useCallback ช่วย)react-window) สำหรับ list ยาว ๆvalue + onChange) — validate และจัดการได้ทันทีที่พิมพ์ เป็นวิธีหลักของ Reactref.current.value — เขียนน้อยกว่า เหมาะฟอร์มง่าย ๆ หรือ integrate กับ library เก่าrevalidate) — ได้ความเร็วของ static + ข้อมูลไม่เก่าเกินไปpages/ = หน้า, ดึงข้อมูลด้วย getServerSideProps / getStaticPropsapp/, มี layout.tsx ที่คงอยู่ข้ามหน้า (ไม่ re-render ซ้ำ), nested layout, โหลดด้วย loading.tsx / error.tsx แบบสร้างเสร็จ'use client'await ดึงข้อมูลตรง ๆ ได้เลย, token/secret ไม่หลุดมาเบราว์เซอร์useState, useEffect, event onClick ไม่ได้ → ส่วนที่ต้อง interactive แยกเป็น Client Components ('use client')app/api/xxx/route.ts export GET / POST ฯลฯpages/api/*.ts (API Routes แบบเดิม)next/image: ย่อ/สร้างหลายขนาดอัตโนมัติ, lazy load, กัน layout shift (กำหนด width/height) → คะแนน LCP/CLS ดีขึ้นmetadata export{ type: 'cart/addItem', payload }takeLatest, debounce, cancel, ลำดับงานซับซ้อนได้ดี แต่ learning curve สูงกว่าv-if, v-for, v-model) — React ใช้ JSX กับ JS ล้วนref(value): ใช้ได้ทุกชนิด (primitive/object) — เข้าถึงใน script ต้องมี .value แต่ใน template เรียกตรง ๆ ได้reactive(obj): เฉพาะ object/array — เข้าถึง property ตรง ๆ ไม่ต้อง .value แต่ destructure แล้วเสีย reactivityref เป็นหลักเพื่อความสม่ำเสมอv-if: สร้าง/ทำลาย element จริง ใน DOM — toggle บ่อยแพง (มีค่าใช้จ่ายสร้างใหม่) แต่ไม่แสดงก็ไม่กิน resourcev-show: element อยู่ใน DOM เสมอ แค่สลับ display: none — toggle ถี่ ๆ เบากว่าemit event ขึ้น (emit('submit', data))v-model: two-way binding ทำฟอร์มสะดวกvar: function scope, มี hoisting (ได้ undefined), ประกาศซ้ำได้ → เลี่ยงใช้let: block scope { }, hoisting แต่เข้า TDZ (Temporal Dead Zone — เรียกก่อนประกาศจะ error ทันที)const: บล็อกสโคป + ห้าม assign ใหม่ (แต่ข้างใน object ยังแก้ได้ ถ้าไม่ freeze)const, ต้อง reassign ค่อยใช้ letfunction makeCounter(){ let c=0; return () => ++c; } แต่ละอันที่ได้มี c ของตัวเองsetTimeout(()=>console.log(1),0); Promise.resolve().then(()=>console.log(2)); console.log(3); → ตอบ 3, 2, 1console.log("1");
setTimeout(() => console.log("6"), 0);
Promise.resolve().then(() => console.log("4"));
(async () => {
console.log("2");
await null; // พักที่นี่
console.log("5"); // continuation = microtask
})();
console.log("3");await = ยุบ .then ให้อ่านเหมือน synchronous, ใช้ได้เฉพาะใน async functiontry/catch (เทียบเท่า .catch) — ถ้าไม่จับจะกลายเป็น unhandled rejectionawait Promise.all([a(), b()]) เร็วกว่า await ทีละอัน — ถ้าอยากให้ตัวไหนพังไม่ดึงทั้งกลุ่ม ใช้ Promise.allSettledfinally ใช้ปิด spinner ฯลฯ== แปลงชนิดข้อมูลก่อนเทียบ (coercion): '5' == 5 เป็น true, null == undefined เป็น true=== เทียบ ทั้งค่า + ชนิด ไม่แปลงอะไร — '5' === 5 เป็น false=== เสมอเว้นแต่ตั้งใจเช็ค null/undefined พร้อมกัน (x == null)this กำหนดตอน เรียกใช้ ไม่ใช่ตอนประกาศ: ใน method ของ obj → obj, เรียกเปล่า ๆ (non-strict) → window, arrow function → ยืม this จาก scope นอกcall(obj, a, b) / apply(obj, [a, b]) — เรียกทันที ต่างที่รูปแบบ argumentbind(obj) — สร้างฟังก์ชันใหม่ที่ผูก this ถาวรmap: แปลงทุกตัว → ได้ array เท่าเดิม (เช่นแปลง dto เป็น model สำหรับ UI)filter: คัดที่ผ่านเงื่อนไข → array สั้นลงหรือเท่าเดิมreduce: รวมทั้ง array เป็น ค่าเดียว (sum, group by, สร้าง object จาก array)Promise = object ที่เก็บ สถานะ + ผลลัพธ์ + รายชื่อ callback ที่รออยู่
pending → fulfilled (มี value) หรือ rejected (มี reason) — เปลี่ยนได้ ครั้งเดียว แล้ว lock ตลอดกาล (settled แล้วเปลี่ยนอีกไม่ได้)new Promise(...) — ไม่รอแป๊บเดียว:new Promise((resolve) => {
console.log("A"); // รัน sync ทันที
resolve(42);
});
console.log("B"); // A ก่อน B เสมอ
resolve(v) ไม่ได้ "เรียก callback" ทันที — แค่เปลี่ยนสถานะ แล้ว เข้าคิว microtask เพื่อเรียก .then ทีหลังthen ที่ register กับ promise ที่ settled แล้ว ก็ยังรันเป็น microtask เสมอ (การันตี async)resolve(p2) → รอ p2 settle ก่อน ("thenable unwrapping") นี่คือหัวใจของ chaining.catch → unhandledrejection ใน browser / warning ใน Nodeกติกาทองของ Event Loop:
.then/.catch/.finally, await resume, queueMicrotask, MutationObserversetTimeout/setInterval, event (click/keydown), I/O, setImmediate (Node)console.log("1");
setTimeout(() => console.log("6"), 0);
Promise.resolve().then(() => console.log("4"));
(async () => {
console.log("2");
await null;
console.log("5");
})();
console.log("3");
// output: 1 2 3 4 5 6
setTimeout(fn, 0) จริง ๆ คือ setTimeout(fn, 1ms) ตาม spec — และ ไม่เคย แซง microtaskconsole.log("1");
setTimeout(() => console.log("6"), 0);
Promise.resolve().then(() => console.log("4"));
(async () => {
console.log("2");
await null; // พักที่นี่
console.log("5"); // continuation = microtask
})();
console.log("3");async function = function ที่ return Promise เสมอ + await คือจุด "หยุด-ต่อ" ของ state machine
await = continuation — engine แบ่งฟังก์ชันเป็นท่อน ๆ คล้าย generator (yield → .next())async function load() {
const a = await step1(); // จุด split
return step2(a);
}
// ~ เทียบเท่ากับ
function load() {
return Promise.resolve()
.then(() => step1()) // ท่อน 1
.then((a) => step2(a)); // ท่อน 2 (continuation)
}
await → ฟังก์ชัน หยุดและ pop ออกจาก stack ทันที (ไม่ block thread!) คืน promise ให้คนเรียกไปก่อนreturn x ใน async fn = resolve(x), throw e = reject(e)ทุก .then คืน promise ใหม่เสมอ — เลยต่อกันเป็นท่องได้ และ error เด้งข้ามท่อนที่ไม่มี handler
getUser() .then((u) => getOrders(u.id)) // return promise → ท่อนต่อไปรองานนี้ .then((orders) => save(orders)) .catch((e) => log(e)) // จับ error จาก "ทุกท่อนข้างบน" .finally(() => hideSpinner()); // รันเสมอไม่สนผลลัพธ์ (ไม่เปลี่ยนค่าที่ส่งต่อ)
catch(fn) = then(null, fn) — จับได้ทั้ง rejection และ throw ในท่อนก่อนหน้า.catch ไม่ rethrow → ถือว่า "กู้error สำเร็จ" → ท่อนถัดไปกลับมาเป็น fulfilledthen(onF, onR) แบบ 2 ตัว: onF ไม่จับ error ของท่อนก่อนหน้า (ต่างจาก catch ที่จับทั้งท่อ).catch ระดับลึกเงียบ ๆ แล้วปล่อย UI คิดว่าสำเร็จ — error ควร bubble ถึงที่จัดการจริง.catch คืนค่าปกติ → .then ถัดไปรัน; .catch ที่ throw → .then ข้ามไป catch ตัวถัดไปPromise.all([p1, p2]) — เก็บค่าตาม ลำดับ array ไม่ใช่ลำดับเสร็จ / ตัวไหน reject ตัวเดียว → ทั้งก้อน reject ทันที (fail-fast) → ใช้เมื่องาน "ต้องสำเร็จทุกอย่าง" เช่นโหลดข้อมูลหน้าจอPromise.allSettled — รอทุกตัวจบ ได้ [{status: "fulfilled", value}, {status: "rejected", reason}] → ใช้เมื่อ "อยากรู้ผลทุกงาน" เช่น bulk import รายงานว่าสำเร็จ/พังกี่รายการPromise.race — ตัวแรกที่ settle (ไม่ว่าจะสำเร็จ/พัง) ชนะ → ใช้ทำ timeout, cancelPromise.any — ตัวแรกที่ fulfill ชนะ / พังทั้งหมด → AggregateError → ใช้เมื่อ "ขออันใดอันหนึ่งสำเร็จก็พอ" เช่นลองหลาย mirrorAbortControllerconst results = await Promise.allSettled(urls.map(fetchOne)); const ok = results.filter((r) => r.status === "fulfilled").length;
console.log("start");
setTimeout(() => console.log("timeout"), 0);
Promise.resolve()
.then(() => { console.log("p1"); })
.then(() => { console.log("p2"); });
const p = new Promise((res) => {
console.log("executor");
res();
}).then(() => console.log("p0"));
console.log("end");
Output: start → executor → end → p1 → p0 → p2 → timeout
start — syncexecutor — executor ของ new Promise รัน sync ทันที (จุดที่คนพลาดบ่อยสุด)timeout เข้า macrotask queue / p1 + p0 เข้า microtask queue ตามลำดับการ registerend — sync จบ → stack ว่างp1 → ระหว่างรัน .then ตัวถัดไป (p2) ถูกคิว ต่อท้ายคิว หลัง p0 → p0 → p2timeouttry/catch ครอบ await จับได้เพราะ rejection กลายเป็น exception ตรงจุดนั้น:try {
const res = await fetch(url);
if (!res.ok) throw new Error(res.status);
} catch (e) {
setError(e.message); // จับทั้ง network error และ throw ของเรา
}
fn() ไม่ throw — มันคืน promise ที่ reject ตอนหลัง → กลายเป็น unhandledrejectionawait fn().catch(handle) หรือ try/catch ครอบ await — อย่า mix จนซ้อนเยอะfetch ไม่ reject กับ HTTP 4xx/5xx (reject เฉพาะ network down) — ต้องเช็ค res.ok เอง อีกจุดที่ข้อสอบชอบถามwindow.addEventListener("unhandledrejection", ...) ส่งเข้า loggingPromise ธรรมดา cancel ไม่ได้ — แต่ AbortController เป็นสัญญาณกลางที่ฝั่ง producer เช็คแล้วเลิกทำ
const ctrl = new AbortController();
const timer = setTimeout(() => ctrl.abort(), 5000);
try {
const res = await fetch(url, { signal: ctrl.signal });
} catch (e) {
if (e.name === "AbortError") return; // ถูกยกเลิก ≠ error จริง
throw e;
} finally { clearTimeout(timer); }
useEffect(() => {
const ctrl = new AbortController();
fetch(url, { signal: ctrl.signal }).then(...).catch(...);
return () => ctrl.abort(); // cleanup
}, [url]);
AbortSignal.timeout(5000) = ทางลัดสร้าง signal ที่หมดเวลาเองawait ในลูปแล้วเช็ค signal.aborted ระหว่างทำPromise.all ยิงทุกอันพร้อมกัน — งานเป็นพันอันจะกด server ตาย ต้องมี pool จำกัด
async function mapLimit(items, limit, worker) {
const results = new Array(items.length);
let next = 0;
async function runner() {
while (next < items.length) {
const i = next++; // ควักงานถัดไป (atomic ใน JS เพราะ single-thread)
results[i] = await worker(items[i], i);
}
}
await Promise.all(Array.from({ length: Math.min(limit, items.length) }, runner));
return results; // ครบตามลำดับเดิมเสมอ
}
Semaphore patternawait นอกฟังก์ชันได้ใน ES module — Next.js ใช้จุดนี้ทำ streaming SSR รอ data ก่อนเรนเดอร์เสร็จPromise.withResolvers() (ES2024) ลบ boilerplate รูปแบบ "เก็บ resolve ไว้ใช้ทีหลัง":// เดิม: let resolve; const p = new Promise((r) => resolve = r);
const { promise, resolve, reject } = Promise.withResolvers();
setTimeout(() => resolve("done"), 1000);
await promise;
Promise.try(fn) (ES2025): เรียกฟังก์ชัน sync แล้วได้ผลเป็น promise เสมอ — จับ throw แบบ sync ให้กลายเป็น rejection ทันที (สะดวกกับ .catch ท่อเดียวจบ)AbortSignal.any([...]) รวมหลาย signal, structuredClone คู่กับ web workerหลักการ: ลองใหม่เฉพาะ error ที่ "น่าจะหายเอง" (network/5xx/429) + รอด้วยเวลาเพิ่มขึ้น + มี jitter กัน thundering herd
async function retry(fn, { tries = 3, baseMs = 300 } = {}) {
for (let i = 0; ; i++) {
try {
return await fn();
} catch (e) {
const retriable = e.name === "TypeError" || e.status >= 500 || e.status === 429;
if (i >= tries - 1 || !retriable) throw e;
const wait = baseMs * 2 ** i + Math.random() * 100; // 300, 600, 1200 + jitter
await new Promise((r) => setTimeout(r, wait));
}
}
}
retriable — อย่า retry กับ 400/401/403 เพราะลองร้อยครั้งก็พังเหมือนเดิมRetry-After มาใช้แทนสูตรถ้า server บอกมาAbortController ได้: โดน abort ให้ throw ทันทีไม่ต้อง retryretry option) ให้แล้ว// A: ลำดับ (sequential) — งานชิ้นหลังรอชิ้นก่อนเสร็จเสมอ
for (const id of ids) {
await save(id); // รวมเวลา = ผลรวมของทุกงาน
}
// B: ขนาน (parallel)
await Promise.all(ids.map((id) => save(id))); // รวมเวลา ≈ งานที่ช้าที่สุด
ids.forEach(async (id) => await save(id)) — forEach ไม่รอ async callback! วนจบก่อนงานเสร็จ → ใช้ for...of หรือ map + Promise.all เท่านั้นfor await...of ใช้กับ async iterable (stream ทีละชิ้น) ไม่ใช่ array ธรรมดาtype/interface ทำหน้าที่เป็น เอกสาร ของข้อมูล — ทีมอ่านรู้ทันทีว่า API ส่งอะไรมาA | B), intersection, tuple, mapped/conditional typeArray<T>, Promise<T>function getField<T, K extends keyof T>(obj: T, key: K): T[K] หรือ API wrapper api.get<User>('/me') ได้ response เป็น User เต็ม ๆany: ปิดตรวจทุกอย่าง (หลุดจากความปลอดภัย) — เลี่ยงunknown: รับอะไรก็ได้แต่ต้องตรวจ/ยืนยัน type ก่อนใช้ — ปลอดภัยกว่า any สำหรับค่าจากภายนอกnever: ค่าที่เป็นไปไม่ได้ (เช่น return ของฟังก์ชันโยน error เสมอ)Partial<T>, Pick<T, K>, Omit<T, K>, Record<K, V>, ReturnType<F>box-sizing: content-box (default) width = แค่ content แต่ border-box รวม padding+border แล้ว* { box-sizing: border-box } เพราะคิดขนาดง่ายกว่าstatic: ปกติ (default) ไหลตามเอกสารrelative: ขยับจากตำแหน่งเดิมได้ (top/left) และทำหน้าที่เป็น แกนอ้างอิง ให้ absolute ลูกabsolute: หลุดจากการไหล ชี้ตำแหน่งกับ ancestor ที่ position ไม่ใช่ static ที่ใกล้สุดfixed: ติดกับ viewport (เช่นแถบเมนูบนสุด) เลื่อนหน้าก็ไม่ขยับsticky: อยู่กับที่จนถึงจุดที่กำหนดแล้วเกาะ (เช่น หัวตาราง)viewport meta + mobile-first เขียน mobile ก่อนแล้วเพิ่ม @media (min-width: ...) ขยายขึ้นmax-width, min-heightflex justify-between p-4 md:text-lg) — responsive ผ่าน prefix breakpoint (sm:, md:, lg:) ไม่ต้องเขียน media query เอง และไม่ตั้งชื่อ class ใหม่Access-Control-Allow-Origin ฯลฯ ให้ถูก domain, หรือทำ proxy ให้ same-origin (เช่น Next.js rewrites) — ไม่ใช่ปิด security ของเบราว์เซอร์httpOnly ได้ → JS อ่านไม่ได้ กัน XSS, มี SameSite กัน CSRFSameSite=Lax/Strict ของ cookie, ตรวจ Origin/Referer, ใช้ Authorization header แทน cookie#/page): ส่วนหลัง # ไม่ถูกส่งไป server → deploy ง่าย ไม่ต้อง config อะไร แต่ URL ไม่สวยและ SEO แย่กว่า/page): URL สะอาด ใช้ history.pushState — แต่ user กด refresh แล้ว server ต้อง fallback กลับมาที่ index.html ไม่งั้น 404React.lazy / dynamic import ของ Next), tree-shaking, ลด library หนักgo doWork() พอ — เบากว่า OS thread มากch := make(chan int) ส่ง ch <- v รับ v := <-ch (blocking จนมีค่า — เป็นจุด sync ไปในตัว)sync.WaitGroup (Add/Done/Wait)func main() {
ch := make(chan int) // unbuffered
go worker(1, ch) // goroutine ใหม่
ch <- 1 // ส่ง (บล็อกจนมีคนรับ)
close(ch)
}defer file.Close(), defer rows.Close(), defer mu.Unlock()defer func(){ if r := recover(); r != nil {...} }()interface{ error }, io.Reader ไม่ผูกกับ implementationany (= interface{}) รับได้ทุกค่า แต่ต้อง type assert (v.(string)) ก่อนใช้if err != nil { return err } เป็นประจำfmt.Errorf("query user: %w", err) แล้วผู้เรียกเช็คด้วย errors.Is / ดึงรายละเอียดด้วย errors.Asvar ErrNotFound = errors.New("not found")) เพื่อเทียบด้วย errors.Is ได้(s MyStruct) method(): ได้ สำเนา — แก้ field ข้างในไม่กระทบตัวเดิม(s *MyStruct) method(): ทำงานกับตัวจริง — แก้ state ได้, ไม่ copy struct ใหญ่ (ประหยัด)ctx := r.Context() แล้วส่งต่อเข้า service/DB call — เมื่อ client ยกเลิก/หมดเวลา ทุกชั้นรู้และหยุดทำงาน (query ก็ยกเลิก)context.WithTimeout(ctx, 3*time.Second) ตั้งเวลา, context.WithValue ใส่ค่า เช่น request id (อย่าใช้เก็บพารามิเตอร์ธุรกิจ)c.ShouldBindJSON(&req))c.Next() ส่งต่อ) — ใช้ทำ logging, auth, recover จาก panic, CORSmain.go → router → handlers (รับ/ตอบ HTTP) → services (business logic) → repositories (คุย DB) — ชั้นชัด เทสต์แยกได้database/sql + driver go-mssqldb หรือใช้ GORM เป็น ORM (migrate, struct↔table)app.Use(async (ctx, next) => { /*ก่อน*/ await next(); /*หลัง*/ })DbContext = unit of work, DbSet<T> = ชุด entity; เปลี่ยนแปลงแล้ว SaveChanges() เป็น transaction.Include(x => x.Items) ดึง relation มาใน query เดียว — ป้องกัน N+1 (query ลูกแยกทีละ parent รวมเป็นร้อย query).AsNoTracking() เร็วกว่า (ไม่เก็บ change tracking)add-migration / update-database (หรือ script SQL สำหรับ production) คุม schema จากโค้ดWhere, Select, OrderBy, GroupBy ...)ToList(), foreach) — ต่อเงื่อนไขต่อได้ก่อนยิงจริงIEnumerable: ประมวลผล ใน memory (LINQ to Objects)IQueryable: แปลงเป็น SQL จริง ส่งไป DB — Where ก่อน ToList() ให้ filter ที่ server ไม่ใช่ดึงมาทั้งตารางแล้วค่อยกรอง (พลาดจุดนี้ = ช้ามาก)ToList() เร็ว ๆ = ปิด deferred แล้วทำงานต่อใน memoryasync ทั้ง chain — method ที่ต้องรอใช้ await และคืน Task / Task<T>.Result / .Wait() เสี่ยง deadlock และเปลือง threadasync void ใช้เฉพาะ event handler — error จับไม่ได้[Route], [HttpGet])app.MapGet("/users", ...) เหมาะ microservice/endpoint เล็กappsettings.json → appsettings.{Environment}.json → environment variables/user-secrets (ทับกันได้) — secret ไม่ลง gitIOptions<T> ผูก section ของ config เป็น class แรง ๆapp.UseExceptionHandler (หรือ middleware เอง) แปลง exception เป็น ProblemDetails + log เต็มรูปแบบILogger<T> เขียนเป็น structured log (level, message template) ส่งต่อเข้า ELK/cloud ได้(req, res, next) เรียงลำดับ — next() ส่งต่อ, ไม่เรียก next และไม่ตอบ = request ค้าง(err, req, res, next) ไว้ท้ายสุด — จับ error จาก async ที่ส่งต่อมา (next(err))/customers/{id}/accounts ไม่ใช่ /getCustomerAccount{ code, message, details }/api/v1/), pagination (offset หรือ cursor), และเอกสาร Swagger/OpenAPIexp ควรอายุสั้น + refresh token; ห้ามเก็บข้อมูลลับใน payload (decode อ่านได้)?page=3&pageSize=20 — เขียนง่าย กระโดดไปหน้าไหนก็ได้ แต่ข้อมูลเปลี่ยนระหว่างเปลี่ยนหน้าอาจซ้ำ/หลุด และหน้าลึก ๆ DB ต้อง scan ข้าม (OFFSET 100000 ช้า)?after=abc&limit=20) — เสถียร ไม่พลาดข้อมูล เร็ว (ใช้ index seek) แต่เลื่อนได้ทางเดียวWHERE right.id IS NULL)WHERE YEAR(d) = 2026 (แก้เป็น range), ขึ้นต้น wildcard LIKE '%xx', คอลัมน์เลือก (selectivity) ต่ำSELECT * ดึงคอลัมน์เกิน (ไม่ได้ใช้ covering index)WHERE id IN (...))' OR '1'='1 ในช่อง login แล้ว query กลายเป็นผ่านเสมอ / ลบตารางได้db.Query(sql, args) ทำให้) — ค่าจาก user เป็น "ข้อมูล" ไม่มีทางกลายเป็น "คำสั่ง""...WHERE name = '" + input + "'")openssl s_client, browser padlock, ผูก chain incomplete ทำให้บาง client ไม่ยอมเชื่อDockerfile: บอกขั้นตอนสร้าง image (FROM → COPY → RUN → CMD) — ใช้ multi-stage build ให้ image เล็ก (build ใน stage เต็ม, ตัวรันเอาแค่ artifact)docker-compose.yml: รันหลาย container พร้อมกัน (app + db + redis) เชื่อ network เดียวกันorder.*.created), fanout (กระจายทุก queue ที่ผูกไว้), headers (จับคู่จาก header)XADD, อ่านเป็น consumer group ด้วย XREADGROUP, ยืนยันด้วย XACK, มี pending list ของข้อความที่รับไปแล้วแต่ยังไม่ ack, อ่านย้อนหลังได้COPY package*.json ./ → RUN npm ci → COPY . . — แก้โค้ด 1 ไฟล์ก็ไม่ต้องติดตั้ง dependency ใหม่["node", "app.js"] ไม่ใช่ shell form — ให้ app เป็น PID 1 และรับ signal ได้ (ต่อในข้อ be-082)docker run image อะไรเพิ่ม สิ่งที่พิมพ์จะแทนที่ CMD ทั้งหมด["node","app.js"] รัน process ตรง ๆ รับ signal ได้ / รูปแบบ string จะถูกรันผ่าน /bin/sh -c = SIGTERM ไปไม่ถึง app → docker stop รอ 10 วิแล้ว SIGKILL ทิ้ง = งานถูกตัดกลางคันprocess.on('SIGTERM', ...) ปิด server แล้วค่อย exit / Go ใช้ signal.Notify + cancel contextdocker stop แล้วดูว่า container จบเองภายใน ~10 วิไหม (ปรับเวลารอด้วย stop_grace_period ใน compose)-v mydata:/var/lib/postgresql/data): Docker สร้างและจัดการให้ เก็บบน host นอกเหนือจาก container → ทางการสำหรับข้อมูล DB ใน production ลบ container กี่รอบข้อมูลยังอยู่-v ./src:/app/src): map โฟลเดอร์จริงของ host เข้าไปตรง ๆ → ใช้ตอน dev (แก้โค้ด hot reload) ห้ามใช้เก็บข้อมูล production (ผูก path เครื่อง + ปัญหาสิทธิ์)cached/delegated ช่วยได้บ้าง หรือหลีกเลี่ยงการ mount โฟลเดอร์ที่ I/O หนัก (เช่น node_modules — ใช้ anonymous volume ทับ)postgres:5432 ไม่ต้องจำ IP (IP เปลี่ยนทุกครั้งที่ restart)-p 8080:80 = host port 8080 ส่งต่อเข้า container port 80 (publish) — ส่วน EXPOSE ใน Dockerfile เป็นแค่เอกสาร ไม่ได้เปิดอะไรจริงdocker network ls, docker network inspect, จากใน container ลอง wget/curl หรือ nslookup เพื่อเช็ค DNSup -d / down / logs -f / exec svc sh / psdepends_on: แบบ condition: service_healthy + ใส่ healthcheck ให้ DBup --build ไม่งั้นรัน image เก่าต่อenvironment ต่อ service — อย่า hardcode secret ในไฟล์ที่ commitdocker-compose.override.yml ไว้ใช้เฉพาะ dev (bind mount, debug port) โดยไม่ต้องแตะไฟล์หลักprofiles ใช้กัน service เฉพาะงาน (เช่น mailhog ทดสอบเมล) ไม่ต้องรันทุกครั้งservices:
app:
build: .
ports: ["3000:3000"]
environment:
DATABASE_URL: postgres://db:5432/app # เรียกชื่อ service ได้เลย
depends_on:
db:
condition: service_healthy # รอ "พร้อม" ไม่ใช่แค่ "สตาร์ท"
db:
image: postgres:16
volumes: ["pgdata:/var/lib/postgresql/data"]
healthcheck:
test: ["CMD-SHELL", "pg_isready -U app"]
interval: 5s
volumes:
pgdata:
docker logs -f --tail 100 <ชื่อ>, docker inspect (ค่าจริงของ env/mount/IP เช่น docker inspect -f '{{.State.ExitCode}}' <ชื่อ>), docker stats (CPU/mem แบบสด)docker exec -it <ชื่อ> sh — image ที่ไม่มี shell (distroless) ใช้ docker debug หรือ ephemeral container แทนdocker ps -a ดู exit code — 137 = ถูก kill (ส่วนใหญ่คือ OOMKilled), 125 = คำสั่งตอน run ผิด, 1 = app error ธรรมดา; docker events ดูลำดับเหตุการณ์docker history <image> ดูว่า layer ไหนทำให้อ้วน, เครื่องมือ dive ลงลึกถึงระดับไฟล์ต่อ layerdocker system df ดูว่าอะไรกิน disk, docker system prune (ใส่ --volumes ด้วยความระวัง — ข้อมูล volume หายเลย)down แล้ว up ใหม่ อย่านั่ง "ซ่อมของใน container เดิม" เพราะการแก้นั้นหายทันทีที่ container ถูกสร้างใหม่docker build -t repo/app:tag . → docker push → เครื่องปลายทาง docker pull — ชื่อเต็มของ image คือ registry/repo:tagapp:1.4.2, app:git-abc1234) — เลี่ยง latest เพราะไม่มีวันรู้ว่ากำลังรัน version ไหนอยู่จริง และ rollback ยากdocker buildx build --platform linux/amd64 หรือสร้าง multi-arch (linux/amd64,linux/arm64) ให้ image เดียวรันได้ทุกสถาปัตยกรรมRUN ที่ควรอยู่ด้วยกันและเคลียร์ cache ใน layer เดียวกัน เช่น RUN apt-get update && apt-get install -y curl && rm -rf /var/lib/apt/lists/*USER appuser — root ใน container ถ้าหลุดออกมาทำอันตราย host ได้ง่ายกว่ากันมากENV ที่ฝังตอน build อ่านคืนได้จาก docker history หรือ export image — ส่ง secret ตอนรันแทน (env, secret manager, mount)--read-only (root filesystem อ่านอย่างเดียว + tmpfs จุดที่ต้องเขียน), หลีกเลี่ยง --privileged และการ mount /var/run/docker.sock เข้า container (เท่ากับมอบ root ของ host ให้มัน)trivy image app:tag หรือ docker scout ตรวจ CVE ของ base + dependency — ทำเป็น step ใน CI บล็อก image ที่มีระดับ high/criticalimage@sha256:...) กัน base image เปลี่ยนโดยไม่บอก (supply chain เบื้องต้น) + ใช้ base ที่อัปเดตสม่ำเสมอdocker exec แทน), log ออก stdout ให้เก็บรวมศูนย์docker run --memory=512m --cpus=1.5 หรือใน compose ผ่าน deploy.resources.limits — กัน container ตัวเดียวกินทรัพยากรจนเพื่อนในเครื่องตายตามกัน (noisy neighbor)--max-old-space-size ให้ต่ำกว่า memory limit ของ container (เวอร์ชันใหม่อ่าน cgroup ได้เองแล้ว)-XX:MaxRAMPercentage--memory-reservation เป็นการจองขั้นต่ำให้ scheduler พิจารณา--cpus คือสัดส่วนเวลา CPU ไม่ใช่การจอง core — อยากกำหนด core จริงใช้ --cpuset-cpusdocker stats และ docker inspect -f '{{.State.OOMKilled}}' <ชื่อ>depends_on: condition: service_healthy ให้ app รอจริง ไม่ใช่รันชนกันตอน DB ยังไม่พร้อมdocker stop ส่ง SIGTERM → app ควรหยุดรับ request ใหม่ เก็บงานค้าง ปิด connection แล้วออกเองภายในเวลา (stop_grace_period default 10 วิ) ก่อนถูก SIGKILL — สำคัญมากตอน rolling update ใน production/health ควรเบา (ไม่เรียก service ภายนอกหนัก ๆ), ไม่ต้อง auth, ตอบเร็วkind, minikube หรือ Kubernetes ที่ฝังใน Docker Desktop รันคลัสเตอร์จำลองได้เลยlsof -i :3000 แล้วเปลี่ยนฝั่ง host (-p 3001:3000) หรือปิดตัวครองdocker compose up --build) หรือลืมว่าไม่ได้ bind mount โค้ด — image เก่ายังถูกรันอยู่docker system df ดูก่อนแล้วค่อย prune ทีละประเภท อย่าลบ volume มั่วdocker logs ดูสาเหตุ, ตรวจ CMD/env ให้ครบ หรือ docker run -it ... sh เข้าไปรันคำสั่งเองเพื่อเห็น error จริงTZ หรือ (ดีกว่า) เก็บเป็น UTC แล้วแปลงตอนแสดงผลตาม timezone ผู้ใช้State object — setState() บอกว่า "ข้อมูลเปลี่ยนแล้ว จง rebuild"setState จะ trigger build() ใหม่ของ widget นั้น (และลูก ๆ) เท่านั้นmainAxisAlignment ตามแนวเรียง, crossAxisAlignment ตามแนวตั้งฉากExpanded ยึดพื้นที่เหลือ, Flexible ยึดได้แต่ไม่เกินขนาดธรรมชาติNavigator.push(context, MaterialPageRoute(builder: (_) => DetailPage())) และ pop() กลับ — เขียนง่ายเหมาะแอปทั่วไปawait Navigator.pushMethodChannel): Dart เรียก method ที่เขียนด้วย Kotlin/Swift ฝั่ง native แล้วรอค่ากลับsetState: state เล็ก ๆ ในจอเดียว — พอสำหรับฟอร์ม, ปุ่มcontext.watch / read) เริ่มต้นที่ดีhttp หรือ dio (มี interceptor, timeout, retry — งานจริงนิยม dio)fromJson/toJson เอง หรือ generate ด้วย json_serializable / freezed (type-safe, ลด human error, รองรับ immutability/copyWith)FutureBuilder (snapshot.hasData/hasError) หรือจัดการใน state management + loading/error state ชัดเจนasync/awaitlisten / StreamBuilderconst หน้า constructor ที่เป็นไปได้ — widget เดิม reuse ได้ ไม่ต้อง rebuildListView.builder (สร้างเฉพาะที่มองเห็น) อย่าใช้ Column + map เด็ดขาดcompute / Isolate.runflutter run --profile ดู jank จริงkey.properties ไม่ลง git) → flutter build appbundle → อัป Play Console (internal → closed → production)flutter build ipa → upload ผ่าน Transporter/Xcode → รอ review--split-per-abi (แยกสถาปัตยกรรม CPU), เปิด code splitting, ระวัง asset ใหญ่channelSecret / channelAccessTokenmessage, follow / unfollow, postback (จากปุ่มใน Flex), join, memberJoined ฯลฯX-Line-Signature = HMAC-SHA256 ของ raw request body ด้วย channelSecret แล้ว encode base64mac := hmac.New(sha256.New, []byte(secret)); mac.Write(body); sig := base64.StdEncoding.EncodeToString(mac.Sum(nil))type: flex → container bubble (การ์ดเดียว: hero / header / body / footer) หรือ carousel (หลาย bubble เลื่อนซ้ายขวา, สูงสุด 10 bubble)altText จำเป็น (แสดงบน notification/เมื่ออุปกรณ์ไม่รองรับ)uri (เปิดลิงก์ เช่น LIFF) / message (ส่งข้อความกลับ) / postback (ส่ง data แฝงไป webhook เหมาะทำ flow สั่งซื้อ/เลือกตัวเลือก)liffId) แล้วหน้าเว็บเรียก liff.init({ liffId }) ก่อนใช้งานliff.init หรือปุ่มเปิด): Full เต็มจอ / Tall ~80% / Compact ~50% — เลือกตามงานliff.isLoggedIn() — ยังไม่ login เรียก liff.login() (เปิดหน้า consent ของ LINE)liff.getAccessToken() (เรียก LINE API แทน user) และ liff.getIDToken() (พิสูจน์ตัวตนกับBackend ของเรา)/oauth2/v2.1/verify พร้อม id_token + client_id — ผ่านแล้วได้ sub (userId ปลอมไม่ได้) ค่อยออก session/JWT ของระบบเราaccess.line.me/oauth2/v2.1/authorize พร้อม client_id, redirect_uri, scope (profile, openid), statecodecode เป็น access_token + id_token (ที่ /oauth2/v2.1/token)/v2/profile) แล้วสร้าง session ของระบบเราstate กัน CSRF, ตรวจ nonce กัน replay — LIFF ทำขั้นตอนพวกนี้ให้อัตโนมัติ