رایج‌ترین سوالات مصاحبه استخدام برنامه نویس فرانت اند + پاسخ کامل

برنامه‌نویسان فرانت‌اند امروزه بسیار مورد تقاضا هستند. بسیاری از شرکت‌ها با بسته‌های حقوقی جذاب، به دنبال استخدام آن‌ها هستند. اگر معتقدید که مهارت‌های لازم برای تبدیل شدن به یک برنامه‌نویس فرانت‌اند را دارید و می‌خواهید در این زمینه شغلی داشته باشید، در جای درستی هستید. این آموزش در مورد سوالات مصاحبه برنامه‌نویسی فرانت‌اند به شما کمک می‌کند تا مصاحبه بعدی خود را با موفقیت پشت سر بگذارید. این آموزش سوالات مصاحبه برنامه‌نویسی فرانت‌اند، سوالاتی را در مورد زبان‌ها و فریمورک‌های مختلف مورد استفاده در توسعه فرانت‌اند گردآوری کرده است.

سوالات ابتدایی مصاحبه برنامه‌نویسی فرانت‌اند

متا تگ‌ها در HTML به چه معنا هستند؟

متا تگ‌ها تگ‌هایی هستند که در داخل تگ Head صفحه HTML قرار می‌گیرند.

متا تگ‌ها برای رابط کاربری نیستند، بلکه برای مرورگر مهم هستند.

متا تگ‌ها همیشه به صورت جفت نام یا مقدار هستند.

متا تگ‌ها شامل رمزگذاری کاراکتر، عنوان یا حتی توضیحات هستند.

 load balancing چیست؟

 load balancing، توزیع تمام ترافیک ورودی شبکه در بین تمام سرورهای پشتیبان است.

npm مخفف چیست؟

npm مخفف Node Package Manager است.

دامنه در جاوا اسکریپت چیست؟

در جاوا اسکریپت، هر تابع دامنه خاص خود را دارد. این در واقع مجموعه ای از قوانین برای نحوه دسترسی به متغیرها و خود متغیرها است.

جاوا اسکریپت و جی کوئری چه تفاوتی دارند ؟

جی کوئری یک کتابخانه ساخته شده با زبان جاوا اسکریپت است و جاوا اسکریپت خود زبان است.

Content Security Policy چیست؟

سیاست امنیت محتوا، همچنین به عنوان CSP شناخته می شود، یک هدر در HTML است که به اپراتورهای سایت امکان می دهد کنترل کامل بر منابعی که در سایت بارگذاری می شوند داشته باشند.

اسکریپت بین سایتی (XSS) چیست؟

XSS، اسکریپت بین سایتی، یک حمله است که زمانی رخ می دهد که هر مهاجمی از یک برنامه وب برای ارسال هر کد مخربی، به شکل اسکریپت سمت مرورگر، به کاربر دیگری استفاده کند.

طراحی محور کاربر چیست؟

طراحی های محور کاربر، آن دسته از طراحی هایی هستند که طراح صرفاً بر نیازهای کاربران و آنها در هر مرحله از طراحی متمرکز می شود.

Polymorphism چیست؟

کلمه چندشکلی به معنای داشتن اشکال مختلف است. اگر در قالب شیءگرا صحبت کنیم، چندشکلی به معنای یک رابط، چندین تابع است.

Strict Mode چیست؟

Strict Mode یک ویژگی جدید ECMAScript 5 است که به شما امکان می دهد یک تابع یا یک برنامه را در یک زمینه “سختگیرانه” کار قرار دهید.

اصل KISS به چه معناست؟

KISS، مخفف “Keep it simple, stupid” است. که اصل طراحی در نیروی دریایی ایالات متحده در سال 1960 بود. اصل KISS بیان می کند که هرچه سیستم ساده تر باشد بهتر کار می کند.

SOLID مخفف چیست؟

SOLID مخفف اصول طراحی شیءگرا است: S- اصل مسئولیت واحد O- اصل باز-بسته L- اصل جایگزینی Liskov I- اصل جداسازی رابط D- اصل وابستگی

ClickJacking چیست؟

