API
چیه و چرا باید یادش بگیری؟ 🌐

اگه فرانت‌اند کار می‌کنی و هنوز API رو خوب نفهمیدی، هیچی دیگه!

API
در واقع یه پل ارتباطیه بین سایت و سرور.

مثلاً وقتی اینستاگرام رو باز می‌کنی، عکس‌ها و پست‌ها از قبل داخل برنامه نیستن. برنامه یه درخواست (Request) به سرور می‌فرسته، سرور هم اطلاعات رو برمی‌گردونه (Response) و تو اون‌ها رو می‌بینی.

تقریباً هر چیزی که توی سایت می‌بینی، از API میاد:

✅ لیست محصولات فروشگاه
✅ اطلاعات کاربر
✅ پست‌های وبلاگ
✅ قیمت ارز و طلا
✅ وضعیت آب‌وهوا

اگه API رو یاد بگیری، می‌تونی سایت‌هایی بسازی که اطلاعاتشون همیشه به‌روز باشه، نه فقط چند تا متن و عکس ثابت!

#API #Frontend #JavaScript #React

REST API
یه استاندارد برای ارتباط بین فرانت‌اند و بک‌اند هست.

وقتی React یا هر فرانت‌اند دیگه‌ای اطلاعاتی مثل محصولات یا اطلاعات کاربر رو می‌خواد، معمولاً از طریق REST API درخواست می‌فرسته و جواب می‌گیره.

💾 LocalStorage
چیه؟

اگه بخوای یه سری اطلاعات رو داخل مرورگر کاربر ذخیره کنی تا حتی بعد از بستن تب یا مرورگر هم باقی بمونن، LocalStorage بهترین گزینه است.

مثلاً می‌تونی این موارد رو داخلش نگه داری:

✅ تنظیمات سایت (مثل حالت تاریک)
✅ زبان انتخابی کاربر
✅ اطلاعات غیرحساس

چند دستور پرکاربرد:

// ذخیره
localStorage.setItem("name", "Ali");

// دریافت
localStorage.getItem("name");

// حذف یک مقدار
localStorage.removeItem("name");

// پاک کردن همه
localStorage.clear();

⚠️ نکته مهم:

LocalStorage
جای مناسبی برای ذخیره اطلاعات حساس مثل رمز عبور یا JWT نیست؛ چون هر اسکریپتی که روی صفحه اجرا شود، می‌تواند به آن دسترسی داشته باشد.

#JavaScript #LocalStorage #Frontend #WebDevelopment

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

JWT
یه توکنه که بعد از ورود موفق، سرور بهت می‌ده. از اون به بعد هر درخواستی به سرور می‌فرستی، همین توکن رو هم همراهش می‌فرستی تا سرور بفهمه خودتی.

JWT
از ۳ بخش تشکیل شده:

🔹 Header: نوع توکن و الگوریتم امضا
🔹 Payload: اطلاعاتی مثل شناسه کاربر و زمان انقضا
🔹 Signature: مطمئن می‌کنه توکن دستکاری نشده.

⚠️ فقط یادت باشه اطلاعات داخل Payload رمزگذاری نشده؛ فقط Encode شده، پس اطلاعات حساس داخلش نذار.

#JWT #Backend #API #Security

دستیار هوشمند طراحان UI/UX

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

سایت فیگما

@codelines_ir

بهترین فونت‌های فارسی برای سایت

Vazirmatn
Estedad
Shabnam
IranYekanX
Sahel
Dana

Spread Operator

ادغام دو آرایه



const a=[1,2]

const b=[3,4]

const result=[...a,...b]



خروجی



[1,2,3,4]

Nullish Coalescing (??)

فرض کن مقدار صفر هم معتبره.



const count = 0

console.log(count || 10)


خروجی

10

اما



console.log(count ?? 10)



خروجی

0

📌 وقتی فقط null یا undefined باید مقدار پیش‌فرض بگیرن، از ?? استفاده کن.