DEV Community: c_nooknook_daily_prompt

ประเภทของงาน (Type of Work) หรือเรียกได้ว่าเป็น หมวดหมู่ของงานในสาย Software Development

c_nooknook_daily_prompt — Thu, 24 Jul 2025 03:40:37 +0000

งานประเภท Code Review, Database Optimization จัดอยู่ในหมวดหมู่ "Technical Tasks" หรือ "Engineering Work Categories" ซึ่งสามารถแบ่งได้หลายประเภทขึ้นอยู่กับองค์กร แต่โดยทั่วไปสากลนิยมใช้ประเภทหลัก ๆ ดังนี้:

🔧 ประเภทของงานด้าน Software Development (สากลนิยม)

หมวดหมู่	ตัวอย่างงาน
1. Feature Development	เพิ่มฟีเจอร์ใหม่, เขียน API, เพิ่มหน้าจอใหม่
2. Bug Fixing	แก้ไขบั๊กจาก QA หรือ production
3. Code Review ✅	ตรวจสอบและให้ feedback โค้ดเพื่อนร่วมทีม
4. Refactoring	ปรับปรุงโค้ดเดิมให้ดีขึ้นโดยไม่เปลี่ยนพฤติกรรม
5. Performance Optimization	เช่น ✅ `Database Optimization`, ลด response time, memory leak
6. DevOps / Infra	CI/CD, Docker, Kubernetes, monitoring tools
7. Testing / QA	เขียน unit test, integration test, manual test
8. Documentation	API docs, README, internal dev guide
9. Research / Spike	ทดลองเทคโนโลยีใหม่, proof of concept (POC)
10. Support / Maintenance	แก้ปัญหาเร่งด่วน, deploy hotfix

💡 หมายเหตุเพิ่มเติม:
ถ้าใช้ Jira หรือ Asana, องค์กรมักจะตั้งประเภทงานแบบนี้ไว้ใน field เช่น "Task Type", "Issue Type" หรือ "Work Category"

บางองค์กรอาจรวม Code Review เป็นส่วนหนึ่งของกระบวนการ QA หรือ Dev Process

React Native CLI vs Expo: เลือกอะไรดีสำหรับการพัฒนาแอปของคุณ?

c_nooknook_daily_prompt — Thu, 17 Jul 2025 10:14:17 +0000

🎯 คำแนะนำสั้น ๆ
✅ Expo: เหมาะกับผู้เริ่มต้น, MVP, ทีมเล็ก, ต้องการเร็ว
✅ React Native CLI: เหมาะกับทีม dev จริงจัง, ใช้ native module เยอะ, ต้องการควบคุมทุกอย่างเอง

React Native เป็นหนึ่งในเฟรมเวิร์กยอดนิยมสำหรับการพัฒนาแอปมือถือแบบ cross-platform แต่เมื่อคุณเริ่มต้น คุณจะพบว่า React Native มี 2 ทางให้เลือกคือ “React Native CLI” และ “Expo”

บทความนี้จะพาคุณมารู้จักความแตกต่าง ข้อดี ข้อเสีย และเคล็ดลับในการเลือกเครื่องมือที่เหมาะสมกับโปรเจกต์ของคุณ

React Native CLI

เป็นเครื่องมือพื้นฐานของ React Native
ต้องติดตั้ง Xcode (iOS) และ Android Studio (Android)
มีความยืดหยุ่นสูง
ไม่สามารถรันบนเว็บเบราเซอร์ได้โดยตรงถ้ารันต้องใช้ Map react-native ไปยัง react-native-web ปรับ Babel ให้รองรับ React Native

Expo

เป็น framework + platform ที่ช่วยให้พัฒนาแอปได้ง่ายขึ้น
มี Expo Go ให้ทดลองแอปบนมือถือได้ทันที
เหมาะกับคนที่อยากเริ่มเร็ว ไม่อยาก config เยอะ

Expo Go คืออะไร?

Expo Go คือแอปสำเร็จรูป (มีใน App Store และ Google Play) ที่สามารถโหลดโปรเจกต์ Expo ของคุณมารันแบบ real-time ได้ ผ่าน QR Code
Expo Go คือแอปมือถือที่ช่วยให้นักพัฒนาสามารถ “รัน” และ “ทดสอบ” แอปที่เขียนด้วย Expo (React Native) ได้ทันที โดย ไม่ต้อง build แอปเป็น .apk หรือ .ipa

ไฟล์ .apk และ .ipa คืออะไร?

ประเภทไฟล์	แพลตฟอร์ม	คืออะไร
`.apk`	Android	ย่อมาจาก Android Package เป็นไฟล์ติดตั้งแอป Android
`.ipa`	iOS	ย่อมาจาก iOS App Store Package เป็นไฟล์ติดตั้งแอปบน iPhone / iPad

⚙️ การเริ่มต้นใช้งาน

React Native CLI

npx react-native init MyApp
cd MyApp
npx react-native run-ios / run-android

Expo

npx create-expo-app MyApp
cd MyApp
npx expo start

✅ ข้อดี-ข้อเสีย

หัวข้อ	React Native CLI	Expo
การติดตั้ง	ต้อง config เยอะ	ใช้งานง่ายมาก
Native Modules	เขียน Native Code ได้เต็มที่	จำกัด ต้อง Eject ถึงจะเขียน Native ได้
Debug/Test	ต้องใช้ emulator/simulator	ใช้แอป Expo Go ได้เลย
Build	ต้องตั้งค่าทุกอย่างเอง	Expo มี Cloud Build (ง่าย)
ขนาดแอป	เล็กกว่า	ใหญ่กว่าเพราะ include lib มาตรฐาน
เรียนรู้	ยากกว่าเล็กน้อย	เป็นมิตรกับผู้เริ่มต้น

🧠 แล้วควรเลือกอะไร?

คุณคือ...	ควรเลือก
มือใหม่ อยากเริ่มเร็ว	✅ Expo
ต้องใช้ Native SDK พิเศษ	✅ React Native CLI
โปรเจกต์เล็ก-กลาง	✅ Expo
โปรเจกต์องค์กร/ซับซ้อน	✅ React Native CLI

💡 ตัวอย่างสถานการณ์จริง

“ฉันอยากทำแอป To-do List + กล้องถ่ายรูป”
ถ้าใช้ Expo อาจเจอข้อจำกัดเรื่องการเข้าถึง native camera library บางตัว — แก้โดย eject

“ฉันต้องใช้ SDK ธนาคาร”
ใช้ React Native CLI ดีกว่า เพราะคุณสามารถ integrate native module ได้เต็มที่

🔚 สรุป

React Native CLI เหมาะกับนักพัฒนาที่ต้องการควบคุมระบบได้เต็มที่
Expo เหมาะกับผู้เริ่มต้นและโปรเจกต์ที่อยากพัฒนาเร็วโดยไม่ต้องจัดการ native มากนัก
ไม่มีทางเลือกไหนดีที่สุด แต่มี “ทางเลือกที่เหมาะที่สุดสำหรับคุณ”

📌 ความแตกต่างระหว่าง React Native CLI vs Expo

หัวข้อ	React Native CLI	Expo
⚙️ การติดตั้งและเริ่มต้น	ต้องติดตั้ง Xcode, Android Studio, และตั้งค่า environment	ใช้งานง่าย ติดตั้งเร็ว ไม่ต้อง setup Android/iOS SDK เอง
🔌 การใช้ Native Modules	เขียน/ใช้ native code ได้เต็มที่ (เช่น Java, Swift, Objective-C)	จำกัดเฉพาะ module ที่ Expo รองรับ เว้นแต่จะ “eject”
📱 การทดสอบแอป	ใช้ emulator หรือ device จริง	ใช้แอป Expo Go สแกน QR ก็ preview ได้ทันที
🛠️ ความยืดหยุ่น	ยืดหยุ่นสูง ปรับแต่งได้ทุกส่วน	สะดวกแต่มีข้อจำกัดในการเข้าถึง native functionality
🧱 ขนาดแอป (APK/IPA)	เบากว่า เพราะ build เฉพาะ module ที่ใช้	ใหญ่กว่าเพราะรวม libraries ที่อาจไม่ได้ใช้ทั้งหมด
🔧 การ build และ release	ต้อง setup build ด้วยตนเอง (Xcode, Gradle)	มี Expo CLI + EAS Build (cloud build ง่ายๆ)
📦 Dependency และ Third-party	ใช้ package ได้เกือบทั้งหมด	ใช้ได้เฉพาะ package ที่รองรับกับ Expo หรือ custom หลัง eject
🧪 การ debug และ devtools	ใช้ Metro bundler, React DevTools, Flipper ฯลฯ	รองรับ debug ผ่าน Expo DevTools, web UI
💼 เหมาะกับโปรเจกต์แบบไหน	โปรเจกต์ที่ซับซ้อน, ต้องใช้ native SDK, มีทีม dev	MVP, โปรเจกต์เล็ก-กลาง, แอป internal, นักพัฒนาเดี่ยว
🔃 การ Eject	ไม่จำเป็น (เพราะควบคุมทุกอย่างอยู่แล้ว)	หากต้องใช้ native module ต้อง eject จาก Expo ไปยัง CLI

🟥 สิ่งที่ React Native CLI ทำได้ แต่ Expo ทำไม่ได้ (หรือจำกัด)

ฟีเจอร์	คำอธิบาย
🧩 ใช้งาน Native Modules ที่ไม่มีใน Expo ได้	เช่น SDK ธนาคาร, Bluetooth library, ARKit, เครื่องสแกนลายนิ้วมือแบบเฉพาะ ฯลฯ
🛠️ เขียน native code ได้เต็มรูปแบบ	แก้ไขไฟล์ `.java`, `.kt`, `.swift`, `.objc` ได้โดยตรง
📦 ติดตั้งทุก 3rd-party libraries ได้	รวมถึง library ที่ต้อง link native code ด้วย
🚀 แอปมีขนาดเล็กกว่า (ถ้า optimize)	ไม่มีการรวม library ที่ไม่ใช้เข้าไปโดยอัตโนมัติ
📂 ควบคุม build tools ได้ทั้งหมด	ปรับแต่ง Gradle, Xcode, keystore ฯลฯ ได้ละเอียด
📍 ใช้เครื่องมือ CI/CD เฉพาะทางได้ง่ายกว่า	เช่น Fastlane, Bitrise, Github Actions แบบ native-level

🟩 สิ่งที่ Expo ทำได้ แต่ React Native CLI ทำไม่ได้ (หรือทำยาก)

ฟีเจอร์	คำอธิบาย
⚡ เริ่มต้นได้เร็วมาก	Expo มี `create-expo-app` พร้อม DevTools GUI, ไม่ต้อง config environment
📱 Preview แอปทันทีผ่าน QR Code	ใช้แอป Expo Go บนมือถือ สแกน QR code ก็ทดสอบแอปได้เลย
☁️ Cloud Build (EAS Build)	สร้างไฟล์ .apk / .ipa บน Cloud ได้โดยไม่ต้องลง Xcode หรือ Android Studio
🔄 Hot Reload/Live Reload เสถียรกว่า	Expo Go ให้ประสบการณ์ reload ที่รวดเร็วมากบนอุปกรณ์จริง
🔌 ใช้งาน Native APIs ได้เลยโดยไม่ต้องติดตั้งเพิ่ม	เช่นกล้อง, location, notification, sensors ผ่าน `expo-modules`
🧪 Testing บน Web ได้ (expo web)	พัฒนาแอปบนเว็บก่อน deploy mobile ด้วย Expo for Web
🎯 Managed Workflow	ไม่ต้องแตะ native code เลย ตลอด lifecycle การพัฒนา
🎁 Expo Snack (ออนไลน์ IDE)	เขียน React Native บนเว็บและ preview ได้ทันที ไม่ต้องติดตั้งอะไรเลย

🎯 สรุปแบบเข้าใจง่าย

	Expo	React Native CLI
🚀 เริ่มเร็ว	✅	❌
🔌 เขียน native code เอง	❌ (ต้อง eject)	✅
🧪 รองรับ native SDK พิเศษ	❌	✅
☁️ Cloud Build ง่าย	✅ (EAS Build)	❌ (ต้อง config เอง)
📱 ใช้ Expo Go preview	✅	❌
🎯 ควบคุมละเอียดทุกส่วน	❌	✅

🔄 ถ้าใช้ Expo แล้วอยากได้พลัง CLI ทำไง?
Expo รองรับการ Eject (Convert ไปใช้ CLI) ได้ครับ

npx expo eject

หลัง eject แล้วคุณจะได้ native Android/iOS project ซึ่งสามารถติดตั้ง native module และปรับแต่งได้เหมือน React Native CLI ปกติ

React Native Beginner

c_nooknook_daily_prompt — Thu, 17 Jul 2025 09:22:40 +0000

React Native Beginner
เป้าหมาย:
เตรียม macOS ให้พร้อมสำหรับการสร้างแอป React Native (แบบ Native – Android และ iOS)

1.เตรียมเครื่องก่อนติดตั้ง
สเปกเครื่องที่แนะนำ
OS: macOS Ventura หรือใหม่กว่า

RAM: อย่างน้อย 8 GB (แนะนำ 16 GB ขึ้นไปเพื่อรัน Android Emulator + iOS Simulator พร้อมกัน)

พื้นที่ว่างในเครื่อง: 15 GB ขึ้นไป
(Android SDK, Xcode, Gradle, Node Modules กินพื้นที่มาก)

2.ติดตั้งเครื่องมือพื้นฐาน

Homebrew (ตัวช่วยติดตั้งเครื่องมือ)

https://brew.sh/

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Node.js (แนะนำใช้ nvm หรือ volta) ติดตั้ง Node.js และแนะนำเวอร์ชัน (เช่น node >= 18)

brew install volta /or
volta install node

ตรวจสอบการติดตั้ง node

node -v

ติดตั้ง NPM

node install npm

ตรวจสอบการติดตั้ง npm

npm -v

ติดตั้ง Watchman (สำหรับ macOS ใช้ตรวจจับไฟล์เปลี่ยน)

brew install watchman

ตรวจสอบการติดตั้ง

watchman -v

ติดตั้ง cocaopods

brew install cocoapods

ติดตั้ง JDK (Java Development Kit)

brew install temurin17

ตรวจสอบการติดตั้ง Java

java -version

3.ติดตั้ง xcode and simulator (iPhone 16 pro and iOS 18.5)

https://apps.apple.com/us/app/xcode/id497799835?mt=12/

4.ติดตั้ง andriod studio

https://developer.android.com/studio?authuser=6&hl=th

ตั้งค่าดังนี้

4.1.ไปที่ sidebar Tools -> SDK manager

4.2.Android SDK Build-Tools Version 35.0.0

4.3.ติดตั้ง NDK (side by side) 27.1.12297006

4.4.ติดตั้ง Andriod SDK-Command-line Tools (lastest)

4.5.CMake 3.22.1

4.6.Andriod Emulator, Andriod SDK Platform Tools

in /.zshrc file

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$ANDROID_HOME/emulator:$ANDROID_HOME/platform-tools:$ANDROID_HOME/b$

export ANDROID_NDK_HOME=$ANDROID_HOME/ndk/your-version
export PATH=$ANDROID_NDK_HOME:$PATH

export PATH="/opt/homebrew/opt/openjdk@17/bin:$PATH"
export CPPFLAGS="-I/opt/homebrew/opt/openjdk@17/include"

5.สร้าง project in VScode

npx @react-native-community/cli init MyReactNativeFirst

answer Y เพื่อ install pod
สร้าง file local.properties in andriod folder

cmake.dir=/Users/your-user-name/Library/Android/sdk/cmake/3.22.1
ndk.dir=/Users/your-user-name/Library/Android/sdk/ndk/27.1.12297006

on MacOS สำหรับกำหนดค่า memory ในเครื่อง และภาษาเพื่อให้เสถียร

#Specifies the JVM arguments used for the daemon process.
#The setting is particularly useful for tweaking memory settings.
#Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
org.gradle.jvmargs=-Xmx2048m -Duser.country=US -Duser.language=en -XX:MaxMetaspaceSize=512m

📌 แล้วทำไมมักเห็นใน org.gradle.jvmargs?
เพราะบางครั้ง Gradle หรือ plugin บางตัวอาจจะแสดงผลลัพธ์แตกต่างกันไปตาม locale ของเครื่อง
เช่น:
เครื่อง dev เป็นภาษาไทย → build log หรือ error message ออกมาเป็นภาษาไทย
เวลาเขียน shell script หรือเขียน plugin แล้วเอาไปใช้บน server (ที่ใช้ locale อังกฤษ) → อาจเจอพฤติกรรมต่างกัน
🎯 ดังนั้นจึงตั้ง -Duser.country=US -Duser.language=en เพื่อให้ผลลัพธ์ทุกคนเหมือนกัน (ใช้ US/English เสมอ)

6.run project

cd MyReactNativeFirst
|
v
npm install

ถ้ามี error

npx react-native doctor

ถ้าอยากดู รายละเอียด

npx react-native info

7.รัน android

react-native run-android

8.รัน ios

react-native run-ios

ใช้ git flow กันเถอะ

c_nooknook_daily_prompt — Mon, 07 Jul 2025 23:04:06 +0000

แนวคิดของ Git Flow
Git Flow คือรูปแบบการจัดการ branch ที่เหมาะกับการพัฒนา software เป็นเวอร์ชันๆ โดยมี branch หลักๆ ดังนี้:

Branch	ใช้ทำอะไร
`main` หรือ `master`	เก็บ code ที่พร้อมขึ้น production
`develop`	เก็บ code ที่อยู่ระหว่างการพัฒนา (เตรียม release)
`feature/*`	พัฒนา feature ใหม่
`release/*`	เตรียม code สำหรับการ release
`hotfix/*`	แก้ไข bug ด่วนจาก production

ขั้นตอนเริ่มใช้ Git Flow อย่างถูกต้อง

ติดตั้ง Git Flow (ครั้งเดียว)

# Mac (ผ่าน Homebrew)
brew install git-flow

# Ubuntu/Debian
sudo apt install git-flow

# Windows: ใช้ Git Bash แล้วติดตั้งผ่าน Git Extension หรือ Chocolatey
choco install git-flow-avh

ตอนเริ่มต้น: เตรียม branch
Checkout develop และดึงโค้ดล่าสุด

git checkout develop
git pull origin develop

📍 ทำบน: develop
📌 เพื่อให้แน่ใจว่า feature ใหม่ของคุณเริ่มจาก develop เวอร์ชันล่าสุด

สร้าง feature branch ด้วย Git Flow
เริ่มต้นใช้งานในโปรเจกต์

ไปยังโฟลเดอร์โปรเจกต์ แล้วพิมพ์:

git flow init

ระบบจะถามคุณว่าชื่อ branch ต่างๆ จะใช้ชื่ออะไร เช่น:

Branch สำหรับ production: main
Branch สำหรับ development: develop
Prefix สำหรับ feature branch: feature/
Prefix สำหรับ release branch: release/
Prefix สำหรับ hotfix branch: hotfix/

📌 กด Enter ใช้ค่า default ได้เลย เว้นแต่ทีมคุณมีการตั้งชื่อเฉพาะ

สร้าง feature branch ด้วย Git Flow

git flow feature start branch-name

📍 ทำบน: develop → feature/branch-name (Git Flow จะสลับให้อัตโนมัติ)
📌 สร้าง branch feature/branch-name จาก develop

สมมติว่าทำ login-page
ตอนพัฒนา: เขียนโค้ดและ commit

ทำงานบน feature/branch-name

git add .
git commit -m "feat(login page): สร้างหน้า login"

📍 ทำบน: feature/login-page
📌 เพิ่มไฟล์และ commit งานตามปกติ

Push ขึ้น remote เพื่อ backup / ร่วมงาน

git push -u origin feature/login-page

📍 ทำบน: feature/login-page
📌 ดัน branch นี้ขึ้น remote เพื่อให้คนอื่นเห็นหรือทำ PR ได้

ตอนจะ finish หรือ merge กลับ develop
ดึง develop ล่าสุดมารวมก่อน (ป้องกัน conflict ภายหลัง)

git checkout develop
git pull origin develop    # ดึง develop ล่าสุด
git checkout feature/login-page
git rebase develop         # รวม develop เข้ามาใน feature

📍 ทำบน: feature/login-page
📌 เพื่อให้แน่ใจว่า feature ของคุณ up-to-date กับ develop และดู conflict ตั้งแต่ตอนนี้

❗ ถ้ามี conflict ตอน git rebase develop
แก้ไฟล์ที่ conflict ด้วย editor

เมื่อแก้เสร็จ:

git add .
git rebase --continue

(ทำซ้ำถ้ามี conflict หลายจุด)

Push หลังจาก rebase แล้ว (ต้องใช้ --force หรือ --force-with-lease)

git push --force-with-lease

📍 ทำบน: feature/login-page
📌 เพราะ rebase จะเปลี่ยนประวัติ commit ต้อง force push ขึ้น remote

ตอนจบ: merge feature กลับ develop

Finish ด้วย Git Flow (หลัง rebase และ push เสร็จแล้ว)

git flow feature finish login-page

📍 ทำบน: feature/login-page
📌 จะ merge เข้ากับ develop และลบ feature branch

Push develop ขึ้น remote

git push origin develop

📍 ทำบน: develop
📌 ดันโค้ดล่าสุดขึ้น remote

สรุป Workflow ทั้งหมด

# เริ่ม
git checkout develop
git pull origin develop
git flow feature start login-page

# ทำงาน
# --> เขียนโค้ด -->
git add .
git commit -m "feat: หน้า login"
git push -u origin feature/login-page

# ก่อน merge กลับ
git checkout develop
git pull origin develop
git checkout feature/login-page
git rebase develop         # รวม develop ล่าสุด

# ถ้า conflict: แก้ + commit
git add .
git rebase --continue

# หลัง rebase
git push --force-with-lease

# Finish
git flow feature finish login-page
git push origin develop

อธิบายคำสั่งสำคัญ