کلیک جکینگ یک حمله است که به توسعه دهنده اجازه می دهد کاربران را فریب دهد تا فکر کنند که آنها روی یک چیز کلیک می کنند اما در واقع آنها روی چیز دیگری کلیک می کنند.

IIFEs چیست؟

IIFEs مخفف Immediately-Invoked Function Expression است. این بلافاصله پس از ایجاد آن اجرا می شود.

سوالات GIT

فرستادن (Push) و دریافت (Pull) تغییرات در گیت را تعریف کنید

فرستادن (Push) در گیت فرمانی است که محتویات یک مخزن محلی (Local Repository) را به یک مخزن راه دور (Remote Repository) منتقل می‌کند. این کار معمولا بعد از ایجاد تغییرات در مخزن محلی برای به اشتراک گذاشتن آن‌ها با هم‌تیمی‌های از راه دور انجام می‌شود.

دریافت (Pull) در گیت فرمانی است که تغییرات را از یک مخزن راه دور دریافت کرده و آن‌ها را با مخزن محلی ادغام (Merge) می‌کند. این دستور در واقع ترکیبی از دو فرمان دیگر است:

1. git fetch: این فرمان تغییرات را دریافت می‌کند.
2. git merge: این فرمان تغییرات دریافت‌شده را با مخزن محلی ادغام می‌کند.

چند فرمان مهم گیت و کارکرد آن‌ها را نام ببرید

• git config: پیکربندی نام کاربری و ایمیل
• git init: راه‌اندازی یک مخزن محلی گیت
• git add: اضافه کردن یک یا چند فایل به ناحیه آماده‌سازی (Staging Area)
• git diff: مشاهده‌ی تغییرات انجام‌شده در فایل‌ها
• git commit: ثبت تغییرات در هد (HEAD) اما نه در مخزن راه دور
• git reset: بازگردانی تغییرات محلی به وضعیت قبلی مخزن
• git status: نمایش وضعیت پوشه کاری (Working Directory) و ناحیه آماده‌سازی
• git merge: ادغام یک شاخه (Branch) با شاخه‌ی فعال
• git push: آپلود محتوا از مخزن محلی به مخزن راه دور
• git pull: دریافت و دانلود محتوا از مخزن راه دور

تفاوت بین Git Pull و Git Fetch چیست ؟

• دریافت (Fetch):
  • فقط اطلاعات جدید را از مخزن راه دور دانلود می‌کند.
  • این اطلاعات جدید را به پوشه کاری شما اضافه نمی‌کند.
  • در هر زمان می‌توانید از فرمان git fetch برای به‌روزرسانی شاخه‌های رهگیری راه دور (Remote Tracking Branch) استفاده کنید.
  • فرمان:
    • git fetch origin
    • git fetch --all
• دریافت و ادغام (Pull):
  • اطلاعات جدید را دریافت می‌کند و آن‌ها را با پوشه کاری فعلی ادغام می‌کند.
  • شاخه‌ی فعال (HEAD) را با آخرین تغییرات از سرور راه دور به‌روزرسانی می‌کند.
  • سعی می‌کند تغییرات راه دور را با تغییرات ایجادشده در محلی (Local) ادغام کند.
  • فرمان: git pull origin master

6. تداخل ادغام (Merge Conflict) در گیت و نحوه‌ی حل آن را شرح دهید

هنگامی که شاخه‌های در حال ادغام دارای تغییرات متضاد باشند، یک تداخل ادغام (Merge Conflict) رخ می‌دهد و گیت به کمک شما برای انتخاب تغییرات نهایی نیاز دارد.

نحوه‌ی حل تداخل ادغام با ویرایشگر تداخل گیت‌هاب را توضیح دهید

این اتفاق زمانی می‌افتد که کاربران تغییرات متفاوتی را روی یک خط از همان فایل در شاخه‌های مختلف مخزن گیت شما ایجاد کنند. این کار برای جلوگیری از تداخل ادغام انجام می‌شود.

سوالات مرتبط با HTML

Attribute  در HTML چیست؟

Attribute ها خصوصیات هستند که می‌توانند به یک تگ HTML اضافه شوند تا نحوه رفتار یا نمایش آن را تغییر دهند. این ویژگی‌ها بلافاصله پس از نام تگ HTML، داخل براکت‌ها اضافه می‌شوند.

