معرفی پکیج dotenv
کاربرد:
مدیریت متغیرهای محیطی (Environment Variables) در پروژهها
به جای اینکه اطلاعات حساس رو مستقیم توی کد بنویسی، میریزی داخل فایل .env
بعد از نصب یه فایل با اسم .env میسازیم.
متغیرهای مورد نیاز رو به این صورت قرار میدیم:
و توی کد هم به این صورت قابل استفاده هست.
مزایا:
– کمک به جداسازی کد از اطلاعات حساس
– بسیار مناسب برای توسعه امن در Node.js و حتی React
– از CI/CD تا پروژههای لوکال، همیشه مفیده!
صفحه npm پکیج
@JavascriptIR
کاربرد:
مدیریت متغیرهای محیطی (Environment Variables) در پروژهها
به جای اینکه اطلاعات حساس رو مستقیم توی کد بنویسی، میریزی داخل فایل .env
yarn add dotenv
بعد از نصب یه فایل با اسم .env میسازیم.
متغیرهای مورد نیاز رو به این صورت قرار میدیم:
API_KEY=123456
PORT=3000
و توی کد هم به این صورت قابل استفاده هست.
import dotenv from 'dotenv';
dotenv.config();
console.log(process.env.API_KEY); // 123456
مزایا:
– کمک به جداسازی کد از اطلاعات حساس
– بسیار مناسب برای توسعه امن در Node.js و حتی React
– از CI/CD تا پروژههای لوکال، همیشه مفیده!
صفحه npm پکیج
@JavascriptIR
👍4
تو پروژه جدیدم مجبور شدم فرانت هم بزنم…
منی که همیشه پشت سر کدای بکاند قایم میشدم، حالا دارم میرم سراغ UI 😅
برای همین شروع کردم به یاد گرفتن Tailwind —
و راستش؟ بر خلاف چیزی که فکر میکردم، خیلی راحت و دوستداشتنیه!
سرعتم هنوز کنده، ولی هرچی بیشتر باهاش کار میکنم، بیشتر خوشم میاد.
هیچوقت فکر نمیکردم ساختن یه UI تمیز بدون یه خط CSS اینقدر کیف بده!
منی که همیشه پشت سر کدای بکاند قایم میشدم، حالا دارم میرم سراغ UI 😅
برای همین شروع کردم به یاد گرفتن Tailwind —
و راستش؟ بر خلاف چیزی که فکر میکردم، خیلی راحت و دوستداشتنیه!
سرعتم هنوز کنده، ولی هرچی بیشتر باهاش کار میکنم، بیشتر خوشم میاد.
هیچوقت فکر نمیکردم ساختن یه UI تمیز بدون یه خط CSS اینقدر کیف بده!
🔥4👍1
دو سال پیش روی یه پروژه کار میکردم که نیاز بود از WebSocket استفاده کنم. همه چیز خوب بود تا وقتی که برنامه رو با کلاستر ران کردم. چندتا worker کنار هم.
اما یه مشکل عجیب پیش اومد:
سوکتآیدیها هر کدوم فقط روی همون worker بودن، و workerها همدیگه رو نمیدیدن!
یعنی پیامها یا eventها بین سوکتها درست رد و بدل نمیشدن. البته اینو بعدا متوجه شدم.
یه عالمه سرچ و سوال تو استک اورفلو زدم، فهمیدم مشکل اینه که هر worker یه فضای مجزاست و خودش فقط سوکتهای داخل خودش رو میشناسه.
راهحل چیه؟
باید از یه سرویس third party مثل Redis یا یه message broker استفاده کنیم که سوکتآیدیها رو ذخیره کنه و workerها بتونن به هم دسترسی داشته باشن.
بعد از پیادهسازی این روش، مشکل حل شد و همه سوکتها مثل یه تیم هماهنگ کار کردن.
نتیجه اینکه وقتی Node.js رو کلاستر میکنیم، باید حواسمون باشه سوکتها رو نمیتونیم فقط داخل یه worker مدیریت کنیم.
باید یه راهکار مرکزی برای هماهنگی سوکتها داشته باشیم، وگرنه real-time تبدیل میشه به real-confuse! 😅
اما یه مشکل عجیب پیش اومد:
سوکتآیدیها هر کدوم فقط روی همون worker بودن، و workerها همدیگه رو نمیدیدن!
یعنی پیامها یا eventها بین سوکتها درست رد و بدل نمیشدن. البته اینو بعدا متوجه شدم.
یه عالمه سرچ و سوال تو استک اورفلو زدم، فهمیدم مشکل اینه که هر worker یه فضای مجزاست و خودش فقط سوکتهای داخل خودش رو میشناسه.
راهحل چیه؟
باید از یه سرویس third party مثل Redis یا یه message broker استفاده کنیم که سوکتآیدیها رو ذخیره کنه و workerها بتونن به هم دسترسی داشته باشن.
بعد از پیادهسازی این روش، مشکل حل شد و همه سوکتها مثل یه تیم هماهنگ کار کردن.
نتیجه اینکه وقتی Node.js رو کلاستر میکنیم، باید حواسمون باشه سوکتها رو نمیتونیم فقط داخل یه worker مدیریت کنیم.
باید یه راهکار مرکزی برای هماهنگی سوکتها داشته باشیم، وگرنه real-time تبدیل میشه به real-confuse! 😅
👍3
تفاوت await داخل for, forEach
ممکنه فکر کنی اینا فرقی ندارن، ولی تفاوتشون میتونه باعث کلی باگ بشه!
❌ اشتباه رایج:
اشکال:
چون forEach نمیتونه await رو درست هندل کنه!
کد بالا تموم میشه قبل از اینکه همه awaitها کامل اجرا شن.
✅ روش درست:
مزیت:
– منتظر میمونه هر await کامل بشه
– ترتیب اجرا حفظ میشه
– بدون باگ، بدون سورپرایز
ممکنه فکر کنی اینا فرقی ندارن، ولی تفاوتشون میتونه باعث کلی باگ بشه!
❌ اشتباه رایج:
[1, 2, 3].forEach(async (num) => {
await doSomething(num);
});
اشکال:
چون forEach نمیتونه await رو درست هندل کنه!
کد بالا تموم میشه قبل از اینکه همه awaitها کامل اجرا شن.
✅ روش درست:
for (const num of [1, 2, 3]) {
await doSomething(num);
}مزیت:
– منتظر میمونه هر await کامل بشه
– ترتیب اجرا حفظ میشه
– بدون باگ، بدون سورپرایز
👍2
نکته برای دولوپرهای تازهکار
اگر در ابتدای مسیر برنامهنویسی هستی، یک تغییر ساده در طرز فکر میتونه تأثیر بزرگی داشته باشه:
به جای اینکه فقط کدی بنویسی که “کار کنه”،
سعی کن کدی بنویسی که بتونی در یک بازبینی فنی (code review) ازش دفاع کنی.
این یعنی شروع مسیر تبدیل شدن به یک توسعهدهندهی حرفهای.
اگر در ابتدای مسیر برنامهنویسی هستی، یک تغییر ساده در طرز فکر میتونه تأثیر بزرگی داشته باشه:
به جای اینکه فقط کدی بنویسی که “کار کنه”،
سعی کن کدی بنویسی که بتونی در یک بازبینی فنی (code review) ازش دفاع کنی.
این یعنی شروع مسیر تبدیل شدن به یک توسعهدهندهی حرفهای.
👍7🔥2
متغیرهایی که با let تعریف میکنیم، به Scope وابسته هستن
خیلیها فکر میکنن let فقط یه نسخه مدرنتر از var ـه، ولی فرق مهمی دارن:
برخلاف var که function-scoped هست،
let (و همینطور const) block-scoped هستن.
یعنی فقط داخل بلاک {} قابل دسترس هستن.
وقتی از let استفاده میکنیم، باید مطمئن باشیم که میفهمیم متغیرت توی چه محدودهای استفاده میشه!
این باعث جلوگیری از باگهای پنهان و رفتارهای غیرقابلپیشبینی میشه.
خیلیها فکر میکنن let فقط یه نسخه مدرنتر از var ـه، ولی فرق مهمی دارن:
if (true) {
let x = 10;
}
console.log(x); // ReferenceErrorبرخلاف var که function-scoped هست،
let (و همینطور const) block-scoped هستن.
یعنی فقط داخل بلاک {} قابل دسترس هستن.
وقتی از let استفاده میکنیم، باید مطمئن باشیم که میفهمیم متغیرت توی چه محدودهای استفاده میشه!
این باعث جلوگیری از باگهای پنهان و رفتارهای غیرقابلپیشبینی میشه.
مقداردهی اولیه به پارامترهای توابع
در جاوااسکریپت میتونیم برای پارامترهای تابع، مقدار پیشفرض تعریف کنیم:
مزیت:
– کدمون تمیزتر و امنتر میشه
– نیازی به if (!name) برای چک کردن وجود مقدار نداریم
– مخصوصاً برای توابع عمومی یا فرمها خیلی مفیده
مقدار پیشفرض میتونه نتیجه یه تابع هم باشه:
در جاوااسکریپت میتونیم برای پارامترهای تابع، مقدار پیشفرض تعریف کنیم:
function greet(name = "مهمان") {
console.log("سلام " + name);
}
greet(); // سلام مهمان
greet("علی"); // سلام علیمزیت:
– کدمون تمیزتر و امنتر میشه
– نیازی به if (!name) برای چک کردن وجود مقدار نداریم
– مخصوصاً برای توابع عمومی یا فرمها خیلی مفیده
مقدار پیشفرض میتونه نتیجه یه تابع هم باشه:
function generateID() {
return Math.random().toString(36).slice(2);
}
function createUser(id = generateID()) {
console.log("User ID:", id);
}👍1 1
تفاوت بین توابع عادی و توابع arrow (Arrow Functions)
در نگاه اول، تفاوت این دو فقط توی نحوه نوشتنه. ولی در واقع تفاوتهای مهمتری وجود داره که روی رفتار کد تأثیر میذاره:
1. مقدار this
• تابع عادی:
this به کانتکست فراخوانی وابستهست.
• تابع arrow:
this رو از محیط بیرونی به ارث میبره (Lexical this).
2. سازنده (Constructor)
• توابع عادی میتونن با new استفاده بشن.
• توابع arrow نمیتونن constructor باشن.
3. آرگومانها (arguments)
• توابع عادی به arguments دسترسی دارن.
• توابع arrow ندارن.
4. کاربرد مناسب؟
وقتی از تابع عادی استفاده میکنیم:
– به this یا arguments نیاز داریم
– قراره تابع رو به عنوان constructor استفاده کنیم
وقتی از تابع arrow استفاده میکنیم:
– دنبال کد تمیزتر و کوتاهتری هستیم
– نمیخوایم this تغییر کنه (مثلاً توی callback یا event handler)
در کل اینکه هر دو مفیدن. ولی انتخاب درست باعث میشه که کد هم درستتر کار کنه، هم خواناتر باشه.
در نگاه اول، تفاوت این دو فقط توی نحوه نوشتنه. ولی در واقع تفاوتهای مهمتری وجود داره که روی رفتار کد تأثیر میذاره:
1. مقدار this
• تابع عادی:
this به کانتکست فراخوانی وابستهست.
function sayHi() {
console.log(this);
}• تابع arrow:
this رو از محیط بیرونی به ارث میبره (Lexical this).
const sayHi = () => {
console.log(this);
}2. سازنده (Constructor)
• توابع عادی میتونن با new استفاده بشن.
• توابع arrow نمیتونن constructor باشن.
function Person() {} // مجاز
const Person = () => {} // خطا3. آرگومانها (arguments)
• توابع عادی به arguments دسترسی دارن.
• توابع arrow ندارن.
4. کاربرد مناسب؟
وقتی از تابع عادی استفاده میکنیم:
– به this یا arguments نیاز داریم
– قراره تابع رو به عنوان constructor استفاده کنیم
وقتی از تابع arrow استفاده میکنیم:
– دنبال کد تمیزتر و کوتاهتری هستیم
– نمیخوایم this تغییر کنه (مثلاً توی callback یا event handler)
در کل اینکه هر دو مفیدن. ولی انتخاب درست باعث میشه که کد هم درستتر کار کنه، هم خواناتر باشه.
MERN Stack چیه؟
MERN یکی از محبوبترین ترکیبهای تکنولوژی برای ساخت اپلیکیشنهای وب فولاستک هست.
این اسم از حروف اول ۴ تکنولوژی تشکیل شده:
M – MongoDB
پایگاهداده NoSQL
ساختار document-based
مناسب برای دادههای منعطف و مقیاسپذیر
E – Express.js
فریمورک سبک Node.js
برای ساخت سریع و سادهی API و بکاند
R – React.js
کتابخانه جاوااسکریپت برای ساخت رابط کاربری (Frontend)
کامپوننتمحور، سریع و بسیار محبوب
N – Node.js
موتور اجرای جاوااسکریپت در سمت سرور
اجازه میده با یک زبان (JS) هم فرانت و هم بکاند بنویسی
چرا MERN محبوبه؟
• همهچی با جاوااسکریپت نوشته میشه
• سریع، مدرن و انعطافپذیر
• جامعه کاربری بزرگ و منابع آموزشی زیاد
• مناسب برای ساخت MVP، داشبورد، اپلیکیشنهای SPA و RESTful API
MERN یکی از محبوبترین ترکیبهای تکنولوژی برای ساخت اپلیکیشنهای وب فولاستک هست.
این اسم از حروف اول ۴ تکنولوژی تشکیل شده:
M – MongoDB
پایگاهداده NoSQL
ساختار document-based
مناسب برای دادههای منعطف و مقیاسپذیر
E – Express.js
فریمورک سبک Node.js
برای ساخت سریع و سادهی API و بکاند
R – React.js
کتابخانه جاوااسکریپت برای ساخت رابط کاربری (Frontend)
کامپوننتمحور، سریع و بسیار محبوب
N – Node.js
موتور اجرای جاوااسکریپت در سمت سرور
اجازه میده با یک زبان (JS) هم فرانت و هم بکاند بنویسی
چرا MERN محبوبه؟
• همهچی با جاوااسکریپت نوشته میشه
• سریع، مدرن و انعطافپذیر
• جامعه کاربری بزرگ و منابع آموزشی زیاد
• مناسب برای ساخت MVP، داشبورد، اپلیکیشنهای SPA و RESTful API
👍3