Câu hỏi phỏng vấn

Frontend (REACT + NEXT)

Đáp án tham khảo: trong 1 ngày: 2đ, dưới 3 ngày: 1đ, trên 3 ngày thì 0,5đ.

Các cách phổ biến: `text-align: center` (cho inline elements), `margin: 0 auto` (cho block elements có width), `display: flex; justify-content: center; align-items: center;` (cho cả chiều ngang và dọc).

Responsive web design là phương pháp thiết kế giúp layout của trang web tự động điều chỉnh để hiển thị tối ưu trên nhiều kích thước màn hình khác nhau (desktop, tablet, mobile). Các breakpoint chính thường là: mobile (<768px), tablet (≥768px), và desktop (≥992px hoặc ≥1200px).

Dữ liệu của GET được gửi qua URL, hiển thị công khai và bị giới hạn độ dài. Dữ liệu của POST được gửi trong phần body của request, không hiển thị trên URL. Quan trọng hơn, body của POST được mã hóa bởi SSL/TLS (khi dùng HTTPS), giúp bảo vệ dữ liệu trên đường truyền khỏi bị đọc trộm.

Xảy ra khi thực thi các tác vụ mất thời gian như gọi API, đọc file, hoặc các hàm được thiết kế để không block luồng chính. Chủ yếu liên quan đến `Promise`, `async/await`, và các callback của các API bất đồng bộ (vd: `setTimeout`, `fetch`).

Sử dụng Callbacks, Promises (với `.then().catch()`), và cú pháp `async/await` để viết code bất đồng bộ trông giống như code đồng bộ, dễ đọc và quản lý hơn.

Sử dụng `Promise.all()`:
await Promise.all([A(), B()]);
await C();

Clone nông (shallow clone): `const newObj = { ...oldObj };` hoặc `Object.assign({}, oldObj)`.
Clone sâu (deep clone): `JSON.parse(JSON.stringify(oldObj))` (lưu ý hạn chế với một số kiểu dữ liệu) hoặc dùng thư viện như lodash.

Toàn bộ state của ứng dụng được lưu trong một đối tượng duy nhất gọi là Redux Store.

Đệ quy là một hàm tự gọi lại chính nó. Cần dùng khi bài toán có thể được chia nhỏ thành các bài toán con có cấu trúc tương tự bài toán gốc, đặc biệt khi số lần lặp không xác định trước. Ví dụ điển hình: duyệt cấu trúc cây (menu đa cấp, cấu trúc thư mục), tính giai thừa, dãy Fibonacci.

Có hai mô hình phổ biến: ACL (Access Control List) - phân quyền theo từng người dùng cụ thể, và RBAC (Role-Based Access Control) - phân quyền theo vai trò (role). Quyền thường được kiểm tra dựa trên thông tin trong JWT token trả về sau khi người dùng đăng nhập.

Là kiến trúc chia một ứng dụng frontend lớn thành các phần nhỏ, độc lập có thể được phát triển và triển khai riêng biệt. Sử dụng khi: các team khác nhau phát triển các module khác nhau, cần dùng các công nghệ/phiên bản khác nhau cho từng module. Nhược điểm: phức tạp trong triển khai, quản lý state chung, và tốn nhiều chi phí hơn.

Phụ thuộc vào kinh nghiệm của ứng viên. Các thư viện phổ biến là Jest, React Testing Library, Mocha, Chai. Một unit test tốt cần có: setup (khởi tạo), execution (thực thi hàm cần test), và assertion (kiểm tra kết quả có đúng như mong đợi không).

Class: Dùng PascalCase (vd: `MyComponent`). Biến và hàm: Dùng camelCase (vd: `userName`, `fetchUserData`). Tên hàm nên bắt đầu bằng động từ và thể hiện rõ chức năng (vd: `getUserById`). Tên biến nên là danh từ và rõ nghĩa.

Là các component đặc biệt có thể "bắt" lỗi JavaScript ở bất kỳ đâu trong cây component con của chúng, ghi lại các lỗi đó và hiển thị một giao diện người dùng dự phòng thay vì để toàn bộ ứng dụng bị sập. Chúng được tạo ra bằng cách định nghĩa một trong hai phương thức `static getDerivedStateFromError()` hoặc `componentDidCatch()`.