Marquee در HTML چیست؟

Marquee برای پیمایش متن روی صفحه وب استفاده می‌شود. به طور خودکار تصویر یا متن را به بالا، پایین، چپ یا راست پیمایش می‌کند. برای اعمال Marquee باید از تگ‌های<marquee> استفاده کنید

(Semantic HTML) چیست و چگونه کار می کند؟

(Semantic HTML) روشی برای کد نویسی HTML است که بر معنی و مفهوم محتوا تأکید دارد. به زبان ساده، به جای اینکه فقط روی ظاهر تمرکز کنیم، از تگ هایی استفاده می کنیم که به مرورگر و سایر ابزارها بگویند محتوای ما چیست.

برای مثال، در HTML معمولی از تگ <b> برای درشت کردن متن استفاده می شد، اما در (Semantic HTML)، از تگ <strong> برای متنی که اهمیت بیشتری دارد استفاده می کنیم. همچنین از تگ <em> برای متنی که تأکید شده است استفاده می شود.

چگونه یک جدول در صفحه وب HTML نمایش دهیم؟

برای نمایش داده ها به صورت جدولی، از تگ <table> در HTML استفاده می کنیم. این تگ همچنین می تواند برای چیدمان صفحه، مانند بخش هدر، نوار ناوبری، محتوای اصلی و پاورقی مورد استفاده قرار گیرد، اما بهتر است این کار را با تگ های معنایی مخصوص انجام دهیم.

۳SVG در HTML چیست؟

SVG یک زبان نشانه گذاری (Markup) است که برای تعریف گرافیک برداری و رستر (پیکسلی) استفاده می شود. تصاویر SVG با استفاده از فایل های متنی XML تعریف می شوند و برای نمایش اشکال و نمودارهای دوبعدی در صفحات وب بسیار مناسب هستند.

چطور Nested Web Pages ایجاد کنیم؟

ایجادNested Web Pages  به این معنی است که یک صفحه وب را درون صفحه وب دیگری نمایش دهیم. برای این کار از تگ iframe در HTML استفاده می کنیم.

سوالات مرتبط با CSS

بهترین روش برای درج استایلینگ CSS در HTML چیست؟

• INLINE CSS: زمانی استفاده می‌شود که فقط یک عنصر نیاز به استایل داشته باشد یا مقدار کمی استایل لازم باشد.
• ineternal: زمانی استفاده می‌شود که یک استایل به چندین عنصر یا صفحه HTML اعمال شود.
• external: زمانی استفاده می‌شود که یک سند HTML دارای یک استایل متفاوت و چندین عنصر باشد.

ویژگی Box Sizing را توضیح دهید.

ویژگی Box Sizing نحوه محاسبه ارتفاع و عرض یک جعبه را تعریف می‌کند.

• Content Box: عرض و ارتفاع پیش‌فرض فقط برای محتوای عنصر اعمال می‌شود. حاشیه و مرز در خارج از جعبه اضافه می‌شوند.
• Padding Box: ابعاد را به محتوای عنصر و حاشیه اضافه می‌کنید. مرز را در خارج از جعبه اضافه می‌کند.
• Border Box: ابعاد به محتوا، حاشیه و مرز اضافه می‌شوند.

روش‌های مختلف پنهان کردن یک عنصر با استفاده از CSS را توضیح دهید

• display: none: محتوا را پنهان می‌کند و آن را در DOM ذخیره نمی‌کند.
• visibility: hidden: عنصر را به DOM اضافه می‌کند و فضای اشغال می‌کند، اما برای کاربر قابل مشاهده نیست.

سوالات مرتبط با جاوااسکریپت

(Cookies) در JavaScript چیست؟

کوکی‌ها یک قطعه کوچک داده است که توسط یک وب‌سایت ارسال می‌شود و توسط مرورگر وب مورد استفاده برای دسترسی به صفحه، روی رایانه کاربر ذخیره می‌شود.

