Бүх сургалт ХУГАЦААГҮЙ буюу НАСАН ТУРШИЙН!

Та 2023 оноос дэлхий даяар шуугиан тарьж хурд хүчээрээ гайхуулан байгаа супер орчин үеийн Astro фрэймворкийн тухай сонссон уу? Дашрамд хэлэхэд 1234.mn сайтыг энэхүү гайхалтай Astro фрэймворк дээр хөгжүүлэн удахгүй хэдхэн хоногийн дараа гаргах гэж байгаа билээ. ( Энд дарж 3 ш үнэгүй хичээлүүдийг үзэх )



Тэгвэл Astro гэж яг юу вэ? Яагаад бид түүнийг сурах хэрэгтэй болж байна вэ?

Нээлтээ хийгээд 2 жил л болж байгаа атал Google, Microsoft, Porche, NBC news зэрэг дэлхийн томчууд аль хэдийн авч ашиглаж буй энэхүү Astro хэмээх фрэймворк нь зүгээр ч нэг фрэймворк биш харин вэб сайт бүтээх технологид гарч буй хувьсгал гэж хэлж болно. Ердөө 2022 оны 9 сард нээлтээ хийсэн энэхүү Астро фрэймворк нь өөрийн цахилгаан мэт хурд хүч, бишрэм инновацлаг санаа, код бичихэд супер хялбар байдал, хайлтын системүүдтэй супер зохицох байдал зэргээрээ тоглоомын дүрмийг өөрчлөгч болон гарч ирж байна. Хэдийгээр Астрогоор ямар ч сайтыг асуудалгүй бүтээх боловч онлайн худалдаа, контент түгээгч төрлийн сайт бүтээхэд илүү тохиромжтой байхаар бодолцож хийгдсэн байна. Хэрэв та Астрогоор сайт хийх л юм бол удаан ажиллах сайт хийх угаасаа боломжгүй байхаар бүтээгджээ!

Астро чухам юугаараа анхаарал татаж байна вэ? Астро нь фвэймворк гэхээс гадна мөн орчин үеийн вэб сайтын талаарх шинэ философи юм гэж хэлж болох юм. Астро нь дараах зүйлсүүдийг вэб хөгжүүлэлтэнд чухал гэж онцлон гаргаж иржээ. Үүнийг жагсаавал:

1) Javascript-ийг аль болох илгээхгүй байх. Астро нь бусад фрэймворк шиг анх сайтыг ачаалах үед том том javascript ачаалахыг буруу гэж үздэг. Түүний оронд шууд л javascript-гүй хуудсыг эхлээд илгээчихдэг бөгөөд дараа нь уг хуудсыг хэрэглэгч хэрхэн үзэж харж байгаагаас шалтгаалан шаардлагатай javascript-үүдийг хэрэгтэй үед нь илгээдэг тул Астро хуудас нүд ирмэх зуур хэрэглэгчид ачаалагдан харагддаг байна. Энэ бол бизнес болон хэрэглэгчдийн хамгийн дуртай зүйл билээ.

2) Эрх чөлөөт эрлийз фрэймворк. Астро нь дотроо аль нэг хуудас дээрээ таныг React, Vue, Svelte, SolidJS зэрэг орчин үеийн фрэймворкийн компонентуудыг шууд бичиж ашиглах боломжийг чөлөөтэй өгдөг. Эсвэл та зүгээр л дан Javascript-ээрээ ч бичээд явж болно. Та бүр нэг хуудсанд эдгээр технологийг холин бичсэн ч болно. Энэ нь олон төрлийн хөгжүүлэгчид нэг төсөл дээр чөлөөтэй ажиллах боломжийг нээх юмуу эсвэл аль нэг газарт аль нэг технологийн давуу талыг ашиглах боломжийг чөлөөтэй болгон нээж өгч байна.

3) Хуудас доторх арлууд. Вэб хуудсыг далай гэж үзвэл дотор нь байгаа динамик хариу үйлдэл үзүүлэх чадвартай хэсгүүдийг арал гэж нэрлээд тус тусдаа бие даасан арлуудыг бүтээх боломжтой филосифийг Астро хэрэгжүүлдэг. Арлууд нь тус тусдаа javascript файлтай байх бөгөөд хоорондоо харилцах чадвартай байхаас гадна хэрэглэгчийн дэлгэц дээр уг арал гарч ирээгүй байгаа тохиолдолд уг javascript-үүдийг хэрэглэгч рүү илгээдэггүй (partual hydration). Ингэснээр хэрэглэгчдийн ачаалах шаардлагатай javascript-ийн хэмжээ дээд зэргээр бага байж сайт өндөр хурдтай байх болно.