คำสั่ง	ใช้ทำอะไร	ใช้ตอนอยู่ที่ branch
`git flow feature start`	สร้าง branch feature	develop
`git add .`	เพิ่มไฟล์ทั้งหมดเข้าสู่ staging	feature/*
`git commit -m`	commit งาน	feature/*
`git push -u origin feature/*`	ดัน branch feature ไป remote	feature/*
`git pull origin develop`	ดึง develop ล่าสุด	develop
`git rebase develop`	รวม develop เข้ามาใน feature (clean history)	feature/*
`git rebase --continue`	ดำเนินการ rebase หลังแก้ conflict	feature/*
`git push --force-with-lease`	push หลัง rebase (force แบบปลอดภัย)	feature/*
`git flow feature finish`	merge เข้า develop + ลบ branch	feature/*
`git push origin develop`	push develop ที่ merge แล้ว	develop

สรุป Git Flow Feature Branch พร้อม branch ปัจจุบัน

ขั้นตอน	คำสั่ง	อยู่ที่ branch	อธิบาย
1. เริ่ม feature ใหม่	`git checkout develop`	develop	เตรียมตัวก่อนเริ่ม feature
	`git flow feature start ชื่อ`	develop → feature/ชื่อ-feature	สร้างและสลับไป branch feature
2. ทำงานแก้โค้ด	`git add .` + `git commit`	feature/ชื่อ-feature	commit โค้ดใน feature branch
3. (ถ้ามี) push ขึ้น remote	`git push -u origin feature/ชื่อ`	feature/ชื่อ-feature	ส่ง branch feature ขึ้น remote
4. จบ feature และ merge กลับ	`git flow feature finish ชื่อ`	feature/ชื่อ-feature → develop	merge เข้า develop, ลบ feature, สลับไป develop
5. push develop กลับ remote	`git push origin develop`	develop	ส่ง develop branch ล่าสุดขึ้น remote

Angular for beginner

c_nooknook_daily_prompt — Tue, 01 Jul 2025 06:08:57 +0000

โครงสร้างโปรเจกต์ Angular ที่เป็น มาตรฐานและสามารถขยายได้ในระยะยาว ซึ่งเหมาะกับโปรเจกต์ที่มี components, routes, services, types, และ pages

🏗️ โครงสร้างโปรเจกต์ Angular (แนะนำ)

src/
├── app/
│   ├── core/                      # ส่วนกลางที่ใช้ทั่วทั้งแอป (singleton services, guards, interceptors)
│   │   ├── services/
│   │   ├── guards/
│   │   ├── interceptors/
│   │   └── core.module.ts
│
│   ├── shared/                    # ส่วนที่แชร์ได้ทุกหน้า (components, pipes, directives, models)
│   │   ├── components/
│   │   ├── pipes/
│   │   ├── directives/
│   │   ├── models/               # types/interfaces ที่แชร์ได้
│   │   └── shared.module.ts
│
│   ├── pages/                     # แต่ละหน้า เช่น Home, Login, Dashboard ฯลฯ
│   │   ├── home/
│   │   │   ├── components/       # components เฉพาะของหน้า home
│   │   │   ├── home.component.ts
│   │   │   ├── home.module.ts
│   │   │   └── home-routing.module.ts
│   │   └── ...
│
│   ├── app-routing.module.ts     # รวม routes ทั้งหมด
│   ├── app.component.ts
│   └── app.module.ts
│
├── assets/                       # รูปภาพ, ไอคอน, ไฟล์ static
├── environments/                # ไฟล์ config สำหรับ dev/prod
│   ├── environment.ts
│   └── environment.prod.ts
├── styles/                       # SCSS/CSS global styles
│   └── main.scss
└── main.ts

🧠 รายละเอียดแต่ละโฟลเดอร์

โฟลเดอร์	หน้าที่
core/	สำหรับ services ที่ใช้ทั่วแอป เช่น `AuthService`, `ApiService`, `TokenInterceptor`, `AuthGuard`
shared/	สำหรับ components/pipes/directives ที่ใช้ร่วมกัน เช่น `ButtonComponent`, `DatePipe`, `CardComponent`, รวมถึง types หรือ interfaces
pages/	แต่ละหน้าแยกเป็น module ชัดเจน เช่น `/home`, `/login`, `/dashboard`
models/ หรือ types/	สำหรับสร้าง interface ของข้อมูล เช่น `User`, `Product`, `Order`, ใช้ภายใต้ `shared/models/` หรือ `shared/types/`
routes	มักอยู่ใน `app-routing.module.ts` และแยกเป็น `xxx-routing.module.ts` สำหรับแต่ละ module

✅ ตัวอย่างการตั้งชื่อ

📄 shared/models/user.model.ts

export interface User {
  id: string;
  username: string;
  email: string;
}

📁 pages/home/home.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {}

📁 app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  {
    path: 'home',
    loadChildren: () =>
      import('./pages/home/home.module').then((m) => m.HomeModule),
  },
  // ...
];

📁 core/services/api.service.ts

@Injectable({ providedIn: 'root' })
export class ApiService {
  constructor(private http: HttpClient) {}

  get<T>(url: string): Observable<T> {
    return this.http.get<T>(url);
  }
}

📌 สรุป

สิ่งที่คุณต้องการ	อยู่ตรงไหนในโครงสร้าง
Components	`shared/components/`, หรือ `pages/[page]/components/`
Routes	`app-routing.module.ts`, `xxx-routing.module.ts`
Types / Interfaces	`shared/models/` หรือ `shared/types/`
Services	`core/services/`
Pages	`pages/[pagename]/`

ถ้าคุณต้องการใช้ Angular CLI เพื่อ generate โครงสร้างโปรเจกต์ที่ดีตั้งแต่ต้น พร้อมกับ routing แยกหน้า (lazy loading), services, และ components ได้อัตโนมัติ

✅ เริ่มต้นสร้างโปรเจกต์ Angular

ng new my-angular-app --routing --style=scss

--routing: สร้างไฟล์ app-routing.module.ts ให้อัตโนมัติ

--style=scss: เลือกใช้ SCSS แทน CSS

เข้าไปในโปรเจกต์:

cd my-angular-app

✅ 1. สร้างหน้า (page) แบบ Lazy Load + Routing
เช่น หน้า Home

ng generate module pages/home --route home --module app.module

Angular จะสร้างให้อัตโนมัติแบบ lazy loading:

src/app/pages/home/
├── home-routing.module.ts
├── home.module.ts
└── home.component.ts

🔁 สร้างหน้าต่อไป เช่น Login, Dashboard:

ng generate module pages/login --route login --module app.module
ng generate module pages/dashboard --route dashboard --module app.module

✅ 2. สร้าง Shared Components

ng generate module shared/shared --module app
ng generate component shared/components/button
ng generate component shared/components/card

คุณสามารถ export component ใน shared.module.ts ได้:

@NgModule({
  declarations: [ButtonComponent, CardComponent],
  exports: [ButtonComponent, CardComponent],
})
export class SharedModule {}

✅ 3. สร้าง Services
สร้างใน core/services/:

ng generate module core/core --module app
ng generate service core/services/api
ng generate service core/services/auth

services เหล่านี้จะเป็น singleton ถ้าเพิ่ม providedIn: 'root' (default)

✅ 4. สร้าง Types หรือ Interfaces
สร้างไฟล์ใน src/app/shared/models/:

// user.model.ts
export interface User {
  id: number;
  name: string;
  email: string;
}

✅ 5. สร้าง Guards, Interceptors (optionally)

ng generate guard core/guards/auth
ng generate interceptor core/interceptors/token

📦 ตัวอย่างโครงสร้างที่ได้

src/app/
├── core/
│   ├── services/
│   │   ├── api.service.ts
│   │   └── auth.service.ts
│   ├── guards/
│   ├── interceptors/
│   └── core.module.ts
│
├── shared/
│   ├── components/
│   │   ├── button/
│   │   └── card/
│   ├── models/
│   │   └── user.model.ts
│   └── shared.module.ts
│
├── pages/
│   ├── home/
│   ├── login/
│   └── dashboard/
│
├── app-routing.module.ts
└── app.module.ts

🚀 พร้อมใช้งาน!
รันโปรเจกต์:

ng serve

เปิดเบราว์เซอร์ที่ http://localhost:4200/home หรือ /login, /dashboard ได้เลย

RxJS vs Redux Thunk: เลือกอะไรดี? อธิบายแบบเข้าใจง่าย พร้อมตัวอย่าง

c_nooknook_daily_prompt — Wed, 25 Jun 2025 05:36:26 +0000

RxJS (ย่อมาจาก Reactive Extensions for JavaScript) คือ ไลบรารีสำหรับจัดการ asynchronous data stream อย่างมีประสิทธิภาพและยืดหยุ่นมาก โดยใช้แนวคิดของ Reactive Programming

🧠 แนวคิดหลักของ RxJS
🔄 "Everything is a stream"
ข้อมูลต่าง ๆ ไม่ว่าจะเป็น click, typing, HTTP response, หรือ timer — ล้วนเป็น stream ได้

Stream คือ ลำดับของค่าที่เกิดขึ้นตามเวลา

🔧 RxJS ใช้ทำอะไร?

การใช้งานทั่วไป	ตัวอย่าง
จัดการ event อย่างซับซ้อน	พวก click หลายครั้ง, debounce
ควบคุม API call	cancel request, retry
สร้าง pipeline ที่สามารถเปลี่ยนแปลง/กรองข้อมูล	map, filter, merge, etc.
ผสานหลาย stream เข้าด้วยกัน	combineLatest, merge, zip
Reactive UI / Form	ทำงานร่วมกับ Angular Reactive Forms ได้ดี

🧱 ส่วนประกอบหลักของ RxJS

ส่วนประกอบ	ความหมาย
Observable	ตัวแทนของ stream (เหมือน Promise ที่ส่งข้อมูลได้หลายค่า)
Observer	ผู้ที่ subscribe เพื่อรับข้อมูลจาก Observable
Operators	ฟังก์ชันที่เปลี่ยนแปลง stream เช่น `map`, `filter`, `debounceTime`, `mergeMap`
Subject	เป็นทั้ง Observable และ Observer (ใช้ส่งข้อมูลจาก component ไปยังอื่นๆ)
Subscription	ตัวแทนของการเชื่อมต่อ (subscribe) ที่สามารถ unsubscribe ได้

📦 ตัวอย่างใช้งานง่ายๆ

🔔 สร้าง Observable และ subscribe

import { Observable } from 'rxjs'

const observable = new Observable((subscriber) => {
  subscriber.next('Hello')
  subscriber.next('World')
  subscriber.complete()
})

observable.subscribe({
  next: (val) => console.log(val),
  complete: () => console.log('Done'),
})
// 👉 Output:
// Hello
// World
// Done

⌨️ ใช้กับ DOM event

import { fromEvent } from 'rxjs'

const clicks$ = fromEvent(document, 'click')
clicks$.subscribe(event => console.log(event))

🔄 ใช้ Operator เช่น map และ filter

import { of } from 'rxjs'
import { map, filter } from 'rxjs/operators'

of(1, 2, 3, 4, 5).pipe(
  filter(x => x % 2 === 1),
  map(x => x * 10)
).subscribe(val => console.log(val))
// 👉 Output: 10, 30, 50

📍 RxJS นิยมใช้ในไหน?

✅ Angular: ใช้ RxJS เป็นแกนหลักของ HTTP, Form, Router
✅ ใช้ใน React ได้ด้วย โดยใช้ร่วมกับ rxjs-hooks หรือ state management แบบ reactive
✅ ใช้ใน Node.js / Backend ที่ต้องการจัดการ async หลายแหล่ง

🔚 สรุป

คำถาม	คำตอบสั้น
RxJS คืออะไร	ไลบรารีสำหรับจัดการ asynchronous data ด้วยแนวคิด reactive programming
ใช้ทำอะไร	จัดการ event, async stream, UI updates, API call ฯลฯ
เหมาะกับใคร	คนที่เจอ async/stream หลายอย่างซ้อนกัน และต้องการเขียนโค้ดให้สะอาด

RxJS กับ Redux Thunk มีเป้าหมายและแนวคิดต่างกัน แม้ทั้งคู่จะใช้ในการจัดการ asynchronous logic ได้เหมือนกันก็ตาม

🧠 เปรียบเทียบโดยสรุป: RxJS vs Redux Thunk

คุณสมบัติ	Redux Thunk	RxJS
แนวคิดหลัก	Imperative + async/await	Reactive Programming (ทุกอย่างคือ stream)
ใช้งาน	จัดการ async logic ใน Redux (เช่น fetch API)	จัดการ stream ที่ต่อเนื่อง เช่น event, input, timer
เหมาะกับ	งานที่ async ง่ายๆ เช่น API call ใน Redux	งานที่ซับซ้อน เช่น auto-complete, live search, cancel request, UI ที่เปลี่ยนตามเวลา
syntax	ใช้ async/await, if/else, try/catch ง่าย	ใช้ operators เช่น `map`, `filter`, `switchMap`, ต้องเรียนรู้เพิ่มเติม
integration	ทำงานเฉพาะใน Redux (กับ store และ dispatch)	ใช้ได้ทุกที่: React, Angular, Node.js, ไม่ต้องใช้ Redux
learning curve	ง่ายกว่า	ยากกว่า
cancel async ได้ไหม	ยากหรือทำไม่ได้	ทำได้ง่าย (ผ่าน `switchMap`, `takeUntil`, etc.)
ใช้ร่วมกับ framework	React + Redux	Angular (native), React (ได้ แต่ต้องวางแผนดี)

📦 ตัวอย่างงานที่เหมาะกับแต่ละตัว

✅ เหมาะกับ Redux Thunk

งานที่เหมาะสม	เหตุผล
โหลดข้อมูลจาก API	ใช้ async/await ได้ง่าย
จัดการ auth เช่น login/logout	ง่ายต่อการจัด flow และ dispatch หลาย action
UI สถานะ loading/error/success ที่ไม่ซับซ้อน	เขียน reducer ได้ตรงไปตรงมา
Form submit ที่ทำงานทีละรอบ	ไม่ต้อง cancel หรือ debounce

✅ เหมาะกับ RxJS

งานที่เหมาะสม	เหตุผล
Auto-complete หรือ search ที่ debounce และ cancel previous request	ใช้ `debounceTime` + `switchMap` ง่ายมาก
Live data / real-time UI	ใช้ `interval`, `websocket`, `merge` ได้ดี
ดักจับ input หลายอย่างพร้อมกัน เช่น keydown + mouse + API + timer	ผสาน stream ด้วย `combineLatest`, `merge`, `zip`
Cancel async ได้ง่าย	ทำได้ผ่าน stream control
ต้อง reuse pipeline หลายจุด	เขียน operator chain ไว้ใช้งานซ้ำได้

💡 ถ้า logic มีลักษณะ "หลาย async ซ้อนกัน", "ต้อง cancel บางอัน", หรือ "ควบคุม event หลายแหล่งพร้อมกัน", RxJS เหมาะกว่า

ลักษณะโปรเจกต์ของคุณ	แนะนำใช้
API call ธรรมดา, login/logout, loading/error ง่ายๆ	Redux Thunk
มี live search, debounce, cancel async, stream ซับซ้อน	RxJS
ใช้ Angular	RxJS โดยธรรมชาติ
ใช้ React + Redux	เริ่มจาก Thunk, ถ้า logic ซับซ้อนค่อยพิจารณา RxJS

ติวสอบสัมภาษณ์งาน Java เบื้องต้น ฉบับ มือใหม่ [2]

c_nooknook_daily_prompt — Wed, 25 Jun 2025 04:19:03 +0000

Spring Framework เบื้องต้น
Java Spring Boot การ build project สามารถทำได้หลายรูปแบบ โดยขึ้นอยู่กับ build tool ที่ใช้ ซึ่งที่นิยมมากที่สุดมี 2 ตัวหลัก ๆ คือ

✅ 1. Gradle
✅ 2. Maven

ทั้งสอง เกี่ยวข้องโดยตรง กับกระบวนการ build, run, test, package, และ deploy ของ Spring Boot project

🔧 Gradle และ Maven คืออะไร?

รายการ	Gradle	Maven
รูปแบบ config	DSL: ใช้ Groovy/ Kotlin DSL	XML (pom.xml)
ความยืดหยุ่น	สูง (custom script ได้ง่าย)	ต่ำกว่า แต่ชัดเจนกว่า
ความเร็วในการ build	เร็วกว่า Maven (ใช้ cache)	ช้ากว่า Gradle
Learning Curve	สูงขึ้นนิดหน่อย	เรียนรู้ได้เร็วกว่า

วิธีการ build Project (Build ได้กี่แบบ?)

👉 หากใช้ Gradle:

./gradlew build         # สร้าง JAR
./gradlew bootRun       # รันแอปแบบ development
./gradlew bootJar       # สร้างไฟล์ JAR เฉพาะ Spring Boot
./gradlew clean         # ลบ build เดิมก่อน

👉 หากใช้ Maven:

mvn clean install       # สร้าง JAR และติดตั้งไว้ใน local repo
mvn spring-boot:run     # รันแอป
mvn package             # สร้าง JAR

📦 ผลลัพธ์ของการ Build

ได้เป็นไฟล์ .jar หรือ .war (ขึ้นอยู่กับ config)
สามารถนำไป deploy ได้ทันที (Spring Boot เป็น self-contained)

🎯 สรุปว่า Gradle/Maven เกี่ยวข้องอย่างไร?

สิ่งที่เกี่ยวข้อง	คำอธิบาย
🔗 Build Tool	Spring Boot ใช้ Maven/Gradle เพื่อจัดการ dependency, build, run และ deploy
⚙️ Dependency Management	Maven: ใช้ pom.xml, Gradle: ใช้ build.gradle เพื่อกำหนดไลบรารี
📄 Script Configuration	ใช้ระบุเวอร์ชัน Spring Boot, plugins และ tasks สำหรับ build

✅ สรุปสุดท้าย

Spring Boot build ได้หลายแบบ เช่น JAR, WAR, native image (GraalVM)
ต้องใช้ build tool เช่น Gradle หรือ Maven ในการจัดการขั้นตอนต่าง ๆ
Gradle กับ Maven ทำหน้าที่คล้ายกันแต่มี syntax และประสิทธิภาพที่ต่างกันเล็กน้อย

🌟 GraalVM คืออะไร?
GraalVM คือ High-Performance Virtual Machine ที่สามารถรันหลายภาษาได้ (เช่น Java, JavaScript, Python, Ruby ฯลฯ) โดยมี จุดเด่น คือ:

✅ รองรับการ compile Java application ให้กลายเป็น Native Executable (AOT Compile)
✅ ทำงานเร็วกว่า JVM แบบปกติในบางกรณี
✅ ใช้ memory น้อยลง
✅ Startup time ไวมาก (เช่น 0.01 วินาที เทียบกับ 2-3 วินาทีของ JVM ปกติ)

GraalVM ต่างจาก JVM ปกติยังไง?

ประเด็น	JVM ปกติ (OpenJDK)	GraalVM (Native Image)
🛠️ Compile Type	JIT (Just-In-Time)	AOT (Ahead-Of-Time)
⚡ Startup Time	ช้า (warm-up ก่อน)	เร็วมาก (เกือบทันที)
🧠 Memory Usage	ใช้เยอะ	ใช้น้อย
🔁 Compatible Libs	รองรับทุก lib Java	ต้องใช้ lib ที่ support AOT เท่านั้น
🧳 ขนาดไฟล์ Executable	ไม่สามารถ run ได้เอง (ต้องใช้ JVM)	เป็น binary พร้อม run ได้เลย

🚀 GraalVM กับ Spring Boot
Spring Boot สามารถทำงานร่วมกับ GraalVM ได้ผ่าน Spring Native หรือ Spring Boot 3.x ขึ้นไปที่ใช้ AOT Processing โดยตรง

ตัวอย่าง Build แบบ Native:

./gradlew bootBuildImage --builder paketobuildpacks/builder:tiny

หรือใช้ GraalVM ตรง ๆ:

native-image -jar your-app.jar

ได้ผลลัพธ์เป็นไฟล์ .exe หรือ binary ที่สามารถ run ได้โดยไม่ต้องติดตั้ง Java

📌 ใช้ GraalVM ตอนไหนถึงจะดี?

เหมาะกับ	เพราะว่า
💻 Microservices	ต้องการ startup เร็ว, ใช้ memory น้อย
🖥️ CLI tools	ต้องการ build เป็น binary ขนาดเล็ก
☁️ Serverless	ช่วยลด cold-start time
📱 Embedded App	มี resource จำกัด

📦 แต่ข้อควรระวัง

ไม่รองรับ Reflection บางแบบ (เช่นการใช้ Class.forName()) ต้องกำหนดล่วงหน้า
การ build นานมาก (บางครั้งหลักนาที)
ต้องเขียนโค้ดให้ AOT-friendly
ไม่รองรับทุก third-party lib โดยเฉพาะที่ใช้ dynamic code

คำถาม	คำตอบ
GraalVM คืออะไร?	VM ที่ compile Java เป็น native binary
ต่างจาก JVM ปกติยังไง?	เร็วกว่า, ใช้ memory น้อยกว่า, run ได้ทันที
ใช้กับ Spring Boot ได้ไหม?	ได้ โดยใช้ Spring Native หรือ Spring Boot 3.x+
ควรใช้เมื่อไหร่?	เมื่อ performance สำคัญ เช่นใน Microservices หรือ Serverless

🔍 AOT คืออะไร?
AOT = Ahead-Of-Time compilation
คือการ compile โค้ดล่วงหน้า (ก่อน runtime) ให้เป็น binary (เครื่องอ่านได้เลย)
ต่างจาก JIT ที่ compile ตอน runtime

📦 ตัวอย่าง:

แบบ	ความหมาย
✅ AOT (Ahead-of-Time)	Compile เป็น binary ก่อนรัน เช่น GraalVM Native Image
❌ JIT (Just-in-Time)	Compile ระหว่างรัน เช่น JVM ปกติ (OpenJDK, HotSpot)

🚀 ทำไม AOT เร็ว?
เพราะมัน ไม่ต้องตีความ หรือ compile ซ้ำ ขณะรันโปรแกรม
จึงได้ผลลัพธ์:

⚡ Startup เร็ว
🧠 ใช้ memory น้อยลง
🐳 เหมาะกับ container, serverless

🧩 AOT-Friendly คืออะไร?

โค้ดของเราต้องเขียนในแบบที่ "สามารถ compile ล่วงหน้า" ได้ โดยไม่ต้องพึ่ง runtime processing หรือ reflection ที่ไม่แน่นอน

❌ ตัวอย่าง "ไม่ AOT-friendly"

Class.forName("com.example.MyClass"); // ใช้ reflection

@Autowired
private Object someBean; // ใช้ dynamic injection แบบที่ compiler เดาไม่ได้

พวกนี้ GraalVM จะไม่สามารถ "คาดเดา" ได้ล่วงหน้า ทำให้ build ไม่ผ่าน หรือรันไม่ได้

✅ ตัวอย่าง "AOT-friendly"

@Autowired
private MyService myService; // แบบเจาะจง class

หรือใช้ annotation ที่ GraalVM รองรับ เช่น @RestController, @ConfigurationProperties แบบ static

📘 ใน Spring Boot 3+

Spring Boot 3.x ใช้ Spring AOT Engine เพื่อ:

วิเคราะห์โค้ดทั้งหมด
Generate code/metadata ที่ GraalVM เข้าใจได้
ลด runtime reflection ลง

✅ สรุป

หัวข้อ	ความหมาย
AOT	Compile โค้ดล่วงหน้าก่อนรัน
AOT-friendly	โค้ดที่เขียนแบบ static ชัดเจน ไม่มี reflection หรือ dynamic code
ทำไมต้องสนใจ	เพราะ GraalVM ต้องการ compile ล่วงหน้าให้เร็วและเบา
Spring Boot 3	รองรับ AOT และ Native Image เต็มรูปแบบ

ตัวอย่างการใช้ Spring Boot สร้าง REST Controller ง่าย ๆ

@RestController
public class HelloController {

    @GetMapping("/hello")
    public String hello() {
        return "Hello from Spring Boot!";
    }
}

@RestController คือการประกาศว่า Class นี้เป็น Controller แบบ REST

@GetMapping คือการแมป HTTP GET กับ method

Dependency Injection (DI)

@Service
public class UserService {
    // business logic
}

@RestController
public class UserController {
    private final UserService userService;

    // Constructor Injection
    public UserController(UserService userService) {
        this.userService = userService;
    }
}

JDBC (Java Database Connectivity)
JDBC คือ API มาตรฐานของ Java สำหรับเชื่อมต่อและสั่งงานฐานข้อมูลแบบ relational เช่น MySQL, PostgreSQL

ตัวอย่าง JDBC เชื่อมต่อฐานข้อมูล

String url = "jdbc:mysql://localhost:3306/mydb";
String user = "root";
String password = "password";

try (Connection conn = DriverManager.getConnection(url, user, password)) {
    Statement stmt = conn.createStatement();
    ResultSet rs = stmt.executeQuery("SELECT * FROM users");

    while (rs.next()) {
        System.out.println(rs.getString("username"));
    }
} catch (SQLException e) {
    e.printStackTrace();
}

🌐 REST API
REST (Representational State Transfer) คือสถาปัตยกรรมสำหรับสร้าง Web Services ที่ใช้ HTTP Method (GET, POST, PUT, DELETE) ในการจัดการ Resource

HTTP Methods ที่ควรรู้

Method	ใช้ทำอะไร?
GET	ดึงข้อมูล
POST	สร้างข้อมูลใหม่
PUT	แก้ไขข้อมูล
DELETE	ลบข้อมูล

ตัวอย่าง REST API ด้วย Spring Boot

@RestController
@RequestMapping("/api/users")
public class UserRestController {

    @GetMapping("/{id}")
    public User getUser(@PathVariable Long id) {
        // return user by id
    }

    @PostMapping
    public User createUser(@RequestBody User user) {
        // create user
    }
}

📌 Lombok คืออะไร?
Lombok เป็นไลบรารีของ Java ที่ช่วยลดโค้ดซ้ำซ้อน เช่น getter, setter, constructor, toString() โดยอาศัย annotation-based code generation ที่ compile-time

Lombok Annotations ที่ใช้บ่อย

Annotation	ทำหน้าที่
`@Getter`, `@Setter`	สร้าง getter/setter อัตโนมัติ
`@ToString`	สร้างเมธอด `toString()`
`@EqualsAndHashCode`	สร้าง `equals()` และ `hashCode()`
`@NoArgsConstructor`	สร้าง constructor แบบไม่มี argument
`@AllArgsConstructor`	สร้าง constructor ที่รับทุก field
`@RequiredArgsConstructor`	สร้าง constructor สำหรับ field ที่เป็น `final` หรือ `@NonNull`
`@Data`	รวม `@Getter`, `@Setter`, `@ToString`, `@EqualsAndHashCode`, `@RequiredArgsConstructor`
`@Builder`	ใช้สร้าง object แบบ builder pattern
`@Value`	ทำให้ class เป็น immutable (เหมือน `final` + `@Data`)

ตัวอย่างการใช้ Lombok

import lombok.Data;
import lombok.Builder;

@Data
@Builder
public class User {
    private String name;
    private int age;
}

ผลลัพธ์ที่ได้: class นี้จะมี getter, setter, toString, equals, hashCode และสามารถสร้าง object แบบนี้ได้:

User user = User.builder()
                .name("Alice")
                .age(25)
                .build();

✅ Annotation ใน Java คือชนิดพิเศษของ interface
❌ ไม่ใช่ class (class ธรรมดา)
❌ ไม่ใช่ function

Annotation = ป้ายกำกับ (label) ที่อธิบายว่า class หรือ method นี้ "มีความหมายพิเศษ"
Annotation คือคำสั่งพิเศษที่ขึ้นต้นด้วย @ ใช้เพื่อ แนบ metadata (ข้อมูลเพิ่มเติม) ให้กับ class, method, field ฯลฯ
ไม่ส่งผลต่อ logic โดยตรง แต่สามารถใช้ร่วมกับ framework, tooling, หรือ compile-time processing
ใน Java ทุก annotation ถูกสร้างด้วยคีย์เวิร์ด @interface
ซึ่งหมายความว่า annotation เป็นชนิดหนึ่งของ interface ที่มี metadata เท่านั้น
เบื้องหลัง @interface → Java จะสร้าง interface พิเศษ ที่เก็บเฉพาะ "ค่ากำกับ (metadata)" เท่านั้น ไม่มี logic หรือพฤติกรรมแบบ class ทั่วไป

สรุปเปรียบเทียบ

สิ่งที่เปรียบเทียบ	class	interface	annotation (`@interface`)
มี logic ได้ไหม	✅ ได้	❌ ไม่ได้	❌ ไม่ได้
ใช้ `@interface` ได้ไหม	❌ ไม่ได้	❌ ไม่ได้	✅ ได้
มี `method body` ได้ไหม	✅ ได้	❌ ไม่ได้	❌ ไม่ได้
ใช้สร้าง object ได้ไหม	✅ ได้	❌ ไม่ได้	❌ ไม่ได้
ถูก JVM อ่านแบบ metadata ไหม	❌	❌	✅ ใช่
ตัวอย่าง	`public class MyClass {}`	`interface MyService {}`	`@interface MyAnnotation {}`

แล้ว annotation ใช้ยังไง?

@MyAnnotation(value = "dev")
public class Demo {}

JVM จะไม่เรียก MyAnnotation แบบ object แต่จะเก็บข้อมูลนี้เป็น metadata
เราสามารถใช้ reflection อ่าน metadata เหล่านี้ได้ใน runtime
หรือ framework เช่น Spring, JUnit, Hibernate จะใช้ annotation เพื่อกำหนดพฤติกรรม

🧠 สรุปสุดท้ายจำง่าย:

❓ Annotation คือ class ไหม?
🔸 ❌ ไม่ใช่ class
🔹 ✅ เป็น interface แบบพิเศษ (ประกาศด้วย @interface)
🔸 📌 ใช้เพื่อแนบ metadata ไม่ได้มี logic หรือสร้าง instance แบบ class ได้

Spring Boot Annotations ที่ควรรู้
ตัวอย่าง Annotation ที่ใช้บ่อยใน Java

Annotation	ใช้ทำอะไร
`@Override`	บอกว่า method นี้ override มาจาก superclass
`@Deprecated`	เตือนว่า method/class นี้เลิกใช้แล้ว
`@SuppressWarnings`	ปิด warning จาก compiler

Annotation ที่ใช้บ่อยใน Spring Framework

Annotation	ใช้ทำอะไร
`@Component`	บอกว่า class นี้เป็น bean
`@Service`	ระบุว่าเป็น service layer
`@Repository`	ระบุว่าเป็น repository สำหรับ JPA
`@Autowired`	ให้ Spring inject dependency อัตโนมัติ
`@RequestMapping`, `@GetMapping`, `@PostMapping`	ใช้ระบุเส้นทาง HTTP ใน Controller
`@RestController`	รวม `@Controller` + `@ResponseBody`
`@Configuration`, `@Bean`	ใช้กำหนด bean ด้วยมือ

🔽 Annotation ระดับ Class

Annotation	คำอธิบาย
`@SpringBootApplication`	รวบรวม `@Configuration`, `@EnableAutoConfiguration`, `@ComponentScan`
`@RestController`	ประกาศว่าเป็น REST API controller
`@Service`	สำหรับ class ที่เป็น business logic
`@Repository`	สำหรับ class ที่ติดต่อ database
`@Component`	ใช้กับ bean ทั่วไป
`@Configuration`	ใช้สร้าง Java config
`@EnableAutoConfiguration`	ให้ Spring ตั้งค่าทุกอย่างให้อัตโนมัติ

🔼 Annotation ระดับ Method / Field

Annotation	คำอธิบาย
`@Autowired`	ให้ Spring ฉีด dependency มาให้อัตโนมัติ
`@Value`	อ่านค่าจาก `application.properties` หรือ `yaml`
`@RequestMapping`	กำหนด path และ method ของ API
`@GetMapping`, `@PostMapping`	ตัวย่อของ `@RequestMapping(method = …)`
`@RequestBody`, `@PathVariable`, `@RequestParam`	รับข้อมูลจาก HTTP request
`@Bean`	บอกว่า method นี้ return เป็น Spring bean

🧩 ตัวอย่าง REST API Controller ด้วย Spring + Lombok

@RestController
@RequiredArgsConstructor
@RequestMapping("/api/users")
public class UserController {

    private final UserService userService;

    @GetMapping("/{id}")
    public UserDto getUser(@PathVariable Long id) {
        return userService.getUserById(id);
    }

    @PostMapping
    public UserDto createUser(@RequestBody CreateUserRequest request) {
        return userService.createUser(request);
    }
}

@Data
public class CreateUserRequest {
    private String name;
    private int age;
}

📚 สรุปหัวข้อเสริม

✅ Lombok ช่วยลดโค้ดซ้ำซ้อน ทำให้ class สั้น กระชับ (Boilerplate code-โค้ดพื้นฐานที่ต้องเขียนซ้ำ ๆ เพื่อให้ระบบทำงาน แต่ไม่ใช่ logic หลัก)
✅ ใช้ annotation เช่น @data, @builder, @RequiredArgsConstructor บ่อยมากใน Spring
✅ เข้าใจ annotation ของ Spring จะช่วยให้พัฒนาได้รวดเร็ว และอธิบายโค้ดได้เวลาสัมภาษณ์

คำถามสัมภาษณ์เกี่ยวกับ Lombok & Spring Annotations

คำถาม	แนวคำตอบ
`@Data` ต่างจาก `@Getter/@Setter` อย่างไร?	`@Data` รวมหลาย annotation ในตัวเดียว เช่น `toString`, `equals`, `hashCode`
`@Autowired` ทำงานอย่างไร?	Spring จะ inject bean โดยอัตโนมัติตาม type หรือ name
`@Component` ต่างจาก `@Service` หรือ `@Repository` ไหม?	ทั้งหมดเป็น component เหมือนกัน แต่ใช้เพื่อจำแนก role ต่างกัน (best practice)
ใช้ Lombok แล้ว debug ยากไหม?	อาจยากขึ้นถ้าไม่เข้าใจว่ามัน generate อะไรบ้าง ต้องดู bytecode หรือใช้ IDE ที่รองรับ

คำถามสัมภาษณ์งานยอดนิยม

คำถาม	ประเด็นที่ควรรู้
Java กับ JavaScript เหมือนกันมั้ย?	ไม่เหมือนกันเลย
final คืออะไร	ใช้กับตัวแปร เมธอด หรือคลาส เพื่อไม่ให้เปลี่ยนแปลง
Overloading vs Overriding	Overload: ชื่อเดียว พารามิเตอร์ต่างกัน, Override: เขียนทับจาก superclass
String กับ StringBuilder ต่างกันยังไง?	`String` immutable, `StringBuilder` mutable และเร็วกว่า
JVM, JRE, JDK ต่างกันยังไง?	JVM: รัน, JRE: รัน + ไลบรารี, JDK: ใช้เขียน + compile
Spring Framework คืออะไร?	Framework ช่วยพัฒนา Java Web Application โดยเน้น DI และ AOP
JDBC ทำงานอย่างไร?	เชื่อมต่อฐานข้อมูลผ่าน API ที่มาตรฐานของ Java
REST API คืออะไร?	สถาปัตยกรรมสำหรับการสื่อสารระหว่าง Client-Server ด้วย HTTP

ติวสอบสัมภาษณ์งาน Java เบื้องต้น ฉบับ มือใหม่ [1]

c_nooknook_daily_prompt — Wed, 25 Jun 2025 03:21:55 +0000

Object-Oriented Programming (การเขียนโปรแกรมเชิงวัตถุ) คือ แนวคิดในการเขียนโปรแกรมที่เน้นการแบ่งระบบออกเป็น "วัตถุ" (Objects) โดยวัตถุแต่ละชิ้นจะเป็นตัวแทนของสิ่งของหรือแนวคิดในโลกจริง และมี "ข้อมูล" (Attributes) กับ "พฤติกรรม" (Methods) ของตัวเอง

สั้นๆ
"OOP คือแนวทางเขียนโปรแกรมโดยมอง "ปัญหา" เป็นกลุ่มของวัตถุที่สื่อสารกัน"

4 เสาหลักของ OOP ที่ต้องจำให้แม่น

🔢	ชื่อหลักการ	คำอธิบายแบบเข้าใจง่าย
1️⃣	Encapsulation (การห่อหุ้มข้อมูล)	ซ่อนข้อมูลภายใน object ไม่ให้เข้าถึงโดยตรง ใช้ `private` + `getter/setter` เพื่อควบคุมการเข้าถึง
2️⃣	Abstraction (การย่อรายละเอียด)	ซ่อนรายละเอียดการทำงานที่ซับซ้อนไว้เบื้องหลัง เผยเฉพาะสิ่งที่จำเป็น เช่น ผ่าน `abstract class` หรือ `interface`
3️⃣	Inheritance (การสืบทอดคุณสมบัติ)	ให้ class ใหม่สามารถ “รับมรดก” จาก class เดิมได้ ช่วยลดการเขียนโค้ดซ้ำ เช่น ใช้ `extends`
4️⃣	Polymorphism (ความหลากหลายของพฤติกรรม)	object สามารถตอบสนองต่อ method เดียวกันได้หลายแบบ เช่น `overloading` และ `overriding`

"ห่อ ย่อ สืบ หลาย"
ห่อหุ้ม (Encapsulation) → ย่อรายละเอียด (Abstraction) → สืบทอด (Inheritance) → หลากหลายพฤติกรรม (Polymorphism)

องค์ประกอบของ OOP

Class (แม่แบบของวัตถุ) "พิมพ์เขียว" หรือ "สูตรการสร้างวัตถุ"
Object (วัตถุจริงที่สร้างจาก class)

OOP คือการเขียนโปรแกรมแบบมองโลกเป็นวัตถุ วัตถุแต่ละตัวมี ข้อมูลของตัวเอง และ สามารถกระทำบางอย่างได้ เหมาะกับโปรเจกต์ที่ซับซ้อนเพราะช่วย จัดระเบียบโค้ดให้เข้าใจง่ายและดูแลได้ดี

Object-Oriented Programming (OOP)

Class & Object: พิมพ์เขียวและอินสแตนซ์
Encapsulation: ซ่อนข้อมูล (ใช้ private + getter/setter)
Inheritance: สืบทอดคุณสมบัติ (ใช้ extends)
Polymorphism: เมธอดเดียว ใช้ได้หลายแบบ (Overloading / Overriding)
Abstraction: ซ่อนรายละเอียดการทำงาน (ใช้ abstract class หรือ interface)

องค์ประกอบหลักของ Class มีอะไรบ้าง?

องค์ประกอบ	คำอธิบาย
Fields (Attributes / Properties)	ตัวแปรที่เก็บ "ข้อมูล" ของ object เช่น ชื่อ อายุ
Constructors	เมธอดพิเศษที่ใช้สร้าง object จาก class นั้น
Methods (พฤติกรรม)	เมธอดที่อธิบาย "สิ่งที่ object ทำได้"
Access Modifiers	เช่น `public`, `private`, `protected` – กำหนดการเข้าถึงองค์ประกอบใน class
Static Members	ฟิลด์หรือเมธอดที่เป็นของ class ทั้งหมด ไม่ใช่เฉพาะ object ใด object หนึ่ง
Nested Classes (ถ้ามี)	class ที่ประกาศซ้อนอยู่ภายใน class อื่น
Annotations (ถ้ามี)	เช่น `@Override`, `@Getter` ฯลฯ เพื่อกำหนดพฤติกรรมพิเศษ

Class = ข้อมูล + พฤติกรรม + วิธีสร้าง + การควบคุมการเข้าถึง
Class = Field + Constructor + Method (+ Access Control)

Data Types (ชนิดข้อมูล) หลัก ๆ อยู่ 2 กลุ่มใหญ่

Primitive Data Types (ชนิดข้อมูลพื้นฐาน)

Java มี 8 ชนิดที่เป็นข้อมูลดิบแบบเบา ไม่ใช่ object ใช้บ่อยมาก!

ชนิด	ขนาด	ตัวอย่าง	คำอธิบาย
`byte`	8-bit	`byte b = 127;`	เลขจำนวนเต็มขนาดเล็ก (-128 ถึง 127)
`short`	16-bit	`short s = 1000;`	ตัวเลขขนาดกลาง
`int`	32-bit	`int age = 30;`	จำนวนเต็มทั่วไป
`long`	64-bit	`long population = 8000000000L;`	ตัวเลขใหญ่
`float`	32-bit	`float pi = 3.14f;`	ทศนิยมเบา ต้องลงท้ายด้วย `f`
`double`	64-bit	`double d = 3.14159;`	ทศนิยมละเอียด ใช้บ่อยกว่า float
`char`	16-bit	`char c = 'A';`	ตัวอักษร 1 ตัว (ใช้ single quote `'`)
`boolean`	1-bit	`boolean flag = true;`	มีแค่ `true` หรือ `false`

Reference Data Types (ชนิดข้อมูลอ้างอิง) คือข้อมูลที่ อ้างถึง object หรือคลาส เช่น:

ชนิด	ตัวอย่าง	คำอธิบาย
`String`	`"Hello"`	ตัวอักษรหลายตัว (เป็น object)
`Array`	`int[] numbers = {1, 2, 3};`	เก็บข้อมูลหลายค่าในตัวแปรเดียว
`Class`	`Person p = new Person();`	เก็บวัตถุที่เราสร้างจาก class
`Interface`	`Runnable r = () -> {}`	ตัวแปรที่อ้างถึง interface
`List`, `Map`, `Set`	จาก Java Collections	เก็บข้อมูลหลายแบบในรูปโครงสร้างที่ยืดหยุ่น

Primitive Types (8 แบบ):

byte, short, int, long
float, double
char, boolean

Reference Types:

String, Array, Object, Class, List, Map ฯลฯ

การสร้างคลาส

public class Person { // Class Declaration

    // Fields
    private String name;
    private int age;

    // Constructor
    public Person(String name, int age) {
        this.name = name;
        this.age = age;
    }

    // Methods
    public void sayHello() {
        System.out.println("Hi, I'm " + name + " and I'm " + age + " years old.");
    }

    // Getter & Setter (Encapsulation)
    public String getName() {
        return name;
    }

    public void setAge(int age) {
        this.age = age;
    }

    // Static Method
    public static void describeClass() {
        System.out.println("This is a Person class.");
    }
}

สร้างวัตถุจากคลาส

ชื่อคลาส ชื่อตัวแปร = new ชื่อคลาส(พารามิเตอร์);

Collections Framework
Java Collections Framework คืออะไร?
Collections Framework คือชุดของ class และ interface ที่ Java เตรียมไว้ให้สำหรับจัดการ กลุ่มข้อมูล (Group of Objects) อย่างมีประสิทธิภาพ เช่น การเก็บข้อมูล, ค้นหา, เพิ่ม, ลบ, เรียงลำดับ ฯลฯ

หมวดหมู่หลักของ Collection (แบ่งตามโครงสร้าง)

Java แบ่ง Collection ออกเป็น 3 กลุ่มหลักใหญ่ ๆ:

กลุ่มหลัก	Interface	ตัวอย่างคลาสยอดนิยม
List (ลำดับ)	`List<E>`	`ArrayList`, `LinkedList`, `Vector`
Set (ไม่ซ้ำ)	`Set<E>`	`HashSet`, `LinkedHashSet`, `TreeSet`
Map (คีย์-ค่า)	`Map<K, V>`	`HashMap`, `LinkedHashMap`, `TreeMap`
Queue / Deque (คิว)	`Queue<E>`, `Deque<E>`	`PriorityQueue`, `ArrayDeque`, `LinkedList`

List (ลำดับข้อมูล, มี index)

เก็บข้อมูลแบบเรียงลำดับ
มี index (เริ่มที่ 0)
ซ้ำกันได้

List<String> names = new ArrayList<>();
names.add("Alice");
names.add("Bob");
System.out.println(names.get(0)); // Alice

คลาสที่ใช้บ่อย:

ArrayList – โครงสร้าง array, เข้าถึงเร็ว
LinkedList – เพิ่ม/ลบไว (โดยเฉพาะกลางรายการ)

Set (ไม่มีข้อมูลซ้ำ)

❌ ไม่มี index
❌ ไม่เก็บข้อมูลซ้ำ

Set<String> ids = new HashSet<>();
ids.add("A001");
ids.add("A001"); // ซ้ำ → ไม่เก็บ

สรุป Collections Framework แบบภาพรวม

        Collection
           |
   ------------------
   |       |        |
 List     Set     Queue
           |
         SortedSet (TreeSet)

        Map
         |
     SortedMap (TreeMap)

List → มีลำดับ ซ้ำได้
Set → ไม่มีซ้ำ ไม่มี index
Map → เก็บคู่ Key-Value
Queue → เข้าก่อนออกก่อน (FIFO)

สำหรับมือใหม่จะมีความสับสนระหว่าง Array กับ List

Array กับ List ต่างกันชัดเจนทั้งในเรื่องโครงสร้าง ความยืดหยุ่น และวิธีใช้

Array กับ List ต่างกันชัดเจนทั้งในเรื่องโครงสร้าง ความยืดหยุ่น และวิธีใช้

🔸 Array = โครงสร้างพื้นฐาน, ขนาดคงที่, ทำงานเร็ว
🔹 List = เป็น interface ใน Collections Framework, ขยายได้, ใช้งานยืดหยุ่น

❓ Array กับ List ต่างกันอย่างไร?

จุดเปรียบเทียบ	Array	List (เช่น ArrayList)
ประเภท	โครงสร้างข้อมูลแบบพื้นฐาน (built-in)	Interface + Class จาก Collections Framework
ขนาด	คงที่ กำหนดตอนสร้างแล้วเปลี่ยนไม่ได้	ยืดหยุ่น เพิ่ม/ลบได้ตามต้องการ
การเข้าถึง	เร็วมาก (index โดยตรง)	เร็ว (แต่มี overhead จาก object management)
การเพิ่ม/ลบข้อมูล	เพิ่ม/ลบไม่ได้ ต้องสร้าง array ใหม่	ทำได้สะดวก (`add`, `remove`)
ประเภทข้อมูล	เก็บ primitive ได้ (เช่น `int[]`) หรือ object	เก็บ object (เช่น `List<Integer>`)
การใช้ memory	ใช้ memory น้อยกว่า	ใช้ memory มากกว่า เพราะเก็บ metadata
ฟังก์ชันเสริม	ไม่มี method นอกจาก length	มี method เช่น `add`, `remove`, `contains`, `size` ฯลฯ

📊 เปรียบเทียบ Array กับ List แบบละเอียด

หัวข้อ	`Array`	`List` (`ArrayList`, `LinkedList`)
คืออะไร?	โครงสร้างข้อมูลพื้นฐาน	Interface ใน Java Collections
ขนาด	คงที่	ยืดหยุ่น (เพิ่ม/ลบได้)
Index	มี	มี
รองรับ Generic	⛔ ไม่รองรับแบบสมบูรณ์	✅ รองรับเต็มที่
เพิ่ม/ลบข้อมูล	ยุ่งยาก (ต้องสร้างใหม่)	ง่าย (`add()`, `remove()`)
ใช้งานจริง	เบา เร็ว เหมาะกับข้อมูลไม่เปลี่ยน	เหมาะกับโปรเจกต์จริง ใช้งานร่วมกับ Spring
ประสิทธิภาพ	เร็วกว่าเล็กน้อย	ช้ากว่าเล็กน้อย แต่ยืดหยุ่นกว่า
ตัวอย่าง	`int[] arr = new int[3];`	`List<Integer> list = new ArrayList<>();`

📌 Array

int[] numbers = new int[3];
numbers[0] = 10;
numbers[1] = 20;
numbers[2] = 30;

// ขนาดคงที่ เพิ่มใหม่ไม่ได้

📌 List (ArrayList)

List<Integer> numbers = new ArrayList<>();
numbers.add(10);
numbers.add(20);
numbers.add(30);
numbers.add(40); // เพิ่มได้ไม่จำกัด

✅ เมื่อไรควรใช้?

ใช้ Array	ใช้ List
ข้อมูลคงที่ ไม่เพิ่ม/ลบบ่อย	ต้องเพิ่ม ลบ ค้นหา บ่อย
ต้องการประสิทธิภาพสูงสุด (speed/memory)	ต้องการความสะดวกในการจัดการข้อมูล
เก็บ primitive โดยตรง (เช่น `int[]`)	เก็บ object และใช้ method ที่ Collections Framework ให้มา

✅ สรุปจำง่าย

📌 Array = เร็ว คงที่
📌 List = ยืดหยุ่น ใช้ง่าย ใช้บ่อยใน Java สมัยใหม่

🔁 ถ้าเขียนโค้ด Java ยุคใหม่ หรือใช้ Spring Boot → ใช้ List เป็นหลัก

** วิธีแปลง Array ↔ List ใน Java**

แปลง Array → List
✅ แบบง่าย (ใช้ Arrays.asList)

String[] arr = {"A", "B", "C"};
List<String> list = Arrays.asList(arr);

⚠️ หมายเหตุ: Arrays.asList() คืนค่าเป็น fixed-size list → เพิ่ม/ลบไม่ได้ (add() จะ error)

✅ แบบยืดหยุ่น (แนะนำ)

List<String> list = new ArrayList<>(Arrays.asList(arr)); // สามารถ add/remove ได้
list.add("D"); // ✅ ทำได้

Spring Bean คือ อ็อบเจ็กต์ (Object) ที่ถูกจัดการโดย Spring IoC Container (Inversion of Control) ในเฟรมเวิร์ก Spring. พูดง่ายๆ คือ Spring Bean คือ Java Object ที่ Spring Framework สร้าง, จัดการ, และกำหนดค่าให้. คอนเทนเนอร์ Spring IoC จะรับผิดชอบในการสร้าง, จัดการ, และทำลาย Bean เหล่านี้

Inversion of control เป็น concept รูปแบบนึงที่ช่วยลดความผูกมัดกันระหว่าง module หรือ object เพื่อช่วยให้ code ของเรา clean, maintain ง่าย และ test ง่าย ซึ่งตัว IoC นั้นมีวิธีการ implement หลายแบบ แต่วันนี้เราจะมาพูดถึง Dependency Injection

Dependency Injection เป็นรูปแบบการ implement แบบนึงของ IoC โดยการ inject object ผ่าน constructor

useReducer , Redux, Redux Toolkit (RTK)

c_nooknook_daily_prompt — Tue, 24 Jun 2025 01:50:53 +0000

useReducer

useReducer คือ Hook ที่ใช้จัดการ state แบบที่มี หลายสถานะ หรือ logic ซับซ้อน
คล้าย Redux ย่อส่วน ใช้คู่กับ dispatch และ reducer function

ตัวอย่างง่าย ๆ: Counter

import { useReducer } from 'react';

function counterReducer(state: number, action: { type: string }) {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      return state;
  }
}

export default function Counter() {
  const [count, dispatch] = useReducer(counterReducer, 0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>เพิ่ม</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>ลด</button>
    </div>
  );
}

โครงสร้างจำง่าย:

const [state, dispatch] = useReducer(reducerFunction, initialState);

state → ค่าปัจจุบัน
dispatch(action) → ส่ง action ไปให้ reducer
reducer(state, action) → ฟังก์ชันที่กำหนดว่า state จะเปลี่ยนยังไง

ใช้เมื่อไหร่ดี?

ต้องจัดการ state ที่มีหลายประเภท เช่น เพิ่ม, ลบ, รีเซ็ต
ต้องการแยก logic ออกจาก component (เช่น form, cart, etc.)
ไม่อยากใช้ Redux แต่ logic คล้ายกัน

ประกาศประเภท State และ Action

type State = {
  count: number;
  showCount: boolean;
};

type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'reset' }
  | { type: 'toggle' };

เขียน reducer ฟังก์ชัน

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'decrement':
      return { ...state, count: state.count - 1 };
    case 'reset':
      return { ...state, count: 0 };
    case 'toggle':
      return { ...state, showCount: !state.showCount };
    default:
      return state;
  }
}

ใช้งานในคอมโพเนนต์

import React, { useReducer } from 'react';

const initialState: State = {
  count: 0,
  showCount: true,
};

export default function CounterReducer() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h2>useReducer แบบ Object State + TypeScript</h2>

      <button onClick={() => dispatch({ type: 'toggle' })}>
        {state.showCount ? 'ซ่อน' : 'แสดง'} ตัวเลข
      </button>

      {state.showCount && <p>Count: {state.count}</p>}

      <button onClick={() => dispatch({ type: 'increment' })}>เพิ่ม</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>ลด</button>
      <button onClick={() => dispatch({ type: 'reset' })}>รีเซ็ต</button>
    </div>
  );
}

สรุปจำง่าย

ส่วนประกอบ	ทำหน้าที่อะไร
`State`	โครงสร้างข้อมูลที่เราจะเก็บ
`Action`	ชนิดของคำสั่งที่ส่งเข้า reducer
`reducer()`	ฟังก์ชันหลักที่กำหนดว่า state เปลี่ยนยังไง
`dispatch()`	ใช้ส่ง action เข้า reducer

Redux

Redux แบบดั้งเดิม (Vanilla Redux) เพื่อความเข้าใจ หลักการพื้นฐานจริง ๆ ก่อนใช้ Redux Toolkit
เราจะมาเริ่มจากโค้ดพื้นฐานที่ใช้แนวคิด action → reducer → store → dispatch ค่ะ

ติดตั้ง redux และ react-redux

npm install redux react-redux

สร้าง Action Type และ Action Creator

// action types
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET';

// action creators
export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });
export const reset = () => ({ type: RESET });

สร้าง Reducer

src/redux/reducer.js

import { INCREMENT, DECREMENT, RESET } from './actions';

const initialState = {
  count: 0,
};

export const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return { ...state, count: state.count + 1 };
    case DECREMENT:
      return { ...state, count: state.count - 1 };
    case RESET:
      return { ...state, count: 0 };
    default:
      return state;
  }
};

สร้าง Store

import { createStore } from 'redux';
import { counterReducer } from './reducer';

export const store = createStore(counterReducer);

ครอบ ด้วย

src/main.jsx (หรือ index.js)

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import { store } from './redux/store';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

ใช้ใน Component

src/App.jsx

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, reset } from './redux/actions';

export default function App() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>เพิ่ม</button>
      <button onClick={() => dispatch(decrement())}>ลด</button>
      <button onClick={() => dispatch(reset())}>รีเซ็ต</button>
    </div>
  );
}

สรุปโครงสร้าง Redux ดั้งเดิม

ส่วนประกอบ	หน้าที่
`action`	สิ่งที่บอกว่า "จะทำอะไร" (type: 'INCREMENT')
`reducer`	รับ state + action → คืนค่า state ใหม่
`store`	ที่รวม state และจัดการ dispatch, subscribe ฯลฯ
`dispatch()`	ส่ง action ไปให้ reducer
`Provider`	ครอบแอปเพื่อให้ทุก component ใช้ store ได้
`useSelector()`	ดึงค่า state จาก store
`useDispatch()`	ส่ง action เข้าสู่ store

Redux Toolkit (RTK)

เริ่มต้นใช้ Redux ง่าย ๆ แนะนำให้เริ่มจาก Redux Toolkit (RTK) ซึ่งเป็นวิธีที่ทีม Redux แนะนำให้ใช้เป็นหลักในปัจจุบัน เพราะลดความซับซ้อนและโค้ดเยอะจาก Redux แบบดั้งเดิม

เป้าหมาย: "สร้าง Counter App ด้วย Redux Toolkit"

ขั้นตอนง่าย ๆ (แบบ Step-by-Step)

ติดตั้ง Redux Toolkit + React Redux

npm install @reduxjs/toolkit react-redux

สร้าง store

src/store.ts

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

// สำหรับใช้ใน TypeScript
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

สร้าง slice

src/counterSlice.ts

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    reset: (state) => {
      state.value = 0;
    },
  },
});

export const { increment, decrement, reset } = counterSlice.actions;
export default counterSlice.reducer;

ครอบแอปด้วย Provider

src/main.tsx หรือ src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import { store } from './store';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <App />
  </Provider>
);

ใช้ใน Component

src/App.tsx

import { useSelector, useDispatch } from 'react-redux';
import { RootState, AppDispatch } from './store';
import { increment, decrement, reset } from './counterSlice';

export default function App() {
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch: AppDispatch = useDispatch();

  return (
    <div>
      <h1>นับเลข: {count}</h1>
      <button onClick={() => dispatch(increment())}>เพิ่ม</button>
      <button onClick={() => dispatch(decrement())}>ลด</button>
      <button onClick={() => dispatch(reset())}>รีเซ็ต</button>
    </div>
  );
}

สรุปจำง่าย

สิ่งที่ทำ	ชื่อไฟล์
สร้าง state + action	`counterSlice.ts`
รวม reducer	`store.ts`
ครอบ `Provider`	`main.tsx`
ใช้งานในหน้า UI	`App.tsx`

เคล็ดลับ

RTK ใช้ Immer อยู่แล้ว → สามารถ "แก้ state ตรง ๆ" ได้
ใช้ useSelector() เพื่ออ่านค่า
ใช้ useDispatch() เพื่อเรียก action ไปเปลี่ยนค่า

เจาะลึกเหตุผลที่ JSX ใช้ onClick แบบ camelCase

c_nooknook_daily_prompt — Mon, 23 Jun 2025 09:08:11 +0000

คำว่า onClick (ตัว C ใหญ่) ที่เราใช้ใน JSX ไม่ได้เป็นแค่ "ตัวสะกดแปลก ๆ" แต่มีความเกี่ยวข้องลึกกับ JavaScript, JSX, DOM, และ React

ทำไมใน JSX เขียน onClick ไม่ใช่ onclick?

เพราะใน JSX เรากำลังเขียน JavaScript object syntax ที่ map ไปยัง DOM properties ไม่ใช่ HTML attributes

อธิบายแบบเข้าใจง่ายๆก็คือ

HTML ใช้ attribute → lowercase:

onclick = attribute ที่ browser อ่านได้จาก HTML

<!-- HTML ธรรมดา -->
<button onclick="alert('hi')">Click</button>

JSX ไม่ใช่ HTML → เป็น JavaScript

onClick = property ของ JavaScript object

<button onClick={() => alert("hi")}>Click</button>

React จะเอาค่าใน JSX ไปแปลงเป็น JavaScript เช่น:

React.createElement("button", {
  onClick: () => alert("hi")
});

ที่สำคัญ: ใน DOM จริง ๆ onClick คือ property ของ DOM element (HTMLElement.prototype.onclick)

ชื่อ property ใน JavaScript = camelCase

ดังนั้น...

มุมมอง	ใช้แบบไหน	เพราะอะไร
HTML (แท้ ๆ)	`onclick`	เป็น HTML attribute
JSX (React)	`onClick`	เป็น JavaScript property (camelCase)

เกี่ยวข้องกับ object key ไหม?

เกี่ยว! เพราะ JSX จะถูกแปลงเป็น JavaScript object
และ key ของ object (เช่น onClick) ต้องเขียนให้ตรงกับ property ชื่อจริงใน DOM API
ซึ่งเป็น camelCase ตาม JavaScript convention

ตัวอย่าง JSX → JS:

<input type="text" onChange={handleChange} />

--> จะกลายเป็น:

React.createElement("input", {
  type: "text",
  onChange: handleChange
});

สรุป

onClick = React ใช้ JavaScript syntax → ต้อง camelCase
JSX ไม่ใช่ HTML → React จึงไม่ใช้ onclick แบบ HTML
เกี่ยวข้องกับ object key เพราะ JSX = การส่ง props เป็น object
React จะ map key เช่น onClick ไปยัง DOM property element.onclick = ...

โบนัส
การที่เราใช้ { สองครั้งใน JSX ของ React เพื่อกำหนด style นั้น เกี่ยวข้องกับการส่ง JavaScript object เข้าไป ใน props ของ JSX โดยตรง ซึ่งเรามาอธิบายกันแบบเข้าใจง่ายๆ:

🔍 โครงสร้างของ style ใน JSX
เมื่อเราเขียน JSX แบบนี้:

<div style={{ color: 'red' }}>Hello</div>

มันมี { สองระดับเพราะว่า:

ชั้นนอก { ... }: เป็นการบอก React ว่า “ค่าที่อยู่ภายในนี้เป็น JavaScript expression” ไม่ใช่ string ธรรมดา
ชั้นใน { color: 'red' }: คือ JavaScript object ที่ใช้แทน CSS

🔁 เปรียบเทียบกับ HTML ปกติ
ใน HTML ปกติ:

<div style="color: red;">Hello</div>

style คือ string

แต่ใน React JSX เราไม่ใช้ string — เราใช้ object แทน เพราะ React ต้องการให้ style ถูกจัดการเป็น JavaScript object

✅ ตัวอย่างเพิ่มเติม

const myStyle = {
  backgroundColor: 'blue',
  fontSize: '20px'
};

function MyComponent() {
  return <div style={myStyle}>Styled div</div>;
}

หรือแบบ inline:

<div style={{ backgroundColor: 'yellow', padding: '10px' }}>Nice!</div>

🚫 ถ้าใช้ { ครั้งเดียวจะเกิดอะไร?
ถ้าเขียนแบบนี้:

<div style={ color: 'red' }>Hello</div> // ❌ Error!

จะได้ error เพราะ React จะไม่เข้าใจว่า color: 'red' คืออะไร — ต้องห่อมันใน object ก่อน

Syntax	ความหมาย
`{ ... }`	JSX expression (JS code)
`{ key: value }`	JavaScript object (CSS แบบ object)

ดังนั้น style={{ color: 'red' }} → ชั้นนอกคือ JSX expression, ชั้นในคือ CSS object ครับ

รู้หรือไม่ Next.js ใช้ SWC ด้วยนะ!

c_nooknook_daily_prompt — Mon, 23 Jun 2025 07:06:16 +0000

ตั้งแต่ Next.js v12 เป็นต้นมา
Next.js ใช้ SWC (Rust-based compiler) แทน Babel เป็นค่าเริ่มต้น
เพราะ:

เร็วกว่า ~17x
ใช้ memory น้อย
แปล JSX/TS ได้เหมือน Babel

แต่ถ้าคุณสร้าง babel.config.js ➤ Next.js จะ fallback ไปใช้ Babel แทนทันทีค่ะ

Ref: nextjs-compiler

คำถาม	คำตอบ
❓ Babel ใน Next.js คืออะไร	Compiler ที่แปลง JSX, TS, JS ใหม่ให้ browser เข้าใจ
❓ ต้องตั้งค่าไหม	ไม่จำเป็น ถ้าใช้ config ปกติ
❓ จะใช้ Babel หรือ SWC?	Next.js ใช้ SWC เป็น default, แต่คุณเปลี่ยนได้
❓ ลองแปลงได้ที่ไหน	Babel REPL

คำแนะนำเมื่อใช้ Next.js:

ถ้าคุณ...	แนะนำ
ใช้ JSX / TS ปกติ	ไม่ต้องยุ่งกับ Babel
ต้องใช้ decorator / styled-components	ค่อยเพิ่ม `babel.config.js`
อยาก build ให้เบาที่สุด	ปรับ Babel config, หรือใช้ SWC (Next.js รองรับแล้ว)

✅ สถานการณ์ที่คุณ ควรปรับแต่ง Babel (ใช้ babel.config.js)

กรณี	ทำไมต้องปรับ Babel
🔧 ใช้ decorators (เช่นใน MobX, class-validator)	ยังไม่ stable ใน JS ปกติ ต้องเปิด plugin
🎨 ใช้ styled-components	ต้องเปิด Babel plugin เพื่อให้ SSR + className ทำงานดีขึ้น
📊 ใช้ library ที่ต้องการ plugin พิเศษ (เช่น lodash, react-intl)	ปรับลดขนาด bundle หรือเพิ่ม optimization
💬 ต้องการแปล message จาก code โดยตรง (i18n extract)	ใช้ `babel-plugin-react-intl`
🚫 ต้องการ exclude หรือ include Babel เฉพาะบางไฟล์	ปรับ rules แบบละเอียด
💥 ต้องรองรับ legacy browser พิเศษ (เช่น IE11)	ปรับ preset-env target เอง
⚙️ ต้องการ custom JSX runtime (แทน React)	ปรับ JSX transform เอง เช่นใช้ preact หรือ emotion

🛠 ตัวอย่าง Babel Plugin ที่ใช้บ่อย:

Plugin	ใช้ทำอะไร
`@babel/plugin-proposal-decorators`	เปิดใช้ `@decorator` บน class
`babel-plugin-styled-components`	ปรับปรุง SSR, ลด className ซ้ำซ้อน
`babel-plugin-lodash`	ลดขนาด bundle เวลาใช้ lodash
`babel-plugin-import`	ทำ tree-shaking อัตโนมัติกับ lib เช่น antd
`@babel/plugin-proposal-class-properties`	รองรับ field ใน class (เช่น `count = 0`)

📁 ตัวอย่างไฟล์ babel.config.js

module.exports = {
  presets: ['next/babel'], // ใช้ร่วมกับ Next.js
  plugins: [
    ['styled-components', { ssr: true }],
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }]
  ]
};

กรณี	ทำไมไม่ต้อง
ใช้ React, JSX, TypeScript ปกติ	Next.js / CRA / Vite รองรับอยู่แล้ว
ไม่ใช้ decorators หรือ styled-components	ไม่ต้องเพิ่ม plugin
ไม่มีการ target browser พิเศษ	preset-default เพียงพอ

🧠 เมื่อไหร่ “ไม่จำเป็น” ต้องปรับ Babel

กรณี	ทำไมไม่ต้อง
ใช้ React, JSX, TypeScript ปกติ	Next.js / CRA / Vite รองรับอยู่แล้ว
ไม่ใช้ decorators หรือ styled-components	ไม่ต้องเพิ่ม plugin
ไม่มีการ target browser พิเศษ	preset-default เพียงพอ
ใช้ lib ที่ต้องการ plugin	styled-components, react-intl
ต้องใช้ syntax ใหม่ (เช่น decorators)	mobx, class-validator
ต้องปรับขนาด bundle	tree-shaking, import แบบเฉพาะ
ต้องปรับ target browser	IE11, low-spec device

✅ SWC คืออะไร?
SWC ย่อมาจาก Speedy Web Compiler
คือ คอมไพเลอร์ (compiler) ที่เขียนด้วยภาษา Rust
ใช้แปลงโค้ด JavaScript, TypeScript และ JSX เช่นเดียวกับ Babel แต่เร็วกว่า หลายเท่า

🔧 SWC ทำอะไรได้เหมือน Babel ไหม?

ทำอะไรได้บ้าง	เหมือนกับ Babel
แปลง JSX → JS	✅
แปลง TypeScript → JS	✅
รองรับ modern JS syntax (ES6+)	✅
ทำ Tree Shaking	✅
มี Plugin system (ยังจำกัด)	🔶 ยังไม่ flexible เท่า Babel

⚡ เปรียบเทียบ: SWC vs Babel

ด้าน	SWC	Babel
ภาษา	Rust (compiled)	JavaScript (interpreter)
ความเร็ว	🔥 เร็วกว่ามาก (~10–20x)	ช้ากว่า (โดยเฉพาะไฟล์ใหญ่)
รองรับ JSX / TS	✅ เต็มรูปแบบ	✅
รองรับ Plugins	🔶 ยังไม่ครอบคลุมเท่า	✅ ใช้ได้หลากหลาย
ใช้ใน...	Next.js, Vite, Turbopack	Next.js (fallback), CRA, Webpack
Customization ลึก	🔽 ยังจำกัด	✅ สูงมาก

📊 Benchmark (โดยทีม Vercel): SWC build เร็วกว่า Babel ถึง ~20 เท่า ในบางกรณี ใช้ memory น้อยกว่า

ใช้ SWC ดีกว่า Babel ไหม?

ถ้าคุณ...	คำแนะนำ
❌ ไม่ได้ใช้ Babel plugin พิเศษ	✅ ใช้ SWC ไปเลย
✅ ใช้ styled-components, decorator	อาจต้องใช้ Babel
ต้องการ build ไว, ลดเวลา dev	✅ SWC เหมาะมาก
ต้องใช้ plugin/custom transform เฉพาะทาง	➤ Babel ยังยืดหยุ่นกว่า

สรุป

คำถาม	คำตอบ
❓ SWC คืออะไร	Compiler เขียนด้วย Rust สำหรับแปลง JS/TS/JSX
❓ ต่างจาก Babel ยังไง	เร็วกว่า, ใช้ memory น้อย, แต่ plugin ยังไม่เยอะเท่า
❓ ใช้กับอะไรได้บ้าง	React, Next.js, Vite, รวมถึงการ build ทั่วไป
❓ Next.js ใช้ไหม	✅ ใช้ SWC เป็น default (เว้นแต่คุณใส่ babel.config.js)

ตัวอย่าง Plugins ที่ Babel รองรับแต่ SWC ยังไม่รองรับ (หรือรองรับแค่บางส่วน)

Plugin	ใช้ทำอะไร	สถานะใน Babel	สถานะใน SWC
`@babel/plugin-proposal-decorators`	ใช้ `@decorator` บน class (เช่น MobX, class-validator)	✅	❌ ยังไม่รองรับ (กำลังพัฒนา)
`babel-plugin-styled-components`	ช่วยกับ SSR, ปรับ className styled-components	✅	❌ ยังไม่รองรับ
`babel-plugin-import`	Import แบบอัจฉริยะ (เช่น `antd`, `lodash`)	✅	❌ ยัง
`babel-plugin-react-intl`	ดึงข้อความเพื่อทำ i18n จาก JSX	✅	❌ ยังไม่รองรับ
`babel-plugin-transform-remove-console`	ลบ `console.log` อัตโนมัติ	✅	❌ SWC ต้องใช้ custom transform หรือยังไม่ทำได้
`babel-plugin-macros`	ใช้กับ `linaria`, `emotion`, `tailwind` macros	✅	❌ ยัง
`babel-plugin-module-resolver`	ตั้ง alias import แบบ custom	✅	🔶 SWC รองรับแบบจำกัดใน config (`paths`)

⚠️ สรุปข้อจำกัดของ SWC (กลางปี 2025)

ข้อจำกัด	คำอธิบาย
❌ ยังไม่รองรับ Babel plugin ecosystem	เช่น styled-components, decorators
❌ ยังไม่รองรับ macro system เช่น `babel-plugin-macros`	ใช้กับ emotion, tailwind, linaria
🔧 ต้องใช้ Rust custom plugin (ซับซ้อนกว่า Babel)	ไม่สามารถเขียน JS plugin ง่าย ๆ ได้เหมือน Babel
⚠️ ขาดบาง syntax proposal	Decorators, pipeline, partial application เป็นต้น

✅ แล้วเมื่อไรควรใช้ Babel แทน SWC?

กรณี	ใช้ Babel
ใช้ `@decorators`	✅
ใช้ `styled-components` SSR mode	✅
ใช้ import optimization (`babel-plugin-import`)	✅
ใช้ macro (tailwind macros, emotion macros)	✅
ต้องเขียน plugin เองด้วย JS	✅

✅ ใช้ SWC ได้เลย เมื่อ...

กรณี	เหมาะกับ SWC
ใช้ React + TypeScript ธรรมดา	✅
ไม่ใช้ plugin พิเศษ	✅
อยาก build เร็วมาก	✅
ใช้ Next.js / Vite และไม่ใช้ `babel.config.js`	✅

🔧 ทางเลือกบางส่วนใน SWC
ถ้าอยากใช้ styled-components กับ SWC ➤ ใช้ Emotion แทน (SWC รองรับ JSX pragma)
หากอยากลบ console.log ➤ ทำผ่าน build tool เช่น esbuild plugin หรือ manual
ถ้าอยากใช้ alias ➤ SWC รองรับ paths ใน tsconfig.json

✨ สรุป

เปรียบเทียบ	Babel	SWC
Plugin ecosystem	✅ ครอบคลุม	❌ ยังไม่เต็ม
ความเร็ว	ช้ากว่า	✅ เร็วกว่ามาก
Customization	✅ เขียน plugin JS ได้เลย	❌ ต้องเขียน Rust
ใช้กับ Next.js	✅ fallback mode	✅ default compiler

โบนัส
Alias Paths กับ SWC

SWC รองรับ alias paths ผ่านการตั้งค่าใน tsconfig.json หรือ jsconfig.json เช่น
SWC จะอ่าน config นี้และทำงานร่วมกับ bundler (เช่น Next.js, Vite) เพื่อ resolve alias ได้
แต่ SWC เองไม่มีระบบ plugin สำหรับ alias แบบ Babel (เช่น babel-plugin-module-resolver) ซึ่งอาจทำให้บางเคสละเอียดไม่ได้เหมือน Babel

SWC รองรับ alias paths แบบพื้นฐานผ่าน tsconfig.json ได้
แต่ถ้า alias ซับซ้อนหรืออยากตั้งแบบละเอียด อาจต้องใช้ Babel plugin

{
  "compilerOptions": {
    /* alias path */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
  }
}