کوکی‌ها برای به خاطر سپردن اطلاعات برای استفاده بعدی و ردیابی فعالیت‌های مرور یک وب‌سایت استفاده می‌شوند.

ساده‌ترین روش برای ایجاد یک کوکی با JavaScript به صورت زیر است:

JavaScript

document.cookie = "key1 = value1; key2 = value2; expires = date";

Closures در جاوا اسکریپت به جه معناست؟

Closures در جاوا اسکریپت یک ویژگی است که در آن یک تابع داخلی به متغیرهای تابع بیرونی دسترسی دارد.

تفاوت بین Undefined، Undeclared و Null در JavaScript چیست؟

Undefined: به معنای آن است که یک متغیر اعلام شده است اما هنوز مقدار به آن اختصاص داده نشده است.

Null: یک مقدار انتسابی است که می‌توانید به هر متغیری که قرار است حاوی هیچ مقداری نباشد، اختصاص دهید.

Undeclared: متغیرهایی که اعلام نشده‌اند یا در یک برنامه یا اپلیکیشن وجود ندارند.

سوالات مربوط به React.js

React یک کتابخانه محبوب برنامه‌نویسی فرانت اند است. داشتن درک خوب از چارچوب یا کتابخانه جاوا اسکریپت برای توسعه نرم افزار بسیار مهم است.

JSX چیست؟

JSX یک چهارچوب است که به شما اجازه می‌دهد ساختارهای HTML را به صورت مستقیم در کد JavaScript بنویسید. این امر باعث می‌شود کد شما خواناتر و قابل فهم‌تر شود. JSX از استفاده از ساختارهای پیچیده DOM جلوگیری می‌کند.

DOM مجازی چیست ؟

DOM مجازی یک نسخه سبک‌تر از DOM واقعی است که React در حافظه نگه می‌دارد. پردازش DOM واقعی بسیار کندتر از پردازش DOM مجازی است زیرا هیچ چیزی در صفحه نمایش رسم نمی‌شود. هنگامی که حالت یک شی تغییر می‌کند، DOM مجازی فقط آن شی را در DOM واقعی به‌روز می‌کند، نه همه آن‌ها

کامپوننت‌ها را در ReactJS توضیح دهید

کامپوننت‌ها بلوک‌های ساختمانی یک برنامه React هستند که بخش‌هایی از رابط کاربری را نشان می‌دهند. یک کامپوننت که در یک قسمت از برنامه استفاده می‌شود، می‌تواند در قسمت دیگری نیز استفاده شود. این امر باعث تسریع روند توسعه می‌شود. یک کامپوننت می‌تواند حاوی چندین کامپوننت دیگر باشد. یک کامپوننت باید یک متد render تعریف کند که نحوه رندر شدن کامپوننت به DOM را مشخص کند. یک کامپوننت همچنین می‌تواند props دریافت کند. اینها ویژگی‌هایی هستند که توسط والد آن برای مشخص کردن مقادیر ارسال می‌شوند.

تایپ اسکریپت چیست؟

تایپ اسکریپت یک زبان برنامه‌نویسی شی‌گرا و یک ابرمجموعه جاوا اسکریپت است. به عبارت ساده، تایپ اسکریپت جاوا اسکریپت با مجموعه‌ای از قابلیت‌های قابل توجه دیگر است. تمام کدهای تایپ اسکریپت در نهایت به جاوا اسکریپت کامپایل می‌شوند. تایپ اسکریپت از تمام کتابخانه‌ها و فریمورک‌های جاوا اسکریپت پشتیبانی می‌کند، که از جمله ویژگی‌های اساسی آن هستند

در پایان

بسیاری از توسعه‌دهندگان فرانت‌اند با اضطراب و نگرانی به مصاحبه‌های کاری می‌روند. در این پست، به برخی از سوالات متداول و رایج در مصاحبه‌های استخدام توسعه‌دهنده فرانت‌اند پرداخته شد. امید است این اطلاعات به شما در آماده شدن برای مصاحبه‌های کاری کمک کند و اعتماد به نفس شما را افزایش دهد. به یاد داشته باشید، کلید موفقیت در مصاحبه‌های کاری، دانش فنی قوی و ارتباط موثر است. موفق باشید