Modern web uygulamalar\u0131n\u0131n sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayan temel mimariyi, ileti\u015fim protokollerini ve karma\u015f\u0131k durum y\u00f6netimini anlamak, daha h\u0131zl\u0131 ve g\u00fcvenilir dijital deneyimler yaratmak i\u00e7in kritik \u00f6neme sahiptir. Bu makale, web’in perde arkas\u0131ndaki i\u015fleyi\u015fi basit ve anla\u015f\u0131l\u0131r bir dille a\u00e7\u0131klayacakt\u0131r.<\/p>\n
G\u00fcnl\u00fck hayat\u0131m\u0131zda kulland\u0131\u011f\u0131m\u0131z web siteleri, mobil uygulamalar ve hatta ak\u0131ll\u0131 ev cihazlar\u0131 bile asl\u0131nda karma\u015f\u0131k bir ileti\u015fim a\u011f\u0131n\u0131n par\u00e7as\u0131d\u0131r. \u0130nternet \u00fczerinden bir web sitesine eri\u015fmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131m\u0131zda, taray\u0131c\u0131m\u0131zdan g\u00f6nderilen basit bir istekle ba\u015flayan ve sunucular, veri tabanlar\u0131, g\u00fcvenlik protokolleri gibi bir\u00e7ok katman\u0131 a\u015farak bize geri d\u00f6nen bir dizi i\u015flemin ger\u00e7ekle\u015fti\u011fini ka\u00e7\u0131m\u0131z biliyoruz? Peki, bu i\u015flemler s\u0131ras\u0131nda sayfalar\u0131n neden bazen yava\u015f y\u00fcklendi\u011fini, oturumumuzun neden aniden sona erdi\u011fini veya al\u0131\u015fveri\u015f sepetimizdeki \u00fcr\u00fcnlerin nas\u0131l hat\u0131rland\u0131\u011f\u0131n\u0131 hi\u00e7 d\u00fc\u015f\u00fcnd\u00fcn\u00fcz m\u00fc?<\/p>\n
Bu sorular\u0131n cevaplar\u0131, web uygulamalar\u0131n\u0131n temel \u00e7al\u0131\u015fma prensiplerinde, \u00f6zellikle de istemci-sunucu modelinde, HTTP protokol\u00fcnde ve durum y\u00f6netimi mekanizmalar\u0131nda sakl\u0131d\u0131r. \u0130nternet d\u00fcnyas\u0131nda gezinirken kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z her deneyimin arkas\u0131nda, bu \u00fc\u00e7 ana bile\u015fenin kusursuz bir uyum i\u00e7inde \u00e7al\u0131\u015fmas\u0131 yatar. Ba\u015far\u0131s\u0131z bir web deneyimi, genellikle bu bile\u015fenlerden birinin d\u00fczg\u00fcn \u00e7al\u0131\u015fmamas\u0131ndan veya yanl\u0131\u015f yap\u0131land\u0131r\u0131lmas\u0131ndan kaynaklan\u0131r. \u00d6rne\u011fin, bir web sayfas\u0131n\u0131n y\u00fcklenmesi \u00e7ok uzun s\u00fcr\u00fcyorsa, bunun nedeni istemcinin (taray\u0131c\u0131n\u0131n) sunucuya ula\u015famamas\u0131, sunucunun iste\u011fi i\u015fleme s\u00fcresinin uzun olmas\u0131 ya da a\u011f\u0131r HTTP yan\u0131tlar\u0131 olabilir. Benzer \u015fekilde, bir kullan\u0131c\u0131n\u0131n oturum bilgilerinin kaybolmas\u0131 veya al\u0131\u015fveri\u015f sepetindeki \u00fcr\u00fcnlerin silinmesi, durum y\u00f6netiminin yetersizli\u011fine i\u015faret eder.<\/p>\n
Bu makale, bu temel kavramlar\u0131 en ba\u015ftan ele alarak, herhangi bir teknik ge\u00e7mi\u015fi olmayan okuyucular\u0131n bile anlayabilece\u011fi bir dille a\u00e7\u0131klayacakt\u0131r. Amac\u0131m\u0131z, web’in nas\u0131l i\u015fledi\u011fine dair sa\u011flam bir temel olu\u015fturmak ve bu bilginin \u0131\u015f\u0131\u011f\u0131nda daha iyi web uygulamalar\u0131 geli\u015ftirmek veya mevcut sorunlar\u0131 daha etkin bir \u015fekilde te\u015fhis etmek i\u00e7in gerekli ara\u00e7lar\u0131 sa\u011flamakt\u0131r. Ayr\u0131ca, modern web geli\u015ftirmenin vazge\u00e7ilmez unsurlar\u0131ndan olan bu konularda pratik \u00f6rnekler ve ger\u00e7ek d\u00fcnya senaryolar\u0131yla konuyu peki\u015ftirece\u011fiz. Web’in dinamik yap\u0131s\u0131n\u0131, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen fakt\u00f6rleri ve performans\u0131 art\u0131rmak i\u00e7in kullan\u0131labilecek stratejileri ad\u0131m ad\u0131m inceleyece\u011fiz. Bu sayede, sadece geli\u015ftiriciler de\u011fil, ayn\u0131 zamanda dijital \u00fcr\u00fcn y\u00f6neticileri, tasar\u0131mc\u0131lar ve genel olarak internetin i\u015fleyi\u015fine ilgi duyan herkes i\u00e7in de\u011ferli bilgiler sunmay\u0131 hedefliyoruz. Sonu\u00e7 olarak, bu temel prensipleri anlamak, yaln\u0131zca teknik becerilerinizi geli\u015ftirmekle kalmayacak, ayn\u0131 zamanda web uygulamalar\u0131n\u0131n sundu\u011fu potansiyeli tam olarak de\u011ferlendirmenizi sa\u011flayacakt\u0131r.<\/p>\n
Web’in kalbinde yatan istemci-sunucu (Client-Server) modeli, internet \u00fczerindeki t\u00fcm ileti\u015fimlerin temelini olu\u015fturur. Bu model, iki ana akt\u00f6r \u00fczerine kuruludur: bir yandan hizmet talep eden istemci (client)<\/strong>, di\u011fer yandan bu taleplere yan\u0131t veren sunucu (server)<\/strong>. En basit haliyle, bu model, bir restorandaki m\u00fc\u015fteri ve garson ili\u015fkisine benzetilebilir: m\u00fc\u015fteri yemek sipari\u015f eder (istek), garson sipari\u015fi mutfa\u011fa iletir ve pi\u015firilen yeme\u011fi m\u00fc\u015fteriye getirir (yan\u0131t).<\/p>\n Web ba\u011flam\u0131nda, istemci genellikle web taray\u0131c\u0131n\u0131zd\u0131r (Chrome, Firefox, Safari vb.) veya bir mobil uygulama, bir masa\u00fcst\u00fc uygulamas\u0131 veya hatta bir IoT (Nesnelerin \u0130nterneti) cihaz\u0131 olabilir. \u0130stemcinin g\u00f6revi, kullan\u0131c\u0131n\u0131n isteklerini almak, bunlar\u0131 anla\u015f\u0131l\u0131r bir formata d\u00f6n\u00fc\u015ft\u00fcrmek ve sunucuya g\u00f6ndermektir. \u00d6rne\u011fin, bir web sitesi adresini (URL) taray\u0131c\u0131n\u0131za yazd\u0131\u011f\u0131n\u0131zda veya bir linke t\u0131klad\u0131\u011f\u0131n\u0131zda, taray\u0131c\u0131n\u0131z o siteye eri\u015fmek i\u00e7in bir istek olu\u015fturur.<\/p>\n Di\u011fer tarafta ise sunucu bulunur. Sunucu, istemciden gelen istekleri dinleyen, bunlar\u0131 i\u015fleyen ve uygun bir yan\u0131tla geri d\u00f6nen g\u00fc\u00e7l\u00fc bir bilgisayar veya yaz\u0131l\u0131m sistemidir. Bir web sunucusu, web sayfalar\u0131n\u0131, resimleri, videolar\u0131 veya di\u011fer dosyalar\u0131 depolayabilir ve istemci bunlar\u0131 istedi\u011finde sunabilir. Sunucu genellikle a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izler:<\/p>\n Bu s\u00fcrecin en g\u00fczel yan\u0131, hem istemcinin hem de sunucunun birbirlerinin i\u00e7 i\u015fleyi\u015finden ba\u011f\u0131ms\u0131z olmalar\u0131d\u0131r. \u0130stemci, sunucunun iste\u011fi nas\u0131l i\u015fledi\u011fini bilmek zorunda de\u011fildir; sadece bir istek g\u00f6nderir ve bir yan\u0131t bekler. Benzer \u015fekilde, sunucu da istemcinin yan\u0131t\u0131 nas\u0131l g\u00f6r\u00fcnt\u00fcleyece\u011fini umursamaz; sadece do\u011fru bilgiyi do\u011fru formatta sa\u011flar. Bu “ay\u0131rma”, sistemin \u00f6l\u00e7eklenebilirli\u011fini, esnekli\u011fini ve bak\u0131m kolayl\u0131\u011f\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde art\u0131r\u0131r. \u00d6rne\u011fin, bir sunucu bak\u0131mdayken, istemciler farkl\u0131 bir sunucuya y\u00f6nlendirilebilir; ya da bir istemci (\u00f6rne\u011fin bir mobil uygulama), ayn\u0131 sunucudan farkl\u0131 bir aray\u00fczle bilgi alabilir.<\/p>\n \u0130stemci-sunucu modeli, sadece web siteleri i\u00e7in de\u011fil, e-posta, dosya transferi (FTP) veya \u00e7evrimi\u00e7i oyunlar gibi bir\u00e7ok farkl\u0131 a\u011f tabanl\u0131 uygulama i\u00e7in de temel bir mimari olarak kullan\u0131l\u0131r. Bu model sayesinde, d\u00fcnya genelindeki milyonlarca cihaz birbiriyle ileti\u015fim kurabilir ve bilgi al\u0131\u015fveri\u015finde bulunabilir. Dolay\u0131s\u0131yla, web uygulamalar\u0131n\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak i\u00e7in bu temel mimariyi kavramak, at\u0131lacak ilk ve en \u00f6nemli ad\u0131md\u0131r.<\/p>\n \u0130stemci-sunucu modelinde ileti\u015fimin ger\u00e7ekle\u015fmesi i\u00e7in standart bir dil, yani bir protokol gereklidir. Web’de bu dilin ad\u0131 HTTP (Hypertext Transfer Protocol)<\/strong>‘dir. HTTP, web taray\u0131c\u0131n\u0131z\u0131n (istemci) web sunucular\u0131yla nas\u0131l ileti\u015fim kuraca\u011f\u0131n\u0131 tan\u0131mlayan bir dizi kurald\u0131r. Temelde, bir istemcinin bir sunucudan bilgi talep etme ve sunucunun bu bilgiye nas\u0131l yan\u0131t verece\u011fini belirler. HTTP’nin daha g\u00fcvenli bir versiyonu olan HTTPS (HTTP Secure)<\/strong> ise, ileti\u015fimi \u015fifreleyerek veri g\u00fcvenli\u011fini sa\u011flar ve g\u00fcn\u00fcm\u00fczde \u00e7o\u011fu web sitesi taraf\u0131ndan tercih edilir.<\/p>\n HTTP ileti\u015fimi, istek (request) ve yan\u0131t (response) \u00e7iftleri \u00fczerine kuruludur. \u0130stemci, belirli bir kayna\u011fa eri\u015fmek i\u00e7in bir HTTP iste\u011fi g\u00f6nderir ve sunucu bu iste\u011fi i\u015fleyip bir HTTP yan\u0131t\u0131 ile geri d\u00f6ner. Bu istek ve yan\u0131tlar, belirli y\u00f6ntemler, ba\u015fl\u0131klar ve durum kodlar\u0131 i\u00e7erir:<\/p>\n HTTP’nin en temel \u00f6zelliklerinden biri durumsuz (stateless)<\/strong> olmas\u0131d\u0131r. Yani, her HTTP iste\u011fi di\u011ferinden ba\u011f\u0131ms\u0131zd\u0131r ve sunucu, \u00f6nceki istekler hakk\u0131nda herhangi bir bilgi “hat\u0131rlamaz”. Bu durum, performans\u0131 ve \u00f6l\u00e7eklenebilirli\u011fi art\u0131r\u0131rken, ayn\u0131 zamanda al\u0131\u015fveri\u015f sepeti gibi durum bilgisi gerektiren senaryolarda \u00f6zel \u00e7\u00f6z\u00fcmler gerektirir. D\u00fc\u015f\u00fcn\u00fcn ki bir online ma\u011fazada al\u0131\u015fveri\u015f yap\u0131yorsunuz. Sepetinize \u00fcr\u00fcnler eklediniz, ancak her sayfa yenilendi\u011finde veya ba\u015fka bir sayfaya ge\u00e7ti\u011finizde sepetiniz s\u0131f\u0131rlan\u0131yor. Bu, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kabul edilemez bir durum olurdu, \u00e7\u00fcnk\u00fc HTTP kendili\u011finden \u00f6nceki etkile\u015fimleri hat\u0131rlamaz.<\/p>\n Bu senaryoda, sunucunun kullan\u0131c\u0131n\u0131n sepetindeki \u00fcr\u00fcnleri “hat\u0131rlamas\u0131” gerekir. \u0130\u015fte tam da burada “durum y\u00f6netimi” kavram\u0131 devreye girer. Durumsuz HTTP protokol\u00fcn\u00fc kullanarak durumlu uygulamalar olu\u015fturmak i\u00e7in \u00e7erezler (cookies), oturumlar (sessions) veya web depolama (web storage) gibi ek mekanizmalar kullan\u0131l\u0131r. Bu mekanizmalar sayesinde, sunucu her istekle birlikte g\u00f6nderilen veya istemcinin kendi taraf\u0131nda saklad\u0131\u011f\u0131 bilgiler arac\u0131l\u0131\u011f\u0131yla kullan\u0131c\u0131n\u0131n kimli\u011fini ve \u00f6nceki eylemlerini tan\u0131yabilir. B\u00f6ylece, kullan\u0131c\u0131 sepete bir \u00fcr\u00fcn ekledi\u011finde, bu bilgi bir \u00e7erezde saklanabilir veya sunucuda o kullan\u0131c\u0131n\u0131n oturum bilgileriyle ili\u015fkilendirilebilir. Bir sonraki istekte, bu bilgi sunucuya geri g\u00f6nderilerek sepetin i\u00e7eri\u011fi korunmu\u015f olur.<\/p>\n Bu nedenle, HTTP’nin i\u015fleyi\u015fini ve onun do\u011fal olarak durumsuz yap\u0131s\u0131n\u0131 anlamak, modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini nas\u0131l koruyaca\u011f\u0131m\u0131z\u0131 ve geli\u015ftirece\u011fimizi belirlemede kritik bir ad\u0131md\u0131r. Bir sonraki b\u00f6l\u00fcmde, bu durumsuzlu\u011fun \u00fcstesinden nas\u0131l geldi\u011fimizi ve durum y\u00f6netiminin web uygulamalar\u0131 i\u00e7in neden bu kadar karma\u015f\u0131k ve \u00f6nemli oldu\u011funu daha detayl\u0131 inceleyece\u011fiz.<\/p>\n Web’in temel ileti\u015fim protokol\u00fc olan HTTP’nin durumsuz yap\u0131s\u0131, ayn\u0131 zamanda web uygulamalar\u0131nda durum y\u00f6netimini kritik ve bazen karma\u015f\u0131k bir konu haline getirir. Bir kullan\u0131c\u0131n\u0131n web sitesiyle olan etkile\u015fimini, yani “durumunu” hat\u0131rlamak, modern, dinamik ve ki\u015fiselle\u015ftirilmi\u015f web deneyimleri sunabilmek i\u00e7in vazge\u00e7ilmezdir. Durum y\u00f6netimi olmadan, her sayfa yenilemesinde veya yeni bir sayfaya ge\u00e7ildi\u011finde kullan\u0131c\u0131n\u0131n oturum bilgileri, al\u0131\u015fveri\u015f sepeti i\u00e7eri\u011fi, tercihleri veya girdi\u011fi form bilgileri kaybolurdu. Bu durum, kullan\u0131c\u0131 i\u00e7in olduk\u00e7a k\u00f6t\u00fc bir deneyim yarat\u0131r.<\/p>\n Web ba\u011flam\u0131nda durum (state)<\/strong>, bir kullan\u0131c\u0131n\u0131n belirli bir anda uygulama ile olan etkile\u015fiminin t\u00fcm ilgili verilerini ifade eder. Bu veriler \u015funlar\u0131 i\u00e7erebilir:<\/p>\n Durum y\u00f6netimi, bu bilgilerin istemci (taray\u0131c\u0131) ve sunucu aras\u0131nda tutarl\u0131 bir \u015fekilde saklanmas\u0131, eri\u015filmesi ve g\u00fcncellenmesi s\u00fcrecidir. HTTP’nin durumsuz do\u011fas\u0131 nedeniyle, her istek-yan\u0131t d\u00f6ng\u00fcs\u00fcnde bu bilgilerin bir \u015fekilde iletilmesi veya eri\u015filebilir k\u0131l\u0131nmas\u0131 gerekir. Aksi takdirde, her istek sanki ilk kez yap\u0131l\u0131yormu\u015f gibi ele al\u0131n\u0131r ve kullan\u0131c\u0131 deneyimi kesintiye u\u011frar.<\/p>\n \u0130stemci taraf\u0131nda durum y\u00f6netimi, verilerin do\u011frudan kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131nda saklanmas\u0131 anlam\u0131na gelir. Bu y\u00f6ntemler, sunucu y\u00fck\u00fcn\u00fc azalt\u0131rken, kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131 kapat\u0131ld\u0131\u011f\u0131nda veya belirli bir s\u00fcre sonra kaybolma riski ta\u015f\u0131r.<\/p>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n<\/ul>\n Her iki depolama t\u00fcr\u00fc de genellikle 5-10 MB boyutunda veri depolayabilir ve sunucuya otomatik olarak g\u00f6nderilmezler, bu da onlar\u0131 cookie'lerden daha performansl\u0131 hale getirir. Ancak g\u00fcvenlik a\u00e7\u0131s\u0131ndan, XSS (Cross-Site Scripting) sald\u0131r\u0131lar\u0131na kar\u015f\u0131 dikkatli olunmal\u0131d\u0131r, zira JavaScript ile kolayca eri\u015filebilirler.<\/p>\n<\/li>\n<\/ul>\n Sunucu taraf\u0131nda durum y\u00f6netimi, verilerin sunucuda depolanmas\u0131 anlam\u0131na gelir. Bu y\u00f6ntemler genellikle daha g\u00fcvenlidir, ancak sunucu kaynaklar\u0131n\u0131 daha fazla t\u00fcketebilir.<\/p>\n Bankac\u0131l\u0131k gibi hassas bilgilerin i\u015flendi\u011fi uygulamalarda durum y\u00f6netimi, en \u00fcst d\u00fczeyde g\u00fcvenlik gerektirir. Burada genellikle sunucu tabanl\u0131 oturum y\u00f6netimi ve token'lar bir arada kullan\u0131l\u0131r. \u00d6rne\u011fin:<\/p>\n Bu karma\u015f\u0131k yap\u0131, kullan\u0131c\u0131n\u0131n bakiyesini veya finansal i\u015flemlerini g\u00fcvenle g\u00f6r\u00fcnt\u00fcleyebilmesini sa\u011flarken, ayn\u0131 zamanda yetkisiz eri\u015fim riskini minimize eder. Durum y\u00f6netimi, sadece kullan\u0131\u015fl\u0131l\u0131k i\u00e7in de\u011fil, ayn\u0131 zamanda g\u00fcvenlik i\u00e7in de hayati bir rol oynar.<\/p>\n Temel durum y\u00f6netimi mekanizmalar\u0131n\u0131n \u00f6tesinde, b\u00fcy\u00fck \u00f6l\u00e7ekli ve karma\u015f\u0131k web uygulamalar\u0131, daha sofistike stratejilere ihtiya\u00e7 duyar. Bu stratejiler, \u00f6zellikle tek sayfa uygulamalar\u0131 (SPA - Single Page Application) pop\u00fclerle\u015ftik\u00e7e daha da \u00f6nem kazanm\u0131\u015ft\u0131r. Bu t\u00fcr uygulamalar, sayfa yenilemesi olmadan dinamik i\u00e7erik y\u00fckledi\u011fi i\u00e7in, istemci taraf\u0131ndaki durumun tutarl\u0131 bir \u015fekilde y\u00f6netilmesi zorunlu hale gelir.<\/p>\n Modern JavaScript \u00e7er\u00e7eveleri (React, Vue, Angular) ve k\u00fct\u00fcphaneleri, istemci taraf\u0131 durum y\u00f6netimini kolayla\u015ft\u0131rmak i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar:<\/p>\n Bu k\u00fct\u00fcphaneler ve \u00e7er\u00e7eveler, durumu \u00f6ng\u00f6r\u00fclebilir ve izlenebilir hale getirerek, uygulaman\u0131n bak\u0131m\u0131n\u0131 ve hata ay\u0131klamas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. Ayr\u0131ca, performans\u0131 optimize etmek i\u00e7in gereksiz yeniden render (tekrar \u00e7izim) i\u015flemlerini azaltmaya yard\u0131mc\u0131 olurlar.<\/p>\n Geleneksel HTTP, her istek i\u00e7in yeni bir ba\u011flant\u0131 kurdu\u011fu ve tek y\u00f6nl\u00fc (istemciden sunucuya) oldu\u011fu i\u00e7in ger\u00e7ek zamanl\u0131 uygulamalar (sohbet odalar\u0131, oyunlar, canl\u0131 bildirimler) i\u00e7in ideal de\u011fildir. WebSockets<\/strong>, bu sorunu \u00e7\u00f6zen, kal\u0131c\u0131 ve \u00e7ift y\u00f6nl\u00fc bir ileti\u015fim kanal\u0131 sa\u011flar. \u0130stemci ve sunucu aras\u0131nda bir WebSocket ba\u011flant\u0131s\u0131 kurulduktan sonra, her iki taraf da istedi\u011fi zaman veri g\u00f6nderebilir. Bu, anl\u0131k veri g\u00fcncellemeleri ve ger\u00e7ek zamanl\u0131 durum senkronizasyonu i\u00e7in m\u00fckemmel bir \u00e7\u00f6z\u00fcmd\u00fcr. \u00d6rne\u011fin, bir canl\u0131 sohbet uygulamas\u0131nda, bir kullan\u0131c\u0131 mesaj g\u00f6nderdi\u011finde, sunucu bu mesaj\u0131 an\u0131nda t\u00fcm ba\u011fl\u0131 istemcilere WebSocket \u00fczerinden iletebilir.<\/p>\n <\/code><\/p>\n Web performans\u0131n\u0131 art\u0131rman\u0131n ve sunucu y\u00fck\u00fcn\u00fc azaltman\u0131n en etkili yollar\u0131ndan biri \u00f6nbelleklemedir. \u00d6nbellekleme, s\u0131k\u00e7a eri\u015filen verileri daha h\u0131zl\u0131 bir depolama alan\u0131nda tutarak, her istekte sunucuya gitme ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r. Bu, hem istemci taraf\u0131nda (taray\u0131c\u0131 \u00f6nbelle\u011fi) hem de sunucu taraf\u0131nda (veritaban\u0131 \u00f6nbelle\u011fi, proxy \u00f6nbellekleri) uygulanabilir.<\/p>\n Durum y\u00f6netimi ve ileti\u015fim, g\u00fcvenlik endi\u015felerini de beraberinde getirir:<\/p>\n Son olarak, web uygulamalar\u0131n\u0131n mobil uyumlulu\u011fu da g\u00f6z ard\u0131 edilmemelidir. CSS <\/code><\/p>\n Bu ileri d\u00fczey stratejiler ve g\u00fcvenlik \u00f6nlemleri, web uygulamalar\u0131n\u0131n sadece i\u015flevsel olmas\u0131n\u0131 de\u011fil, ayn\u0131 zamanda g\u00fcvenli, h\u0131zl\u0131 ve kullan\u0131c\u0131 dostu olmas\u0131n\u0131 da sa\u011flar.<\/p>\n Bu makale boyunca, web uygulamalar\u0131n\u0131n temelini olu\u015fturan istemci-sunucu modeli, ileti\u015fim dili olan HTTP protokol\u00fc ve modern web deneyimlerinin vazge\u00e7ilmezi olan durum y\u00f6netimi kavramlar\u0131n\u0131 derinlemesine inceledik. HTTP'nin durumsuz yap\u0131s\u0131n\u0131n getirdi\u011fi zorluklar\u0131 a\u015fmak i\u00e7in \u00e7erezler, yerel depolama, oturumlar ve token tabanl\u0131 kimlik do\u011frulama gibi \u00e7e\u015fitli stratejilerin nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 \u00f6\u011frendik. Ayr\u0131ca, ileri d\u00fczey durum y\u00f6netimi teknikleri, performans optimizasyonlar\u0131 ve g\u00fcvenlik ipu\u00e7lar\u0131 ile web uygulamalar\u0131n\u0131z\u0131 daha sa\u011flam ve kullan\u0131c\u0131 dostu hale getirmenin yollar\u0131n\u0131 ke\u015ffettik.<\/p>\n \u00d6zetle, ba\u015far\u0131l\u0131 bir web uygulamas\u0131 geli\u015ftirmek veya mevcut bir uygulaman\u0131n performans\u0131n\u0131 anlamak i\u00e7in bu temel prensipleri kavramak hayati \u00f6nem ta\u015f\u0131r. Her bir bile\u015fenin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 bilmek, sorunlar\u0131 daha h\u0131zl\u0131 te\u015fhis etmenize, daha g\u00fcvenli \u00e7\u00f6z\u00fcmler tasarlaman\u0131za ve son kullan\u0131c\u0131lara daha ak\u0131c\u0131 ve ki\u015fiselle\u015ftirilmi\u015f bir deneyim sunman\u0131za olanak tan\u0131r. Unutmayal\u0131m ki, web s\u00fcrekli geli\u015fen bir aland\u0131r ve bu temel bilgilerin \u00fczerine in\u015fa edece\u011finiz s\u00fcrekli \u00f6\u011frenme, sizi her zaman bir ad\u0131m \u00f6nde tutacakt\u0131r. Gelecekteki web teknolojilerini anlamak ve onlara adapte olmak i\u00e7in sa\u011flam bir temele sahip olmak, dijital d\u00fcnyadaki varl\u0131\u011f\u0131n\u0131z\u0131 g\u00fc\u00e7lendirecektir.<\/p>\n HTTP (Hypertext Transfer Protocol), istemci ile sunucu aras\u0131nda veri al\u0131\u015fveri\u015fi sa\u011flayan bir protokold\u00fcr. HTTPS (HTTP Secure) ise HTTP'nin g\u00fcvenli bir versiyonudur. HTTPS, ileti\u015fimi SSL\/TLS protokolleriyle \u015fifreleyerek verilerin yetkisiz ki\u015filerce okunmas\u0131n\u0131 veya de\u011fi\u015ftirilmesini engeller, bu da \u00f6zellikle hassas bilgiler (\u015fifreler, kredi kart\u0131 bilgileri) i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<\/li>\n HTTP'nin her iste\u011fi birbirinden ba\u011f\u0131ms\u0131z olarak ele alan \"durumsuz\" yap\u0131s\u0131 nedeniyle, bir kullan\u0131c\u0131n\u0131n \u00f6nceki etkile\u015fimlerini (\u00f6rne\u011fin giri\u015f yap\u0131p yapmad\u0131\u011f\u0131, al\u0131\u015fveri\u015f sepetindeki \u00fcr\u00fcnler) hat\u0131rlayabilmek i\u00e7in durum y\u00f6netimine ihtiya\u00e7 duyar\u0131z. Durum y\u00f6netimi olmadan, her sayfa yenilemede kullan\u0131c\u0131 sanki siteye ilk kez geliyormu\u015f gibi i\u015flem g\u00f6r\u00fcrd\u00fc, bu da kullan\u0131\u015fs\u0131z ve kabul edilemez bir deneyim yarat\u0131rd\u0131.<\/p>\n<\/li>\n Bu \u00fc\u00e7\u00fc de istemci taraf\u0131nda veri depolama y\u00f6ntemleridir:<\/p>\n JWT'ler, sunucu taraf\u0131nda oturum bilgisi tutma (stateless) ihtiyac\u0131n\u0131 ortadan kald\u0131rd\u0131\u011f\u0131 i\u00e7in sunucu \u00f6l\u00e7eklenebilirli\u011fini art\u0131r\u0131r. Kimlik do\u011frulama bilgileri token'\u0131n i\u00e7inde \u015fifrelenmi\u015f olarak bulundu\u011fu i\u00e7in, birden fazla sunucu aras\u0131nda (mikroservis mimarileri) kolayca payla\u015f\u0131labilir. Bu, performans\u0131 art\u0131r\u0131rken, karma\u015f\u0131k sunucu taraf\u0131 oturum y\u00f6netimi y\u00fck\u00fcn\u00fc azalt\u0131r.<\/p>\n<\/li>\n WebSockets, istemci ve sunucu aras\u0131nda kal\u0131c\u0131, \u00e7ift y\u00f6nl\u00fc bir ileti\u015fim kanal\u0131 sa\u011flar. HTTP'nin aksine, her istek i\u00e7in yeni bir ba\u011flant\u0131 kurma gereksinimini ortadan kald\u0131r\u0131r ve sunucunun istemciye istedi\u011fi zaman veri g\u00f6ndermesine olanak tan\u0131r. Bu \u00f6zelli\u011fi sayesinde, ger\u00e7ek zamanl\u0131 uygulamalar (canl\u0131 sohbet, oyunlar, anl\u0131k bildirimler) i\u00e7in idealdir, \u00e7\u00fcnk\u00fc anl\u0131k veri ak\u0131\u015f\u0131 sa\u011flar ve gecikmeyi minimuma indirir.<\/p>\n<\/li>\n<\/ul>\n <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Modern web uygulamalar\u0131n\u0131n sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayan temel mimariyi, ileti\u015fim protokollerini ve karma\u015f\u0131k durum y\u00f6netimini anlamak, daha h\u0131zl\u0131 ve…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[874],"tags":[],"class_list":{"0":"post-31157","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-server","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n\n
HTTP Protokol\u00fc: Taray\u0131c\u0131n\u0131z ve Sunucunuz Nas\u0131l Konu\u015fuyor?<\/h2>\n
\n
\n
GET<\/code>: Sunucudan bir kaynak almak i\u00e7in kullan\u0131l\u0131r (\u00f6rne\u011fin, bir web sayfas\u0131n\u0131 y\u00fcklemek).<\/li>\nPOST<\/code>: Sunucuya veri g\u00f6ndermek i\u00e7in kullan\u0131l\u0131r (\u00f6rne\u011fin, bir formu doldurup g\u00f6ndermek).<\/li>\nPUT<\/code>: Bir kayna\u011f\u0131 g\u00fcncellemek veya olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/li>\nDELETE<\/code>: Bir kayna\u011f\u0131 sunucudan silmek i\u00e7in kullan\u0131l\u0131r.<\/li>\n<\/ul>\n<\/li>\nUser-Agent<\/code>), hangi t\u00fcr i\u00e7eri\u011fi kabul etti\u011fini (Accept<\/code>) veya daha \u00f6nce bir sayfan\u0131n \u00f6nbelle\u011fe al\u0131n\u0131p al\u0131nmad\u0131\u011f\u0131n\u0131 (If-Modified-Since<\/code>) belirtebilir. Sunucu ise yan\u0131t\u0131n i\u00e7eri\u011fi hakk\u0131nda bilgi (Content-Type<\/code>), \u00f6nbellekleme kurallar\u0131 (Cache-Control<\/code>) veya bir oturum \u00e7erezi (Set-Cookie<\/code>) g\u00f6nderebilir.<\/li>\n\n
200 OK<\/code>: \u0130stek ba\u015far\u0131l\u0131 oldu.<\/li>\n404 Not Found<\/code>: \u0130stenen kaynak bulunamad\u0131.<\/li>\n500 Internal Server Error<\/code>: Sunucuda bir hata olu\u015ftu.<\/li>\n301 Moved Permanently<\/code>: Kaynak kal\u0131c\u0131 olarak ba\u015fka bir yere ta\u015f\u0131nd\u0131.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nVaka Analizi: Online Al\u0131\u015fveri\u015f Sepeti ve HTTP’nin Durumsuz Yap\u0131s\u0131<\/h3>\n
Web Uygulamalar\u0131nda Durum Y\u00f6netimi: Neden Bu Kadar Karma\u015f\u0131k?<\/h2>\n
Durum Nedir ve Neden Y\u00f6netilmesi Gerekiyor?<\/h3>\n
\n
\u0130stemci Taraf\u0131nda Durum Y\u00f6netimi: Cookie’ler ve Yerel Depolama (LocalStorage\/SessionStorage)<\/h3>\n
\n
localStorage<\/code> ve sessionStorage<\/code> ad\u0131nda iki ana t\u00fcr\u00fc vard\u0131r.\n\n
localStorage<\/code>: Verileri kal\u0131c\u0131 olarak (kullan\u0131c\u0131 manuel olarak silene kadar) saklar. Taray\u0131c\u0131 kapat\u0131lsa bile veriler kaybolmaz.\n\n localStorage.setItem('kullaniciAdi', 'Ahmet');\n let ad = localStorage.getItem('kullaniciAdi');\n console.log(ad); \/\/ Ahmet\n localStorage.removeItem('kullaniciAdi');\n <\/pre>\nsessionStorage<\/code>: Verileri oturum s\u00fcresince (taray\u0131c\u0131 sekmesi kapat\u0131lana kadar) saklar. Sekme kapat\u0131ld\u0131\u011f\u0131nda veriler kaybolur.\n\n sessionStorage.setItem('sepetID', '12345');\n let sepet = sessionStorage.getItem('sepetID');\n console.log(sepet); \/\/ 12345\n <\/pre>\nSunucu Taraf\u0131nda Durum Y\u00f6netimi: Session'lar ve Token'lar<\/h3>\n
\n
Vaka Analizi: Bankac\u0131l\u0131k Uygulamalar\u0131nda G\u00fcvenlikli Oturum Y\u00f6netimi<\/h3>\n
\n
Session ID<\/code> i\u00e7eren bir HttpOnly<\/code> \u00e7erezi ile birlikte bir Access Token<\/code> ve Refresh Token<\/code> olu\u015fturur. HttpOnly<\/code> \u00e7erezi, JavaScript taraf\u0131ndan eri\u015filemez oldu\u011fu i\u00e7in XSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 ek koruma sa\u011flar.<\/li>\nSession ID<\/code> i\u00e7eren \u00e7erezi her istekte sunucuya g\u00f6nderir. Sunucu, bu Session ID<\/code> arac\u0131l\u0131\u011f\u0131yla kullan\u0131c\u0131n\u0131n oturum bilgilerine eri\u015fir ve yetkilendirme yapar.<\/li>\nAccess Token<\/code> belirli bir s\u00fcre (\u00f6rne\u011fin 15 dakika) ge\u00e7erli olup, API \u00e7a\u011fr\u0131lar\u0131n\u0131 yetkilendirmek i\u00e7in kullan\u0131l\u0131r. Token'\u0131n s\u00fcresi doldu\u011funda, Refresh Token<\/code> kullan\u0131larak yeni bir Access Token<\/code> al\u0131n\u0131r, b\u00f6ylece kullan\u0131c\u0131 tekrar giri\u015f yapmak zorunda kalmaz. Bu model, hem kullan\u0131c\u0131 deneyimini iyile\u015ftirir hem de Access Token<\/code> \u00e7al\u0131nsa bile k\u0131sa s\u00fcreli ge\u00e7erlili\u011fi nedeniyle riskin azalmas\u0131n\u0131 sa\u011flar.<\/li>\n\u0130leri D\u00fczey Durum Y\u00f6netimi Stratejileri ve Performans \u0130pu\u00e7lar\u0131<\/h2>\n
\u0130stemci Taraf\u0131 Durum Y\u00f6netimi K\u00fct\u00fcphaneleri ve \u00c7er\u00e7eveleri<\/h3>\n
\n
WebSockets ile Ger\u00e7ek Zamanl\u0131 Durum Y\u00f6netimi<\/h3>\n
\n\/\/ \u0130stemci taraf\u0131 WebSocket ba\u011flant\u0131 \u00f6rne\u011fi\nconst socket = new WebSocket('ws:\/\/localhost:8080');\n\nsocket.onopen = (event) => {\n console.log('WebSocket ba\u011flant\u0131s\u0131 a\u00e7\u0131ld\u0131.');\n socket.send('Merhaba sunucu!');\n};\n\nsocket.onmessage = (event) => {\n console.log('Sunucudan mesaj:', event.data);\n};\n\nsocket.onclose = (event) => {\n console.log('WebSocket ba\u011flant\u0131s\u0131 kapat\u0131ld\u0131.');\n};\n\nsocket.onerror = (error) => {\n console.error('WebSocket hatas\u0131:', error);\n};\n<\/pre>\n\u00d6nbellekleme (Caching) ve CDN'ler ile Performans Optimizasyonu<\/h3>\n
\n
Cache-Control<\/code>, Expires<\/code>, ETag<\/code>) kullan\u0131larak taray\u0131c\u0131n\u0131n belirli kaynaklar\u0131 (CSS, JS dosyalar\u0131, resimler) belirli bir s\u00fcre boyunca yerel olarak saklamas\u0131 sa\u011flan\u0131r. Bu, tekrar ziyaretlerde sayfa y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131salt\u0131r.<\/li>\nG\u00fcvenlik \u0130pu\u00e7lar\u0131 ve Mobil Uyumluluk<\/h3>\n
\n
HttpOnly<\/code> \u00e7erezlerinde veya g\u00fcvenli bir depolama mekanizmas\u0131nda) ve \u00e7al\u0131nmalar\u0131 durumunda iptal mekanizmalar\u0131n\u0131n bulundu\u011fundan emin olun.<\/li>\n<\/ul>\n@media<\/code> sorgular\u0131 kullanarak farkl\u0131 ekran boyutlar\u0131na ve cihazlara uyum sa\u011flayan duyarl\u0131 tasar\u0131mlar olu\u015fturmak, modern web geli\u015ftirmenin temelidir. Bu, kullan\u0131c\u0131lar\u0131n cep telefonlar\u0131ndan tabletlerine, masa\u00fcst\u00fc bilgisayarlar\u0131na kadar her cihazda e\u015fit derecede iyi bir deneyim ya\u015famas\u0131n\u0131 garanti eder. \u00d6rne\u011fin, a\u015fa\u011f\u0131daki gibi bir @media<\/code> sorgusu, mobil cihazlar i\u00e7in farkl\u0131 bir d\u00fczen belirleyebilir:<\/p>\n\n@media screen and (max-width: 768px) {\n .ana-menu {\n flex-direction: column;\n align-items: center;\n }\n .icerik {\n padding: 10px;\n }\n}\n<\/pre>\nSonu\u00e7: Web Deneyimini \u0130yile\u015ftirmek \u0130\u00e7in Ne Bilmeliyiz?<\/h2>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\n
\n