آموزش برنامه نویسی فرانت اند
8.2K subscribers
328 photos
47 videos
26 files
113 links
👈🏻 ارتباط با من: @codelines_support 🔅

عرفان رضایی هستم ❤️
و اینجا خیلی ساده بهت یاد میدم
چطوری اصولی #برنامه_نویسی #فرانت_اند یاد بگیری 💻
که هم لذت ببری و هم وارد بازار کار بشی
😍🥇
@satisfaction_codelines 👈 نتایج و رضایت دوره

آدرس سایت 👈🏻: codelines.ir
Download Telegram
آموزش برنامه نویسی فرانت اند
REST API
یعنی چی ؟
REST API
یه استاندارد برای ارتباط بین فرانت‌اند و بک‌اند هست.


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

codelines.ir
4🔥1
💾 LocalStorage
چیه؟


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

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

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

چند دستور پرکاربرد:
// ذخیره
localStorage.setItem("name", "Ali");

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

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

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

⚠️ نکته مهم:

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

#JavaScript #LocalStorage #Frontend #WebDevelopment
4🔥1🙏1
توی مصاحبه های فنی لازم نیست همه جواب‌ها رو بدونی؛
مهم اینه که نشون بدی می‌تونی یاد بگیری و مسئله رو تحلیل کنی.
🔥31👌1
آموزش برنامه نویسی فرانت اند
کد 401 Unauthorized یعنی چی؟
جواب: گزینه B

وقتی توکن JWT اشتباه باشه یا اصلاً ارسال نشه، معمولاً سرور 401 برمی‌گردونه.
4
اگه تا حالا وارد یه سایت یا اپ شدی و دیگه لازم نبوده هر بار دوباره لاگین کنی، احتمال زیاد پشت صحنه از JWT استفاده شده.

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

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

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

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

#JWT #Backend #API #Security
4
گاهی فقط کافیه ادامه بدی؛ نتیجه خودش سروقتش میاد.
5
بیشتر APIها اطلاعات رو با چه فرمتی برمی‌گردونن؟
Anonymous Quiz
12%
XML
71%
JSON
14%
HTML
4%
PDF
دستیار هوشمند طراحان UI/UX

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

سایت فیگما

@codelines_ir
3
آموزش برنامه نویسی فرانت اند
بیشتر APIها اطلاعات رو با چه فرمتی برمی‌گردونن؟
جواب: گزینه C

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

Vazirmatn
Estedad
Shabnam
IranYekanX
Sahel
Dana
4
Spread Operator

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

const a=[1,2]

const b=[3,4]

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


خروجی

[1,2,3,4]
1🔥1
console.log(typeof NaN);
2
خروجی‌کد بالا چیه ؟
Anonymous Quiz
45%
NaN
19%
Undefined
19%
number
17%
object
🫡1
Nullish Coalescing (??)

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

const count = 0

console.log(count || 10)

خروجی

10

اما

console.log(count ?? 10)


خروجی

0

📌 وقتی فقط null یا undefined باید مقدار پیش‌فرض بگیرن، از ?? استفاده کن.
1🔥1
کد کمتر، خوانایی بیشتر.👆🏻
افزونه‌های ضروری VS Code

Prettier فرمت خودکار کد

ESLint پیدا کردن خطاها

GitLens

قدرت بیشتر برای Git

Error Lens نمایش خطا کنار کد

Auto Rename Tag

تغییر همزمان تگ‌های HTML

Thunder Client

تست API داخل VS Code