i18n กับ SWC

การทำ i18n โดยทั่วไปจะมี 2 แบบหลัก:

Runtime i18n (เช่น react-intl, next-i18next) — SWC ไม่มีปัญหาเพราะเป็นโค้ด JavaScript ปกติ
Compile-time i18n (เช่น babel-plugin-react-intl ที่ดึงข้อความแปลจาก source code แบบ static) — Babel Plugin นี้จะไม่ทำงานกับ SWC

สรุป:

SWC ไม่รองรับ plugin สำหรับ compile-time extraction ของ i18n
ถ้าต้องการทำ extraction อัตโนมัติ ต้องใช้ Babel หรือเครื่องมืออื่นร่วม

เรื่อง	SWC	Babel
Alias Paths	รองรับผ่าน tsconfig (พื้นฐาน)	รองรับผ่าน plugin ละเอียดกว่า
i18n (runtime)	รองรับ	รองรับ
i18n (compile-time extraction)	ไม่รองรับ plugin	รองรับ plugin

หยุด commit โค้ดพังๆ ด้วย Husky + Lint + Prettier แบบครบสูตร

c_nooknook_daily_prompt — Wed, 18 Jun 2025 06:39:32 +0000

"เคยไหม... commit โค้ดไปโดยลืมลบ console.log()
หรือ push โค้ดที่ไม่ผ่าน lint ไปยัง production
ถ้าเคย — คุณต้องรู้จัก Husky แล้วล่ะ!"

