Architecture & Design Patterns
โครงสร้าง feature-based, atomic design, clean architecture, หลักการ SOLID, dependency injection
1Atomic Design ใน React คืออะไร?
Atomic Design ใน React คืออะไร?
คำตอบ
Atomic Design จัดระเบียบ component ของ React เป็น 5 ระดับลำดับชั้น: atoms (ปุ่ม, input), molecules (ฟอร์มอย่างง่าย), organisms (header, footer), templates (เลย์เอาต์หน้า) และ pages (instance ที่เป็นรูปธรรม) วิธีการนี้ให้โครงสร้างที่สอดคล้องและปรับขนาดได้สำหรับ design system ช่วยอำนวยความสะดวกในการนำ component กลับมาใช้ใหม่และการทำงานร่วมกันระหว่างนักออกแบบและนักพัฒนาโดยการแบ่งปันคำศัพท์ร่วมกัน
2ลักษณะสำคัญของสถาปัตยกรรม feature-based คืออะไร?
ลักษณะสำคัญของสถาปัตยกรรม feature-based คืออะไร?
คำตอบ
สถาปัตยกรรม feature-based รวมไฟล์ทั้งหมดที่เกี่ยวข้องกับฟังก์ชันการทำงานไว้ในโฟลเดอร์เดียวกัน (component, hooks, style, test, type) แนวทางนี้ส่งเสริม co-location และความเป็นอิสระของ feature แต่ละ feature กลายเป็นโมดูลอิสระที่มีความรับผิดชอบของตัวเอง ซึ่งช่วยให้การบำรุงรักษาง่ายขึ้นและช่วยให้ทีมทำงานแบบขนานได้โดยไม่มีความขัดแย้ง
3หลักการพื้นฐานของ Clean Architecture คืออะไร?
หลักการพื้นฐานของ Clean Architecture คืออะไร?
คำตอบ
Clean Architecture อิงตาม Dependency Rule: การอ้างอิงต้องชี้เข้าด้านในเสมอ จากเลเยอร์ภายนอก (UI, โครงสร้างพื้นฐาน) ไปยังเลเยอร์ภายใน (domain, business logic) โดเมนธุรกิจต้องไม่พึ่งพา UI หรือ framework การแยกนี้ช่วยให้ทดสอบ business logic อย่างอิสระ เปลี่ยน framework โดยไม่ต้องเขียนโค้ดธุรกิจใหม่ และรักษาสถาปัตยกรรมที่แยกออกจากกันและปรับขนาดได้
หลักการ SOLID 'Single Responsibility' มีความหมายอย่างไรเมื่อนำไปใช้กับ React component?
Dependency injection ใน React คืออะไร?
+19 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ React / Next.js อื่นๆ
พื้นฐาน JavaScript
พื้นฐาน React
React Hooks
วงจรชีวิตของ component
React Router
การจัดการ state ด้วย Context
ฟอร์มและ Controlled Components
การดึงข้อมูลและ API
React Query (TanStack Query)
Styling & CSS-in-JS
พื้นฐาน Next.js
TypeScript กับ React
การดึงข้อมูล Next.js
Server Actions ของ Next.js
การกำหนดเส้นทางและการนำทางใน Next.js
API Routes ใน Next.js
Metadata & SEO ใน Next.js
Middleware และ Auth ใน Next.js
การทดสอบ React
Zustand State Management
การเพิ่มประสิทธิภาพ React
Error Boundaries & การจัดการข้อผิดพลาด
Advanced React Patterns
ฟีเจอร์ขั้นสูงของ Next.js
การ Deploy & Production ของ Next.js
React Server Components
การแปลภาษา Next.js
React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด
เชี่ยวชาญ React / Next.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี