frontend-interview-questions

1. چگونه یک خط لوله CI/CD برای یک برنامه React طراحی می‌کنید تا حلقه‌های بازخورد سریع و استقرارهای قابل اعتماد را تضمین کند؟

# نمونه GitHub Actions
jobs:
  build-test:
    steps:
      - run: npm ci
      - run: npm run lint && npm test
  deploy:
    steps:
      - run: npm run build
      - run: npm run deploy:staging


2. رویکرد شما برای خودکارسازی استقرار یک برنامه React به چندین محیط (مثل توسعه، مرحله‌بندی، تولید) چیست؟

if [ "$ENV" == "staging" ]; then
  npm run deploy:staging
fi


3. چگونه تست‌های خودکار (واحد، یکپارچه‌سازی، E2E) را در یک خط لوله CI/CD برای پروژه React ادغام می‌کنید؟

steps:
  - run: npm test -- --coverage
  - run: npx cypress run


4. استراتژی شما برای مدیریت بازگشت به عقب (rollback) در خط لوله CI/CD وقتی استقرار در تولید شکست می‌خورد چیست؟

aws s3 cp s3://backups/last-good-build ./ && npm run deploy


5. چگونه خط لوله CI/CD را برای کاهش زمان ساخت در یک پایگاه کد بزرگ React بهینه می‌کنید؟

- uses: actions/cache@v3
  with:
    path: node_modules


6. رویکرد شما برای ایمن‌سازی خط لوله CI/CD برای یک برنامه React چیست؟


7. چگونه استقرارهای آبی-سبز یا کناری (canary) را در خط لوله CI/CD برای یک برنامه React پیاده‌سازی می‌کنید؟

if (user.isInCanaryGroup) {
  return <NewComponent />
}


8. فرآیند شما برای ادغام تحلیل کد استاتیک و بررسی کد (linting) در خط لوله CI/CD چیست؟

- run: npm run lint && npm run type-check


9. چگونه مدیریت وابستگی‌ها و نسخه‌بندی را در خط لوله CI/CD برای پروژه React مدیریت می‌کنید؟


10. چگونه تیمی را برای پذیرش و نگهداری خط لوله CI/CD برای یک برنامه React آموزش می‌دهید؟


11. چگونه یک سیستم نظارتی برای یک برنامه React در تولید طراحی می‌کنید تا عملکرد و خطاها را ردیابی کند؟


12. چگونه Core Web Vitals (مثل LCP، CLS، FID) را در یک برنامه React پس از استقرار نظارت می‌کنید؟

import { onCLS, onFID, onLCP } from 'web-vitals';
onCLS(sendToAnalytics); onLCP(sendToAnalytics); onFID(sendToAnalytics);


13. چگونه هشدارهای بلادرنگ برای یک برنامه React تنظیم می‌کنید تا خطاهای اجرایی یا کاهش عملکرد را شناسایی کند؟


14. استراتژی شما برای نظارت بر تأخیر و در دسترس بودن API در یک برنامه React که به یک بک‌اند وابسته است چیست؟

const start = performance.now();
fetch('/api/data').finally(() => {
  const duration = performance.now() - start;
  if (duration > 1000) logSlowAPI('/api/data', duration);
});


15. چگونه از ابزارهای نظارتی برای ردیابی سلامت خود خط لوله CI/CD (مثل نرخ موفقیت ساخت، زمان‌های استقرار) استفاده می‌کنید؟


16. رویکرد شما برای لاگ‌گیری در یک برنامه React چیست و چگونه آن را با ابزارهای نظارتی ادغام می‌کنید؟

export const log = (msg) => {
  if (process.env.NODE_ENV === "production") {
    sendToLoggingService(msg);
  } else {
    console.log(msg);
  }
};


17. چگونه ردیابی توزیع‌شده را در یک برنامه React با بک‌اند میکروسرویس پیاده‌سازی می‌کنید؟

fetch("/api", {
  headers: { "x-trace-id": currentTraceId },
});


18. فرآیند شما برای نظارت بر مصرف منابع (مثل CPU، حافظه) در یک برنامه React مستقر در پلتفرم بدون سرور چیست؟

if (performance.memory) {
  log(performance.memory.usedJSHeapSize);
}


19. چگونه از ابزارهای نظارتی برای پشتیبانی از تست A/B یا انتشار پرچم‌های ویژگی در یک برنامه React استفاده می‌کنید؟

analytics.track("feature_used", { variant: "B" });


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