Full stack geli\u015ftirici olma yolculu\u011funuzun 6, 7, 8 ve 9. g\u00fcnlerinde sizi neler bekliyor? Frontend’den backend’e, veritaban\u0131ndan deployment’a temel ad\u0131mlar\u0131 ke\u015ffederken bu d\u00f6rt kritik g\u00fcn\u00fc en verimli \u015fekilde de\u011ferlendirin.<\/p>\n
Full stack geli\u015ftiricinin en temel sorumluluklar\u0131ndan biri, kullan\u0131c\u0131lar\u0131n do\u011frudan etkile\u015fime ge\u00e7ti\u011fi aray\u00fczleri hem estetik hem de i\u015flevsel a\u00e7\u0131dan kusursuz hale getirmektir. Yolculu\u011fumuzun 6. g\u00fcn\u00fcnde, frontend geli\u015ftirmenin inceliklerine dal\u0131yor ve \u00f6zellikle kullan\u0131c\u0131 deneyimini (UX) nas\u0131l optimize edebilece\u011fimize odaklan\u0131yoruz. \u00c7\u00fcnk\u00fc bir uygulaman\u0131n ba\u015far\u0131s\u0131, sadece arka plandaki g\u00fc\u00e7l\u00fc algoritmalarla de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n onu ne kadar rahat ve keyifli kulland\u0131\u011f\u0131yla da \u00f6l\u00e7\u00fcl\u00fcr. Bu nedenle, sadece kod yazmakla kalmay\u0131p, ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n beklentilerini anlamak ve kar\u015f\u0131lamak b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r.<\/p>\n
\u00d6ncelikle, mobil uyumluluk ve duyarl\u0131 tasar\u0131m (responsive design) konular\u0131na de\u011finmek elzemdir. G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda internet kullan\u0131c\u0131lar\u0131n\u0131n b\u00fcy\u00fck bir k\u0131sm\u0131 web sitelerine mobil cihazlar\u0131ndan eri\u015fiyor. Bu durum, uygulamalar\u0131m\u0131z\u0131n farkl\u0131 ekran boyutlar\u0131na ve cihazlara sorunsuz bir \u015fekilde adapte olmas\u0131n\u0131 zorunlu k\u0131l\u0131yor. CSS Flexbox ve Grid gibi modern d\u00fczenleme ara\u00e7lar\u0131, bu uyumlulu\u011fu sa\u011flamak i\u00e7in vazge\u00e7ilmezdir. \u00d6rne\u011fin, bir e-ticaret sitesinde \u00fcr\u00fcn listelerinin k\u00fc\u00e7\u00fck ekranlarda alt alta, geni\u015f ekranlarda ise yan yana d\u00fczenlenmesi, kullan\u0131c\u0131 deneyimini do\u011frudan etkiler. Bu t\u00fcr d\u00fczenlemeleri yaparken, yaln\u0131zca estetik de\u011fil, ayn\u0131 zamanda sayfa y\u00fckleme h\u0131z\u0131 gibi performans metriklerini de g\u00f6z \u00f6n\u00fcnde bulundurmal\u0131y\u0131z. Daha az g\u00f6rsel istek, optimize edilmi\u015f g\u00f6rseller ve uygun \u00f6nbellekleme stratejileri, bir web sayfas\u0131n\u0131n mobil cihazlarda ne kadar h\u0131zl\u0131 y\u00fcklendi\u011fini belirleyen kritik fakt\u00f6rlerdir.<\/p>\n
JavaScript taraf\u0131nda ise, DOM manip\u00fclasyonlar\u0131 ve olay y\u00f6netimi (event handling) becerilerimizi peki\u015ftirmemiz gerekiyor. Kullan\u0131c\u0131n\u0131n bir butona t\u0131klamas\u0131, bir formu doldurmas\u0131 veya bir \u00f6\u011fenin \u00fczerine gelmesi gibi etkile\u015fimleri do\u011fru bir \u015fekilde y\u00f6netmek, dinamik ve interaktif bir aray\u00fcz olu\u015fturman\u0131n anahtar\u0131d\u0131r. Modern JavaScript \u00e7er\u00e7eveleri (React, Vue, Angular gibi), bu t\u00fcr i\u015flemleri \u00e7ok daha kolay ve y\u00f6netilebilir hale getirse de, temel JavaScript bilgisinin sa\u011flam olmas\u0131, bu \u00e7er\u00e7eveleri daha etkin kullanabilmemiz i\u00e7in hayati \u00f6neme sahiptir. Ayr\u0131ca, frontend performans\u0131n\u0131 art\u0131rmak i\u00e7in asenkron JavaScript kullan\u0131m\u0131 da kritik bir beceridir. \u00d6rne\u011fin, bir API’den veri \u00e7ekerken sayfan\u0131n kilitlenmesini \u00f6nlemek i\u00e7in Son olarak, eri\u015filebilirlik (accessibility) kavram\u0131na de\u011finmek zorunday\u0131z. Web uygulamalar\u0131m\u0131z\u0131n herkes taraf\u0131ndan, engelli bireyler de dahil olmak \u00fczere, rahat\u00e7a kullan\u0131labilir olmas\u0131 bir etik sorumluluktur ve \u00e7o\u011fu \u00fclkede yasal bir gerekliliktir. Anlamsal HTML (semantic HTML) kullanmak, uygun ARIA (Accessible Rich Internet Applications) rollerini ve etiketlerini eklemek, klavye navigasyonunu sa\u011flamak ve yeterli renk kontrast\u0131 sunmak, eri\u015filebilir bir aray\u00fcz olu\u015fturman\u0131n temel ad\u0131mlar\u0131d\u0131r. \u00d6rne\u011fin, bir g\u00f6rsel i\u00e7in Full stack geli\u015ftirici yolculu\u011fumuzun 7. g\u00fcn\u00fcne geldi\u011fimizde, art\u0131k uygulamam\u0131z\u0131n “beyni” olan backend k\u0131sm\u0131na ve onunla etkile\u015fim kurman\u0131n ana yolu olan API’lere odaklan\u0131yoruz. API (Application Programming Interface), farkl\u0131 yaz\u0131l\u0131m bile\u015fenlerinin birbiriyle ileti\u015fim kurmas\u0131n\u0131 sa\u011flayan kurallar ve protokoller b\u00fct\u00fcn\u00fcd\u00fcr. Bir frontend uygulamas\u0131n\u0131n bir sunucudan veri istemesi veya sunucuya veri g\u00f6ndermesi gerekti\u011finde, bu ileti\u015fim API’ler arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015fir. G\u00fcn\u00fcm\u00fczde en yayg\u0131n API mimarilerinden biri olan RESTful servisler, basitli\u011fi, \u00f6l\u00e7eklenebilirli\u011fi ve standart HTTP y\u00f6ntemlerini kullanmas\u0131 sayesinde b\u00fcy\u00fck pop\u00fclerlik kazanm\u0131\u015ft\u0131r. RESTful API’ler, kaynaklara (resources) URI’lar (Uniform Resource Identifiers) arac\u0131l\u0131\u011f\u0131yla eri\u015fir ve bu kaynaklar \u00fczerinde CRUD (Create, Read, Update, Delete) operasyonlar\u0131n\u0131 ger\u00e7ekle\u015ftirmek i\u00e7in HTTP metotlar\u0131n\u0131 (GET, POST, PUT, DELETE) kullan\u0131r.<\/p>\n \u00d6rne\u011fin, bir e-ticaret uygulamas\u0131nda \u00fcr\u00fcnleri listelemek i\u00e7in <\/code><\/p>\n Bu kod blo\u011fu, Son olarak, API dok\u00fcmantasyonu da bir o kadar \u00f6nemlidir. \u00d6zellikle b\u00fcy\u00fck projelerde veya ekip halinde \u00e7al\u0131\u015f\u0131rken, geli\u015ftiricilerin API'nizin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, hangi endpoint'lerin oldu\u011funu, hangi parametreleri bekledi\u011fini ve ne t\u00fcr yan\u0131tlar d\u00f6nd\u00fcrd\u00fc\u011f\u00fcn\u00fc bilmesi gerekir. Swagger\/OpenAPI gibi ara\u00e7lar, API dok\u00fcmantasyonunu otomatik olarak olu\u015fturman\u0131za ve g\u00fcncel tutman\u0131za yard\u0131mc\u0131 olabilir. Bu sayede, hem kendi ekibinizin hem de harici geli\u015ftiricilerin API'nizi kolayca entegre etmesini sa\u011flars\u0131n\u0131z. API geli\u015ftirme, bir full stack geli\u015ftiricinin backend yeteneklerinin temelini olu\u015fturur ve bu beceriler, modern web uygulamalar\u0131n\u0131n olmazsa olmaz\u0131d\u0131r.<\/p>\n Full stack geli\u015ftirici yolculu\u011fumuzun 8. g\u00fcn\u00fcnde, uygulamalar\u0131m\u0131z\u0131n belkemi\u011fi olan veritabanlar\u0131na derinlemesine bak\u0131yoruz. Veritabanlar\u0131, uygulamalar\u0131m\u0131z\u0131n t\u00fcm verilerini (kullan\u0131c\u0131 bilgileri, \u00fcr\u00fcnler, sipari\u015fler, ayarlar vb.) depolad\u0131\u011f\u0131 ve gerekti\u011finde h\u0131zl\u0131ca eri\u015febildi\u011fi yerlerdir. Do\u011fru veritaban\u0131 se\u00e7imi ve etkili bir veri modelleme, uygulaman\u0131z\u0131n performans\u0131, \u00f6l\u00e7eklenebilirli\u011fi ve bak\u0131m\u0131 \u00fczerinde do\u011frudan bir etkiye sahiptir. Genel olarak, iki ana veritaban\u0131 t\u00fcr\u00fcyle kar\u015f\u0131la\u015f\u0131r\u0131z: \u0130li\u015fkisel Veritabanlar\u0131 (SQL) ve \u0130li\u015fkisel Olmayan Veritabanlar\u0131 (NoSQL). Her ikisinin de kendine \u00f6zg\u00fc avantajlar\u0131 ve dezavantajlar\u0131 vard\u0131r ve se\u00e7im, projenin \u00f6zel gereksinimlerine ba\u011fl\u0131d\u0131r.<\/p>\n \u0130li\u015fkisel veritabanlar\u0131, verileri tablolar halinde organize eder ve bu tablolar aras\u0131ndaki ili\u015fkileri tan\u0131mlamak i\u00e7in anahtarlar\u0131 kullan\u0131r. PostgreSQL, MySQL, SQL Server gibi pop\u00fcler veritabanlar\u0131 bu kategoriye girer. SQL veritabanlar\u0131, veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc (data integrity) ve tutarl\u0131l\u0131\u011f\u0131n\u0131 (consistency) sa\u011flamada m\u00fckemmeldir, bu da bankac\u0131l\u0131k veya e-ticaret gibi i\u015flemlerin kritik oldu\u011fu uygulamalar i\u00e7in idealdir. Veri modellemesi yaparken, \"varl\u0131k-ili\u015fki diyagramlar\u0131\" (ERD - Entity-Relationship Diagram) olu\u015fturarak ba\u015flar\u0131z. Bu diyagramlar, veritaban\u0131m\u0131zdaki tablolar\u0131 (varl\u0131klar\u0131), bu tablolar\u0131n s\u00fctunlar\u0131n\u0131 (niteliklerini) ve tablolar aras\u0131ndaki ili\u015fkileri (bire-bir, bire-\u00e7ok, \u00e7oka-\u00e7ok) g\u00f6rselle\u015ftirir. \u00d6rne\u011fin, bir e-ticaret uygulamas\u0131nda \"Kullan\u0131c\u0131lar\" tablosu ile \"Sipari\u015fler\" tablosu aras\u0131nda \"bire-\u00e7ok\" bir ili\u015fki olabilir, \u00e7\u00fcnk\u00fc bir kullan\u0131c\u0131 birden fazla sipari\u015f verebilirken, her sipari\u015f yaln\u0131zca bir kullan\u0131c\u0131ya aittir.<\/p>\n SQL kullanarak bir tablo olu\u015fturma \u00f6rne\u011fi:<\/p>\n <\/code><\/p>\n Bu \u00f6rnekte, NoSQL veritabanlar\u0131, ili\u015fkisel veritabanlar\u0131n\u0131n aksine, verileri genellikle \u015femas\u0131z (schemaless) veya esnek \u015femal\u0131 bir yap\u0131da depolar. MongoDB (belge tabanl\u0131), Cassandra (s\u00fctun tabanl\u0131), Redis (anahtar-de\u011fer) ve Neo4j (graf tabanl\u0131) gibi \u00e7e\u015fitleri vard\u0131r. NoSQL veritabanlar\u0131, \u00f6zellikle b\u00fcy\u00fck veri hacimleri, y\u00fcksek \u00f6l\u00e7eklenebilirlik gereksinimleri ve h\u0131zl\u0131 veri eri\u015fimi gerektiren durumlarda tercih edilir. \u0130li\u015fkisel veri modelinin k\u0131s\u0131tlay\u0131c\u0131 olabilece\u011fi veya verinin yap\u0131s\u0131n\u0131n s\u0131k\u00e7a de\u011fi\u015fti\u011fi projelerde de avantaj sa\u011flarlar. \u00d6rne\u011fin, bir blog sitesindeki yorumlar veya sosyal medya g\u00f6nderileri gibi yap\u0131sal olarak de\u011fi\u015fken olabilecek veriler i\u00e7in MongoDB gibi belge tabanl\u0131 bir veritaban\u0131 uygun olabilir.<\/p>\n MongoDB'de bir belge (document) \u00f6rne\u011fi:<\/p>\n <\/code><\/p>\n Bu \u00f6rnekte, bir \u00fcr\u00fcn belgesi i\u00e7inde markay\u0131, fiyat\u0131, a\u00e7\u0131klamay\u0131 ve hatta alt belgeler ( Sonu\u00e7 olarak, veritaban\u0131 se\u00e7imi ve modellemesi, uygulaman\u0131z\u0131n temellerini atarken verilen en kritik kararlardan biridir. Her iki veritaban\u0131 t\u00fcr\u00fcn\u00fcn de kendi kullan\u0131m alanlar\u0131 ve g\u00fc\u00e7l\u00fc y\u00f6nleri vard\u0131r. Tam bir full stack geli\u015ftirici olmak i\u00e7in hem SQL hem de NoSQL veritabanlar\u0131n\u0131n temel prensiplerini ve kullan\u0131m senaryolar\u0131n\u0131 anlamak esast\u0131r. Hangi veritaban\u0131 modelini se\u00e7erseniz se\u00e7in, verilerinizin d\u00fczenli, g\u00fcvenli ve verimli bir \u015fekilde depoland\u0131\u011f\u0131ndan emin olmak i\u00e7in dikkatli bir planlama ve tasar\u0131m \u015fartt\u0131r.<\/p>\n Full stack geli\u015ftirici yolculu\u011fumuzun 9. g\u00fcn\u00fcne geldi\u011fimizde, frontend ve backend'i birbirine ba\u011flaman\u0131n en kritik y\u00f6nlerinden birine odaklan\u0131yoruz: asenkron veri ak\u0131\u015f\u0131. Modern web uygulamalar\u0131, kullan\u0131c\u0131ya kesintisiz bir deneyim sunmak i\u00e7in arka planda veri al\u0131\u015fveri\u015fi yapmal\u0131d\u0131r. Bu, bir kullan\u0131c\u0131n\u0131n sayfay\u0131 yeniden y\u00fcklemeden yeni i\u00e7erik g\u00f6rmesi, form g\u00f6ndermesi veya verileri g\u00fcncellemesi anlam\u0131na gelir. JavaScript'in asenkron do\u011fas\u0131 ve Fetch API veya Axios gibi k\u00fct\u00fcphaneler, bu ileti\u015fimi y\u00f6netmek i\u00e7in ana ara\u00e7lar\u0131m\u0131zd\u0131r. Bu g\u00fcn, veritaban\u0131 ve API bilgilerimizi birle\u015ftirerek, frontend'in backend ile nas\u0131l verimli bir \u015fekilde ileti\u015fim kurdu\u011funu derinlemesine inceleyece\u011fiz.<\/p>\n Taray\u0131c\u0131da, backend API'lerine istek g\u00f6ndermek i\u00e7in genellikle Fetch API'\u0131 kullan\u0131r\u0131z. Fetch API, a\u011f istekleri yapmak i\u00e7in modern ve g\u00fc\u00e7l\u00fc bir aray\u00fczd\u00fcr. Promise tabanl\u0131 \u00e7al\u0131\u015f\u0131r, bu da asenkron i\u015flemlerin sonu\u00e7lar\u0131n\u0131 daha y\u00f6netilebilir bir \u015fekilde ele almam\u0131z\u0131 sa\u011flar. Bir \u00f6rnekle a\u00e7\u0131klayal\u0131m: Bir uygulamada t\u00fcm \u00fcr\u00fcnleri listelemek istedi\u011fimizde, frontend'den backend'deki <\/code><\/p>\n Yukar\u0131daki kod blo\u011funda, <\/code><\/p>\n Burada Son olarak, g\u00fcvenlik de bu k\u00f6pr\u00fcn\u00fcn sa\u011flam olmas\u0131n\u0131 gerektirir. Backend'den gelen verileri frontend'de do\u011frudan HTML olarak g\u00f6stermemek (XSS sald\u0131r\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in), kullan\u0131c\u0131 giri\u015fi verilerini backend'e g\u00f6ndermeden \u00f6nce \u00f6n tarafta temel do\u011frulamalar\u0131 yapmak ve hassas bilgileri (\u015fifreler gibi) g\u00fcvenli bir \u015fekilde aktarmak (HTTPS kullanarak), bir full stack geli\u015ftiricinin dikkat etmesi gereken \u00f6nemli noktalard\u0131r. Bu g\u00fcn, backend ile frontend aras\u0131ndaki bu kritik ileti\u015fimin temellerini atm\u0131\u015f olduk. Bu beceriler, dinamik ve etkile\u015fimli modern web uygulamalar\u0131 olu\u015fturmak i\u00e7in vazge\u00e7ilmezdir ve full stack geli\u015ftirici olarak sizi daha da g\u00fc\u00e7l\u00fc k\u0131lar.<\/p>\n \u015eimdiye kadar \u00f6\u011frendi\u011fimiz t\u00fcm kavramlar\u0131 bir araya getirerek, ger\u00e7ek d\u00fcnya bir senaryo \u00fczerinden bir full stack geli\u015ftiricinin nas\u0131l d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcn\u00fc ve \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 inceleyelim: Bir e-ticaret uygulamas\u0131nda \"Sipari\u015f Takibi\" \u00f6zelli\u011fi. Bu \u00f6zellik, kullan\u0131c\u0131n\u0131n ge\u00e7mi\u015f sipari\u015flerini g\u00f6rmesini ve mevcut sipari\u015flerinin durumunu takip etmesini sa\u011flar. Bu senaryo, frontend, backend ve veritaban\u0131 aras\u0131ndaki etkile\u015fimi m\u00fckemmel bir \u015fekilde \u00f6rnekler.<\/p>\n 1. Kullan\u0131c\u0131 Aray\u00fcz\u00fc (Frontend - 6. G\u00fcn bilgisi):<\/strong><\/p>\n Kullan\u0131c\u0131, e-ticaret sitesine giri\u015f yapar ve \"Sipari\u015flerim\" sayfas\u0131na gider. Bu sayfa, kullan\u0131c\u0131ya ge\u00e7mi\u015f t\u00fcm sipari\u015flerini listeleyen bir aray\u00fcz sunar. Her sipari\u015f i\u00e7in bir kart veya sat\u0131r olabilir, \u00fczerinde sipari\u015f numaras\u0131, tarihi, toplam tutar\u0131 ve mevcut durumu (\u00f6rne\u011fin \"Haz\u0131rlan\u0131yor\", \"Kargoda\", \"Teslim Edildi\") gibi bilgiler yer al\u0131r. Frontend geli\u015ftirici, React veya Vue gibi bir k\u00fct\u00fcphane kullanarak bu dinamik listeyi olu\u015fturur. \u00d6rne\u011fin, her sipari\u015f kart\u0131, sipari\u015f durumuna g\u00f6re farkl\u0131 renklerde veya ikonlarla g\u00f6rselle\u015ftirilebilir. Bu, kullan\u0131c\u0131 deneyimini zenginle\u015ftirir ve sipari\u015f durumunu tek bak\u0131\u015fta anlamay\u0131 kolayla\u015ft\u0131r\u0131r. Mobil cihazlar i\u00e7in bu liste, k\u00fc\u00e7\u00fck ekranlarda bile okunabilir ve etkile\u015fimli olacak \u015fekilde duyarl\u0131 tasar\u0131ma sahip olmal\u0131d\u0131r.<\/p>\n Sipari\u015fler y\u00fckleniyor...<\/p>;\n if (error) return Hata: {error}<\/p>;\n if (orders.length === 0) return Hen\u00fcz bir sipari\u015finiz bulunmamaktad\u0131r.<\/p>;\n\n return (\n Sipari\u015f No: {order.orderNumber}<\/strong><\/p>\n Tarih: {new Date(order.orderDate).toLocaleDateString()}<\/p>\n Durum: {order.status}<\/span><\/p>\n Toplam: {order.totalAmount} TL<\/p>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n}\n <\/pre>\n <\/code><\/p>\n 2. API ve Backend (7. G\u00fcn bilgisi):<\/strong><\/p>\n Frontend'den gelen <\/code><\/p>\n 3. Veritaban\u0131 Etkile\u015fimi (8. G\u00fcn bilgisi):<\/strong><\/p>\n Backend, ald\u0131\u011f\u0131 <\/code><\/p>\n Bu senaryoda, frontend kullan\u0131c\u0131n\u0131n g\u00f6z\u00fcnden uygulaman\u0131n g\u00f6rsel ve etkile\u015fimli k\u0131sm\u0131n\u0131 olu\u015ftururken, backend i\u015f mant\u0131\u011f\u0131n\u0131 (veriyi al, i\u015fle, do\u011frula) y\u00fcr\u00fct\u00fcr ve veritaban\u0131 da t\u00fcm bilgiyi g\u00fcvenli bir \u015fekilde depolar ve eri\u015filebilir k\u0131lar. Bu \u00fc\u00e7 katman, asenkron ileti\u015fim sayesinde birlikte sorunsuz bir \u015fekilde \u00e7al\u0131\u015farak kullan\u0131c\u0131ya zengin ve i\u015flevsel bir sipari\u015f takip deneyimi sunar. Bir full stack geli\u015ftirici olarak, bu etkile\u015fimlerin her bir ad\u0131m\u0131n\u0131 anlamak ve y\u00f6netmek, ba\u015far\u0131l\u0131 uygulamalar geli\u015ftirmek i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n Full stack geli\u015ftirici olma yolculu\u011funuzda temelleri att\u0131ktan sonra, uygulamalar\u0131n\u0131z\u0131 daha sa\u011flam ve etkili hale getirmek i\u00e7in ileri d\u00fczey performans ve g\u00fcvenlik konular\u0131na e\u011filmek \u00e7ok \u00f6nemlidir. Bir uygulaman\u0131n h\u0131zl\u0131 \u00e7al\u0131\u015fmas\u0131 ve k\u00f6t\u00fc niyetli sald\u0131r\u0131lara kar\u015f\u0131 diren\u00e7li olmas\u0131, kullan\u0131c\u0131 memnuniyeti ve i\u015f s\u00fcreklili\u011fi i\u00e7in hayati \u00f6neme sahiptir. Bu b\u00f6l\u00fcmde, bu kritik alanlarda size yol g\u00f6sterecek baz\u0131 ipu\u00e7lar\u0131n\u0131 ve p\u00fcf noktalar\u0131n\u0131 ele alaca\u011f\u0131z.<\/p>\n Performans ve g\u00fcvenlik, bir full stack geli\u015ftiricinin s\u00fcrekli olarak \u00fczerinde \u00e7al\u0131\u015fmas\u0131 gereken alanlard\u0131r. Bu ipu\u00e7lar\u0131n\u0131 uygulayarak, sadece \u00e7al\u0131\u015fan de\u011fil, ayn\u0131 zamanda h\u0131zl\u0131, g\u00fcvenli ve \u00f6l\u00e7eklenebilir uygulamalar geli\u015ftirebilirsiniz.<\/p>\n Full stack geli\u015ftirici olma yolculu\u011fumuzun 6, 7, 8 ve 9. g\u00fcnlerini geride b\u0131rak\u0131rken, \u00f6nemli ve kritik konulara de\u011findik. Bu d\u00f6rt g\u00fcn boyunca frontend'de kullan\u0131c\u0131 deneyimi optimizasyonundan mobil uyumlulu\u011fa, backend'de API mimarileri ve RESTful servislerin temellerinden veritaban\u0131 se\u00e7imi ve modellemesine kadar geni\u015f bir yelpazeyi kapsayan bilgiler edindik. Ayr\u0131ca, frontend ve backend aras\u0131nda asenkron veri ak\u0131\u015f\u0131n\u0131n nas\u0131l sa\u011fland\u0131\u011f\u0131n\u0131 \u00f6\u011frendik ve ger\u00e7ek bir e-ticaret senaryosu \u00fczerinden bu bilgileri nas\u0131l birle\u015ftirece\u011fimizi g\u00f6rd\u00fck. Son olarak, uygulamalar\u0131m\u0131z\u0131n performans\u0131n\u0131 ve g\u00fcvenli\u011fini art\u0131rmak i\u00e7in ileri d\u00fczey ipu\u00e7lar\u0131na g\u00f6z att\u0131k.<\/p>\n Bu g\u00fcnler, full stack geli\u015ftirme s\u00fcrecinin temel ta\u015flar\u0131n\u0131 olu\u015fturan, birbirine entegre ve dinamik par\u00e7alar\u0131 anlamak ad\u0131na \u00e7ok de\u011ferliydi. Frontend, kullan\u0131c\u0131n\u0131n g\u00f6rd\u00fc\u011f\u00fc ve etkile\u015fimde bulundu\u011fu aray\u00fcz\u00fc in\u015fa ederken, backend i\u015f mant\u0131\u011f\u0131n\u0131 ve veri y\u00f6netimini sa\u011flar. Veritabanlar\u0131 ise bu verilerin kal\u0131c\u0131 olarak depoland\u0131\u011f\u0131 ve organize edildi\u011fi yerdir. Bu \u00fc\u00e7 katman\u0131n birbiriyle uyumlu ve verimli \u00e7al\u0131\u015fmas\u0131, ba\u015far\u0131l\u0131 bir full stack uygulamas\u0131n\u0131n anahtar\u0131d\u0131r. Unutmay\u0131n, full stack geli\u015ftirme s\u00fcrekli bir \u00f6\u011frenme ve adaptasyon s\u00fcrecidir. Teknolojiler s\u00fcrekli geli\u015fiyor, bu y\u00fczden kendinizi g\u00fcncel tutmak ve yeni ara\u00e7lar\u0131, metodolojileri \u00f6\u011frenmeye a\u00e7\u0131k olmak \u00e7ok \u00f6nemlidir. Yolculu\u011funuzun bu a\u015famas\u0131nda edindi\u011finiz bilgiler, gelecekteki projeleriniz i\u00e7in sa\u011flam bir temel olu\u015fturacakt\u0131r. Azimle devam edin, \u00e7\u00fcnk\u00fc her kod sat\u0131r\u0131 sizi hedefinize bir ad\u0131m daha yakla\u015ft\u0131r\u0131yor!<\/p>\n Performans sorunlar\u0131n\u0131 tespit etmek i\u00e7in taray\u0131c\u0131lar\u0131n geli\u015ftirici ara\u00e7lar\u0131ndaki \"Performance\" ve \"Network\" sekmelerini aktif olarak kullan\u0131n.\n <\/dd>\n<\/dl>\n <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Full stack geli\u015ftirici olma yolculu\u011funuzun 6, 7, 8 ve 9. g\u00fcnlerinde sizi neler bekliyor? Frontend’den backend’e, veritaban\u0131ndan deployment’a…","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":[1],"tags":[],"class_list":{"0":"post-34519","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nasync\/await<\/code> yap\u0131s\u0131n\u0131 kullanmak, kullan\u0131c\u0131ya kesintisiz bir deneyim sunar. Geli\u015ftirici konsolundaki performans ara\u00e7lar\u0131n\u0131 kullanarak, sayfam\u0131zdaki yava\u015f \u00e7al\u0131\u015fan k\u0131s\u0131mlar\u0131 tespit edip optimize edebiliriz. Bu s\u00fcre\u00e7te, gereksiz yeniden \u00e7izimleri (reflow\/repaint) azaltmak, b\u00fcy\u00fck DOM a\u011fa\u00e7lar\u0131n\u0131 optimize etmek ve animasyonlar\u0131 CSS tabanl\u0131 yapmak gibi teknikler olduk\u00e7a faydal\u0131d\u0131r.<\/p>\nalt<\/code> etiketi eklemek, ekran okuyucu kullanan bir kullan\u0131c\u0131n\u0131n o g\u00f6rselin i\u00e7eri\u011fini anlamas\u0131na yard\u0131mc\u0131 olur. Bu k\u00fc\u00e7\u00fck detaylar, uygulaman\u0131z\u0131n daha geni\u015f bir kitleye ula\u015fmas\u0131n\u0131 ve kapsay\u0131c\u0131 olmas\u0131n\u0131 sa\u011flar. Frontend geli\u015ftirme, sadece kod yazmak de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n ihtiya\u00e7lar\u0131n\u0131 ve beklentilerini anlamakla ilgili bir sanatt\u0131r.<\/p>\nG\u00fcn 7: API Mimarileri ve RESTful Servislerin Temelleri Nas\u0131l At\u0131l\u0131r?<\/h2>\n
GET \/api\/products<\/code> iste\u011fi g\u00f6nderebilirsiniz. Yeni bir \u00fcr\u00fcn eklemek i\u00e7in POST \/api\/products<\/code> adresine \u00fcr\u00fcn bilgilerini i\u00e7eren bir istek yollayabilirken, mevcut bir \u00fcr\u00fcn\u00fc g\u00fcncellemek i\u00e7in PUT \/api\/products\/{id}<\/code> ve \u00fcr\u00fcn\u00fc silmek i\u00e7in DELETE \/api\/products\/{id}<\/code> kullan\u0131r\u0131z. Bu standartla\u015fm\u0131\u015f y\u00f6ntemler, API’leri hem geli\u015ftiriciler i\u00e7in daha anla\u015f\u0131l\u0131r hem de farkl\u0131 platformlar aras\u0131nda kolayca entegre edilebilir hale getirir. Backend geli\u015ftirme s\u00f6z konusu oldu\u011funda, Node.js ve Express.js gibi teknolojiler genellikle tercih edilir. Node.js, JavaScript’i sunucu taraf\u0131nda \u00e7al\u0131\u015ft\u0131rmam\u0131z\u0131 sa\u011flarken, Express.js ise Node.js \u00fczerinde web uygulamalar\u0131 ve API’ler geli\u015ftirmek i\u00e7in h\u0131zl\u0131 ve minimalist bir \u00e7er\u00e7eve sunar. A\u015fa\u011f\u0131daki basit Express.js kodu, bir GET iste\u011fine nas\u0131l yan\u0131t verilece\u011fini g\u00f6stermektedir:<\/p>\n\nconst express = require('express');\nconst app = express();\nconst PORT = 3000;\n\n\/\/ JSON body parser'\u0131 etkinle\u015ftir\napp.use(express.json());\n\n\/\/ T\u00fcm \u00fcr\u00fcnleri d\u00f6nd\u00fcren bir GET rotas\u0131\napp.get('\/api\/products', (req, res) => {\n const products = [\n { id: 1, name: 'Laptop', price: 1200 },\n { id: 2, name: 'Mouse', price: 25 }\n ];\n res.json(products); \/\/ JSON format\u0131nda yan\u0131t g\u00f6nder\n});\n\n\/\/ Sunucuyu ba\u015flat\napp.listen(PORT, () => {\n console.log(Sunucu http:\/\/localhost:${PORT} adresinde \u00e7al\u0131\u015f\u0131yor<\/code>);\n});\n <\/pre>\n\/api\/products<\/code> adresine yap\u0131lan bir GET iste\u011fine sabit bir \u00fcr\u00fcn listesiyle yan\u0131t veren \u00e7ok temel bir API \u00f6rne\u011fidir. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, Express.js, rotalar\u0131 tan\u0131mlamak ve HTTP isteklerine yan\u0131t vermek i\u00e7in son derece basit ve anla\u015f\u0131l\u0131r bir yap\u0131 sunar. Ancak, ger\u00e7ek d\u00fcnya uygulamalar\u0131nda, bu rotalar genellikle bir veritaban\u0131yla etkile\u015fime girerek dinamik veriler \u00e7eker veya kaydeder. G\u00fcvenlik, bir API geli\u015ftirirken g\u00f6z ard\u0131 edilmemesi gereken kritik bir fakt\u00f6rd\u00fcr. API anahtarlar\u0131, JWT (JSON Web Tokens) tabanl\u0131 kimlik do\u011frulama (authentication) ve yetkilendirme (authorization) mekanizmalar\u0131, API'lerinizi yetkisiz eri\u015fime kar\u015f\u0131 koruman\u0131n yayg\u0131n yollar\u0131d\u0131r. Ayr\u0131ca, verinin do\u011frulanmas\u0131 (validation) ve sanitasyonu (sanitization) da \u00f6nemlidir, b\u00f6ylece k\u00f6t\u00fc niyetli girdiler veya hatal\u0131 veriler uygulaman\u0131z\u0131n \u00e7\u00f6kmesine veya g\u00fcvenlik a\u00e7\u0131klar\u0131na yol a\u00e7maz. Middleware kullan\u0131m\u0131, Express.js'te bu t\u00fcr g\u00fcvenlik kontrollerini ve di\u011fer i\u015flem ad\u0131mlar\u0131n\u0131 (logging gibi) merkezi bir \u015fekilde y\u00f6netmenizi sa\u011flar.<\/p>\n8. G\u00fcn: Veritaban\u0131 Se\u00e7imi ve Modellemeyi Nas\u0131l Yapmal\u0131y\u0131z?<\/h2>\n
\u0130li\u015fkisel Veritabanlar\u0131 (SQL) ve Modellemeleri Nelerdir?<\/h3>\n
\nCREATE TABLE Users (\n id SERIAL PRIMARY KEY,\n username VARCHAR(50) UNIQUE NOT NULL,\n email VARCHAR(100) UNIQUE NOT NULL,\n password_hash VARCHAR(255) NOT NULL,\n created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);\n\nCREATE TABLE Orders (\n id SERIAL PRIMARY KEY,\n user_id INTEGER NOT NULL REFERENCES Users(id),\n order_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n total_amount DECIMAL(10, 2) NOT NULL,\n status VARCHAR(50) DEFAULT 'Pending'\n);\n <\/pre>\nUsers<\/code> ve Orders<\/code> tablolar\u0131 aras\u0131nda user_id<\/code> \u00fczerinden bir ili\u015fki kurulmu\u015ftur. SERIAL PRIMARY KEY<\/code> otomatik artan benzersiz bir anahtar sa\u011flarken, REFERENCES Users(id)<\/code> ifadesi Orders<\/code> tablosundaki user_id<\/code> s\u00fctununun Users<\/code> tablosundaki bir id<\/code> ile ili\u015fkilendirildi\u011fini g\u00f6sterir, b\u00f6ylece referans b\u00fct\u00fcnl\u00fc\u011f\u00fc sa\u011flan\u0131r. ORM (Object-Relational Mapping) ara\u00e7lar\u0131 (\u00f6rne\u011fin Node.js i\u00e7in Sequelize veya TypeORM), uygulama kodumuzdaki nesneleri veritaban\u0131 tablolar\u0131yla e\u015fle\u015ftirerek SQL sorgular\u0131n\u0131 manuel olarak yazma ihtiyac\u0131n\u0131 azalt\u0131r, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r.<\/p>\n\u0130li\u015fkisel Olmayan Veritabanlar\u0131 (NoSQL) ve Kullan\u0131m Alanlar\u0131 Nelerdir?<\/h3>\n
\ndb.products.insertOne({\n name: \"Ak\u0131ll\u0131 Telefon X\",\n brand: \"TechCorp\",\n price: 999.99,\n description: \"Y\u00fcksek performansl\u0131 ak\u0131ll\u0131 telefon.\",\n specs: {\n cpu: \"A15 Bionic\",\n ram: \"6GB\",\n storage: [\"128GB\", \"256GB\"]\n },\n reviews: [\n { user: \"ali\", rating: 5, comment: \"Harika bir telefon!\" },\n { user: \"ayse\", rating: 4, comment: \"Pil \u00f6mr\u00fc biraz daha iyi olabilirdi.\" }\n ]\n});\n <\/pre>\nspecs<\/code>) ve diziler (reviews<\/code>) halinde di\u011fer verileri nas\u0131l depolayabilece\u011finizi g\u00f6rebilirsiniz. Bu esneklik, karma\u015f\u0131k ve i\u00e7 i\u00e7e ge\u00e7mi\u015f veri yap\u0131lar\u0131n\u0131 do\u011frudan veritaban\u0131nda saklaman\u0131za olanak tan\u0131r. NoSQL veritabanlar\u0131 genellikle \"eventual consistency\" (nihai tutarl\u0131l\u0131k) ilkesini benimser, bu da veri yaz\u0131ld\u0131ktan sonra an\u0131nda t\u00fcm kopyalar\u0131nda g\u00fcncellenmeyebilece\u011fi anlam\u0131na gelir, ancak sonunda tutarl\u0131 hale gelecektir. Bu durum, veri tutarl\u0131l\u0131\u011f\u0131n\u0131n anl\u0131k olmamas\u0131n\u0131n kabul edilebilir oldu\u011fu senaryolarda performans avantaj\u0131 sa\u011flar.<\/p>\n9. G\u00fcn: Backend ve Frontend Aras\u0131ndaki K\u00f6pr\u00fc: Asenkron Veri Ak\u0131\u015f\u0131 Nas\u0131l Sa\u011flan\u0131r?<\/h2>\n
\/api\/products<\/code> endpoint'ine bir GET iste\u011fi g\u00f6ndeririz. Bu istek, sayfan\u0131n y\u00fcklenmesini engellemeden (non-blocking) arka planda \u00e7al\u0131\u015f\u0131r.<\/p>\n\nasync function fetchProducts() {\n try {\n const response = await fetch('\/api\/products'); \/\/ API'ye GET iste\u011fi g\u00f6nder\n if (!response.ok) {\n throw new Error(HTTP hata kodu: ${response.status}<\/code>);\n }\n const products = await response.json(); \/\/ Yan\u0131t\u0131 JSON olarak ayr\u0131\u015ft\u0131r\n console.log('\u00dcr\u00fcnler:', products);\n \/\/ \u00dcr\u00fcnleri UI'da g\u00f6stermek i\u00e7in gerekli i\u015flemler...\n } catch (error) {\n console.error('\u00dcr\u00fcnler \u00e7ekilirken bir hata olu\u015ftu:', error);\n }\n}\n\nfetchProducts();\n <\/pre>\nasync\/await<\/code> yap\u0131s\u0131n\u0131 kullanarak Fetch API ile bir GET iste\u011fi g\u00f6nderiyoruz. await<\/code> anahtar kelimesi, Promise'in \u00e7\u00f6z\u00fclmesini beklerken kodun y\u00fcr\u00fct\u00fclmesini duraklat\u0131r, bu da asenkron kodu senkron gibi okumam\u0131z\u0131 sa\u011flar. Bu yap\u0131, hem daha temiz kod yazmam\u0131z\u0131 sa\u011flar hem de hatalar\u0131 try...catch<\/code> bloklar\u0131 ile daha etkili bir \u015fekilde y\u00f6netmemize olanak tan\u0131r. E\u011fer bir POST<\/code> iste\u011fi ile yeni bir veri (\u00f6rne\u011fin bir \u00fcr\u00fcn) g\u00f6ndermek isteseydik, iste\u011fimize bir body ve uygun Content-Type<\/code> ba\u015fl\u0131\u011f\u0131 eklememiz gerekirdi:<\/p>\n\nasync function addProduct(productData) {\n try {\n const response = await fetch('\/api\/products', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json' \/\/ G\u00f6nderilen verinin t\u00fcr\u00fcn\u00fc belirtiyoruz\n },\n body: JSON.stringify(productData) \/\/ JavaScript nesnesini JSON string'ine d\u00f6n\u00fc\u015ft\u00fcr\u00fcyoruz\n });\n if (!response.ok) {\n throw new Error(HTTP hata kodu: ${response.status}<\/code>);\n }\n const newProduct = await response.json();\n console.log('Yeni \u00fcr\u00fcn eklendi:', newProduct);\n } catch (error) {\n console.error('\u00dcr\u00fcn eklenirken bir hata olu\u015ftu:', error);\n }\n}\n\naddProduct({ name: 'Ak\u0131ll\u0131 Saat', price: 199.99 });\n <\/pre>\nmethod: 'POST'<\/code> ile bir POST iste\u011fi yap\u0131ld\u0131\u011f\u0131n\u0131 belirtiyor, headers<\/code> i\u00e7inde verinin JSON format\u0131nda oldu\u011funu s\u00f6yl\u00fcyor ve body<\/code> i\u00e7inde g\u00f6nderilecek veriyi JSON.stringify ile d\u00f6n\u00fc\u015ft\u00fcr\u00fcyoruz. Bu, frontend ve backend aras\u0131nda standart ve g\u00fcvenli bir veri al\u0131\u015fveri\u015fi sa\u011flar. Hata y\u00f6netimi, asenkron i\u015flemlerde hayati \u00f6neme sahiptir. A\u011f hatalar\u0131, sunucu hatalar\u0131 veya ge\u00e7ersiz yan\u0131tlar gibi durumlarla kar\u015f\u0131la\u015fabiliriz. Bu y\u00fczden her zaman try...catch<\/code> bloklar\u0131n\u0131 kullanmak veya Promise zincirlerinde .catch()<\/code> metodunu uygulamak \u00f6nemlidir. Kullan\u0131c\u0131ya net geri bildirimler sa\u011flamak (\u00f6rne\u011fin bir y\u00fckleme g\u00f6stergesi veya hata mesaj\u0131), kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\nGer\u00e7ek Bir Senaryo: E-ticaret Uygulamas\u0131nda Sipari\u015f Takibi Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n
\n\/\/ React Bile\u015feni \u00d6rne\u011fi (Sipari\u015f Listesi)\nfunction OrderList({ userId }) {\n const [orders, setOrders] = React.useState([]);\n const [loading, setLoading] = React.useState(true);\n const [error, setError] = React.useState(null);\n\n React.useEffect(() => {\n async function fetchUserOrders() {\n try {\n \/\/ Backend API'sine istek g\u00f6nderiyoruz\n const response = await fetch(\/api\/users\/${userId}\/orders<\/code>);\n if (!response.ok) {\n throw new Error(API hatas\u0131: ${response.status}<\/code>);\n }\n const data = await response.json();\n setOrders(data);\n } catch (err) {\n setError(err.message);\n } finally {\n setLoading(false);\n }\n }\n fetchUserOrders();\n }, [userId]); \/\/ userId de\u011fi\u015fti\u011finde tekrar \u00e7ek\n\n if (loading) return Sipari\u015flerim<\/h2>\n
\n {orders.map(order => (\n
\/api\/users\/{userId}\/orders<\/code> iste\u011fi, backend'deki bir Express.js rotas\u0131 taraf\u0131ndan kar\u015f\u0131lan\u0131r. Bu rota, kullan\u0131c\u0131 kimli\u011fini (userId<\/code>) al\u0131r ve bu kimli\u011fe ait t\u00fcm sipari\u015fleri veritaban\u0131ndan sorgular. Backend API'si, gelen iste\u011fi i\u015flerken, kullan\u0131c\u0131n\u0131n ger\u00e7ekten o sipari\u015flere eri\u015fme yetkisi olup olmad\u0131\u011f\u0131n\u0131 da kontrol etmelidir (yetkilendirme). Bu kontrol, genellikle kullan\u0131c\u0131 oturum bilgileri veya JWT tokenlar\u0131 \u00fczerinden yap\u0131l\u0131r. API, veritaban\u0131ndan ald\u0131\u011f\u0131 sipari\u015f verilerini JSON format\u0131nda frontend'e geri d\u00f6nd\u00fcr\u00fcr.<\/p>\n\n\/\/ Express.js Rotas\u0131 \u00d6rne\u011fi (Backend)\napp.get('\/api\/users\/:userId\/orders', async (req, res) => {\n const userId = req.params.userId;\n \/\/ G\u00fcvenlik: Kullan\u0131c\u0131n\u0131n kendi sipari\u015flerini \u00e7ekti\u011finden emin olun\n \/\/ (Ger\u00e7ek bir uygulamada, req.user.id ile userId'\u0131 kar\u015f\u0131la\u015ft\u0131r\u0131rd\u0131k)\n\n try {\n const orders = await db.collection('orders').find({ userId: userId }).toArray();\n res.status(200).json(orders);\n } catch (error) {\n console.error('Sipari\u015fler \u00e7ekilirken hata:', error);\n res.status(500).json({ message: 'Sunucu hatas\u0131' });\n }\n});\n <\/pre>\nuserId<\/code> ile veritaban\u0131na bir sorgu g\u00f6nderir. E\u011fer bir MongoDB kullan\u0131yorsak, orders<\/code> koleksiyonunda userId<\/code> alan\u0131 belirli bir de\u011fere e\u015fit olan belgeleri arar\u0131z. E\u011fer bir PostgreSQL gibi ili\u015fkisel veritaban\u0131 kullan\u0131yorsak, Orders<\/code> tablosunda user_id<\/code> s\u00fctunu belirli bir de\u011fere e\u015fit olan sat\u0131rlar\u0131 sorgular\u0131z. Bu sorgu, veritaban\u0131 taraf\u0131ndan h\u0131zl\u0131ca i\u015flenir ve ilgili sipari\u015f kay\u0131tlar\u0131 backend'e geri d\u00f6ner.<\/p>\n\n\/\/ MongoDB Sorgu \u00d6rne\u011fi\n\/\/ db.collection('orders').find({ userId: userId }).toArray();\n\n\/\/ PostgreSQL Sorgu \u00d6rne\u011fi (ORM kullanmadan)\n\/\/ SELECT * FROM Orders WHERE user_id = :userId;\n <\/pre>\n\u0130leri D\u00fczey Full Stack \u0130pu\u00e7lar\u0131: Performans ve G\u00fcvenlik \u0130\u00e7in Nelere Dikkat Edilmeli?<\/h2>\n
Performans \u0130pu\u00e7lar\u0131:<\/h3>\n
\n
\n
\n
G\u00fcvenlik \u0130pu\u00e7lar\u0131:<\/h3>\n
\n
\n
\n
\n
\n
\n
\n
Sonu\u00e7: Full Stack Geli\u015ftirici Olma Yolunda At\u0131lan Ad\u0131mlar ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n
S\u0131k\u00e7a Sorulan Sorular<\/h3>\n
\n
srcset<\/code>, sizes<\/code>) kullan\u0131n. Etkile\u015fim alanlar\u0131n\u0131n (butonlar, linkler) dokunmatik ekranlar i\u00e7in yeterince b\u00fcy\u00fck oldu\u011fundan emin olun.<\/dd>\n\n