4) Хөгжүүлэлтийн маш хялбар байдал. Астрогийн PHP шиг файлд үндэслэн дуудалт (file based routing) болон компонент дизайныг нь ашиглан та вэб сайтыг зөнгөөрөө л хялбар биччих боломжтой. Дээр нь Астро хуудсыг JSX зэрэг тусгай маркап хэл суралгүйгээр шууд html дотор нь биччихдэг учраас танд нэмж сураад байх юу ч хэрэггүй юм. Та javascript, html гадарладаг уу, тэгвэл та асуудалгүйгээр шууд Астро сайт бүтээж чадна.

5) Удаан сайт бичих боломжгүй. Таны сайтанд ашиглах зургуудийг Астро нь автоматаар оптимал хэмжээ нягтшилд хөрвүүлчихдэг зэрэг олон маш хурдтай байлгах арга технологиудыг цаанаа хэрэгжүүлж байдаг тул та удаан вэб сайт хийчих вий гэж санаа зовох шаардлаггүй байх болно.

6) Хайлтын системд дээд зэргээр зохицсон. Астро нь хуудас бүрт тусд нь html үүсгэдэг тул тул хайлтын системд хамгийн тохиромжтой ба хайлтын системүүд ч өндөр хурдтай сайтын ранк оноог илүү өгдөг болсон нь Астрогоор бүтээгдсэн вэб сайтууд бусдаасаа илүү амжилтанд хүрэх боломжийг нээж өгч байна.

7) SSR буюу Server Side Rendering, SSG буюу Static Site Generation боломжыг бүрэн агуулсан тул таны Астро сайт статик сайтын өндөр хурдтай байхаас гадна динамик контентуудыг сэрвэр талд PHP шиг рэндэрлэн илгээх чадвартай.

8) Орчин үеийн түүлүүдтэй маш хялбар ажиллах боломж. Астро нь MD болон төрөл бүрийн гуравдагч апинууд, CMS болон бусад орчин үеийн түүлүүдтэй маш нийцтэй ажиллах ба таны хөгжүүлэлтийн хурдыг аль болох хурдан байлгахаар бодолцож бүтээгдсэн. Астро нь дээрх 8 болон бусад бидний энд дурдаагүй маш олон давуу талуудыг хэрэглэгчид болон хөгжүүлэгч бидэнд өгч байна.

Энэхүү хичээлээр Астро технологийг эхнээс нь дуустал эзэмшихээс гадна сурсан зүйлээ практикт туршихын тулд хэд хэдэн вэб сайтыг хийх болно. Уг сайтуудаар бид орчин үеийн бүрэн динамик болон статик сайтуудад өгөгдлийн сан, хуудаслалт, олон улсын хэлтэй ажиллахаас эхлээд юу л хэрэгтэй байдаг тэр бүгдийг хийж туршихаас гадна Firebase, Facebook login зэрэг сонирхолтой олон зүйлсийг сайтдаа ашиглаж сурах юм.

Та цаг үеээсээ хоцролгүйгээр эхний эгнээнд явахыг хүсч байна уу? Тэгвэл энэхүү сургалт таныг бусдаас илүү мэргэжилтэн болоход туслах болно.

