Веб системийн үндэс
Browser-оос database хүртэлх веб системийн гол ойлголтууд хэрхэн холбогдож, Task Manager төслийн нэг урсгал болж ажилладгийг харах чиглүүлэгч зураг.
- Программ хангамж ба системийн инженерчлэл
- 14 ойлголт
- Ур чадвар
- 25 минутын чиглүүлэг
Хэнд зориулсан бэ?
HTML, JavaScript эсвэл программчлалын анхан шатны ойлголттой бөгөөд веб системийн хэсгүүдийг бүтэн урсгалаар нь харахыг хүссэн суралцагч
Энэ замын зургаар
- Browser, client, server-ийн үүрэг болон хоорондын хүсэлт, хариултыг тайлбарлах
- Frontend, backend, database-ийн хариуцлагыг нэг системийн урсгалд зөв байрлуулах
- HTTP болон REST API ямар асуудлыг шийддэгийг ялгах
- Git, GitHub-ийг кодын өөрчлөлтийн урсгалтай холбох
- Task Manager төслийн архитектурын сорил руу бэлтгэлтэй шилжих
Тэмдэглэгээ
Холбоосын ач холбогдол
- Заавал судлах
- Судлахыг зөвлөх
- Сонголтоор судлах
Ойлголтын төрөл
- Суурь ойлголт
- Ойлголт
- Технологи
- Загварын шийдвэр
- Шалгах цэг
- Төслийн сорил
Газрын зураг
Ойлголтууд хэрхэн холбогдох вэ?
Зургийг чирж хөдөлгөнө. Node-ийг хөдөлгөхгүй. Ойлголтыг сонгоод дэлгэрэнгүй болон Academy холбоосыг харна.
Текстэн хувилбар
Ойлголтуудын жагсаалт
Интерактив зураг ашиглахгүйгээр roadmap-ийг дарааллаар нь уншиж, холбогдох хичээл болон төсөл рүү шилжинэ.
- 01
Суурь ойлголт
Веб систем гэж юу вэ?
Сүлжээгээр холбогдсон client, server болон өгөгдлийн хэсгүүд хэрэглэгчийн нэг зорилгыг хамт биелүүлдэг систем.
Яагаад чухал вэ? Тусдаа технологи цээжлэхээс өмнө бүх хэсэг ямар зорилгоор хамтардгийг харах суурь болно.
Эхлэх цэг
- 02
Технологи
Browser
URL хүлээн авч, вебийн нөөц хүсээд HTML, CSS, JavaScript-ийг хэрэглэгчид дүрслэх программ.
Яагаад чухал вэ? Хэрэглэгчийн үйлдэл веб системийн хаанаас эхэлж, хариулт хаана харагддагийг ойлгуулна.
- Заавал судлах
- 03
Технологи
Git
Кодын өөрчлөлтийг working tree, staging area, commit гэсэн түүх болгон хянах хэрэгсэл.
Яагаад чухал вэ? Системийн өөрчлөлтийг жижиг, шалгаж болох алхмаар аюулгүй хадгалах дадал бий болгоно.
- Судлахыг зөвлөх · өөрчлөлтөө хянах
- 04
Ойлголт
Client
Server-ээс үйлчилгээ эсвэл өгөгдөл хүсдэг тал; browser бол вебийн нийтлэг client.
Яагаад чухал вэ? Хүсэлтийг эхлүүлэгч болон хариулт боловсруулагч талын хариуцлагыг ялгахад тусална.
- Заавал судлах
- 05
Технологи
GitHub
Git repository-г remote орчинд байршуулж, өөрчлөлтийг хуваалцах болон хамтран review хийх үйлчилгээ.
Яагаад чухал вэ? Локал commit-ийг багийн харагдахуйц инженерийн урсгалтай холбоно.
- Сонголтоор судлах
- 06
Ойлголт
Frontend
Хэрэглэгчийн харж, удирддаг interface болон client талын төлөв, interaction.
Яагаад чухал вэ? Дэлгэцийн логик, server-ийн бизнес дүрэм хоёрын хил хаана байгааг тодорхой болгоно.
- Заавал судлах
- 07
Суурь ойлголт
Хүсэлт ба хариулт
Client-ийн илгээх хүсэлт (request) болон server-ийн буцаах хариулт (response) нь системийн үндсэн харилцаа.
Яагаад чухал вэ? Өгөгдөл хаашаа, ямар зорилгоор хөдөлж байгааг алхам бүрээр мөрдөх хэл өгнө.
- Заавал судлах
- 08
Ойлголт
Server
Хүсэлтийг хүлээн авч, дүрэм болон өгөгдөлтэй ажиллаад тодорхой хариулт буцаах тал.
Яагаад чухал вэ? Browser-оос ирсэн үйлдэл найдвартай, дахин ашиглагдах үйлчилгээ болох цэгийг харуулна.
- Заавал судлах
- 09
Технологи
HTTP
Client, server хоёр хүсэлт, хариултын бүтэц болон утгыг ойлголцох вебийн application protocol.
Яагаад чухал вэ? Method, URL, header, body, status code-ийг нэг contract болгон унших суурь өгнө.
- Заавал судлах · харилцааны дүрэм
- 10
Ойлголт
Backend
Input validation, business rule, authorization-д бэлтгэх хил болон өгөгдлийн үйлдлийг server талд зохион байгуулна.
Яагаад чухал вэ? Client-ээс ирсэн өгөгдөлд сохроор итгэхгүй, системийн дүрмийг нэг найдвартай талд хэрэгжүүлэхэд чухал.
- Заавал судлах
- 11
Загварын шийдвэр
REST API
Resource болон HTTP-ийн утгыг ашиглан endpoint-уудыг ойлгомжтой зохиох design approach.
Яагаад чухал вэ? Frontend ба backend хоорондын contract-ийг тогтвортой, урьдчилан таамаглахуйц болгоно.
- Судлахыг зөвлөх · API зохиох
- 12
Технологи
Database
Task зэрэг системийн төлөвийг хүсэлт дууссаны дараа ч хадгалж, дахин унших боломж олгоно.
Яагаад чухал вэ? Түр зуурын дэлгэцийн төлөв болон удаан хадгалагдах бодит өгөгдлийг ялгана.
- Заавал судлах
- 13
Шалгах цэг
Системийн урсгалаа шалгах
User action-аас frontend, API, backend, database-аар дамжаад UI шинэчлэгдэх хүртэлх нэг lifecycle-ийг бүтнээр нь мөрдөнө.
Яагаад чухал вэ? Хэсэг бүрийн нэрийг мэдэхээс илүү тэдгээрийн хариуцлага, алдааны замыг хамтад нь тайлбарлаж чаддаг болгоно.
- Заавал судлах
- Заавал судлах
- Судлахыг зөвлөх
- 14
Төслийн сорил
Task Manager төслийн сорил
Create, list, complete, delete үйлдлийн screen, data, API, validation, success болон error flow-ийг нэг design-д холбоно.
Яагаад чухал вэ? Roadmap-ийн ойлголтуудыг бодит системийн архитектурын шийдвэр болгон ашиглаж чадахаа шалгана.
- Сонголтоор судлах
- Заавал судлах · практик сорил