https://virgool.io/feed/@basil فرانت دولوپر(ری اکت) fa 2026-06-16 08:57:23 https://files.virgool.io/upload/users/2272602/avatar/NqVOIO.jpg?height=120&width=120 https://virgool.io/@basil https://virgool.io/@basil/%D9%85%D9%88%D9%86%D9%88%D8%B1%DB%8C%D9%BE%D9%88-%DB%8C%D8%A7-%D9%85%DB%8C%DA%A9%D8%B1%D9%88%D9%81%D8%B1%D8%A7%D9%86%D8%AA%DA%A9%D8%AF%D9%88%D9%85%D8%B4-%D8%A8%D9%87%D8%AA%D8%B1%D9%87-yclb8zfd7owt میکروفرانت اند و مونوریپو دو رویکرد متفاوت در معماری نرمافزار هستند که هر کدوم مزایا و معایبی دارند و با توجه به نوع پروژه و پیچیدگی و نوع نیازمون میتونیم ازشون استفاده کنیممیکروفرانت اند (Micro Frontend) چیه؟هر بخش از اپلیکیشن فرانت اند به صورت یک اپ مستقل ساخته میشه که میتونه با فریمورک یا فناوری مختلف توسعه داده بشه و این اپلیکیشنهای کوچک در یک صفحه واحد ترکیب میشنفرض کن میخوایم یک فروشگاه اینترنتی بسازیم و هر بخش از فروشگاه میتونه یک میکروفرانت مجزا باشه(عکس بالا):صفحه اصلی: یک React اپلیکیشنصفحه محصولات: یک Vue اپلیکیشنسبد خرید: یک Angular اپلیکیشنمثال کد (ساختار پایه): HTML<div id=&quotheader&quot></div> <div id=&quotproducts&quot></div> <div id=&quotcart&quot></div> <script src=&quotheader.js&quot> <script src=&quotproducts.js&quot> <script src=&quotcart.js&quot>هر فایل *.js یک میکروفرانت اند مجزا را بارگذاری میکند. این میکروفرانت اندها میتونن به صورت مجزا توسعه داده شده و مستقر شوند.حالا مزایای این کار چیه؟!مقیاسپذیری بالا:هر میکروفرانت اند میتونه به صورت مستقل مقیاس پذیر بشه،یعنی چی؟ به این معناست که میتونیم منابع بیشتری بهش اختصاص بدیم تا بتونه بار کاری بیشتری رو مدیریت کنه.و این باعث میشه تا بدون نیاز به تغییرات بزرگ در کل سیستم، فقط بخشهای خاصی را که نیاز به افزایش ظرفیت دارند، ارتقاء بدیم.توسعه مستقل:هر تیم میتونه روی بخش خاصی از پروژه تمرکز کنه و تغییرات رو بدون تأثیر بر سایر قسمت ها اعمال کنه و این باعث افزایش سرعت توسعه و کاهش وابستگیها بین تیمها میشه.فناوریهای مختلف: در هر میکروفرانت اند میشه از فناوریهای مختلفی استفاده کرد و این به تیمها اجازه میده تا از ابزارها و حتی زبانهای برنامه نویسی مختلفی که برای نیازهای خاص آنها مناسب تر است، استفاده کنند. به عنوان مثال، یک میکروفرانت اند میتواند با React ساخته بشه در حالی که دیگری از Angular استفاده میکند.قابلیت اطمینان بالاتر:خرابی یک میکروفرانت تأثیر کمی بر روی سایر میکروفرانت اندها داره این به این معناست که اگر یک بخش از سیستم دچار مشکل بشه، سایر بخشها همچنان به درستی کار میکنند. این ویژگی باعث افزایش قابلیت اطمینان و پایداری کلی سیستم میشود.معایب:پیچیدگی بیشتر: مدیریت چندین میکروفرانتاند پیچیده تر از مدیریت یک اپلیکیشن فرانت اند یکپارچه است.ارتباطات بین میکروفرانت ها: ارتباطات بین میکروفرانتاندها نیاز به دقت بیشتری دارد.همچنین میکروفرانت ممکنه کانفیگ اولیه دشوار و پیچیده ای داشته باشه مونوریپو (Monorepo)فرض کنید یک شرکت نرم افزاری دارای یک وبسایت، یک اپلیکیشن موبایل،یک اپلیکیشن تجاری و کامپوننتهای UI مشترک است. در روش Monorepo، میخوایم یک کتابخانه UI بسازیم که بتونیم در هر پروژه استفاده کنیم و از تکرار کد جلوگیری کنیم. در این حالت، همه کامپوننتهای UI در یک مونوریپو قرار میگیرند.my-ui-library/ ├── package.json ├── components/ │ ├── Button.js │ ├── Input.js │ └── ... ├── utils/ │ ├── formatDate.js │ └── ... └── ...مثال کد (package.json):JSON{ &quotname&quot: &quotmy-ui-library&quot, &quotversion&quot: &quot1.0.0&quot, &quotprivate&quot: true, &quotworkspaces&quot: [ &quotcomponents/*&quot, &quotutils/*&quot ] }در این مثال، workspaces به Yarn یا npm میگه که این پروژه چندتا پکیج داخلی داره که هرکدوم میتونه وابستگی خودش رو داشته باشه( هر workspace باید فایل package.json داشته باشه تا اطلاعات مربوط به پکیج را دارا باشه)مزایا:با وجود مونوریپو، تیمها میتونن کتابخانه ها و کدهای مشترک را به راحتی به اشتراک بذارند و از تکرار کد جلوگیری کنند. به زبان ساده تر میتونیم قسمت های مختلف UI رو بعنوان پکیج جدا پابلیش کنیم و در صورت نیاز کافیه پکیجی که شامل کامپوننت مورد نظر هست و حجمش هم خیلی کمتره رو نصب کنیم. همچنین مدیریت پروژه ها و سرعت توسعه بیشتر میشهمورد بعدی این هست که ورژن دپندنسی همه پروژه ها یکسانه و از ناسازگاری جلوگیری میشه.معایب:پیچیدگی بیشتر در مدیریت مخزن: با افزایش تعداد پروژهها، مدیریت مخزن پیچیدهتر میشود.ممکن است برای پروژههای بسیار بزرگ مناسب نباشد: برای پروژههای بسیار بزرگ، ممکن است مدیریت یک مخزن واحد دشوار باشد.نتیجه گیریاگر پروژه شما کوچک است و تیم توسعه شما کوچک است، مونوریپو میتواند گزینه مناسبی باشد. اما اگر پروژه شما بزرگ و پیچیده است و تیم شما بزرگ است و از تکنولوژی های مختلف استفاده میکنید و مقیاسپذیری بالا نیاز دارید میکروسرویسها میتوانند گزینه بهتری باشند.در برخی موارد، ترکیبی از مونوریپو و میکروسرویسها میتواند بهترین راه حل باشد. برای مثال، میتوان یک مونوریپو برای کدهای مشترک و یک میکروسرویس برای هر ویژگی خاص ایجاد کرد. Reihaneh dastres Reihaneh dastres Fri, 24 Jan 2025 19:32:43 +0330 https://virgool.io/@basil/%D9%85%D9%82%D8%A7%DB%8C%D8%B3%D9%87-%DB%8C-%D8%AF%D9%88-%D9%85%D8%AD%DB%8C%D8%B7-verdaccio-%D9%88-azure-artifact-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%BE%D8%A7%D8%A8%D9%84%DB%8C%D8%B4-%D9%BE%DA%A9%DB%8C%D8%AC-xevq6mttlbga ورداچیو چیه؟ورداچیو یک ابزار رایگان و منبع باز است که به شما کمک میکند تا یک مخزن خصوصی برای پکیجهای npm در کامپیوتر یا سرور خودتان داشته باشید. این بدان معناست که شما میتوانید پکیجهایی که خودتان یا تیمتان ساختهاید را ذخیره کنید و از آنها استفاده کنید بدون اینکه نیاز باشد آنها را در اینترنت منتشر کنید. همچنین، ورداچیو میتواند به عنوان یک واسط بین شما و مخازن عمومی npm عمل کند و پکیجهایی که از آنها استفاده میکنید را کش کند تا دفعات بعدی سریعتر بارگیری شوند. این کار به شما کمک میکند که سرعت کار با پکیجها را افزایش دهید و در عین حال کنترل بیشتری روی پکیجهای خود داشته باشید.اژور ارتیفکت چیه؟آژور آرتیفکت (Azure Artifacts) یکی از خدمات مایکروسافت آژور است که به شما امکان میدهد پکیجهای نرم افزاری را مدیریت، اشتراکگذاری و نشر دهید. این سرویس به تیمهای توسعهدهنده اجازه میدهد که پکیجهای NuGet، npm، Maven و Python را در محیط ابری ذخیره کنند و به صورت خصوصی یا عمومی به اشتراک بگذارند. آژور آرتیفکت به تیمها کمک میکند تا وابستگیهای نرم افزاری خود را بهتر مدیریت کنند و با استفاده از قابلیتهای ابری آژور، به راحتی و با امنیت بالا به این پکیجها دسترسی داشته باشند . این سرویس بخشی از اکوسیستم گستردهتر مایکروسافت آژور است که انواع مختلفی از خدمات ابری را ارائه میدهد نتیجه گیری اول:کلیت کار دوتاشون یکیه و میشه تو هردو پکیج پابلیش کرد اما هرکدوم مزایایی دارند که بولد کردممزایای اژور ارتیفکت در مقایسه با ورداچیوآژور آرتیفکت (Azure Artifacts) و ورداچیو (Verdaccio) هر دو ابزارهایی برای مدیریت پکیجهای نرم افزاری هستند، اما با توجه به ماهیت و قابلیتهای متفاوتی که دارند، مزایای مختلفی را ارائه میدهند. در اینجا مزایای کلیدی آژور آرتیفکت در مقایسه با ورداچیو را بررسی میکنیم:1. یکپارچگی با اکوسیستم آژور: آژور آرتیفکت به طور کامل با سایر خدمات مایکروسافت آژور یکپارچه شده است، از جمله آژور دیواپس و آژور پایپلاینها، که این امکان را فراهم میکند تا فرآیندهای توسعه و تحویل نرمافزار را بهبود ببخشد2. پشتیبانی از چندین فرمت پکیج: آژور آرتیفکت از فرمتهای مختلف پکیج مانند NuGet، npm، Maven، و Python پشتیبانی میکند، در حالی که ورداچیو تنها برای npm طراحی شده 3. امنیت و کنترل دسترسی پیشرفته: آژور آرتیفکت امکانات پیشرفتهتری برای کنترل دسترسی و امنیت پکیجها ارائه میدهد، که شامل سطوح دسترسی گستردهتر و امکانات امنیتی مانند تأیید هویت دو عاملی است4. ذخیرهسازی ابری مقیاس پذیر: با استفاده از زیرساختهای ابری آژور، آژور آرتیفکت ذخیرهسازی مقیاسپذیر و قابل اعتمادی را برای پکیجها فراهم میکند5. بهبود فرآیندهای CI/CD: آژور آرتیفکت به تیمها کمک میکند تا فرآیندهای توسعه مداوم (CI) و تحویل مداوم (CD) را با استفاده از آرتیفکتها بهبود ببخشند6. کاهش وابستگی به مخازن خارجی: با ایجاد مخزن خصوصی در آژور آرتیفکت، وابستگی به مخازن عمومی کاهش مییابد و امکان مدیریت بهتر وابستگیهای نرمافزاری فراهم میشود7. سهولت در مدیریت وابستگیها: آژور آرتیفکت ابزارهای مدیریت پکیج را ارائه میدهد که مدیریت وابستگیهای پروژه را آسانتر میکند و تیمها میتوانند تمام پکیجها و کتابخانههای مورد نیاز خود را در یک مکان واحد ذخیره و مدیریت کنند8. قابلیت مقیاسپذیری: آژور آرتیفکت امکان افزایش یا کاهش منابع بر اساس نیازهای پروژه را فراهم میکند، که این امر در ورداچیو به همین اندازه آسان نیستمزایای ورداچیو:1. رایگان و منبع باز: ورداچیو به صورت رایگان در دسترس است و به دلیل منبع باز بودن، امکان شخصیسازی و توسعه آن وجود دارد.2. ایجاد مخزن خصوصی: امکان ذخیره پکیجهای npm در یک محیط خصوصی و کنترل شده.3. کش کردن پکیجها: کش کردن پکیجهای دانلود شده از مخازن عمومی برای دسترسی سریعتر در آینده.4. کنترل دسترسی: تعیین دسترسیهای کاربری برای مدیریت بهتر پکیجها.5. سهولت در نصب و راهاندازی: نصب و پیکربندی آسان ورداچیو.6. سازگاری با کلاینتهای npm: پشتیبانی از کلاینتهای مختلف npm مانند yarn و npm.7. پشتیبانی از پلاگینهای ذخیرهسازی: امکان استفاده از پلاگینهای مختلف برای ذخیرهسازی پکیجها.8. مدیریت وابستگیها: مدیریت آسان وابستگیهای پروژههای نرمافزاری.9. امنیت بالا: امکان تنظیم سطوح امنیتی برای دسترسی به پکیجها.10. پشتیبانی از پروکسی: قابلیت عملکرد به عنوان پروکسی برای مخازن دیگر.مزایای آژور ارتیفکت:1. یکپارچگی با اکوسیستم آژور: آژور آرتیفکت به راحتی با سایر خدمات آژور مانند آژور دیواپس و آژور پایپلاینها یکپارچه میشود2. مدیریت مرکزی: امکان مدیریت مرکزی پکیجهای NuGet، npm، Maven، و Python در یک محیط ابری3. امنیت و کنترل دسترسی: تنظیم سطوح دسترسی و امنیت بالا برای پکیجها و وابستگیهای نرمافزاری4. قابلیت اشتراکگذاری: اشتراکگذاری آسان پکیجها با اعضای تیم یا سازمانهای دیگر.5. پشتیبانی از چندین فرمت پکیج: پشتیبانی از فرمتهای مختلف پکیج مانند NuGet، npm، Maven، 6. ذخیرهسازی ابری: استفاده از زیرساختهای ابری آژور برای ذخیرهسازی مطمئن و مقیاسپذیر7. بهبود فرآیندهای CI/CD: تسهیل فرآیندهای توسعه مداوم و تحویل مداوم با استفاده از آرتیفکتها8. کاهش وابستگی به مخازن خارجی: کاهش وابستگی به مخازن عمومی با ایجاد مخزن خصوصی9. سهولت در مدیریت وابستگیها: مدیریت آسانتر وابستگیهای پروژه با استفاده از ابزارهای مدیریت پکیج10. قابلیت مقیاسپذیری: امکان افزایش یا کاهش منابع بر اساس نیازهای پروژهمعایب اژور ارتیفکت در مقایسه با ورداچیو1. هزینه: آژور آرتیفکت به عنوان یک سرویس ابری مایکروسافت، ممکن است هزینههای اضافی داشته باشد، در حالی که ورداچیو به صورت رایگان و منبع باز است.2. پیچیدگی: آژور آرتیفکت ممکن است به دلیل یکپارچگی با اکوسیستم گستردهتر آژور، پیچیدهتر از ورداچیو باشد که ممکن است برای کاربران جدید یا کوچکتر چالشبرانگیز باشد.3. وابستگی به اکوسیستم آژور: استفاده از آژور آرتیفکت ممکن است سازمانها را به اکوسیستم آژور وابسته کند، که ممکن است برای سازمانهایی که به دنبال استقلال از یک اکوسیستم خاص هستند، محدودکننده باشد.4. نیاز به اینترنت پایدار: به دلیل ماهیت ابری آژور آرتیفکت، نیاز به اتصال اینترنتی قابل اعتماد و پایدار است، که ممکن است در برخی موقعیتها چالشبرانگیز باشد.5. محدودیتهای مربوط به مجوز: برخی از قابلیتهای آژور آرتیفکت ممکن است به مجوزهای خاصی نیاز داشته باشند که ممکن است هزینههای اضافی را به همراه داشته باشد.چالش هایی که ممکن است در هنگام کار با ورداچیو با ان روبه رو بشیم1. پیکربندی اولیه: نصب و راهاندازی اولیه ورداچیو ممکن است برای کاربرانی که با مفاهیم مربوط به مخازن خصوصی npm آشنایی ندارند، دشوار باشد. این شامل تنظیم فایلهای پیکربندی و اطمینان از امنیت دسترسیها است.2. خطاهای اتصال Uplink: خطاهای "uplink is offline" میتواند نشاندهنده مشکلاتی در اتصال به مخازن بالادستی باشد. این میتواند به دلیل مشکلات شبکه، تنظیمات نادرست ورداچیو، یا مشکلات سرور بالادستی رخ دهد.3. مدیریت امنیت: اگرچه ورداچیو امکانات امنیتی ارائه میدهد، اما ممکن است به اندازه سیستمهای تجاری مانند آژور آرتیفکت پیشرفته نباشد. این شامل مدیریت دسترسیها و احراز هویت کاربران است.4. مقیاسپذیری: ورداچیو برای استفاده در مقیاسهای کوچکتر و تیمهای کمتر پیچیده طراحی شده است. بنابراین، ممکن است در مقیاسهای بزرگتر و با تعداد درخواستهای زیاد، کارایی لازم را نداشته باشد.5. پشتیبانی و بهروزرسانی: به دلیل ماهیت منبع باز ورداچیو، پشتیبانی و بهروزرسانیها ممکن است به اندازه راه حل های تجاری سریع و جامع نباشد. این میتواند در زمانهایی که با مشکلات فنی روبرو میشوید، چالشبرانگیز باشد.6. وابستگی به جامعه: توسعه ورداچیو به جامعه کاربران و توسعهدهندگان آن وابسته است. این میتواند به معنای منابع کمتر برای توسعه و پشتیبانی نسبت به محصولات تجاری باشد.7. امکانات محدود: ورداچیو ممکن است امکانات پیشرفتهای مانند تجزیه و تحلیل وابستگیها یا امنیت لایهای که در برخی از راهحلهای تجاری وجود دارد را نداشته باشد.چالش هایی که ممکن است در هنگام کار با آژور ارتیفکت با ان روبه رو بشیم 1. پیچیدگی: آژور آرتیفکت ممکن است به دلیل یکپارچگی با اکوسیستم گستردهتر آژور، پیچیدهتر از سایر سیستمها باشد. این میتواند شامل یادگیری نحوه استفاده از ویژگیهای مختلف و تنظیمات پیچیده باشد.2. هزینهها: استفاده از آژور آرتیفکت ممکن است هزینههای اضافی را به همراه داشته باشد، به ویژه اگر منابع به درستی مدیریت نشوند.3. وابستگی به اکوسیستم آژور: استفاده از آژور آرتیفکت ممکن است سازمانها را به اکوسیستم آژور وابسته کند، که ممکن است برای سازمانهایی که به دنبال استقلال از یک اکوسیستم خاص هستند، محدودکننده باشد.4. نیاز به اینترنت پایدار: به دلیل ماهیت ابری آژور آرتیفکت، نیاز به اتصال اینترنتی قابل اعتماد و پایدار است، که ممکن است در برخی موقعیتها چالشبرانگیز باشد.5. محدودیتهای مربوط به مجوز: برخی از قابلیتهای آژور آرتیفکت ممکن است به مجوزهای خاصی نیاز داشته باشند که ممکن است هزینههای اضافی را به همراه داشته باشد.6. مدیریت و نگهداری: مدیریت و نگهداری آرتیفکتها در محیط ابری ممکن است نیاز به تخصصهای خاص و دانش فنی بیشتری داشته باشد.7. تغییرات و بهروزرسانیها: آژور به طور مداوم در حال توسعه و بهروزرسانی است، که ممکن است نیاز به دنبال کردن تغییرات و آپدیتهای جدید باشد تا از قابلیتهای جدید بهرهمند شوید. Reihaneh dastres Reihaneh dastres Mon, 01 Jul 2024 08:55:32 +0330 https://virgool.io/@basil/%D9%87%D8%B1-%D8%A2%D9%86%DA%86%D9%87-%DA%A9%D9%87-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%AF%D8%B1-typescript-%DB%8C%D8%A7%D8%AF%D8%A8%DA%AF%DB%8C%D8%B1%DB%8C%D8%AF-lxv4mvt44knu تایپ اسکریپت چیه و چرا اینقدر تایپ اسکریپت اهمیت داره؟تایپ اسکریپت یک زبان برنامه نویسیه و بعنوان یک ابرمجموعه جاوااسکریپت معرفی میشه (یعنی جی اسه با ویژگی های بیشتر ) و هدف اصلیش بهبود بهره وری در هنگام توسعه برنامه های کاربردی پیچیده است.TypeScript مزایای بیشتری نسبت به جاوا اسکریپت داره که این ویژگیها میتوانند منجر به باگهای کمتر، بهبود کیفیت کد، پشتیبانی بهتر از IDE و افزایش بهرهوری توسعهدهنده شوند، به خصوص در پروژههای بزرگتر با پایگاههای کد پیچیده. که در ادامه با این مزایا بیشتر اشنا میشیممقایسه proptype جاوااسکریپت و تایپ اسکریپت ؟پراپ تایپ:اگه بخوام ساده بگم پراپ تایپ فقط برای کامپوننت هست اما توابع دیگه ای مثل fetch کردن دیتا و validation و event handler و ... رو بررسی نمیکنهعلاوه بر این فقط در زمان ران تایم هست یعنی اگه بخوای ببینی تو پروژه همه پراپ هاش درسته باید اجراش کنی و تک تک کامپوننت هارو رندر کنی و کنسول رو چک کنی که ایا خطا داده یا نه.تایپ اسکریپت:تایپ استاتیک اختیاریجاوا اسکریپت یک زبان با تایپ پویاست یعنی میتونی تایپ یک متغیر رو الان استرینگ قرار بدی و دو خط بعد بولین کنیش و این آزادی تایپ پویا معمولاً منجر به باگ میشه اما تایپ اسکریپت اومده تا این مشکل رو حل کنه.همچنین کامپایلر تایپ اسکریپت خطاهای احتمالی کد رو شناسایی میکنه و میتونه حدودا 15٪ از اشکالات جاوا اسکریپت را شناسایی کنه.مثال:تو جاوااسکریپت تایپ داینامیک هست و میتونی به هر چیزی تغییرش بدیlet number = 10 number = 'a'تا اینجاش همه چیز اوکیه ولی وقتی کد زیر اجرا میشه برنامه کرش میکنهMath.round(number)پشتیبانی IDEتقریباً در هر ویرایشگر کد می توانید کد TypeScript را بنویسید و فعال کردن IDEها برای داشتن محیط غنیتر برای تشخیص خطاهای رایج در حین تایپ کد باعث افزایش امنیت پروژه میشه و استفاده از این زبان در پروژه ی جاوااسکریپت باعث میشه تا نرم افزار قوی تری ارائه کنید شی گراییاین برنامه از مفاهیم برنامه نویسی شی گرا (classes, inheritance, abstraction, interfaces) پشتیبانی می کنه و کدتون رو مقیاس پذیر تر میکنه و هرچی پروژه پیچیده تر باشه این مزیت آشکار تر میشه.پشتیبانی جامعهشاید برای شما هم هنگام توسعه ی پروژه جاوااسکریپت پیش اومده باشه که یک فایل رو تغییر بدید و تغییراتتون روی رفتار فایل های دیگه هم تاثیر بذاره و کلی از وقتتونو بگیره جاوااسکریپت میتونه احتمال بوجود اومدن این خطا رو کم کنه.علاوه بر این اعتبار سنجی تایپ اسکریپت بهتر از جاوااسکریپت عمل میکنه و درنهایت باعث میشه شما بعنوان دولوپر نسبت به کدتون اطمینان بیشتری داشته باشید و زمان بیشتری رو صرفه جویی کنید و همچنین همکاری بهتری رو بین تیم ها و درون تیم ها فراهم میکنهdata types:number:let age: number = 30;string:let name: string = 'John';boolean:let isDeveloper: boolean = true;در کد بالا name استرینگ , age نامبر و isDeveloper همیشه بولین است و اگر بخواهیم مقداری از نوع دیگری را به این متغیرها اختصاص دهیم، TypeScript به ما خطا می دهد.Any:let dataAny: any = 'Hello';تایپ any یعنی متغیر هرمقداری رو میتونه قبول کنه و دقیقا مشخص نیست تایپش چیههرموقع خواستی از این تایپ استفاده کنی کلا سیستمت رو خاموش کن و فردا دوباره روش فکر کنیدvoid:function sayHello() : void { console.log('Hello') }این تایپ زمانی استفاده میشه که فانکشنمون چیزی رو ریترن نمیکنهArrays:let list1: number[] = [1, 2, 3]; let list2: [number, string, boolean] = [1, 'basil', true]برای تعریف تایپ ارایه ها نوع تایپ رو با [] تعریف میکنیم.اگه تایپ رو مثل list2 تعریف کنیم ترتیب و تعداد مهم میشه مثلا برای متغیر list2 رو نمیتونی اینجوریش کنی: let list:[number, string, boolean] = [1, 'basil', true, true]Objects:let person: { name: string; age: number } = { name: 'John', age: 20 };برای تعریف تایپ ابجکت ها هم برای هر پراپرتی تایپ تعریف کنید.اگه مقدار تایپی رو در یک ابجکت readonly تعریف کنیم ولیوی اون متغیر فقط یک بار تعریف میشه و امکان تغییر دادنش نیست مثال:interface Person { readonly name: string; age: number; } let person: Person = { name: &quotAlice&quot, age: 30 }; // Trying to reassign a readonly property will result in a compilation error // person.name = &quotBob&quot // This will cause a compilation error // Regular properties can still be reassigned person.age = 31; console.log(person.name); // Output: Alice console.log(person.age); // Output: 31Enums:enum Size { Smal=1, Medium=2, Large=3 } let mySize:Size = Size.Medium; // output = 2این تایپ به راحتی این امکان رو به شما میده که مجموعه ای از مقادیر مرتبط رو تعریف کنید که به راحتی قابل ارجاع و استفاده در سراسر کد شما باشند.Interfacesinterface Person { name: string; age: number; } function displayPersonInfo(person: Person): void { console.log(`Name: ${person.name}, Age: ${person.age}`); }با استفاده از interface نوع تایپ هارو میشه داخل یک ابجکت تعریف کرد و چندین بار از اون ابجکت رو بعنوان تایپ ورودی استفاده کرد Type Aliasestype Age = number; type Info = { name: string; age: Age };عملکردش مثل interface هست با این تفاوت که interface حتما باید ابجکتی از تایپ ها باشه ولی این میتونه بصورت تکی و صرفا برای یک متغیر تعریف بشهUnion Types:let id : string | number; id = '123' // ok id = 123 // okبا استفاده از این تایپ میتونید چندتا تایپ برای یک متغیر تعریف کنید این برای زمانی مناسب هست که یک متغیر بتونه بطور قانونی چندین نوع تایپ داشته باشه و باعث مشکل نشهoptional property:function calculateTxt( income?:number ): void { ... }زمانی که مقدار یک پارامتر ریکوایرد نباشه (بتونه undefined هم باشه) هنگام تعریف تایپ اون متغیر از ? استفاده میکنیمIntersection Types:با استفاده از این تایپ شما میتونید چندین نوع تایپ رو تو یک تایپ ترکیب کنیدtype Employee = { name: string; }; type Manager = { department: string; }; type GeneralManager = Employee & Manager; let gm: GeneralManager = { name: 'John', department: 'Sales', }; در اینجا تایپ GeneralManager ترکیبی از Employee و Manager هست این به این معنی است که شامل ویژگی های هردو است.Type Guards:let id: string | number; if (typeof id === 'string') { id.toUpperCase(); // OK } else { id.toFixed(); // OK }تو مثال بالا تایپ id میتونه استرینگ یا عدد باشه اما با استفاده از شرط چک میکنیم اگه تایپش استرینگ بود مثل استرینگ باهاش رفتار میشه اگه عدد بود مثل عدد باهاش رفتار میشهGenerics:با استفاده از این تایپ میتونید کامپوننت ری یوزبل بسازید که نه فقط یک تایپ بلکه با تایپ های مختلف کار کنه function getArray<ItemType>(items: ItemType[]): ItemType[] { return new Array<ItemType>().concat(items); } let numArray = getArray<number>([1, 2, 3, 4]); let strArray = getArray<string>(['hello', 'world']); در مثال بالا فانکشن getArray ارایه ای از هرتایپی رو قبول میکنه(نه فقط ارایه ای از عدد و استرینگ) Functional Component:const Greeting: React.FC<string> = (name) : JSX.Element => { return <h1>Hello {name} , World!</h1>; };در اینجا با استفاده از React.FC یک فانکشنال کامپوننت تعریف کردیم که به تایپ اسکریپت داریم میفهمونیم که Greeting یک فانکشنال کامپوننته و تایپ ورودیش از نوع استرینگ هست و تایپ ریترن هم المنت هستحالا میشه فانکشن رو ی جور دیگه هم تعریف کرد:function calculateTxt( income?:number ):number{ return income } یا function calculateTxt({ income } : { income?:number }):number{ return income }در مثال بالا مقدار تایپ ورودی رو عدد قرار دادیم و بعد از پرانتز تایپ چیزی که ریترن میشه رو تعریف میکنیمFunctional Component with Props:type UserProps = { name: string; age: number; }; const User: React.FC<UserProps> = ({ name, age }) => { return ( <div> <p>Name: {name}</p> <p>Age: {age}</p> </div> ); };فانکشن user دوتا پراپ name و age داره و با استفاده از UseProps تایپ پراپ های ورودی رو مشخص کردیمUsing React Hooks:const Counter: React.FC = () => { const [count, setCount] = React.useState<number>(0); const increment = () => { setCount(count + 1); }; return ( <div> <p>Count: {count}</p> <button ={increment}>Increment</button> </div> ); };در کامپوننت بالا ما از هوک useState برای مدیریت استیت استفاده میکنیم و مقدار count رو نامبر تعریف کردیم.جمع بندی و Best Practices در تایپ اسکریپت:از type بیشتر از Interface در پراپ کامپوننت ها استفاده کنید:درحالی که دوتاشون قابل استفاده هستند ولی type با برخی از پترن های typescript و react سازگار تر است.از React.FC هنگام تعریف فانکشنال کامپوننت استفاده کنیددر صورت امکان از نوع «unknown» به جای «any» استفاده کنید: این جایگزین امنتر استتایپ ریترن را مشخص کنید:این شیوه خوانایی کد را بهبود می بخشد.سخن پایانیخوبه که به خطاهای تایپ اسکریپت به چشم کمک به برنامه نویسی نگاه کنید نه اینکه صرفا چطوری راه حل برای حذف خطا پیدا کنید، تایپ اسکریپت صد در صد به کدتون نظم میده و کمک میکنه اشتباهات رایجی که در جاوااسکریپت انجام میدادید و باعث خطا میشد رو ندید Reihaneh dastres Reihaneh dastres Thu, 13 Jun 2024 11:20:38 +0330 https://virgool.io/@basil/live-test-nurn12thpenj از سری چالش هایی که مدت طولانی درگیرش بودم لایو تست کردن پکیج قبل از نسخه گذاشتن روی محیط npm بود چون پروژه ها سنگین و زیاد بودن استفاده کردن از مونوریپو کار درستی نبود تصمیم گرفتم از npm link استفاده کنم اما مشکلی که وجود داشت با هر تغییر باید بیلد میگرفتم(چون اگه میخواستم لایو تغییرات بدم به پکیج ها ارور invalid hook) و این موضوع در طول کار انرژیمو میگرفت و بالاخره راه حلشو پیدا کردمnpm link چیه؟یک دستور در npm است که به شما امکان رو میده که پکیج‌های نرم‌افزاری خود را به صورت موقت در پروژه‌های دیگه لینک کنید. با استفاده از این دستور، شما میتونید تغییراتی که در یک پکیج ایجاد می‌کنید را در پروژه‌های دیگری که به آن لینک شده‌اند مشاهده کنید، بدون اینکه نیاز به هر بار منتشر کردن و نصب مجدد پکیج داشته باشید.به عبارت دیگر، با استفاده از npm link می‌توانید پکیجی که در حال توسعه آن هستید رو به صورت لینک شده در یک پروژه دیگه استفاده کنید و تغییراتی که در آن انجام میدید بلافاصله در پروژه‌های مربوطه قابل مشاهده باشه. این بسیار مفید است زمانی که شما برای توسعه چندین پروژه همزمان نیاز به استفاده از یک پکیج مشترک دارید.مقدمات و کانفیگ ها:برای تست پکیج با npm link باید دو نکته رو رعایت کنیداول اینکه پکیج نباید تو پروژه نصب باشهو دومین مورد اینکه باید این قسمت از پکیج جیسان پکیج رو به اینصورت تغییر بدیدپکیج جیسان قبل پکیج جیسان بعد اگه دقت کنید میبینید که بجای ./dist/packageName.es.js ، این ./src/index.jsx قرار گرفتهابنجوری داریم بهش میفهمونیم معیار ما تغییرات فایل ایندکسمونه نه تغییرات بیلدمنظور از packageName اسم پکیج لوکالمون هستسوم اینکه تو vite.config پروژه ی اصلی با این کد بهش بفهمون از ری اکت خود پروژه استفاده کنه نه ری اکت پکیجimport path from &quotpath&quotresolve: { alias: { react: path.resolve(__dirname, &quot./node_modules/react&quot), }, }, من از ویت استفاده میکنم اگه شما از وبپک استفاده میکنید باید مسیر ری اکت رو از نودماژول میخونه رو توش تعریف کنینحوه ی استفاده1.در پکیج این دستور رو اجرا کنیدnpm link2.در پروژه دستور زیر را اجرا کنیدnpm link packageNameمنظور از packageName اسم پکیج لوکالمون هستحالا هر تغییری که ایجاد کنید بدون نیاز به اجرا کردن کامندی و بصورت لایو اعمال میشه برید حالشو ببرید3.هروقت تست تموم شد پکیج رو از پروژه ان لینک کنید و میتونید بعد از پابلیش از نسخه ی پابلیش شده استفاده کنیدnpm unlink packageNameاگه سوالی داشتید کامنت بزارید یا تو لینکدین پیام بدید? Reihaneh dastres Reihaneh dastres Wed, 08 Nov 2023 22:48:49 +0330 https://virgool.io/@basil/difference-between-programmers-ossipjgho51c براتون مقاله ی متفاوت نوشتم از این نظر متفاوته که محصول مشترک منو برنامه نویس های خفنِ تمایز یافته ای هست که میشناسمبطور کلی اگه بخوایم بررسی کنیم عوامل مختلفی وجود داره که تفاوت هارو رقم میزنه شخصیت حرفه ای یک برنامه نویس مثل یک حرف T میمونه مثل قسمت بالاش باید دانش وسیع داشته باشه و مثل تنش باید تو یک دانش عمیق بشه مثلاً یک فرانت دولوپر حرفه ای بهتره حداقل دانش جزئی درمورد دواپس و شبکه و ... داشته باشه اما توی جاوااسکریپت باید کاملا دیپ باشه بطوری که سمت هر لایبری جاوااسکریپت بره خیلی راحت بتونه یاد بگیره.علاوه بر این برنامه نویس حرفه ای خصوصیات فردیش هم با برنامه نویس عادی فرق داره و بطور کلی مسئولیت پذیره،منظبطه،ریزبینه و به جزئیات توجه داره و اشنایی خوبی با مسیر های متفاوت داره و در زمان بن بست بهترین راه رو انتخاب میکنه و از همه مهمتر اخلاقشم خوبه و راحت میشه باهاش ارتباط برقرار کرد(از کار کردن باهاش لذت میبری:))یک برنامه نویس حرفه ای همیشه کیفیت ذهن خودش رو افزایش میده و عادات خوبی داره،یک برنامه نویس خوب تعصب نداره و درمقابل ایده ها و ذهنیت های جدید گارد نمیگیره و انتقاد پذیره و همیشه اماده ی تغییرهاگه بخوایم هرکدوم رو بصورت موردی و با جزئیات بیشتر بررسی کنیم:۱.تجربهتقریبا ۸۰٪ اونایی که این سوال رو ازشون پرسیدم گفتن تجربهدیدین بعضی از افراد میگن پنج سال سابقه دارن ولی دانش انچنانی ندارن درواقع این افراد یک سال سابقه و دانش رو پنج سال تکرار کردنبنظرم میشه با حل مسئله و داشتن معلومات پیوسته تجربه رو بالا برد۲.سرعت و کیفیت در حل مسئلههرچی بیشتر در معرض انواع مختلف باگ قرار بگیرید، توانایی شما در حل مسئله به میزان قابل توجهی بهبود پیدا میکنه بنابراین، مهمه که دائماً خودتون رو در موقعیت هایی قرار بدید تا باگ های جدیدتری رفع کنید - حتی اگر فقط برای 15 تا 30 دقیقه در روز باشه اما چجوری؟گروه ها یا سایت های پرسش و پاسخ مثلا یکیش stack overflow البته پیدا کردن درست ترین و منطقی ترین راه حل مهمه نه اینکه فقط یک چیزی بنویسیم که کار کنه.۳.داشتن معلومات پیوسته و بروزاین موضوع به قدری مهمه که اصلا حدیث داریم در موردش "خداوند برنامه نویسانی که آپدیت نشوند را دوست ندارد" از مدیوم و یوتوب و هرجا رو که گیر اوردید معلوماتتون رو بروز کنید البته تسلط در یادگیری مسئله ی مهمیه باید جوری باشه که هروقت نیاز شد بتونی از دانشت استفاده کنیمن خودم عاشق مدیومم به دو دلیل اول اینکه بروز ترین مقالات مرتبط با تخصصم رو پیشنهاد میده دوم اینکه اکثر مقالاتش سطح خوبی دارن و از اوناست که میتونه حال ادمو خوب کنه البته ی سری مقالات مدیوم پولیه بجاش میتونید از سایت dev.to استفاده کنید.کورس های یودمی هم حرف نداره که اکثرشو میتونید از downloadly.ir و git.ir رایگان یا با مبلغ کم پیدا کنید۴.اتوماسیوناین یکی برای خودم خیلی جذابهقطعا کسی که کارهاشو اتوماتیک کنه برنامه نویس عادی نیست مثلا مورد داریم با ساختن یک مولتی استیج تست و بعد ساخت ایمج داکر و بعد دیپلوی رو اتوماتیک کرده.۵.تست خوب نوشتنبرنامه نویس های حرفه ای علاوه بر دولوپ تست نویسی هم میکنن. اصلا چرا تست نویسی اهمیت داره؟ چون آسیب پذیری های امنیتی رو شناسایی میکنه و به مقیاس پذیری کمک میکنه و مشکلات و نقص کدی که نوشته شده رو شناسایی میکنه تا بتونید قبل از تحویل نرم افزار برطرفش کنید و باعث بهبود کیفیت محصول میشه.۶.مطالعه و درک الگوریتم و ساختمان داده ساختار داده ها و الگوریتم ها مفاهیم اساسی در برنامه نویسی هستند. بعنوان یک مهندس نرم افزار اگه بخوای مهارت برنامه نویسیت رو بالا ببری باید باید باید برای درک و تسلط بر ساختارهای داده و الگوریتم ها زمان صرف کنی(با تاکید زیاد) و میتونه فرصت های جدیدی رو در حرفه ی شما ایجاد کنه.با انتخاب ساختارهای داده مناسب و طراحی الگوریتم های کارآمد میتونید عملکرد برنامه های خودتون رو بهینه کنید،کد تمیز و بهینه بنویسید،بهترین راه حل ها رو پیدا کنید و برنامه های کاربردی با کیفیت بالا ارائه بدید اینه که بهتون قدرت تبدیل شدن به یک توسعه‌دهنده ماهر رو میده۷.نوع تفکر متفاوت و اینکه معطوف به نزدیک ترین راه نیستصرفا دونستن چند زبان و کد نوشتن کافی نیست و یک مرز باریکی بین کدر coder و برنامه نویس هست. برنامه نویس نوع تفکرش متفاوته و باید خوب تحلیل کنه بعد دست به کد نویسی بزنه. یعنی 80 درصد کار با تحلیل خوب در میاد و تفاوت در ارائه راه حل ها هستش.خودم که خیلی با این مقاله حال کردم امیدوارم برای شما هم مفید بوده باشه Reihaneh dastres Reihaneh dastres Thu, 12 Oct 2023 14:00:04 +0330 https://virgool.io/@basil/%D9%86%D8%B5%D8%A8-%D9%88-%DA%A9%D8%B1%DA%A9-%D8%A7%D8%B3%D8%AA%DB%8C%D9%85%D9%88%D9%84-%D8%B3%D8%A7%D9%81%D8%AA-%D8%AF%D8%B1-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-pe5qhykv0o9h نذر کردم هروقت موفق شدم گزارشات استیمول رو کرک کنم درمورد نحوه ی کرک کردنش مقاله بنویسم تا حداقل شما زودتر از من به نتیجه برسید.بریم که داشته باشیمقدم اول۱.نسخه ی دلخواهتون رو از سایت سافت۹۸ دانلود کنید۲.دقیقا همون نسخه رو تو پروژتون نصب کنید من از ورژن ۲۰۲۳.۱.۱ استفاده کردمnpm i stimulsoft-reports-js@2023.1.1۳. از فایلی که دانلود کردین در مسیر crack/libs/reports.js/scripts اسکریپت های موجود را کپی کنید.مثلا اگر از داشبورد میخواید استفاده کنید اسکریپت های موجود در Dashboards.JS رو کپی کنید.۴.از سورس کد قسمت نود ماژول فولدر مربوط به stimulsoft-report-js را پیدا کرده و اسکریپت هایی که کپی کردید رو در فولدر اسکریپت قرار بدیداگر بعد از نصب پکیج پروژه رو ران کنید و بعد کرک کنید به احتمال ۹۹٪ به درستی کرک نمیشه.۴.لایسنس مورد نظر رو از فایل های سافت ۹۸ کپی کرده و اینجوری به گزارشاتتون اضافش کنید:Stimulsoft.Base.StiLicense.key = &quot لایسنس &quot۵.حالا با خیال راحت پروژه رو ران کنید و حالشو ببرین. Reihaneh dastres Reihaneh dastres Mon, 17 Jul 2023 18:37:51 +0330 https://virgool.io/@basil/%D8%AA%D8%B3%D8%AA-%D9%86%D9%81%D9%88%D8%B0-%D9%88%D8%A8-lpx6s5nwt8t5 همه چیز از اونجایی شروع شد که قرار بود تست xss رو انجام بدم و تو این مسیر با Burp Sute (ابزاری قدرتمند تست نفوذ بررسی امنیت وبسایت ها و برنامه های کاربردی است که با استفاده ازش میتونید درخواست هایی که بین مرورگر و سرور ارسال میشه رو مشاهده و اون رو برای بررسی امنیت و ازمایش اسیب پذیری های احتمالی تغییر بدید و معمولا توسط کارشناسان و انالیزگران امنیتی استفاده میشود.) اشنا شدم بعد این فکر به ذهنم رسید که تست نفوذ یاد بگیرم تا بتونم بیشتر ازش استفاده کنم میخوام تو این مقاله شما رو با انواع حملاتی که باید جلوی هکر هارو بگیرید تا بتونید سایت ایمن تری داشته باشید اشنا کنم:XSS یا Cross-Site Scripting حمله‌کننده با قرار دادن کد مخرب در صفحات وب، می‌تواند اطلاعات کاربران را بدست آورد یا آن‌ها را به سایت‌های مخرب هدایت کند. این حمله معمولا با استفاده از فرم‌ها، بخش‌هایی از وب سایت که محتوای کاربران در آن قرار می‌گیرد، یا حتی در پارامترهای آدرس صفحات وب انجام می‌شود.در این نوع حمله، حمله‌کننده با قرار دادن کد مخرب در صفحات وب، می‌تواند دسترسی به کوکی‌های کاربران، اطلاعات حساس مانند رمز عبور و نام کاربری و یا حتی کنترل کامل بر سایت را بدست آورد. این حمله می‌تواند باعث خرابی سایت و همچنین افزایش امتیازات جستجوی گوگل برای سایت‌های مخرب شود.برای جلوگیری از این نوع حمله، باید ورودی‌های کاربران به دقت بررسی شوند و هرگونه کد مخرب در آن‌ها حذف شود. html injectionهکر ها میتونن از فرم‌ها، نظرات و سایر ورودی‌های کاربردی در صفحات وب وجود دارد کد اچ تی ام ال مخرب وارد کنند.در این نوع حملات، هکران می‌توانند برای جلب توجه کاربران، از تصاویر، لینک‌های مخرب و حتی فرم‌های جعلی استفاده کنند. برای مثال، هکران می‌توانند یک فرم جعلی بسازند که با ورود اطلاعات کاربر، اطلاعات حساب بانکی آن را برای خود جمع آوری کنند.Command injectionیکی از حملات رایج امنیتی است که در برنامه‌هایی که بر اساس دستورات کاربر عمل می‌کنند، ممکن است رخ دهد. در این نوع حملات، هکر با وارد کردن دستورات خاص در فرم‌ها و یا دیگر نقاط ورودی برنامه، توانایی اجرای دستورات خود را به برنامه می‌بخشد و می‌تواند دسترسی کامل به سیستم را به دست آورد. برای مثال، در یک فرم ورود به سیستم، اگر مقدار ورودی کاربر به عنوان نام کاربری و رمز عبور به یک دستور ترکیب شود، هکر می‌تواند با وارد کردن دستورات خاص مثل ;rm -rf / یا ;cat /etc/passwd به اطلاعات حساس سیستم دسترسی پیدا کند یا با حذف تمام فایل‌ها در سیستم، آن را غیرقابل استفاده کند.broken authenticationزمانی رخ می‌دهد که سیستم‌های مدیریت هویت و دسترسی به درستی پیاده‌سازی نشده باشند. این حمله معمولا در موارد زیر به وجود می‌آید:1. استفاده از رمزهای ضعیف: وقتی که کاربران از رمزهای ضعیف و قابل پیش‌بینی استفاده می‌کنند، هکرها می‌توانند با استفاده از روش‌هایی مانند کرک کردن رمزها، به راحتی به حساب کاربری کاربر دسترسی پیدا کنند.2. نگهداری نامناسب اطلاعات احراز هویت: وقتی که اطلاعات احراز هویت کاربران در سیستم‌های ذخیره‌سازی نامناسبی نگهداری می‌شود، مانند ذخیره کردن رمزهای عبور به صورت plaintext، هکرها می‌توانند به راحتی به این اطلاعات دسترسی پیدا کرده و به حساب کاربری کاربر دسترسی پیدا کنند.3. نقص در مدیریت دسترسی: وقتی که سیستم‌های مدیریت دسترسی به درستی پیاده‌سازی نشوند، هکرها می‌توانند با استفاده از روش‌هایی مانند انتخاب کردن دسترسی‌های بیشتر از حد مجاز یا تغییر دادن دسترسی‌های حساس به دسترسی به اطلاعات حساس دسترسی پیدا کنند.برای جلوگیری از این نوع حملات، بهتر است از رمزهای قوی و چند عاملی استفاده شود، اطلاعات احراز هویت در سیستم‌های ذخیره‌سازی نامناسبی نگهداری نشود، مدیریت جلسات به درستی پیاده‌سازی شود و دسترسی‌های حساس به سیستم‌ها به درستی مدیریت شود. bruteforce attacksیک نوع حمله رایج در امنیت سایبری است که با استفاده از روش تست همه حالت‌ها (brute-force) از رمز عبور یا کلیدهای رمزنگاری مورد استفاده قرار می‌گیرد. این حمله معمولا در زمانی رخ می‌دهد که یک حمله‌کننده تصمیم می‌گیرد تمام حالت‌های ممکن رمز عبور را برای ورود به سیستم تست کند. این حمله می‌تواند در دسترس بودن یک سرویس ورود به سیستم با رمز عبور ضعیف یا کم‌احتمال، و یا در صورتی که تعداد تلاش‌های ورود ناموفق محدود شده باشد، رخ دهد. برای جلوگیری از این نوع حمله، می‌توانید از رمز عبورهای پیچیده و قوی استفاده کنید و تلاش برای ورود به سیستم با رمز عبور ضعیف را محدود کنید. همچنین، از روش‌های احراز هویت دو عاملی (two-factor authentication) نیز می‌توانید استفاده کنید تا امنیت سیستم خود را افزایش دهید. xml,xpath xxe injectionحمله XML/XPath XXE Injection یک نوع حمله امنیتی است که در برنامه‌هایی که از پردازش XML استفاده می‌کنند، رخ می‌دهد. در این نوع حمله، حمله‌کننده با نفوذ به برنامه، از طریق فرستادن داده‌های مخرب در فرمت XML با استفاده از آسیب‌پذیری‌های نرم‌افزار، سیستم را مورد حمله قرار می‌دهد. در این نوع حمله، حمله‌کننده می‌تواند با استفاده از متدهای XPath، به داده‌های حساس در سیستم دسترسی پیدا کند. این نوع حمله می‌تواند در هر برنامه‌ای که از پردازش XML استفاده می‌کند، رخ دهد. برای جلوگیری از این نوع حمله، باید از ورودی‌های کاربران در برنامه‌های مبتنی بر XML به‌طور کامل و صحیح استفاده شود و از چک کردن و فیلتر کردن ورودی‌های کاربران برای جلوگیری از ورود داده‌های مخرب استفاده شود.فعلا تا همینجاشو داشته باش آما همش به همینجا ختم نمیشه منتظر مقاله ی بعدی باشید? Reihaneh dastres Reihaneh dastres Mon, 26 Jun 2023 03:32:49 +0330 https://virgool.io/@basil/%D8%A7%D9%81%D8%B2%D8%A7%DB%8C%D8%B4-%D9%85%D9%85%D9%88%D8%B1%DB%8C-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-x3gxjpoydws1 اگه تابحال زمان بیلد گرفتن یا ران کردن پروژه ری اکت به همچین اروری برخوردی بیا اینجا که بهت بگم چیکار کنی.از کجا بفهمیم مموری جاوااسکریپتمون چقدره؟زمانی که دارید فرایند بیلد گرفتن رو طی میکنید تسک منیجر رو باز کنید و از قسمت details نود جی اس رو پیدا کنید و ببینید قبل اینکه به ارور بخورید مموریش تا چند میره مثلا چون مموری جی اس من ۲ گیگ بود تا ۲ میلیون میرفت.ی روش ساده تر هم هست که میتونید با اجرای این کد تو ترمینال وی اس کد مقدار مموری رو لاگ بگیرید.node -e 'console.log(v8.getHeapStatistics().heap_size_limit/(1024*1024))' برای رفع این ارور باید اپشن max_old_size رو به پروژتون اضافه کنید.روش اول:فایل package.json را باز کرده و کد زیر رو جایگزین scripts کنید&quotscripts&quot: { &quotstart&quot: &quotreact-scripts --max_old_space_size=4096 start&quot, &quotbuild&quot: &quotreact-scripts --max_old_space_size=4096 build&quot, &quottest&quot: &quotreact-scripts test&quot, &quoteject&quot: &quotreact-scripts eject&quot }نکته قابل توجه اینکه سایز به اینصورت محاسبه میشه: اندازه ی دلخواه * ۱۰۲۴ من تو مثال بالا مموری رو به ۴ ارتقاع دادمروش دوم:مقدار generate_sourcemap رو فالس بذاریدLinux:"build": "GENERATE_SOURCEMAP=false react-scripts build",Windows:"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",روش سوم:کد زیر را در ترمینال وی اس کد اجرا کنید:Linux:export NODE_OPTIONS="--max-old-space-size=4096"Windows:set NODE_OPTIONS=--max-old-space-size=4096و اما روش آخر که خودم با این روش تونستم این ارور رو برطرف کنمدستور زیر را تو ترمینال اجرا کنید:$env:NODE_OPTIONS="--max-old-space-size=4096"مرسی که تا اخرش خوندی امیدوارم این مقاله بدردت خورده باشه Reihaneh dastres Reihaneh dastres Wed, 08 Mar 2023 12:07:10 +0330