За ингээд Астрог эзэмших гайхалтай аялалдаа хамт гарцгаая!
Доорхи видеог тоглуулж эхний видео хичээлийг үзнэ үү

   Хичээлүүд :   

  1. 20:23
    Орчин үеийн вэб сайт бүтээх философийн өөрчлөлт хөгжил
  2. 25:39
    Вэб сайт бүтээх PHP, React, Next.js, Astro технологиудын ялгаатай шийдлүүдтэй танилцах
  3. 09:53
    Astro.build сайттай танилцан server island талаар товчхон ярилцаад node.js болон Vs code суулгах, extension тохируулах
  4. 08:45
    Эхний туршилтын Астро сайтыг ажиллуулж файлуудтай нь танилцацгаая
  5. 07:05
    Astro-ийн сайт хэрхэн ажилладаг вэ, Astro-ийн файлд үндэслэсэн routing system-тэй танилцах
  6. 15:24
    Astro build хийх, dev болон preview горимын ялгаа, Astro хувилбарыг өөрчлөх
  7. 18:18
    Аstro файлын бүтэц, json өгөгдлийг файлаас болон интернэтээс татаж авч үзүүлэх
  8. 06:21
    Хялбар статик блог вэб сайтыг Astro дээр бүтээх
  9. 09:33
    Astro хуудсанд css оруулах, BEM модел болон inline css бичих тухай
  10. 07:13
    Astro дээр Layout болон slot ашиглах
  11. 07:41
    Astro глобаль css ашиглалт, файл компонент нэршил
  12. 03:11
    global css-ийг тусд нь файлд гаргаж google font холбоцгооё
  13. 05:18
    NavigationBar, Footer хялбар компонентуудыг бичих
  14. 07:39
    Блогийн theme солих ThemeToggler компонентийг бичицгээе!
  15. 07:38
    ThemeToggler-т эвент холбож css хувьсагчаар theme өнгийг оруулж өгөх
  16. 16:36
    is:inline скрипт, клиент script дотор import хийх, theme-ийг localstorage руу бичих
  17. 08:44
    md файл оруулж layout холбох, style хийх
  18. 17:48
    Md файлаас Layout руу props дамжуулах, BlogLayout нэмж бичицгээе
  19. 12:28
    Named Slot ашиглан хуудсанд тусдаа css оруулах, блогний цэсэнд active класс тавьж өгөх
  20. 13:03
    Cards, Card компонентуудыг бичиж өгөгдлийг data.json-оос дамжуулж шалгацгаая
  21. 10:07
    Template directive ашиглан style руу хувьсагч оруулж Card-ийг gradient хүрээтэй болгоцгооё
  22. 06:07
    Script таг руу сэрвэрт үүсгэсэн хувьсагчийн утгыг хоёр янзаар оруулж ашиглах тухай
  23. 10:02
    Astro.glob ашиглан blogs хавтас дотор байгаа олон md файлыг давталтаар сайт дээрээ үзүүлэх
  24. 04:40
    Astro сайт deploy хийх - блогоо netlify дээр байрлуулж хурд үзүүлэлтийн тест хийж харцгаая!
  25. 11:45
    Astro style hoisting болон Text полиморфик компонент бичиж туршицгаая
  26. 07:54
    Astro болон React JSX ялгаа, нөхцөл шалган дэлгэцэнд гаргах
  27. 14:21
    [Компонент Арал] Компонент арал технологийн тухай, Астро компонентоос юугаараа ялгаатай вэ?
  28. 11:51
    [Компонент Арал] Компонент арлын ажиллах зарчим, яагаад бидэнд том давуу талыг авчирдаг тухай
  29. 08:13
    [Компонент Арал] Компонент арлыг турших статик сайтыг ажиллуулж бэлэн болгох
  30. 12:22
    [Компонент Арал] React арлыг суулгаж ажиллуулах, client:load горим, Vote компонентийн тайлбар
  31. 11:30
    [Компонент Арал] Арлын client:load тохиргоог devtool дээрээс анализ хийж судалцгаая
  32. 06:09
    [Компонент Арал] Арлын client:only тохиргоотой танилцацгаая
  33. 09:12
    [Компонент Арал] Javascript кодыг зөвхөн дэлгэцэнд гарч ирэх үед hydrate хийх буюу client:VISIBLE тохиргоо
  34. 12:30
    [Компонент Арал] client:idle тохиргоог ашиглан вэб сайтын хурдыг өндөр хэмжээнд нэмэгдүүлэх тухай
  35. 17:56
    [Компонент Арал] client:idle тохиргоогоор хэрхэн броузерыг сул чөлөөтэй болсон үед л арлын кодыг ажиллуулдаг вэ
  36. 09:42
    [Компонент Арал] client:MEDIA тохиргоог ашиглан зөвхөн тодорхой нөхцөлд л арлуудыг hydrate хийх
  37. 15:02
    [Компонент Арал] Vue фрэймворк дээр шинэ арал бичиж React аралтай хамт ашиглах
  38. 14:24
    [Компонент Арал] Nanostores ашиглан React, Vue арлууд хооронд ерөнхий state ашиглах нь
  39. 06:01
    [Компонент Арал] slot ашиглан арлуудын доторх контентийг гаднаас нь override хийн өөрчлөх нь
  40. 08:11
    lib хавтас үүсгэн дотор нь өргөн хэрэглэгдэх функцээ бичин дуудаж турших
  41. 12:23
    open-props, normalize сангуудыг хэрэглэх, import, link зэргийн ялгаа
  42. 16:20
    Жишээ Button компонент бичиж дамжуулах параметрүүдийг тохируулж турших
  43. 07:28
    route-ийг хүчингүй болгож хаах болон html контентийг гаднаас авч компонентод дамжуулах нь
  44. 07:36
    [content collection] Astro-ийн хүчирхэг Content Collection зарчимтай танилцана уу
  45. 13:15
    [content collection] Json файлаас file loader ашиглан team collection үүсгэж хэвлэж харцгаая
  46. 08:59
    [content collection] glob функц ашиглан постуудыг collection руу оруулж дуудаж үзэх
  47. 12:42
    [content collection] file loader дээр илүү нарийн json parse хийх, csv болон toml файлуудыг parse хийж дуудах
  48. 06:33
    [content collection] Remote буюу сервэрээс дата татах loader бичиж туршицгаая!
  49. 10:56
    [content collection] zod фрэймворктой танилцаж posts болон todos schema бичиж intellisense ажиллагааг харцгаая!
  50. 12:35
    [content collection] Хоёр collection-ийг reference ашиглан холбох нь
  51. 06:05
    [content collection] getEntry функц ба content-ийн зургууд бүрэн байгаа эсэхийг image функц ашиглан шалгах нь
  52. 06:16
    [content collection] post-1 route бичиж slug ашиглан id-ийг өөрчлөх, route олдохгүй бол 404 хуудас руу шилжих
  53. 07:20
    [content collection] Turbo console ба Content компонент render функцийг ашиглан md файлыг гаргах
  54. 05:54
    [content collection] getEntries ашиглан массив хэлбэрийн referenced өгөгдлийг гаргаж авч ашиглацгаая
  55. 06:57
    [content collection] transform ашиглан remote data-г өөрчлөн хүлээн авах
  56. 10:45
    [rendering] SSG болон SSR rendering аргуудын ялгаа давуу болон сул талууд
  57. 09:34
    [rendering] SSG, SSR болон prerender горимуудыг Node adapter ашиглан туршицгаая
  58. 14:52
    [rendering] Динамик route хэрэглэн бүх постуудыг slug-аар нь дуудан үзүүлэх, getStaticPaths функц
  59. 03:14
    [rendering] SSR үед динамик route ашиглах нь
  60. 15:14
    [rendering] props руу пост дамжуулах, pokemon api-аас дуудалт хийж dynamic route турших
  61. 19:13
    [rendering] Astro nested dynamic routing буюу [...slug] rest оператор ашиглах
  62. 07:11
    [rendering] Динамик route болон nested route-уудын ажиллах эрхийн дараалал
  63. 08:50
    [rendering] SSG горимд хуудаслалт буюу pagination хийж туршицгаая
  64. 14:36
    [image] Astro image оптимизацийг хэрхэн хийж байгааг Image, Picture компонентуудыг ашиглан харцгаая
  65. 10:18
    [image] Image компоненттой танилцая, loading, quality, format болон бусад туршилтуудыг хийцгээе
  66. 05:29
    [image] Md, Mdx файлууд дотор Image компонентийг оруулж ирж ашиглах

