400 سوال مصاحبه فرانت اند ! بزرگترین لیست سوالات مصاحبه فرانت اند !
اگه برنامه نویس فرانت اند باشی یا تازه میخوای وارد این حوزه بشی، خوب میدونی که مصاحبه های شغلی تو این زمینه همیشه میتونن چالش برانگیز باشن. آماده بودن برای سوالات مصاحبه فرانت اند خیلی مهمه، چون میتونه شانس استخدامت رو حسابی بالا ببره!
واقعیت اینه که شرکت ها دوست دارن ببینن چقدر تو مباحث فنی و ابزار های مختلف فِرانت اِند تسلط داری!
تو این مقاله 400 عدد از سوالات مصاحبه فِرانت اِند رو جمع آوری کردیم، این دقیقاً همون چیزیه که نیاز داری تا خودت رو حسابی برای جلسه فنی آماده کنی.
سوال هایی که اینجا هست، جز مواردی هست که بارها و بارها تو مصاحبه ها از آدمها پرسیده میشه. با دونستن جواب این سوالات، دیگه نه تنها استرس نمیگیری، بلکه میتونی با اعتماد به نفس بیشتری سر جلسه حاضر بشی و توانایی هات رو نشون بدی.
از طرفی، آماده بودن برای این سوالات نشون میده که نه تنها تو مباحث پایه ای جاوااسکریپت، CSS و HTML قوی هستی، بلکه حتی مفاهیم پیشرفته تر مثل رندرینگ سمت سرور، مدیریت وضعیت و ابزارهای جدید تر رو هم بلدی.
این به مصاحبه کننده ها ثابت میکنه که تو واقعاً بروز هستی و روی کارت مسلطی.
پس اگه هدفت اینه که مصاحبه فنی فرانت اند رو مثل یه حرفه ای پشت سر بذاری و تو رقابت برای بهترین موقعیت های شغلی سربلند بیرون بیای، این لیست سوالات مصاحبه فرانت اند بهترین منبع برای تمرین و مرور سوالات مهمه.
تو این لیست 400 عددی سعی کردیم سوالاتی که مربوط به HTML , CSS , JS و ابزار های عمومی فِرانت اِند هستن رو مطرح کنیم اما ممکنه چند سوال از React هم باشه ( اگه React Developer نیستید، سوالهایی که درمورد React هست رو مطالعه نکنید )
بخش اول سوالات مصاحبه فرانت اند
عملگر == مقادیر رو بدون در نظر گرفتن نوع داده ای مقایسه میکنه و تبدیل نوع (Type Coercion) انجام میده. اما === علاوه بر مقدار، نوع داده رو هم بررسی میکنه. برای مثال:
5 == ‘5’ // true
5 === ‘5’ // false
خاصیت box-sizing کنترل میکنه که چطور اندازه عناصر محاسبه بشه. حالت پیشفرض content-box هست که فقط محتوای عنصر اندازه گرفته میشه و پدینگ و حاشیه ها حساب نمیشن. در حالت border-box، پدینگ و حاشیه ها هم در اندازه نهایی عنصر لحاظ میشن.
let در ES6 معرفی شد و محدوده اش بلاک اسکوپ (Block Scope) هست، یعنی فقط داخل بلوک قابل استفاده ست. var اما فانکشن اسکوپ (Function Scope) هست و مشکلاتی مثل هوئیستینگ (Hoisting) داره که ممکنه باعث مشکلات غیرمنتظره بشه.
undefined به معنای اینه که یه متغیر تعریف شده ولی مقدار نگرفته. null به معنای یه مقدار خالی یا پوچ عمدیه که برنامه نویس به متغیر اختصاص میده.
Flexbox سیستمی برای چیدمان عناصر هست که به راحتی میتونیم عناصر رو در یک بعد (ستون یا ردیف) مرتب کنیم. به خصوص برای چیدمان های پیچیده که نیاز به هم ترازی و توزیع فضای پویا دارن، خیلی مفیده.
مقدار this به بستری که تابع در اون اجرا میشه بستگی داره. توابع معمولی this رو به آبجکت گلوبال (یا undefined در حالت strict) ارجاع میدن، در حالی که Arrow Functions مقدار this رو از محیط بیرونی به ارث میبرن.
DOM (Document Object Model) یه ساختار داده ایه که مرورگر از صفحه HTML میسازه و اجازه میده با جاوااسکریپت به عناصر دسترسی داشته باشیم و تغییرشون بدیم. مثلاً میتونیم با document.getElementById() یه عنصر رو بگیریم و محتوای اون رو تغییر بدیم.
padding فضای داخلی عنصر رو نسبت به محتوای اون تعیین میکنه، یعنی فاصله بین محتوا و حاشیه عنصر. margin فاصله بیرونی عنصر از عناصر دیگه رو مشخص میکنه.
یه تابع که به عنوان آرگومان به تابع دیگه ای پاس داده میشه و وقتی عملیات اون تابع تکمیل شد، فراخوانی میشه. معمولاً توی توابع غیرهمزمان (Async) استفاده میشه، مثل درخواست های AJAX.
async/await یه روش ساده و خوانا برای مدیریت توابع غیرهمزمانه و جایگزین مناسبی برای Promises و callback های تو در تو هست. با استفاده از await میتونیم به راحتی منتظر نتیجه یه تابع async بمونیم و کدهای ما شبیه به کدهای همزمان بشن.
بخش دوم سوالات مصاحبه فرانت اند
GET برای گرفتن داده از سرور استفاده میشه و پارامترها رو توی URL میفرسته، بنابراین محدودیت اندازه داره. POST برای ارسال داده به سرور استفاده میشه و دادهها رو در بدنه درخواست ارسال میکنه، پس ایمن تر و مناسب تر برای دادههای حجیم یا حساس هست.
ریسپانسیو بودن یعنی وب سایت به درستی روی همه دستگاه ها (موبایل، تبلت، دسکتاپ) نمایش داده بشه.برای اینکار از تکنیک هایی مثل مدیا کوئریها، طراحی فلوئید، و تصاویر واکنش گرا استفاده میکنیم.
عناصر block کل عرض موجود رو اشغال میکنن و از خط بعد شروع میشن، اما عناصر inline فقط به اندازه محتوای خودشون فضا میگیرن و توی یک خط میمونن. برای مثال، <div> یک عنصر block هست و <span> یک عنصر inline.
دسترسی پذیری (Accessibility) یعنی طراحی وب سایت به گونهای که همه افراد، حتی کسانی که محدودیت هایی مثل کم بینایی یا مشکلات حرکتی دارن، بتونن به راحتی از سایت استفاده کنن. این شامل مواردی مثل استفاده از تگهای ARIA و تست با ابزار های کمکی میشه.
در ES6، میتونیم کدها رو به قطعات کوچیک و ماژولار تقسیم کنیم. از export برای خروجی گرفتن و از import برای وارد کردن این ماژول ها استفاده میکنیم. این باعث میشه کدها خواناتر و مدیریت پذیرتر باشن.
forEach روی هر عنصر آرایه اجرا میشه ولی چیزی برنمیگردونه. map هم روی هر عنصر آرایه اجرا میشه، اما یک آرایه جدید با نتایج برمیگردونه. map برای زمانی که بخوایم داده ها رو تغییر بدیم و آرایه جدید بسازیم، مناسبتره.
CSS Grid یه سیستم چیدمان دو بعدی قوی برای ساختارهای پیچیده و مرتب کردن عناصر در ردیفها و ستونها هست. برخلاف Flexbox که بیشتر برای چیدمان یک بعدی استفاده میشه، Grid برای چیدمان دو بعدی مناسبه.
Promise در جاوااسکریپت یه شیء برای مدیریت عملیات های غیر همزمان هست. میتونیم از then و catch برای کنترل نتیجه موفقیت آمیز یا خطا استفاده کنیم. این به ما کمک میکنه که از callbackهای تو در تو جلوگیری کنیم.
هر دو برای فراخوانی یک تابع با this خاص استفاده میشن. تفاوتشون اینه که call() آرگومان ها رو به صورت جداگانه میگیره، اما apply() آرگومان ها رو به شکل آرایه میگیره.
preload به مرورگر میگه که فایل فونت رو زودتر بارگذاری کنه تا وقتی صفحه بارگذاری میشه، سریع تر و بدون تاخیر از فونت استفاده بشه. این باعث بهبود عملکرد و تجربه کاربری میشه.
بخش سوم سوالات مصاحبه فرانت اند
Shadow DOM بخشی از Web Components هست که به ما اجازه میده یه دام جداگانه و مستقل ایجاد کنیم. این باعث میشه استایل ها و اسکریپت های داخل اون بخش به بقیه صفحه نشت نکنن و همینطور از استایل های خارجی تأثیر نگیرن.
TypeScript یه زبان برنامه نویسی است که روی جاوااسکریپت ساخته شده و تایپ دهی ایستا (Static Typing) رو اضافه میکنه. ویژگی هایی مثل کلاس ها، اینترفیس ها و قابلیت های ES6 رو داره و به بهبود دیباگ و کدنویسی کمک میکنه.
برای جلوگیری از Reflow باید تغییرات DOM رو به حداقل برسونیم، از ویژگیهای CSS مثل transform به جای top یا left استفاده کنیم و اندازه تصاویر رو از قبل مشخص کنیم. همچنین، از DocumentFragment برای اضافه کردن چند عنصر به DOM استفاده کنیم.
em به اندازه فونت عنصر والد وابسته ست، در حالی که rem به اندازه فونت ریشه (عنصر html) وابسته هست. استفاده از rem معمولاً ترجیح داده میشه چون مقیاس پذیری بهتری فراهم میکنه.
Progressive Enhancement یعنی اول یه نسخه ساده و قابل دسترس برای همه مرورگرها میسازیم و بعد قابلیت های پیشرفته رو اضافه میکنیم. Graceful Degradation برعکسه، یعنی اول یه نسخه پیشرفته میسازیم و بعد برای مرورگرهای قدیمی تر ساده ترش میکنیم.
Fetch API یه روش مدرن برای انجام درخواست های HTTP در جاوااسکریپت هست. با fetch() میتونیم داده ها رو از سرور بگیریم یا ارسال کنیم و از then و catch برای مدیریت پاسخ و خطا استفاده کنیم. برای مثال:
fetch(‘https://api.example.com/data’)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(‘Error:’, error));
CSS Preprocessor مثل Sass به ما کمک میکنه که از قابلیتهای پیشرفته مثل متغیر ها، توابع، و تو در تویی در CSS استفاده کنیم. این باعث میشه کدنویسی سریع تر و سازماندهی بهتری داشته باشیم. فایلهای Sass به CSS کامپایل میشن و قابل استفاده در مرورگر میشن.
debounce یه تکنیکه که باعث میشه یه تابع فقط وقتی اجرا بشه که یک رویداد متوالی (مثل اسکرول یا تایپ) برای مدت زمان مشخصی متوقف بشه. این کمک میکنه که عملکرد صفحه بهینه بشه و تعداد دفعات اجرای توابع کاهش پیدا کنه.
Webpack یه ابزار ساخت (Build Tool) برای باندل کردن فایلهای پروژه، مثل جاوااسکریپت، CSS، و تصاویر هست. این ابزار به ما کمک میکنه که کدها رو بهینه و ماژولار کنیم و از پلاگینهای مختلف برای کارهای اضافی مثل مینیفای کردن استفاده کنیم.
هر دو برای ذخیره سازی داده در مرورگر استفاده میشن، اما localStorage دادهها رو حتی بعد از بستن مرورگر حفظ میکنه، در حالی که sessionStorage داده ها رو فقط تا زمانی که تب یا پنجره مرورگر بازه نگه میداره.
بخش چهارم سوالات مصاحبه فرانت اند
ARIA (Accessible Rich Internet Applications) مجموعه ای از ویژگی هاست که به ما کمک میکنه وب سایت های قابل دسترس تری بسازیم، به ویژه برای کاربران با ناتوانی ها. این ویژگی ها اطلاعاتی اضافی در مورد نقش و وضعیت عناصر به صفحه اضافه میکنن.
undefined وقتی رخ میده که یه متغیر تعریف شده ولی مقدار نگرفته. not defined وقتی رخ میده که متغیر اصلاً تعریف نشده و جاوااسکریپت نمیتونه اون رو پیدا کنه.
بهینه سازی شامل کاهش تعداد Repaint و Reflow، به کار بردن تصاویر فشرده، استفاده از requestAnimationFrame برای انیمیشن ها، و کم کردن استفاده از DOM های پیچیده و سنگین هست.
برای کپی عمیق میتونیم از روش های مثل JSON.parse(JSON.stringify(obj)) استفاده کنیم، اما این روش محدودیت هایی داره. یا میشه از کتابخونه هایی مثل lodash استفاده کرد که قابلیت کپی عمیق بهتری دارن.
استایل های inline به عنصر HTML اضافه میشن و فقط همون عنصر رو تحت تأثیر قرار میدن، در حالی که external stylesheets فایلهای جداگانه CSS هستن که به صفحه لینک میشن و میتونن چندین صفحه رو استایل بدن. استفاده از external stylesheets برای نگهداری و بهینه سازی بهتره.
event delegation یه تکنیکه که به ما اجازه میده رویدادها رو به یک عنصر والد اضافه کنیم، به جای این که به عناصر فرزند جداگانه اضافه کنیم. این باعث میشه کد تمیزتر و عملکرد بهتر بشه، به خصوص وقتی تعداد عناصر فرزند زیاد باشه.
موقعیت دهی static حالت پیشفرض هست و عنصر رو طبق جریان معمولی صفحه قرار میده. موقعیت دهی relative عنصر رو نسبت به موقعیت اصلی خودش جابه جا میکنه و فضای باقیمانده صفحه تغییر نمیکنه.
reduce() روی آرایهها استفاده میشه تا یه مقدار واحد از تمام عناصر تولید کنیم. مثلاً برای جمع زدن عناصر یه آرایه:
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0); // 10
Lazy Loading یعنی بارگذاری محتوا یا منابع (مثل تصاویر یا اسکریپتها) فقط وقتی که بهشون نیاز داریم، مثلاً وقتی کاربر به بخشی از صفحه اسکرول میکنه. این باعث میشه سرعت بارگذاری اولیه صفحه بهتر بشه.
میتونیم از ویژگی media استفاده کنیم و بعد از بارگذاری، اون رو به all تغییر بدیم. یا از کتابخونه ها و راه حل های دیگه برای بارگذاری غیر همزمان استفاده کنیم.
بخش پنجم سوالات مصاحبه فرانت اند
Service Worker یه اسکریپت پس زمینه در مرورگر هست که به ما اجازه میده درخواست های شبکه رو رهگیری کنیم و تجربه آفلاین ایجاد کنیم. این امکان ذخیره سازی کش برای بارگذاری سریع تر و قابلیت های پیشرفته تر مثل نوتیفیکیشن های پوش رو فراهم میکنه.
Hoisting یعنی متغیرها و توابع به بالای محدوده خودشون منتقل میشن، به این معنا که میشه قبل از تعریف، ازشون استفاده کرد. مثلاً:
console.log(x); // undefined
var x = 5;
در این مثال، تعریف var x به بالای محدوده منتقل میشه، اما مقداردهی انجام نمیشه.
باید از پیام های خطای قابل فهم و دقیق استفاده کنیم، مثلاً “ایمیل وارد شده معتبر نیست”. همچنین بهتره از نشانههای بصری مثل رنگ قرمز یا آیکونهای هشدار استفاده کنیم و مکان خطاها رو به وضوح مشخص کنیم.
innerHTML کل محتوای HTML داخل یه عنصر رو برمیگردونه یا تنظیم میکنه و میتونه HTML رو پردازش کنه. textContent فقط متن ساده عنصر رو برمیگردونه و از HTML چشم پوشی میکنه. textContent امن تره چون کد HTML مخرب رو اجرا نمیکنه.
CSS Variables یا متغیرهای سفارشی به ما امکان میدن مقادیر CSS رو در جاهای مختلف به اشتراک بذاریم. با استفاده از --variable-name تعریف میشن و با var(--variable-name) فراخوانی میشن. برای مثال:
:root {
–main-color: #3498db;
}
body {
color: var(–main-color);
}
Virtual DOM نسخهای از DOM واقعی هست که در حافظه ساخته میشه. هر زمان که تغییراتی در رابط کاربری ایجاد بشه، React این تغییرات رو ابتدا در Virtual DOM اعمال میکنه و بعد تفاوتها (diffs) رو با DOM واقعی هماهنگ میکنه، که باعث بهبود عملکرد میشه.
میشه به چند روش از SVG استفاده کرد: مستقیماً در HTML با تگ <svg>...</svg>، یا با استفاده از تگ <img>، و یا به عنوان بک گراند در CSS. روش اول برای کنترل کامل استایل و تغییرات SVG مفیده.
== و != مقایسه مقادیر رو انجام میدن و نوع داده رو تبدیل میکنن. === و !== مقایسه سختگیرانه تر هستن و هم مقدار و هم نوع داده رو مقایسه میکنن. برای جلوگیری از خطاهای ناخواسته، بهتره از === و !== استفاده بشه.
Axios یه کتابخونه برای ارسال درخواست های HTTP هست. میتونیم از axios.get()، axios.post() و متدهای مشابه برای تعامل با API استفاده کنیم. برای مثال:
axios.get(‘https://api.example.com/data’)
.then(response => console.log(response.data))
.catch(error => console.error(‘Error:’, error));
BEM (Block, Element, Modifier) روشی برای نام گذاری کلاس هاست که کدهای CSS رو قابل فهم تر و نگهداری رو ساده تر میکنه. این ساختار از سه بخش تشکیل شده: بلاک (block)، عنصر (element)، و اصلاح کننده (modifier) که استایل ها رو سازمان دهی میکنه.
بخش ششم سوالات مصاحبه فرانت اند
ابزارهای linting مثل ESLint برای بررسی و اصلاح خطاهای کدنویسی و رعایت استانداردهای کدنویسی به کار میرن. این ابزارها کمک میکنن کدی تمیز، خوانا، و بدون باگ های رایج بنویسیم.
هر دو برای ذخیره سازی داده در مرورگر استفاده میشن، اما cookies محدودیت های حجم کمی دارن (حدود 4 کیلوبایت) و معمولاً برای مدیریت نشست ها استفاده میشن. localStorage حجم بیشتری داره و داده ها رو بدون تاریخ انقضا ذخیره میکنه، مگر این که کاربر خودش پاکشون کنه.
با استفاده از display: grid میتونیم عناصر رو در ردیف ها و ستون ها چیدمان کنیم. با خواص مثل grid-template-columns و grid-template-rows میشه اندازه و جایگاه بخش ها رو مشخص کرد و به راحتی طرح بندی پیچیده ساخت.
state متغیرهایی هستن که یه کامپوننت میتونه مدیریت کنه و تغییر بده. props مقادیری هستن که از والد به فرزند منتقل میشن و کامپوننت ها نباید اون ها رو تغییر بدن. به عبارت ساده تر، state دادههای داخلی و قابل تغییره، و props دادههای خارجی و ثابت هستن.
وقتی بخوایم چند عنصر JSX رو بدون اضافه کردن عنصر اضافی به DOM برگردونیم، از fragments استفاده میکنیم. به جای استفاده از یه تگ اضافی مثل <div>, میتونیم از <>...</> استفاده کنیم که بهینه تر هست.
Memoization یه تکنیک بهینه سازیه که نتیجه فراخوانی توابع پرهزینه رو ذخیره میکنه تا دفعه بعد به جای محاسبه مجدد، مستقیماً از نتایج ذخیره شده استفاده کنه. این کار باعث افزایش سرعت و کارایی برنامه میشه.
Object Destructuring به ما اجازه میده مقادیر متغیرها رو از اشیاء به راحتی استخراج کنیم. برای مثال:
const person = { name: ‘Ali’, age: 30 };
const { name, age } = person;
console.log(name); // Ali
console.log(age); // 30
e.preventDefault() رفتار پیشفرض مرورگر رو متوقف میکنه، مثل ارسال فرم. e.stopPropagation() از انتشار رویداد به عناصر والد جلوگیری میکنه. معمولاً وقتی میخوایم رفتار رویداد رو محدود کنیم، این دو رو استفاده میکنیم.
با استفاده از تگ <picture> و ویژگیهای srcset و sizes میتونیم تصاویر واکنشگرا تعریف کنیم که بر اساس دستگاه کاربر و اندازه صفحه بارگذاری میشن. این باعث بهینه تر شدن بارگذاری تصاویر میشه.
Controlled Components کامپوننت هایی هستن که وضعیت (state) ورودی ها توسط React کنترل میشه و هر تغییر مستقیماً به state اعمال میشه. Uncontrolled Components ورودی هایی هستن که از وضعیت داخلی DOM استفاده میکنن و معمولاً از ref برای دسترسی به مقادیر استفاده میکنیم.
بخش هفتم سوالات مصاحبه فرانت اند
CSS Transitions برای تغییرات تدریجی در استایلها استفاده میشه که با تعامل کاربر شروع میشن (مثل هاور کردن روی یه دکمه). CSS Animations برای ایجاد انیمیشن های پیچیده تر و کنترل دقیقتر استفاده میشه و میتونن بدون تعامل کاربر هم اجرا بشن.
Context API برای اشتراک گذاری مقادیر بین کامپوننت ها بدون نیاز به ارسال props از والد به فرزندهای متعدد استفاده میشه. اول با React.createContext() یه کانتکست میسازیم، بعد از Provider برای ارائه مقادیر و از Consumer یا useContext برای دریافت استفاده میکنیم.
async باعث میشه اسکریپت به صورت غیرهمزمان بارگذاری و بلافاصله اجرا بشه، در حالی که defer باعث میشه اسکریپت بارگذاری بشه ولی بعد از تجزیه کامل HTML اجرا بشه. defer برای حفظ ترتیب اجرای اسکریپتها بهتره.
map() برای ایجاد یه آرایه جدید از آرایه موجود با اعمال یه تابع روی هر عنصر استفاده میشه. filter() برای فیلتر کردن آرایه و برگرداندن فقط عناصری که تابع شرط رو برآورده میکنن، استفاده میشه :
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8]
const even = numbers.filter(num => num % 2 === 0); // [2, 4]
CORS یه مکانیسم امنیتیه که به مرورگرها اجازه میده منابع یه دامنه رو از یه دامنه دیگه درخواست کنن، مشروط به این که سرور مقصد اجازه داده باشه. این برای جلوگیری از دسترسی ناخواسته به دادهها توسط اسکریپت های خارجی به کار میره.
JSON.stringify() یه شیء جاوااسکریپت رو به یه رشته JSON تبدیل میکنه و JSON.parse() رشته JSON رو دوباره به یه شیء جاوااسکریپت تبدیل میکنه. اینها برای ذخیره سازی دادهها یا ارسالشون به سرور مفیدن
با استفاده از @keyframes میشه انیمیشن تعریف کرد و استایل های مختلف رو در فواصل زمانی مشخص تنظیم کرد. مثال:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 2s;
}
Thunk یه میدلور برای Redux هست که به ما اجازه میده توابعی رو به عنوان اکشن ارسال کنیم، نه فقط آبجکت ها. این توابع میتونن عملیات های غیرهمزمان مثل فراخوانی API رو انجام بدن و بعد از اتمامش، اکشن های دیگه ای رو دیسپچ کنن.
display: none باعث میشه عنصر از صفحه حذف بشه و فضایی اشغال نکنه، اما visibility: hidden عنصر رو مخفی میکنه ولی فضای اون همچنان رزرو میشه. برای مخفی کردن بدون تأثیر روی طرحبندی، visibility: hidden مفیده.
shouldComponentUpdate یه متد چرخه حیاتیه که به ما امکان میده بهینه سازیهایی انجام بدیم و مشخص کنیم آیا کامپوننت باید دوباره رندر بشه یا نه. این میتونه به بهبود عملکرد کمک کنه، به خصوص وقتی دادههای بزرگ یا پیچیده داریم.
بخش هشتم سوالات مصاحبه فرانت اند
یک تابع Pure تابعی هست که خروجی یکسانی برای ورودی های یکسان داره و هیچ تغییری در وضعیت یا داده های خارجی ایجاد نمیکنه. به عبارت دیگه، هیچ Side Effectی نداره و همیشه پیشبینیپذیر عمل میکنه.
Intersection Observer یه API هست که بررسی میکنه آیا یه عنصر داخل نمای کاربر هست یا نه. میشه ازش برای بارگذاری تنبل تصاویر و عناصر سنگین استفاده کرد. به این صورت که وقتی عنصر وارد دید کاربر شد، عملیات بارگذاری انجام میشه.
سیستم طراحی مجموعهای از قوانین، الگوها، و اجزاء قابل استفاده مجدده که برای طراحی منسجم رابط کاربری به کار میره. این شامل تعریف رنگها، تایپوگرافی، دکمهها، فرمها و کامپوننت های دیگر میشه. میتونیم از ابزارهایی مثل Figma یا Sketch برای طراحی و Storybook برای مستندسازی استفاده کنیم.
useEffect بعد از رندر کردن کامپوننت اجرا میشه و برای عملیاتهای جانبی مثل گرفتن داده ها از API استفاده میشه. useLayoutEffect قبل از کشیدن صفحه (Layout) اجرا میشه و برای مواردی که نیاز به اندازه گیری دقیق DOM یا تغییرات همزمان داریم، مناسب تره.
میتونیم از ابزارهایی مثل DevTools در مرورگر Chrome استفاده کنیم. با استفاده از تب Performance میشه عملکرد سایت رو آنالیز کرد و نقاطی که نیاز به بهینهسازی دارن، مثل Reflowهای سنگین یا زمان بارگذاری طولانی، شناسایی کرد.
Atomic Design یه روش طراحی رابط کاربریه که اجزاء رو به عناصر کوچیکتر و قابل ترکیب تقسیم میکنه: اتم ها، مولکول ها، ارگانیزم ها، قالب ها (templates) و صفحات (pages). این باعث میشه طراحی و توسعه کامپوننت ها ساختارمند تر و منعطف تر باشه.
PropTypes یه کتابخونه داخلی React برای بررسی نوع دادههای props در کامپوننت هاست. این به ما کمک میکنه خطاهای احتمالی رو در زمان توسعه شناسایی کنیم. برای مثال:
Accessibility Tree یه ساختار درختیه که مرورگر بر اساس محتوای صفحه ایجاد میکنه تا به ابزارهای کمکی مثل صفحه خوانها کمک کنه. با استفاده از DevTools میتونیم این درخت رو بررسی کنیم و مطمئن بشیم که عناصر به درستی و به صورت قابل دسترس برای همه کاربران ارائه میشن.
بخش نهم سوالات مصاحبه فرانت اند
SSR یعنی رندر کردن محتوای یک صفحه وب در سرور به جای مرورگر کاربر. وقتی صفحه به کاربر ارسال میشه، محتوای HTML کامل بارگذاری شده و آماده هست. این باعث بهبود سئو و افزایش سرعت بارگذاری اولیه میشه.
با استفاده از تابع React.lazy() میشه کامپوننت ها رو به صورت تنبل بارگذاری کرد. این کمک میکنه که فقط در زمان نیاز کامپوننت ها بارگذاری بشن و عملکرد بهتری برای برنامه فراهم بشه:
const LazyComponent = React.lazy(() => import(‘./LazyComponent’));
<Suspense fallback={<div>Loading…</div>}>
<LazyComponent />
</Suspense>
باید از بروزرسانی های غیرضروری اجتناب کرد. میشه با استفاده از shouldComponentUpdate یا React.memo از رندرهای غیرضروری جلوگیری کرد. همچنین، میتونیم از useCallback برای ذخیره توابع یا از useMemo برای ذخیره نتایج محاسبات سنگین استفاده کنیم.
Recoil یه کتابخونه سبک برای مدیریت وضعیت در برنامههای React هست. وقتی پروژهای داریم که مدیریت وضعیت پیچیدهای نیاز داره و استفاده از Context API ناکارآمد میشه، Recoil میتونه انتخاب مناسبی باشه. این کتابخونه قابلیتهایی مثل اشتراک دادهها و بهروزرسانی خودکار اجزا رو فراهم میکنه.
Rehydration فرآیند تطبیق یا همگام سازی کد جاوااسکریپت در سمت کاربر با محتوای HTML از قبل رندر شده در سروره. این به React اجازه میده که به جای بازسازی کل UI، فقط قسمت هایی رو بهروزرسانی کنه که نیاز به تغییر دارن.
Web Vitals معیارهای عملکرد کلیدی ای هستن که توسط گوگل برای بهبود تجربه کاربر معرفی شدن، مثل Largest Contentful Paint (LCP)، First Input Delay (FID)، و Cumulative Layout Shift (CLS). میشه از ابزارهایی مثل Lighthouse و PageSpeed Insights برای اندازه گیری این معیارها و بهبود عملکرد استفاده کرد.
SVG مقیاس پذیر و مبتنی بر بردار هست، یعنی بدون از دست دادن کیفیت میشه به هر اندازهای تغییر مقیاس داد. این باعث میشه برای آیکونها و گرافیکهای ساده مناسبتر باشه، در حالی که تصاویر بیتمپ مثل PNG و JPEG کیفیتشون با بزرگنمایی کاهش پیدا میکنه.
React Portal برای رندر کردن عناصر در جایی خارج از سلسله مراتب معمولی DOM استفاده میشه. برای مثال، میتونیم یه مودال رو مستقیماً در بدنه (body) صفحه رندر کنیم، در حالی که از لحاظ منطقی هنوز بخشی از کامپوننت والد هست:
ReactDOM.createPortal(
<ModalContent />,
document.getElementById(‘modal-root’)
);
Error Boundaries کامپوننت هایی هستن که میتونن خطاهای جاوااسکریپت در کامپوننتهای فرزند خودشون رو بگیرن و به کاربر نمایش بدن. میشه از componentDidCatch و getDerivedStateFromError برای مدیریت خطاها استفاده کرد:
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
// گزارش خطا
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
axios interceptors به ما اجازه میده قبل از ارسال درخواست یا بعد از دریافت پاسخ، کارهای اضافی انجام بدیم. میشه از این قابلیت برای افزودن هدرهای سفارشی، ثبت درخواست ها، یا مدیریت خطاها استفاده کرد:
axios.interceptors.request.use(config => {
// تغییرات در درخواست قبل از ارسال
return config;
}, error => {
// مدیریت خطاهای درخواست
return Promise.reject(error);
});
بخش دهم سوالات مصاحبه فرانت اند
Immutable.js یه کتابخونه هست که ساختار های داده ای غیرقابل تغییر (Immutable) رو فراهم میکنه. استفاده از دادههای غیرقابل تغییر باعث میشه تغییرات پیش بینی پذیرتر و باگ ها کمتر بشه. همچنین، بهینه سازیهایی مثل مقایسه سریعتر داده ها ممکن میشه.
shadow فاصله و جهت سایه رو تعیین میکنه، در حالی که spread اندازه سایه رو تغییر میده. مقدار spread مثبت باعث بزرگ تر شدن سایه میشه و مقدار منفی سایه رو کوچیکتر میکنه. این گزینه ها به ما کنترل کامل روی نحوه نمایش سایه میدن.
async و await روشهای ساده تر و خواناتری برای مدیریت توابع غیرهمزمان هستن. async یه تابع رو به تابعی که Promise برمیگردونه تبدیل میکنه و await باعث میشه تابع منتظر Promise بمونه و کد به صورت همزمان خوانده بشه:
async function fetchData() {
try {
const response = await fetch(‘https://api.example.com/data’);
const data = await response.json();
console.log(data);
} catch (error) {
console.error(‘Error:’, error);
}
}
styled-components یه کتابخونه برای نوشتن CSS در جاوااسکریپت هست. میتونیم استایلها رو به عنوان کامپوننت تعریف کنیم و از اونا در JSX استفاده کنیم. این روش باعث میشه استایلها به طور محلی و بدون تداخل با بقیه کدها اعمال بشن:
import styled from ‘styled-components’;
const Button = styled.button`
background-color: blue;
color: white;
padding: 10px;
`;
با تعریف متغیرهای CSS در :root میتونیم اونا رو در کل سند استفاده کنیم و به راحتی با جاوااسکریپت مقدارشون رو تغییر بدیم. برای تغییر مقدار متغیر:
for...in برای تکرار روی کلید های یه شیء استفاده میشه، در حالی که for...of برای تکرار روی مقادیر یه آرایه یا یه ساختار دادهای قابل تکرار (Iterable) مثل Map یا Set استفاده میشه. for...of برای آرایهها مناسب تره.
Polyfill یه قطعه کد هست که قابلیت های جدید زبان یا API های مدرن رو برای مرورگرهای قدیمی تر فراهم میکنه. این کار باعث میشه کدی که از ویژگیهای جدید جاوااسکریپت استفاده میکنه، در مرورگرهایی که اون ویژگیها رو پشتیبانی نمیکنن، هم کار کنه.
طراحی یه RESTful API شامل تعریف منابع به صورت مناسب، استفاده از HTTP متدها (GET، POST، PUT، DELETE) برای عملیات روی منابع، استفاده از URLهای معنادار، و بازگرداندن کدهای وضعیت مناسب (مثل 200 برای موفقیت یا 404 برای یافت نشدن) هست.
useReducer یه هوک در React هست که برای مدیریت وضعیت های پیچیده استفاده میشه. این هوک به جای استفاده از useState برای هر مقدار جداگانه، وضعیت رو با کمک یه تابع کاهشدهنده (Reducer Function) مدیریت میکنه:
const [state, dispatch] = useReducer(reducer, initialState);
function reducer(state, action) {
switch (action.type) {
case ‘increment’:
return { count: state.count + 1 };
case ‘decrement’:
return { count: state.count – 1 };
default:
return state;
}
}
ESLint یه ابزار برای بررسی کدهای جاوااسکریپت و یافتن خطاها و ایرادات در کدنویسی هست. میتونیم با نصب ESLint و ایجاد یه فایل پیکربندی (.eslintrc)، قوانین مورد نظر رو تنظیم کنیم. همچنین میشه از پلاگینهای خاص برای فریمورکها مثل React استفاده کرد.
جمع بندی
مصاحبه های فرانت اند فقط به دانستن سوالات فنی ختم نمیشن؛ باید یه استراتژی درست برای موفقیت داشته باشی. اول از همه، به یاد داشته باش که آماده سازی کلید موفقیته.
حتماً قبل از مصاحبه پروژههایی که کار کردی رو مرور کن و مطمئن شو که میتونی درباره چالش ها، تصمیمات فنی، و دلایل استفاده از تکنیک های خاص توضیح بدی. معمولاً مصاحبهکنندهها علاقه دارن بفهمن چطور به مسائل فکر میکنی و چطور مشکلات رو حل میکنی.
یه نکته خیلی مهم دیگه اینه که همیشه آماده باش تا بخشی از کد رو به صورت زنده بنویسی یا یه مسئله رو حل کنی. ممکنه ازت بخوان یه عملکرد ساده رو با جاوااسکریپت بنویسی یا یه ساختار پیچیده تر CSS رو توضیح بدی.
تو این موارد، حتی اگه کامل ترین جواب رو هم نداشتی، از فرآیند فکری ات صحبت کن و توضیح بده که چطور به راه حلها میرسی. مصاحبه کنندهها بیشتر به این علاقه دارن که ببینن چطور فکر میکنی و چطور مشکلات رو تجزیه و تحلیل میکنی.
یکی دیگه از مواردی که نباید فراموش کنی، اینه که با مفاهیم پایه و اصولی مثل box model، تفاوت های مختلف CSS، نحوه کار DOM، و اصول جاوااسکریپت آشنا باشی.
اما حواست باشه که تسلط بر مفاهیم پیشرفته تر مثل closures، async/await و مدیریت وضعیت در فریم ورکهایی مثل React هم میتونه یه امتیاز بزرگ برات باشه. توی دنیای فرانت اند، همیشه آماده بودن برای سوالات ریز و تکنیکی میتونه کمک بزرگی باشه.
از طرف دیگه، مهارت های نرم هم خیلی مهمن. مصاحبههای فنی فقط در مورد کد زدن نیستن؛ باید بتونی به وضوح و شفافیت در مورد راه حلهات صحبت کنی. بهخصوص وقتی تیم ها به دنبال کسی هستن که بتونه به خوبی با بقیه اعضای تیم همکاری کنه، توانایی برقراری ارتباط قوی خیلی اهمیت پیدا میکنه.
پس اگه یه راهحل خوب داری، با اعتماد به نفس دربارهش حرف بزن و از توضیح دادن نترس.
یه نکته دیگه که خیلی به چشم میاد، اشتیاق و علاقهت به یادگیری چیزهای جدیده. فرانتاند داره به سرعت پیشرفت میکنه و ابزارها و تکنولوژی های جدید دائماً معرفی میشن.
اگه بتونی نشون بدی که دوست داری بروز بمونی و از یادگیری ابزارها و کتابخونه های جدید لذت می بری، این میتونه یه امتیاز بزرگ برات باشه. شاید بد نباشه تو مصاحبه اشاره کنی که به تازگی چی یاد گرفتی یا روی چه چیزی کار میکنی.
نهایتاً، همیشه آماده باش که درباره خودت و تجربیاتت صحبت کنی. یه داستان خوب از پروژه ای که انجام دادی، مشکلی که حل کردی، یا مهارتی که یاد گرفتی، میتونه تأثیر زیادی روی مصاحبه کنندهها بذاره. تلاش کن که نشون بدی هم توی کدنویسی حرفه ای هستی و هم توی کار تیمی خوب عمل میکنی.
و آخرین توصیه ام اینه که از اشتباه کردن نترس! ممکنه توی یه مصاحبه بعضی سوالات رو بلد نباشی یا کامل نتونی بهشون جواب بدی. این کاملاً طبیعیه. مهم اینه که نشون بدی علاقه داری یاد بگیری و ذهنیت رشد داری.
اگر جواب سوالی رو نمیدونی، میتونی بگی: “این رو کامل نمیدونم، اما اینطور بهش فکر میکنم” یا “خوشحال میشم که بعداً در موردش تحقیق کنم”.
امیدوارم این نکات بهت کمک کنه که با آمادگی بیشتری توی مصاحبههای فرانتاند حاضر بشی و با اعتماد به نفس بیشتری خودت رو نشون بدی.
نکته مهم!
تو این مقاله سوالات مصاحبه فِرانت اِند رو بررسی کردیم که همه موارد آن عمومی بودن ( html , css , js )
اگه React Developer هستید پیشنهاد میکنم سوالات مصاحبه ری اکت رو هم مطالعه کنید.
اگه Vue Developer هستید پیشنهاد میکنم سوالات مصاحبه Vue.js رو هم مطالعه کنید.
اگه Angular Developer هستید پیشنهاد میکنم سوالات مصاحبه Angular رو هم مطالعه کنید.
دیدگاهتان را بنویسید