frontend-interview-questions

1. چگونه با تیم‌های بک‌اند همکاری می‌کنید تا APIهایی طراحی کنید که نیازهای فرانت‌اند React را برآورده کنند؟

من با هم‌راستا کردن موارد استفاده و نیازهای داده‌ای از طریق قراردادهای API یا مشخصات OpenAPI شروع می‌کنم. من از موارد زیر حمایت می‌کنم:

• REST یا GraphQL بسته به پیچیدگی
• ساختارهای منابع ثابت
• پشتیبانی از صفحه‌بندی، فیلتر و مرتب‌سازی

از Postman/Swagger برای مدل‌های اولیه و اسناد طراحی API مشترک استفاده می‌کنیم. من بر تفکر فرانت‌اند محور تأکید دارم: کاهش دریافت بیش‌ازحد داده و پشتیبانی از بارگذاری بلادرنگ یا تنبل در صورت نیاز.

2. رویکرد شما برای مدیریت نسخه‌بندی API در یک برنامه React وقتی بک‌اند تکامل می‌یابد چیست؟

پاسخ:

من نسخه‌بندی مبتنی بر URL (مثل /v1/users) را به دلیل شفافیت و قابلیت کش ترجیح می‌دهم. در React:

• منطق API را در سرویس‌ها محصور می‌کنم:

// api/user.ts
export const fetchUser = () => axios.get("/v2/user");

• از پرچم‌های ویژگی یا سوئیچ‌های مبتنی بر محیط برای مهاجرت آرام استفاده می‌کنم
• تفاوت‌های نسخه را با تست‌های ادغام ردیابی می‌کنم

3. چگونه یک فرانت‌اند React را برای مدیریت APIهای ناسازگار یا ضعیف مستندشده طراحی می‌کنید؟

پاسخ:

برای کاهش ریسک:

• از TypeScript با اعتبارسنج‌های زمان اجرا مثل zod یا io-ts استفاده می‌کنم:

const UserSchema = z.object({ id: z.string(), name: z.string() });

• پاسخ‌های API را از طریق آداپتورها برای نرمال‌سازی داده‌ها انتزاع می‌کنم:

const mapUser = (data) => ({ id: data.user_id, name: data.full_name });

• ناسازگاری‌ها را مستند کرده و برای بازسازی بک‌اند علامت‌گذاری می‌کنم

4. استراتژی شما برای بهینه‌سازی بارهای API برای عملکرد یک برنامه React چیست؟

پاسخ:

• فقط فیلدهای موردنیاز را درخواست می‌کنم (fields=name,email یا مجموعه‌های انتخاب GraphQL)
• لیست‌ها را برای کاهش بار صفحه‌بندی می‌کنم:

axios.get('/users?page=2&limit=10');

• پاسخ‌ها را فشرده می‌کنم (Gzip/Brotli) و در صورت امکان کش می‌کنم
• از مرتب‌سازی/فیلتر کردن سمت سرور برای جلوگیری از بار اضافی سمت کلاینت استفاده می‌کنم

5. چگونه APIهای بلادرنگ (مثل WebSockets، Server-Sent Events) را در یک برنامه React ادغام می‌کنید؟

پاسخ:

• از WebSocket برای داده‌های دوطرفه استفاده می‌کنم:

useEffect(() => {
  const socket = new WebSocket("wss://example.com/socket");
  socket.onmessage = (event) => updateState(JSON.parse(event.data));
}, []);

• از زمینه یا Zustand برای به اشتراک گذاشتن به‌روزرسانی‌های وضعیت استفاده می‌کنم
• برای SSE: از EventSource استفاده می‌کنم، اما در صورت نیاز به نظرسنجی بازمی‌گردم
• سوکت‌ها را در زمان unmount تمیز می‌کنم تا از نشت حافظه جلوگیری شود

6. رویکرد شما برای مدل‌سازی APIها در طول توسعه React وقتی بک‌اند آماده نیست چیست؟

پاسخ:

• از Mock Service Worker (MSW) برای رهگیری fetch/axios واقعی استفاده می‌کنم:

rest.get('/api/user', (req, res, ctx) => res(ctx.json({ name: 'Test' })));

• قرارداد بک‌اند را با مدل‌های JSON یا Swagger شبیه‌سازی می‌کنم
• حالت مدل‌سازی را از طریق NODE_ENV یا پرچم توسعه فعال/غیرفعال می‌کنم
• مدل‌سازی در سطح شبکه برای تست ادغام، نه منطق

7. چگونه APIهای محدود شده توسط نرخ را در یک برنامه React بدون کاهش تجربه کاربری مدیریت می‌کنید؟

پاسخ:

• بازگشت نمایی یا مدیریت هدرهای Retry-After را پیاده‌سازی می‌کنم
• درخواست‌های با فرکانس بالا را صف‌بندی یا محدود می‌کنم:

const debouncedSearch = debounce(fetchSuggestions, 300);

• بازخورد رابط کاربری (مثل اسپینرها، دکمه‌های تلاش مجدد) نمایش می‌دهم
• پاسخ‌های مکرر را در صورت امکان به‌صورت محلی کش می‌کنم (مثل react-query، SWR)

8. فرآیند شما برای اشکال‌زدایی مشکلات ادغام فرانت‌اند-بک‌اند در یک برنامه React چیست؟

پاسخ:

1. بررسی تب شبکه (کدهای وضعیت، هدرها، بدنه)
2. استفاده از console.error یا error boundaries برای دیده شدن
3. اعتبارسنجی انواع API با استفاده از طرح‌ها
4. لاگ کردن و مقایسه درخواست فرانت‌اند با انتظارات بک‌اند
5. استفاده از Postman یا curl برای ایزوله کردن مشکلات بک‌اند

با مهندسان بک‌اند، ترجیحاً در جلسات اشکال‌زدایی بلادرنگ، همکاری نزدیک دارم.

9. چگونه برای نیازهای فرانت‌اند (مثل صفحه‌بندی، فیلتر کردن) در بحث‌های طراحی API بک‌اند حمایت می‌کنید؟

پاسخ:

• سناریوهای کاربرمحور ارائه می‌دهم که تأثیر را نشان می‌دهند (مثل بارگذاری کند، تجربه کاربری ضعیف)
• استانداردهایی مثل پارامترهای کوئری limit، offset، sort، filter پیشنهاد می‌کنم
• بر عملکرد موبایل و دانه‌بندی داده‌ها تأکید دارم
• از مشخصات API مشترک یا مثال‌ها برای پر کردن شکاف‌ها استفاده می‌کنم

10. چگونه یک تیم فرانت‌اند را برای همکاری مؤثر با مهندسان بک‌اند در یک پروژه React آموزش می‌دهید؟

پاسخ:

• معرفی ذهنیت طراحی API محور (مثل OpenAPI، GraphQL schema-first)
• تعریف قراردادهای واضح و استفاده از ابزارهایی مثل MSW برای توسعه
• تشویق به بررسی‌های مشترک طراحی‌های API
• تنظیم قراردادهای ثابت (مثل انتزاع سرویس، مدیریت خطا)
• ترویج همکاری مبتنی بر همدلی با مشارکت هر دو طرف در دموها و بازنگری‌های یکدیگر

This site is open source. Improve this page.