Та зөвхөн өнөөдөр бүртгүүлснээр энэ сургалтыг 49,900₮ болгож хямдруулж аваарай!
 
Энэ сургалтын өмнө үзсэн байвал зохих сургалтууд
HTML5, CSS3 эхнээс нь дуустал! (Sass-ын хамт)
Хугацаа: 29 цаг 40 мин | Сурагчид: 2985 | Үнэ: 49,900₮
Javascript хэлийг эхнээс нь дуустал!
Хугацаа: 52 цаг 21 мин | Сурагчид: 3276 | Үнэ: 49,900₮

== Сурагчдын сэтгэгдлүүд ==

❤️ зарим сургалтны видео ажиллахгүй байна. Өмнөх хичээлүүдээ бодвол нэгж хичээлийн хугацаа богиноссон нь болж байна, Хичээл ер нь таалагдаж байгаа
2025-08-04 16:40:28
❤️ Орчин үеийн framework-г сайхан тайлбарлаж өгсөнд баярлалаа.
2025-05-15 11:43:42
❤️ Сайн байна уу, Гоё сургалт байна. Амжилт хүсье.
2025-02-24 14:55:57
❤️ super2
2025-02-21 11:07:14
❤️ Үнэхээр цаг үетэй хөл нийлсэн сайхан сургалт байна. Маш их баярлалаа.
2025-02-07 16:59:17
❤️ Астро үнэхээр таалагдаж байна, шинэ төсөлдөө ашиглахаар бодож байгаа.
2025-01-12 09:07:35
❤️ Үнэхээр их баярлалаа багшаа.
2025-01-04 10:19:34
❤️ Nice
2024-12-31 17:11:00
❤️ Амарбат багшийн хичээлийг ойрд үзээгүй байсан. Үзсэн чинь гоё байна шүү. Сайн тайлбарлаж байна.
2024-12-28 20:50:51
❤️ Сургалт миний хувьд их таалагдаж байна. Astro framework - н логог хараад л өнгөрч байсан болхоос ийм сайн framework гэдэгийг энэ сургалтаар мэдэж авлаа.
2024-12-26 19:29:17
❤️ Үнэхээр гайхалтай сургалт байлаа
2024-12-26 13:35:06
❤️ Nice eniig l hvleej blaa
2024-12-09 02:04:49
❤️ Маш гоё Амарбат багш ийн хоолойг ойрд сонсоогүй хүлээж байлаа...
2024-12-05 22:53:57
❤️ Гайхалтай, миний хүсэн хүлээсэн фреймворк байна. Баярлалаа Амараа ах
2024-12-02 18:30:08