นักพัฒนา Front Endคำตอบสัมภาษณ์

ได้พัฒนาแอป React สำหรับ production เป็นเวลา [X years] โดยทำงานกับ functional components, hooks (useState, useEffect, useContext, useMemo, useCallback, custom hooks) และรูปแบบการจัดการสถานะ (Context API, Redux Toolkit, Zustand). เข้าใจโมเดลการเรนเดอร์ของ React อย่างลึกซึ้ง — สามารถวิเคราะห์ได้ว่าเมื่อใดเกิดการ re-render และจะป้องกันการ re-render ที่ไม่จำเป็นอย่างไร. นอกจากนี้ยังเคยใช้ Next.js สำหรับ server-side rendering และ static generation ซึ่งเพิ่มความซับซ้อนอย่างมีนัยสำคัญในด้านการดึงข้อมูล (data fetching), hydration และการ deploy.

ประสิทธิภาพเริ่มจากการวัด: คะแนน Lighthouse, Web Vitals (LCP, FID/INP, CLS) และตัวชี้วัดที่มาจากผู้ใช้. ปรับขนาด bundle ให้เล็กลง (code splitting, tree shaking, dynamic imports), ปรับการส่งภาพ (WebP, lazy loading, responsive images via srcset), และปรับปรุงการเรนเดอร์ (memoization, virtualization สำหรับรายการยาว). ตรวจสอบและลดสคริปต์จากบุคคลที่สาม. กำหนด performance budgets ใน CI เพื่อให้การถดถอยถูกจับก่อนการ deploy. ประสิทธิภาพเป็นฟีเจอร์ และการรักษาประสิทธิภาพต้องการความระมัดระวังอย่างต่อเนื่อง.

รับมือกับการพัฒนาแบบ responsive และข้ามเบราว์เซอร์โดยออกแบบแบบ mobile-first และใช้ CSS Grid, Flexbox และหน่วย responsive (rem, %, vw/vh, clamp()). ทดสอบบนอุปกรณ์จริงและใน Chrome DevTools device emulation. สำหรับความเข้ากันได้ข้ามเบราว์เซอร์ ใช้ Can I Use เพื่อตรวจสอบการรองรับฟีเจอร์ และทดสอบบน Chrome, Firefox, Safari, และ Edge. ใช้ PostCSS และ autoprefixer สำหรับ vendor prefixes. การตัดสินใจเรื่องการรองรับ IE11 เป็นเรื่องธุรกิจที่มีต้นทุนจริง — นำเสนอการแลกเปลี่ยนอย่างชัดเจน แทนการตอบใช่/ไม่ใช่อย่างง่ายๆ.

ออกแบบคอมโพเนนต์ให้ใช้งานซ้ำได้และมีหน้าที่เดียว (single responsibility). แยก presentational components (dumb, ไม่มี side effects) ออกจาก container components (ดึงข้อมูล, จัดการสถานะ). ใช้ design system หรือ component library เป็นฐาน แล้วสร้างคอมโพเนนต์เฉพาะของแอปอยู่ด้านบน. คิดเกี่ยวกับ API ของคอมโพเนนต์จากมุมมองผู้บริโภค: props ที่ชัดเจน, ต้องการน้อย, และมี typing ที่ดี. บันทึกเอกสารคอมโพเนนต์ด้วย Storybook เพื่อให้ดีไซน์เนอร์และวิศวกรคนอื่นค้นหาและเข้าใจ. การออกแบบคอมโพเนนต์ที่ดีลดการทำซ้ำและทำให้โค้ดเบสสามารถดูแลรักษาได้เมื่อขยายตัว.

ใส่การเข้าถึงตั้งแต่เริ่ม: ใช้ semantic HTML เป็นพื้นฐาน (nav, main, section, button แทนการใช้ div อย่างเดียว), ใช้ ARIA attributes เมื่อ semantics ของ HTML ไม่พอ, มีสถานะ focus ที่มองเห็นได้, คอนทราสต์สีเพียงพอ (ขั้นต่ำตาม WCAG AA), รองรับการนำทางด้วยคีย์บอร์ดสำหรับองค์ประกอบเชิงโต้ตอบทุกชนิด, และทดสอบกับ screen reader (VoiceOver, NVDA). ใช้ axe-core หรือ Lighthouse สำหรับการตรวจสอบ accessibility แบบอัตโนมัติใน CI. มองการเข้าถึงเป็นมิติของคุณภาพ ไม่ใช่แค่การติ๊กช่องให้ผ่าน — อินเทอร์เฟซที่เข้าถึงได้มักจะดีกว่าสำหรับทุกคน.

เคยทำงานกับ CSS Modules, BEM, CSS-in-JS (styled-components, Emotion) และเฟรมเวิร์กแบบ utility-first (Tailwind CSS). ความชอบขึ้นกับโครงการ: ใช้ Tailwind สำหรับผลิตภัณฑ์ที่ขับเคลื่อนด้วย design system, CSS Modules สำหรับการแยกคอมโพเนนต์ในทีมใหญ่, CSS-in-JS สำหรับสไตลิงที่มีความไดนามิกสูง. เข้าใจ CSS cascade, specificity และ stacking context อย่างลึกซึ้ง — บั๊กส่วนใหญ่มาจากความเข้าใจผิดเรื่องเหล่านี้. ใช้ custom properties (CSS variables) สำหรับ theming และ design tokens เพื่อรักษาความสอดคล้อง.

มีส่วนร่วมกับทีมออกแบบตั้งแต่แรก — ก่อนที่ดีไซน์จะเสร็จสมบูรณ์. ตรวจสอบงานออกแบบใน Figma และชี้ประเด็นที่มีปัญหาในการนำไปพัฒนา (ความซับซ้อนของแอนิเมชัน, ช่องว่างในพฤติกรรม responsive, ปัญหา accessibility) ในระหว่างเฟสออกแบบ ไม่ใช่ระหว่างพัฒนา. พูดคุยด้วยภาษาของดีไซน์เนอร์: สามารถอภิปรายแนวคิดการออกแบบเชิงภาพ, type scales และระบบเลย์เอาต์. นำดีไซน์ไปใช้อย่างแม่นยำ: ให้ความใส่ใจระดับพิกเซลต่อ spacing, typography และสี. เมื่อจำเป็นต้องออกจากดีไซน์เพราะข้อจำกัด สื่อสารอย่างชัดเจนและสร้างความสอดคล้องร่วมกัน.

ทดสอบพฤติกรรมที่ผู้ใช้เห็นได้ ไม่ใช่รายละเอียดการทำงานภายใน. ใช้ React Testing Library สำหรับทดสอบคอมโพเนนต์ — จำลองการโต้ตอบของผู้ใช้และตรวจสอบผลลัพธ์. เขียน integration tests สำหรับ user flows สำคัญ (login, checkout, form submission) โดยใช้ Cypress หรือ Playwright. สำหรับฟังก์ชันยูทิลิตี้ เขียน unit tests ด้วย Jest. จำลอง dependency ภายนอก (เรียก API) ในการทดสอบคอมโพเนนต์และ integration tests โดยใช้ MSW (Mock Service Worker). หลีกเลี่ยงการทดสอบรายละเอียดการทำงานภายในที่ทำให้เทสเปราะบาง — เทสควรสร้างความมั่นใจ ไม่ใช่ภาระในการดูแลรักษา.