Husky เป็นเครื่องมือที่ช่วยให้เราใช้งาน Git Hooks ได้ง่ายขึ้น โดย Git Hooks คือสคริปต์ที่ Git เรียกใช้ในช่วงเวลาต่าง ๆ เช่น pre-commit, pre-push, commit-msg เพื่อให้เราสามารถตรวจสอบ หรือล็อกการกระทำบางอย่างไว้ก่อนจะเกิดขึ้น

ติดตั้งผ่าน npm, yarn, หรือ pnpm ก็ได้ (ในที่นี้ใช้ pnpm เป็นตัวอย่าง)

pnpm add -D husky
npx husky install

เพิ่ม script prepare ใน package.json เพื่อให้ Husky พร้อมทำงานหลังติดตั้ง dependencies:

{
  "scripts": {
    "prepare": "husky install"
  }
}

จากนั้นรัน:


pnpm run prepare

สร้าง pre-commit hook แบบง่าย ๆ
ตัวอย่าง: เช็ก lint ก่อน commit
สร้างคำสั่ง lint ใน package.json


{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx"
  }
}

สร้างไฟล์ pre-commit ด้วยคำสั่ง Husky:


npx husky add .husky/pre-commit "pnpm run lint"

ตอนนี้ใน .husky/pre-commit จะมี:


#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

pnpm run lint

ทุกครั้งที่คุณ git commit, Husky จะเช็ก lint ให้ก่อนอัตโนมัติ
ถ้าโค้ดมี error หรือ warning ที่ตั้งไว้ strict — commit จะถูกบล็อก!

เพิ่มความเทพด้วยหลายคำสั่ง
เราสามารถเช็กหลายอย่างได้พร้อมกัน เช่น:

เช็ก lint
Format ด้วย Prettier
บล็อก console.log ด้วย ESLint rule

npx husky add .husky/pre-commit "pnpm run lint && pnpm run format"

ถ้ามีคำสั่งล้มเหลวเพียงคำสั่งเดียว — commit จะถูกยกเลิก

ตัวอย่าง Prettier Format Script


{
  "scripts": {
    "format": "prettier --write ."
  }
}

เพิ่มการบล็อก console.log() ด้วย ESLint
ติดตั้ง plugin:


pnpm add -D eslint-plugin-no-console

ใน .eslintrc.js:


module.exports = {
  plugins: ['no-console'],
  rules: {
    'no-console': ['error', { allow: ['warn', 'error'] }],
  },
}

ทดสอบการทำงาน
ลองเขียนโค้ดที่มี console.log() หรือผิด format

ใช้ git add .
ใช้ git commit -m "test commit"
คุณจะเห็นว่า commit ถูกบล็อก พร้อมแสดง error ที่เกิดขึ้น

ตัวอย่างการใช้ commit-msg (เพิ่มเติม)
อยากให้ commit message เป็นแบบ conventional commits ใช่ไหม?

ติดตั้ง commitlint

pnpm add -D @commitlint/{config-conventional,cli}

สร้าง commitlint.config.js:


module.exports = {
  extends: ['@commitlint/config-conventional'],
}

เพิ่ม hook:

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

สรุป

✅ สิ่งที่ได้จาก Husky	🚫 สิ่งที่ป้องกัน
เพิ่มความมั่นใจให้ทีม	commit โค้ดไม่ผ่าน lint
ลด bug จาก code style	push โค้ดผิด format
รองรับ flow แบบทีมใหญ่	commit message ไม่เป็นมาตรฐาน

"เขียนโค้ดให้ดีนั้นสำคัญ
แต่ กันไม่ให้โค้ดพัง ตั้งแต่ก่อน commit — สำคัญยิ่งกว่า
และ Husky ก็เป็นผู้ช่วยที่คุณจะหลงรักแน่นอน"