MERN Stack ile web geli\u015ftirme ser\u00fcveninizde 23. g\u00fcne ula\u015ft\u0131n\u0131z! Bu noktada, temel bilgileri edinmi\u015f olmal\u0131s\u0131n\u0131z. Peki, bu birikimi nas\u0131l daha sa\u011flam hale getirebilir, ger\u00e7ek d\u00fcnya projelerine nas\u0131l uyarlayabilirsiniz? Bu makalede, MERN’in inceliklerine dalacak, kar\u015f\u0131la\u015f\u0131lan zorluklar\u0131 a\u015facak ve daha karma\u015f\u0131k uygulamalar geli\u015ftirmek i\u00e7in ipu\u00e7lar\u0131 payla\u015faca\u011f\u0131z.<\/p>\n
MERN Stack, yani MongoDB, Express.js, React ve Node.js, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in olduk\u00e7a pop\u00fcler bir teknoloji y\u0131\u011f\u0131n\u0131d\u0131r. Bu d\u00f6rtl\u00fc, geli\u015ftiricilere tam bir JavaScript \u00e7\u00f6z\u00fcm\u00fc sunarak hem istemci (frontend) hem de sunucu (backend) taraf\u0131nda ayn\u0131 dili kullanma \u00f6zg\u00fcrl\u00fc\u011f\u00fc tan\u0131r. 23. g\u00fcn, bu temelleri daha derinlemesine anlamak ve uygulamak i\u00e7in m\u00fckemmel bir zamand\u0131r. Bu a\u015famada, sadece komutlar\u0131 ezberlemek yerine, her bir bile\u015fenin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, birbirleriyle nas\u0131l etkile\u015fimde bulundu\u011funu ve performans optimizasyonlar\u0131n\u0131n nas\u0131l yap\u0131laca\u011f\u0131n\u0131 kavramak \u00f6nemlidir. \u00d6rne\u011fin, MongoDB’nin veri modelleme stratejileri, Express.js’in middleware (ara katman) yap\u0131s\u0131, React’in component (bile\u015fen) ya\u015fam d\u00f6ng\u00fcs\u00fc ve Node.js’in olay d\u00f6ng\u00fcs\u00fc (event loop) gibi konulara daha fazla odaklanmak, gelecekteki projelerinizde kar\u015f\u0131la\u015fabilece\u011finiz karma\u015f\u0131k sorunlara daha h\u0131zl\u0131 ve etkili \u00e7\u00f6z\u00fcmler \u00fcretmenizi sa\u011flayacakt\u0131r. Bu birikim, sadece kod yazmakla kalmay\u0131p, ayn\u0131 zamanda daha \u00f6l\u00e7eklenebilir, g\u00fcvenli ve performansl\u0131 uygulamalar tasarlaman\u0131za olanak tan\u0131r. Unutmay\u0131n, her ba\u015far\u0131l\u0131 yaz\u0131l\u0131m geli\u015ftiricisi, temelini sa\u011flam atm\u0131\u015f ve bu temelleri s\u00fcrekli olarak derinle\u015ftirmi\u015ftir.<\/p>\n
MongoDB, NoSQL (Not Only SQL) veritaban\u0131 d\u00fcnyas\u0131nda \u00f6ne \u00e7\u0131kan, belge tabanl\u0131 bir veritaban\u0131d\u0131r. Geleneksel ili\u015fkisel veritabanlar\u0131ndan (SQL) farkl\u0131 olarak, MongoDB esnek \u015femalar sunar. Bu esneklik, geli\u015ftiricilere b\u00fcy\u00fck bir \u00f6zg\u00fcrl\u00fck tan\u0131rken, do\u011fru veri modelini olu\u015fturmak da kritik \u00f6nem ta\u015f\u0131r. 23. g\u00fcnde, MongoDB’nin veri modelleme prensiplerine daha yak\u0131ndan bakmal\u0131y\u0131z. Belgeler (documents) aras\u0131ndaki ili\u015fkileri nas\u0131l kuraca\u011f\u0131m\u0131z, embedding (g\u00f6mme) ve referencing (referanslama) stratejilerinden hangisinin hangi senaryo i\u00e7in daha uygun olaca\u011f\u0131n\u0131 anlamal\u0131y\u0131z. \u00d6rne\u011fin, bir blog uygulamas\u0131nda, yaz\u0131lar\u0131n yorumlar\u0131n\u0131 yaz\u0131 belgesinin i\u00e7ine g\u00f6mmek mi daha mant\u0131kl\u0131, yoksa ayr\u0131 bir koleksiyonda saklay\u0131p yaz\u0131ya referans vermek mi? Bu kararlar, uygulaman\u0131n performans\u0131n\u0131 do\u011frudan etkiler. Embedding, okuma i\u015flemlerini h\u0131zland\u0131r\u0131rken, veri tekrar\u0131na ve g\u00fcncelleme karma\u015f\u0131kl\u0131\u011f\u0131na yol a\u00e7abilir. Referencing ise daha temiz bir veri yap\u0131s\u0131 sunar ancak okuma i\u015flemleri i\u00e7in ek sorgular gerektirir. Bu noktada, uygulaman\u0131z\u0131n okuma ve yazma yo\u011funlu\u011funu analiz ederek en uygun modeli se\u00e7mek hayati \u00f6nem ta\u015f\u0131r. Ayr\u0131ca, MongoDB’nin g\u00fc\u00e7l\u00fc sorgulama dilini (query language) daha etkin kullanmay\u0131 \u00f6\u011frenmeliyiz. \u0130ndeksleme (indexing) stratejileri, sorgu performans\u0131n\u0131 inan\u0131lmaz derecede art\u0131rabilir. Do\u011fru alanlara do\u011fru indeksleri eklemek, sorgu s\u00fcrelerini milisaniyelerden mikrosaniyelere indirebilir. Karma\u015f\u0131k sorgular yazarken aggregations (toplamalar) framework’\u00fcn\u00fc kullanmak, veriyi i\u015flemek ve analiz etmek i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. \u00d6rne\u011fin, bir e-ticaret sitesinde, belirli bir kategorideki \u00fcr\u00fcnlerin ortalama fiyat\u0131n\u0131 hesaplamak veya en \u00e7ok satan \u00fcr\u00fcnleri listelemek gibi i\u015flemler i\u00e7in aggregations olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r. Bu, sadece temel CRUD (Create, Read, Update, Delete) i\u015flemlerinin \u00f6tesine ge\u00e7erek, veriden anlaml\u0131 bilgiler \u00e7\u0131karma yetene\u011fimizi geli\u015ftirir.<\/p>\n
Bir e-ticaret platformunda \u00fcr\u00fcn katalo\u011funu y\u00f6netti\u011fimizi varsayal\u0131m. \u00dcr\u00fcnlerimizin ad\u0131, a\u00e7\u0131klamas\u0131, fiyat\u0131, stok durumu gibi temel bilgileri olacakt\u0131r. Ancak, her \u00fcr\u00fcn\u00fcn farkl\u0131 \u00f6zellikleri olabilir. Bir giyim \u00fcr\u00fcn\u00fc i\u00e7in beden ve renk se\u00e7enekleri, bir elektronik \u00fcr\u00fcn i\u00e7in teknik \u00f6zellikler (RAM, depolama, ekran boyutu vb.) gibi. Bu \u00e7e\u015fitlili\u011fi MongoDB’de modellemek i\u00e7in esnek bir yap\u0131ya ihtiyac\u0131m\u0131z var. Bir yakla\u015f\u0131m, her \u00fcr\u00fcn i\u00e7in genel alanlar\u0131 tutarken, \u00fcr\u00fcn t\u00fcr\u00fcne \u00f6zg\u00fc \u00f6zellikleri ayr\u0131 bir ‘\u00f6zellikler’ (attributes) nesnesi i\u00e7inde saklamak olabilir. Bu \u00f6zellik nesnesi, anahtar-de\u011fer \u00e7iftleri \u015feklinde yap\u0131land\u0131r\u0131labilir. \u00d6rne\u011fin:<\/p>\n
\n {\n \"_id\": ObjectId(\"...\"),\n \"urunAdi\": \"Ak\u0131ll\u0131 Telefon X\",\n \"aciklama\": \"En yeni nesil ak\u0131ll\u0131 telefon...\",\n \"fiyat\": 12000,\n \"stok\": 50,\n \"kategori\": \"Elektronik\",\n \"ozellikler\": {\n \"ekranBoyutu\": \"6.5 in\u00e7\",\n \"islemci\": \"Snapdragon 8 Gen 2\",\n \"ram\": \"8GB\",\n \"depolama\": \"256GB\",\n \"renkSecenekleri\": [\"Siyah\", \"Beyaz\", \"Mavi\"]\n }\n }\n <\/pre>\nBu yap\u0131da, ‘ozellikler’ nesnesi, farkl\u0131 \u00fcr\u00fcn tipleri i\u00e7in farkl\u0131 anahtarlar i\u00e7erebilir. Sorgulama yaparken, belirli bir RAM miktar\u0131na sahip telefonlar\u0131 bulmak i\u00e7in db.urunler.find({"ozellikler.ram": "8GB"})<\/code> gibi bir sorgu kullanabiliriz. Ancak, bu t\u00fcr sorgular\u0131n performans\u0131 i\u00e7in ozellikler<\/code> nesnesi i\u00e7indeki s\u0131k sorgulanan alanlara indeks eklemek \u00f6nemlidir. Ayr\u0131ca, \u00fcr\u00fcnlerin yorumlar\u0131n\u0131 veya derecelendirmelerini saklamak i\u00e7in de ayr\u0131 bir koleksiyon kullan\u0131p, \u00fcr\u00fcn ID’sine referans vermek daha \u00f6l\u00e7eklenebilir bir \u00e7\u00f6z\u00fcm olabilir. Bu, \u00fcr\u00fcn belgesinin \u00e7ok b\u00fcy\u00fcmesini engeller ve yorumlarla ilgili sorgular\u0131 daha verimli hale getirir.<\/p>\nExpress.js ile API Geli\u015ftirme ve Middleware Kullan\u0131m\u0131<\/h2>\n
Express.js, Node.js \u00fczerinde \u00e7al\u0131\u015fan minimalist ve esnek bir web uygulama framework’\u00fcd\u00fcr (yaz\u0131l\u0131m \u00e7er\u00e7evesi). API (Application Programming Interface – Uygulama Programlama Aray\u00fcz\u00fc) geli\u015ftirmede olduk\u00e7a pop\u00fclerdir. 23. g\u00fcnde, Express.js’in temel yap\u0131 ta\u015flar\u0131n\u0131 daha iyi anlamal\u0131y\u0131z. Routing (y\u00f6nlendirme) mekanizmas\u0131, farkl\u0131 HTTP isteklerine (GET, POST, PUT, DELETE) nas\u0131l yan\u0131t verece\u011fimizi belirler. Middleware (ara katman) kavram\u0131 ise Express.js’in en g\u00fc\u00e7l\u00fc y\u00f6nlerinden biridir. Middleware’ler, iste\u011fi i\u015fleyen fonksiyonlard\u0131r ve bir sonraki middleware’e veya nihai yan\u0131t\u0131 g\u00f6nderen fonksiyona kontrol\u00fc devredebilirler. Bu, kimlik do\u011frulama (authentication), yetkilendirme (authorization), loglama (logging), veri do\u011frulama (data validation) gibi bir\u00e7ok i\u015flevi mod\u00fcler bir \u015fekilde uygulaman\u0131za eklemenizi sa\u011flar. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n bir kayna\u011fa eri\u015fmeden \u00f6nce oturumunun a\u00e7\u0131k olup olmad\u0131\u011f\u0131n\u0131 kontrol eden bir middleware yazabilirsiniz. E\u011fer oturum a\u00e7\u0131ksa, istek bir sonraki middleware’e ge\u00e7er; de\u011filse, kullan\u0131c\u0131ya bir hata mesaj\u0131 d\u00f6nd\u00fcr\u00fcl\u00fcr. Bu, kodunuzu daha temiz, okunabilir ve bak\u0131m\u0131 kolay hale getirir. Ayr\u0131ca, Express.js ile hata y\u00f6netimi (error handling) de kritik bir konudur. Uygulaman\u0131zda meydana gelen hatalar\u0131 yakalay\u0131p kullan\u0131c\u0131ya anla\u015f\u0131l\u0131r bir \u015fekilde bildirmek, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan \u00f6nemlidir. try...catch<\/code> bloklar\u0131 ve \u00f6zel hata i\u015fleyici middleware’leri kullanarak bu s\u00fcreci y\u00f6netebilirsiniz. CORS (Cross-Origin Resource Sharing) gibi g\u00fcvenlik \u00f6nlemlerini do\u011fru yap\u0131land\u0131rmak da API g\u00fcvenli\u011fi i\u00e7in vazge\u00e7ilmezdir. Farkl\u0131 alan adlar\u0131ndan gelen isteklere izin vermek veya k\u0131s\u0131tlamak, uygulaman\u0131z\u0131n g\u00fcvenli\u011fini sa\u011flamada \u00f6nemli bir rol oynar.<\/p>\nGer\u00e7ek D\u00fcnya Senaryosu: Kullan\u0131c\u0131 Giri\u015f ve Kay\u0131t API’si<\/h3>\n
Bir web uygulamas\u0131nda kullan\u0131c\u0131lar\u0131n kaydolmas\u0131n\u0131 ve giri\u015f yapmas\u0131n\u0131 sa\u011flayan bir API geli\u015ftirdi\u011fimizi d\u00fc\u015f\u00fcnelim. Bu i\u015flem i\u00e7in Express.js’de birka\u00e7 middleware’e ihtiyac\u0131m\u0131z olacak.
\n \u00d6ncelikle, gelen isteklerin g\u00f6vdesindeki (request body) verileri i\u015fleyebilmek i\u00e7in body-parser<\/code> (veya Express’in kendi express.json()<\/code> ve express.urlencoded()<\/code> middleware’leri) kullanmal\u0131y\u0131z.
\n Ard\u0131ndan, kay\u0131t i\u015flemi i\u00e7in bir POST rotas\u0131 tan\u0131mlayabiliriz:\n <\/p>\n\n app.post('\/api\/users\/register', (req, res) => {\n const { username, email, password } = req.body;\n\n \/\/ 1. Veri Do\u011frulama (Validation) Middleware'i\n if (!username || !email || !password) {\n return res.status(400).json({ message: \"T\u00fcm alanlar doldurulmal\u0131d\u0131r.\" });\n }\n\n \/\/ 2. Kullan\u0131c\u0131 Ad\u0131 veya E-posta Tekrar\u0131n\u0131 Kontrol Etme Middleware'i (Veritaban\u0131 sorgusu)\n \/\/ ...\n\n \/\/ 3. \u015eifreyi Hash'leme Middleware'i (\u00d6rn: bcrypt ile)\n \/\/ ...\n\n \/\/ 4. Kullan\u0131c\u0131y\u0131 Veritaban\u0131na Kaydetme\n \/\/ ...\n\n res.status(201).json({ message: \"Kullan\u0131c\u0131 ba\u015far\u0131yla kaydedildi.\" });\n });\n <\/pre>\nGiri\u015f i\u015flemi i\u00e7in ise benzer bir POST rotas\u0131 olu\u015fturabiliriz:\n <\/p>\n
\n app.post('\/api\/users\/login', (req, res) => {\n const { email, password } = req.body;\n\n \/\/ 1. Veri Do\u011frulama\n if (!email || !password) {\n return res.status(400).json({ message: \"E-posta ve \u015fifre gereklidir.\" });\n }\n\n \/\/ 2. Kullan\u0131c\u0131y\u0131 E-postaya G\u00f6re Bulma Middleware'i\n \/\/ ...\n\n \/\/ 3. \u015eifre E\u015fle\u015fmesini Kontrol Etme Middleware'i (bcrypt.compare ile)\n \/\/ ...\n\n \/\/ 4. JWT (JSON Web Token) Olu\u015fturma ve D\u00f6nme Middleware'i\n \/\/ ...\n\n res.status(200).json({ token: \"generated_jwt_token\", message: \"Giri\u015f ba\u015far\u0131l\u0131.\" });\n });\n <\/pre>\nBu \u00f6rnekte g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, her bir ad\u0131m (veri do\u011frulama, veritaban\u0131 sorgusu, \u015fifreleme, token olu\u015fturma) ayr\u0131 middleware’ler olarak tasarlanabilir. Bu, kodun daha mod\u00fcler olmas\u0131n\u0131 sa\u011flar ve her bir middleware’i ba\u011f\u0131ms\u0131z olarak test etmeyi kolayla\u015ft\u0131r\u0131r. \u00d6rne\u011fin, body-parser<\/code> gibi haz\u0131r middleware’leri kullanabilir veya kendi \u00f6zel middleware’lerimizi yazabiliriz.<\/p>\nReact’te Component Tasar\u0131m\u0131 ve Durum Y\u00f6netimi<\/h2>\n
React, kullan\u0131c\u0131 aray\u00fczleri (UI) olu\u015fturmak i\u00e7in kullan\u0131lan deklaratif ve bile\u015fen tabanl\u0131 bir JavaScript k\u00fct\u00fcphanesidir. 23. g\u00fcn, React’in temel yap\u0131 ta\u015flar\u0131n\u0131 daha iyi anlamak ve karma\u015f\u0131k aray\u00fczler olu\u015fturmak i\u00e7in component (bile\u015fen) tasar\u0131m prensiplerine odaklanmak i\u00e7in harika bir f\u0131rsatt\u0131r. Bile\u015fenler, yeniden kullan\u0131labilir ve izole kod par\u00e7ac\u0131klar\u0131d\u0131r. Bunlar\u0131 fonksiyonel bile\u015fenler (functional components) veya s\u0131n\u0131f tabanl\u0131 bile\u015fenler (class-based components) olarak yazabiliriz. Fonksiyonel bile\u015fenler, \u00f6zellikle React Hooks (Kancalar) ile birlikte kullan\u0131ld\u0131\u011f\u0131nda, daha modern ve okunabilir bir yakla\u015f\u0131m sunar. Durum y\u00f6netimi (state management), React’in en \u00f6nemli konseptlerinden biridir. Bir bile\u015fenin kendi i\u00e7indeki verileri y\u00f6netmesi ‘yerel durum’ (local state) iken, birden fazla bile\u015fen aras\u0131nda payla\u015f\u0131lmas\u0131 gereken verilerin y\u00f6netimi ‘global durum’ (global state) olarak adland\u0131r\u0131l\u0131r. Yerel durum i\u00e7in useState<\/code> Hook’u kullan\u0131l\u0131rken, global durum y\u00f6netimi i\u00e7in Context API veya Redux gibi k\u00fct\u00fcphaneler tercih edilebilir. 23. g\u00fcnde, bu durum y\u00f6netimi stratejilerini derinlemesine anlamal\u0131 ve uygulaman\u0131z\u0131n ihtiya\u00e7lar\u0131na g\u00f6re do\u011fru arac\u0131 se\u00e7melisiniz. \u00d6rne\u011fin, bir al\u0131\u015fveri\u015f sepeti uygulamas\u0131nda, sepete eklenen \u00fcr\u00fcnlerin listesi global durum olmal\u0131d\u0131r ki uygulaman\u0131n her yerinden eri\u015filebilsin. React Router kullanarak uygulaman\u0131zda gezinmeyi (navigation) y\u00f6netmek de kritik bir konudur. Farkl\u0131 URL’lere kar\u015f\u0131l\u0131k gelen farkl\u0131 bile\u015fenleri nas\u0131l g\u00f6sterece\u011fimizi \u00f6\u011frenmeliyiz. Performans optimizasyonlar\u0131 da g\u00f6z ard\u0131 edilmemelidir. React.memo<\/code>, useCallback<\/code>, useMemo<\/code> gibi ara\u00e7lar, gereksiz yeniden render’lar\u0131 (re-renders) engelleyerek uygulaman\u0131z\u0131n daha h\u0131zl\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Bile\u015fenlerin ya\u015fam d\u00f6ng\u00fcs\u00fc (component lifecycle) kavram\u0131n\u0131 anlamak, \u00f6zellikle s\u0131n\u0131f tabanl\u0131 bile\u015fenlerde, belirli olaylar ger\u00e7ekle\u015fti\u011finde (\u00f6rne\u011fin, bile\u015fen DOM’a eklendi\u011finde veya g\u00fcncellendi\u011finde) ne olaca\u011f\u0131n\u0131 kontrol etmenizi sa\u011flar. Fonksiyonel bile\u015fenlerde ise useEffect<\/code> Hook’u benzer bir i\u015flevi yerine getirir.<\/p>\nGer\u00e7ek D\u00fcnya Senaryosu: Dinamik \u00dcr\u00fcn Listeleme ve Filtreleme<\/h3>\n
Bir e-ticaret sitesi i\u00e7in \u00fcr\u00fcnleri listeleyen ve kullan\u0131c\u0131n\u0131n filtreleme yapmas\u0131na olanak tan\u0131yan bir React bile\u015feni geli\u015ftirdi\u011fimizi d\u00fc\u015f\u00fcnelim. Bu senaryoda, hem yerel hem de potansiyel olarak global durum y\u00f6netimi devreye girecektir.
\n \u00d6ncelikle, \u00fcr\u00fcn verilerini API’den \u00e7ekece\u011fiz. Bu i\u015flem i\u00e7in useEffect<\/code> Hook’unu kullanabiliriz.\n <\/p>\n\n import React, { useState, useEffect } from 'react';\n import ProductCard from '.\/ProductCard'; \/\/ \u00dcr\u00fcn kart\u0131 bile\u015feni\n import FilterPanel from '.\/FilterPanel'; \/\/ Filtreleme paneli bile\u015feni\n\n function ProductList() {\n const [products, setProducts] = useState([]);\n const [filteredProducts, setFilteredProducts] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [selectedCategory, setSelectedCategory] = useState('');\n const [minPrice, setMinPrice] = useState(0);\n\n useEffect(() => {\n fetch('\/api\/products') \/\/ API \u00e7a\u011fr\u0131s\u0131\n .then(response => {\n if (!response.ok) {\n throw new Error('A\u011f yan\u0131t\u0131 ge\u00e7erli de\u011fildi');\n }\n return response.json();\n })\n .then(data => {\n setProducts(data);\n setFilteredProducts(data); \/\/ Ba\u015flang\u0131\u00e7ta t\u00fcm \u00fcr\u00fcnleri g\u00f6ster\n setLoading(false);\n })\n .catch(error => {\n setError(error);\n setLoading(false);\n });\n }, []); \/\/ Bo\u015f dizi, bile\u015fen ilk render edildi\u011finde sadece bir kere \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131n\u0131 sa\u011flar\n\n \/\/ Filtreleme mant\u0131\u011f\u0131\n useEffect(() => {\n let results = products;\n\n if (selectedCategory) {\n results = results.filter(product => product.kategori === selectedCategory);\n }\n\n if (minPrice > 0) {\n results = results.filter(product => product.fiyat >= minPrice);\n }\n\n setFilteredProducts(results);\n }, [selectedCategory, minPrice, products]); \/\/ Bu dependency'ler de\u011fi\u015fti\u011finde filtreleme yeniden \u00e7al\u0131\u015facak\n\n const handleCategoryChange = (category) => {\n setSelectedCategory(category);\n };\n\n const handlePriceChange = (price) => {\n setMinPrice(price);\n };\n\n if (loading) return <p>Y\u00fckleniyor...<\/p>;\n if (error) return <p>Hata olu\u015ftu: {error.message}<\/p>;\n\n return (\n <div>\n <FilterPanel\n categories={['Elektronik', 'Giyim', 'Ev E\u015fyalar\u0131']} \/\/ \u00d6rnek kategoriler\n onCategoryChange={handleCategoryChange}\n onPriceChange={handlePriceChange}\n \/>\n <div className=\"product-grid\">\n {filteredProducts.map(product => (\n <ProductCard key={product._id} product={product} \/>\n ))}\n <\/div>\n <\/div>\n );\n }\n\n export default ProductList;\n <\/pre>\nBu \u00f6rnekte, products<\/code> state’i API’den gelen t\u00fcm \u00fcr\u00fcnleri tutar. filteredProducts<\/code> state’i ise uygulanan filtrelere g\u00f6re g\u00fcncellenir. selectedCategory<\/code> ve minPrice<\/code> gibi state’ler, filtreleme se\u00e7eneklerini temsil eder ve kullan\u0131c\u0131 etkile\u015fimleriyle g\u00fcncellenir. \u0130kinci useEffect<\/code> Hook’u, bu filtreleme state’leri de\u011fi\u015fti\u011finde otomatik olarak \u00e7al\u0131\u015farak filteredProducts<\/code>‘\u0131 g\u00fcnceller. Bu, React’in reaktif (reactive) do\u011fas\u0131n\u0131 kullanarak kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc otomatik olarak g\u00fcncellemeyi sa\u011flar.<\/p>\nNode.js ile Sunucu Tarafl\u0131 Mant\u0131k ve Performans Optimizasyonu<\/h2>\n
Node.js, JavaScript’in sunucu taraf\u0131nda \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayan bir \u00e7al\u0131\u015fma ortam\u0131d\u0131r. MERN Stack’in omurgas\u0131n\u0131 olu\u015fturan Node.js, \u00f6zellikle Express.js ile birlikte kullan\u0131ld\u0131\u011f\u0131nda g\u00fc\u00e7l\u00fc ve \u00f6l\u00e7eklenebilir web sunucular\u0131 olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. 23. g\u00fcnde, Node.js’in temel \u00f6zelliklerini daha derinlemesine anlamal\u0131y\u0131z. Node.js’in asenkron (asynchronous) ve olay tabanl\u0131 (event-driven) mimarisi, \u00f6zellikle I\/O (Input\/Output – Girdi\/\u00c7\u0131kt\u0131) i\u015flemleri i\u00e7in y\u00fcksek performans sunar. Bu, geleneksel senkron (synchronous) ve engelleme (blocking) modellerine g\u00f6re \u00f6nemli bir avantaj sa\u011flar. Olay d\u00f6ng\u00fcs\u00fc (event loop) kavram\u0131n\u0131 anlamak, Node.js’in nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 kavramak i\u00e7in kritiktir. Bu d\u00f6ng\u00fc, asenkron i\u015flemleri y\u00f6netir ve uygulaman\u0131n tek bir i\u015f par\u00e7ac\u0131\u011f\u0131 (thread) \u00fczerinde bile e\u015fzamanl\u0131 (concurrent) gibi g\u00f6r\u00fcnmesini sa\u011flar. Performans optimizasyonu a\u00e7\u0131s\u0131ndan, Node.js’te dikkat edilmesi gereken birka\u00e7 \u00f6nemli nokta vard\u0131r. \u00d6ncelikle, uzun s\u00fcren i\u015flemleri (CPU-bound operations) ana olay d\u00f6ng\u00fcs\u00fcn\u00fc engellememeleri i\u00e7in worker_threads gibi mekanizmalarla ayr\u0131 i\u015f par\u00e7ac\u0131klar\u0131na y\u00f6nlendirmek gerekebilir. Bellek y\u00f6netimi (memory management) de \u00f6nemlidir; bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 (memory leaks) \u00f6nlemek i\u00e7in nesnelerin ve olay dinleyicilerinin (event listeners) do\u011fru \u015fekilde serbest b\u0131rak\u0131ld\u0131\u011f\u0131ndan emin olmal\u0131y\u0131z. Paket y\u00f6neticisi npm (Node Package Manager) veya yarn kullanarak projeye eklenen k\u00fct\u00fcphanelerin (dependencies) g\u00fcncel ve g\u00fcvenli oldu\u011fundan emin olmak da \u00f6nemlidir. G\u00fcvenlik a\u00e7\u0131s\u0131ndan, \u00f6zellikle kullan\u0131c\u0131dan gelen girdileri do\u011frulamak ve sanitasyon uygulamak, olas\u0131 g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 (\u00f6rne\u011fin, enjeksiyon sald\u0131r\u0131lar\u0131) \u00f6nlemek i\u00e7in hayati \u00f6nem ta\u015f\u0131r. Loglama (logging) mekanizmalar\u0131n\u0131 etkili bir \u015fekilde kullanmak, uygulaman\u0131n \u00e7al\u0131\u015fma zaman\u0131ndaki hatalar\u0131 tespit etmek ve gidermek i\u00e7in vazge\u00e7ilmezdir. Winston veya Pino gibi loglama k\u00fct\u00fcphaneleri bu konuda yard\u0131mc\u0131 olabilir. \u00d6l\u00e7eklenebilirlik i\u00e7in, Node.js uygulamalar\u0131n\u0131 birden fazla i\u015flemci \u00e7ekirde\u011fini kullanacak \u015fekilde \u00e7al\u0131\u015ft\u0131rmak i\u00e7in PM2 gibi i\u015flem y\u00f6neticileri (process managers) veya k\u00fcmeleme (clustering) mod\u00fcl\u00fc kullan\u0131labilir.<\/p>\n
Ger\u00e7ek D\u00fcnya Senaryosu: Y\u00fcksek Trafikli API \u0130\u00e7in \u00d6l\u00e7eklenebilirlik<\/h3>\n
Bir haber sitesi veya sosyal medya platformu gibi y\u00fcksek trafik alan bir uygulaman\u0131n backend’ini Node.js ile geli\u015ftirdi\u011fimizi varsayal\u0131m. Bu durumda, uygulaman\u0131n \u00f6l\u00e7eklenebilirli\u011fi kritik \u00f6neme sahiptir.
\n \u0130lk ad\u0131m, Express.js ile olu\u015fturdu\u011fumuz API’nin performans\u0131n\u0131 optimize etmektir. Gereksiz console.log<\/code> ifadelerini kald\u0131rmak, veritaban\u0131 sorgular\u0131n\u0131 optimize etmek (do\u011fru indeksleri kullanmak), ve gereksiz hesaplamalardan ka\u00e7\u0131nmak gibi temel optimizasyonlar yap\u0131lmal\u0131d\u0131r.
\n Ard\u0131ndan, tek bir Node.js i\u015fleminin t\u00fcm trafi\u011fi y\u00f6netemeyece\u011fi durumlar i\u00e7in \u00f6l\u00e7eklendirme stratejileri devreye girer.
\n 1. Clustering (K\u00fcmeleme)<\/strong>: Node.js’in kendi cluster<\/code> mod\u00fcl\u00fc, tek bir makinede birden fazla Node.js i\u015fleminin ba\u015flat\u0131lmas\u0131na olanak tan\u0131r. Bu i\u015flemler, gelen istekleri payla\u015farak CPU kullan\u0131m\u0131n\u0131 art\u0131r\u0131r.<\/p>\n\n const cluster = require('cluster');\n const http = require('http');\n const numCPUs = require('os').cpus().length;\n const express = require('express');\n const app = express();\n\n if (cluster.isMaster) {\n console.log(Master ${process.pid} \u00e7al\u0131\u015f\u0131yor<\/code>);\n\n \/\/ CPU say\u0131s\u0131na g\u00f6re worker'lar olu\u015ftur\n for (let i = 0; i < numCPUs; i++) {\n cluster.fork();\n }\n\n cluster.on('exit', (worker, code, signal) => {\n console.log(Worker ${worker.process.pid} \u00f6ld\u00fc. Yeniden ba\u015flat\u0131l\u0131yor...<\/code>);\n cluster.fork(); \/\/ \u00d6len worker'\u0131 yeniden ba\u015flat\n });\n } else {\n \/\/ Worker i\u015flemleri\n http.createServer((req, res) => {\n res.writeHead(200);\n res.end(Merhaba, ben ${process.pid} ID'li worker'\u0131m!\\n<\/code>);\n }).listen(8000);\n\n console.log(Worker ${process.pid} ba\u015flad\u0131<\/code>);\n }\n <\/pre>\n Bu \u00f6rnek, temel bir k\u00fcmeleme yap\u0131s\u0131n\u0131 g\u00f6sterir. Express.js uygulaman\u0131z\u0131 da bu yap\u0131 i\u00e7ine entegre edebilirsiniz.
\n 2. Load Balancer (Y\u00fck Dengeleyici)<\/strong>: Birden fazla sunucuda \u00e7al\u0131\u015fan Node.js uygulamalar\u0131 i\u00e7in bir y\u00fck dengeleyici (\u00f6rne\u011fin, Nginx, HAProxy veya bulut sa\u011flay\u0131c\u0131lar\u0131n sundu\u011fu servisler) kullan\u0131l\u0131r. Y\u00fck dengeleyici, gelen istekleri farkl\u0131 sunuculara da\u011f\u0131tarak y\u00fck\u00fc e\u015fitler.
\n 3. Microservices (Mikroservisler)<\/strong>: Uygulaman\u0131z\u0131 daha k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z servisler halinde b\u00f6lmek. Her servis kendi veritaban\u0131na sahip olabilir ve kendi \u00f6l\u00e7eklenebilirli\u011fi y\u00f6netilebilir. Bu, daha karma\u015f\u0131k bir mimari olsa da, b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar i\u00e7in olduk\u00e7a etkilidir.
\n Bu stratejiler, uygulaman\u0131z\u0131n artan trafikle ba\u015fa \u00e7\u0131kabilmesini ve y\u00fcksek kullan\u0131labilirlik (high availability) sa\u011flamas\u0131n\u0131 m\u00fcmk\u00fcn k\u0131lar.<\/p>\nFrontend ve Backend Aras\u0131ndaki \u0130leti\u015fim: RESTful API Entegrasyonu<\/h2>\n
MERN Stack’in g\u00fcc\u00fc, frontend (React) ve backend (Node.js\/Express.js) aras\u0131ndaki kusursuz entegrasyonda yatar. Bu entegrasyonun temelinde ise RESTful API’ler bulunur. 23. g\u00fcnde, bu ileti\u015fimi daha etkin y\u00f6netmeyi \u00f6\u011frenmeliyiz. React uygulaman\u0131zdan Express.js ile olu\u015fturdu\u011funuz API’ye istekler g\u00f6ndermek i\u00e7in taray\u0131c\u0131n\u0131n yerle\u015fik fetch<\/code> API’sini veya axios<\/code> gibi \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphaneleri kullanabilirsiniz. Bu istekler, genellikle JSON (JavaScript Object Notation) format\u0131nda veri g\u00f6nderir ve al\u0131r. Veri format\u0131n\u0131n tutarl\u0131 olmas\u0131, frontend ve backend aras\u0131ndaki ileti\u015fimi basitle\u015ftirir. API’nizin iyi tasarlanm\u0131\u015f olmas\u0131, yani kaynaklara (resources) y\u00f6nelik net ve anla\u015f\u0131l\u0131r URL’ler kullanmas\u0131 (\u00f6rne\u011fin, \/api\/users<\/code>, \/api\/products\/:id<\/code>), HTTP metodlar\u0131n\u0131 do\u011fru kullanmas\u0131 (GET, POST, PUT, DELETE) ve anlaml\u0131 durum kodlar\u0131 (status codes) d\u00f6nd\u00fcrmesi (200 OK, 201 Created, 400 Bad Request, 404 Not Found, 500 Internal Server Error), entegrasyonu \u00e7ok daha kolay hale getirir. Veri senkronizasyonu da \u00f6nemli bir konudur. Frontend’de bir veri g\u00fcncellendi\u011finde, bu de\u011fi\u015fikli\u011fin backend’e bildirilmesi ve veritaban\u0131na yans\u0131t\u0131lmas\u0131 gerekir. Ard\u0131ndan, g\u00fcncellenmi\u015f verinin frontend’e geri d\u00f6nmesi ve aray\u00fcz\u00fcn buna g\u00f6re g\u00fcncellenmesi sa\u011flanmal\u0131d\u0131r. Bu s\u00fcre\u00e7, genellikle API \u00e7a\u011fr\u0131lar\u0131 ve state g\u00fcncellemeleri ile y\u00f6netilir. Hata y\u00f6netimi, bu ileti\u015fimde kritik bir rol oynar. API’den gelen hatalar\u0131 frontend’de yakalamak ve kullan\u0131c\u0131ya anla\u015f\u0131l\u0131r bir mesaj g\u00f6stermek, kullan\u0131c\u0131 deneyimini iyile\u015ftirir. \u00d6rne\u011fin, bir \u00fcr\u00fcn ekleme iste\u011fi ba\u015far\u0131s\u0131z oldu\u011funda, kullan\u0131c\u0131ya “\u00dcr\u00fcn eklenemedi, l\u00fctfen tekrar deneyin” gibi bir mesaj g\u00f6sterilebilir. Ger\u00e7ek zamanl\u0131 ileti\u015fim gerektiren uygulamalar (\u00f6rne\u011fin, sohbet uygulamalar\u0131) i\u00e7in WebSockets gibi teknolojiler de kullan\u0131labilir, ancak RESTful API’ler \u00e7o\u011fu standart web uygulamas\u0131 i\u00e7in yeterli ve etkili bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\nGer\u00e7ek D\u00fcnya Senaryosu: Kullan\u0131c\u0131 Profilini G\u00fcncelleme<\/h3>\n
Bir kullan\u0131c\u0131 profilini g\u00fcncelleme i\u015flemini ele alal\u0131m. Bu i\u015flem, hem frontend’de hem de backend’de belirli ad\u0131mlar\u0131 gerektirir.<\/p>\n
\n- \n Frontend (React):<\/strong><\/p>\n
\n- Kullan\u0131c\u0131 profili bilgilerini (isim, e-posta, profil resmi vb.) g\u00f6steren bir form olu\u015fturulur.<\/li>\n
- Kullan\u0131c\u0131 bu bilgileri g\u00fcncelledi\u011finde,
useState<\/code> Hook’lar\u0131 ile bu de\u011fi\u015fiklikler yerel state’te tutulur.<\/li>\n- Kullan\u0131c\u0131 “Kaydet” butonuna t\u0131klad\u0131\u011f\u0131nda, g\u00fcncellenmi\u015f bilgiler bir JavaScript nesnesi olarak haz\u0131rlan\u0131r.<\/li>\n
axios<\/code> veya fetch<\/code> kullan\u0131larak, bu nesne ile backend’deki ilgili API endpoint’ine (\u00f6rne\u011fin, PUT \/api\/users\/:userId<\/code>) bir PUT iste\u011fi g\u00f6nderilir.<\/li>\n- API iste\u011fi ba\u015far\u0131l\u0131 olursa, kullan\u0131c\u0131ya bir onay mesaj\u0131 g\u00f6sterilir ve profil bilgileri frontend’de g\u00fcncellenir. Hata olursa, hata mesaj\u0131 g\u00f6sterilir.<\/li>\n<\/ul>\n<\/li>\n
- \n Backend (Node.js\/Express.js):<\/strong><\/p>\n
\n- Belirlenen PUT rotas\u0131 (
\/api\/users\/:userId<\/code>) gelen iste\u011fi kar\u015f\u0131lar.<\/li>\n- Middleware’ler (\u00f6rne\u011fin, JWT ile kullan\u0131c\u0131 kimli\u011fini do\u011frulama, gelen veriyi do\u011frulama) \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r.<\/li>\n
userId<\/code> ve iste\u011fin g\u00f6vdesindeki g\u00fcncellenmi\u015f bilgiler al\u0131n\u0131r.<\/li>\n- MongoDB’de ilgili kullan\u0131c\u0131 belgesi bulunur ve g\u00fcncellenir.<\/li>\n
- \u0130\u015flem ba\u015far\u0131l\u0131 olursa, 200 OK veya 204 No Content durum kodu ile yan\u0131t d\u00f6ner. Hata olursa, uygun bir hata kodu (\u00f6rne\u011fin, 400 veya 404) ve mesaj\u0131 ile yan\u0131t d\u00f6ner.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
Bu senaryoda, frontend ve backend aras\u0131ndaki ileti\u015fim net bir \u015fekilde tan\u0131mlanm\u0131\u015f olur. Frontend, kullan\u0131c\u0131dan ald\u0131\u011f\u0131 veriyi backend’e g\u00f6nderir ve backend de bu veriyi i\u015fleyip sonucu frontend’e bildirir.<\/p>\n
Geli\u015fmi\u015f Konular ve \u0130leriye D\u00f6n\u00fck Ad\u0131mlar<\/h2>\n
MERN Stack yolculu\u011funuzda 23. g\u00fcne ula\u015fmak, art\u0131k temel bilgilerin \u00f6tesine ge\u00e7ip daha ileri d\u00fczey konulara odaklanma zaman\u0131n\u0131n geldi\u011fini g\u00f6steriyor. Bu a\u015famada, uygulaman\u0131z\u0131n g\u00fcvenli\u011fini art\u0131rmak, performans\u0131n\u0131 daha da optimize etmek ve geli\u015ftirme s\u00fcrecini daha verimli hale getirmek i\u00e7in \u00e7e\u015fitli y\u00f6ntemler mevcuttur. G\u00fcvenlik a\u00e7\u0131s\u0131ndan, OWASP Top 10 gibi yayg\u0131n g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 \u00f6\u011frenmek ve bunlara kar\u015f\u0131 \u00f6nlemler almak \u00f6nemlidir. \u00d6rne\u011fin, SQL injection benzeri sald\u0131r\u0131lar\u0131 \u00f6nlemek i\u00e7in MongoDB’de parametreli sorgular kullanmak veya veri sanitasyonunu s\u0131k\u0131la\u015ft\u0131rmak gibi ad\u0131mlar at\u0131lmal\u0131d\u0131r. Kimlik do\u011frulama ve yetkilendirme mekanizmalar\u0131n\u0131 (JWT, OAuth) daha derinlemesine anlamak ve do\u011fru \u015fekilde uygulamak, kullan\u0131c\u0131 verilerinin korunmas\u0131 i\u00e7in kritiktir. Performans optimizasyonunda, sadece kod seviyesinde de\u011fil, ayn\u0131 zamanda veritaban\u0131 ve sunucu seviyesinde de iyile\u015ftirmeler yap\u0131labilir. MongoDB’de veri modelini yeniden g\u00f6zden ge\u00e7irmek, gereksiz indeksleri kald\u0131rmak veya daha karma\u015f\u0131k indeksleme stratejileri uygulamak performans art\u0131\u015f\u0131 sa\u011flayabilir. Node.js taraf\u0131nda ise, konfig\u00fcrasyon ayarlar\u0131n\u0131 (\u00f6rne\u011fin, uv_threadpool_size<\/code>) optimize etmek veya daha geli\u015fmi\u015f caching (\u00f6nbellekleme) stratejileri uygulamak faydal\u0131 olabilir. Geli\u015ftirme s\u00fcrecini h\u0131zland\u0131rmak i\u00e7in CI\/CD (Continuous Integration\/Continuous Deployment – S\u00fcrekli Entegrasyon\/S\u00fcrekli Da\u011f\u0131t\u0131m) pipeline’lar\u0131 kurmak, test otomasyonunu (birim testleri, entegrasyon testleri) uygulamak ve Docker gibi konteyner teknolojilerini kullanarak uygulaman\u0131z\u0131 paketlemek ve da\u011f\u0131tmak, daha profesyonel bir geli\u015ftirme ak\u0131\u015f\u0131 sa\u011flar. Ayr\u0131ca, GraphQL gibi alternatif API teknolojilerini ara\u015ft\u0131rmak, belirli senaryolarda REST’e g\u00f6re daha verimli \u00e7\u00f6z\u00fcmler sunabilir. Frontend’de, state y\u00f6netimi i\u00e7in Redux Toolkit gibi daha geli\u015fmi\u015f ara\u00e7lar\u0131 kullanmak veya React Query gibi veri alma ve \u00f6nbellekleme k\u00fct\u00fcphaneleriyle tan\u0131\u015fmak, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar\u0131n y\u00f6netimini kolayla\u015ft\u0131rabilir. Bu ileri d\u00fczey konular, MERN Stack geli\u015ftiricisi olarak yetkinli\u011finizi art\u0131racak ve sizi daha karma\u015f\u0131k projelerde ba\u015far\u0131ya ula\u015ft\u0131racakt\u0131r.<\/p>\nSonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n
MERN Stack yolculu\u011funuzun 23. g\u00fcn\u00fcnde, temel bilgileri peki\u015ftirdiniz, ger\u00e7ek d\u00fcnya senaryolar\u0131 \u00fczerinden derinle\u015fme f\u0131rsat\u0131 buldunuz. MongoDB’de veri modelleme ve sorgulama, Express.js ile API geli\u015ftirme, React’te bile\u015fen tasar\u0131m\u0131 ve durum y\u00f6netimi, Node.js ile sunucu taraf\u0131 mant\u0131k ve \u00f6l\u00e7eklenebilirlik, ayr\u0131ca frontend ve backend aras\u0131ndaki ileti\u015fim gibi kritik konular\u0131 ele ald\u0131k. Bu noktada, \u00f6\u011frenme s\u00fcreci devam ediyor. Kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z her sorun, bir \u00f6\u011frenme f\u0131rsat\u0131d\u0131r. Pratik yapmaya devam edin, projeler geli\u015ftirin ve topluluklarla etkile\u015fimde bulunun. MERN Stack, modern web geli\u015ftirmenin g\u00fc\u00e7l\u00fc bir arac\u0131d\u0131r ve bu yolculukta edindi\u011finiz bilgiler, sizi ba\u015far\u0131l\u0131 projeler geli\u015ftirmeye adayacakt\u0131r.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n\n- \n Soru: MERN Stack \u00f6\u011frenirken hangi s\u0131ray\u0131 izlemeliyim?<\/strong><\/p>\n
Cevap: Genellikle izlenen s\u0131ra \u015f\u00f6yledir: HTML\/CSS\/JavaScript temelleri, ard\u0131ndan React, daha sonra Node.js ve Express.js, en son olarak da MongoDB. Ancak, bu s\u0131ray\u0131 kendi \u00f6\u011frenme h\u0131z\u0131n\u0131za ve \u00f6nceliklerinize g\u00f6re uyarlayabilirsiniz.<\/p>\n<\/li>\n
- \n Soru: Hangi durumlarda MongoDB yerine ili\u015fkisel bir veritaban\u0131 (SQL) kullanmal\u0131y\u0131m?<\/strong><\/p>\n
Cevap: Verileriniz aras\u0131nda karma\u015f\u0131k ili\u015fkiler varsa, veri b\u00fct\u00fcnl\u00fc\u011f\u00fc \u00e7ok kritikse ve ACID (Atomicity, Consistency, Isolation, Durability) uyumlulu\u011fu \u00f6ncelikliyse, ili\u015fkisel veritabanlar\u0131 daha uygun olabilir. MongoDB, esnek \u015fema yap\u0131s\u0131 ve yatay \u00f6l\u00e7eklenebilirli\u011fi gerektiren durumlarda daha avantajl\u0131d\u0131r.<\/p>\n<\/li>\n
- \n Soru: React’te state y\u00f6netimi i\u00e7in Redux mu yoksa Context API mi kullanmal\u0131y\u0131m?<\/strong><\/p>\n
Cevap: K\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli uygulamalar i\u00e7in Context API genellikle yeterlidir ve daha basittir. Ancak, uygulaman\u0131z \u00e7ok b\u00fcy\u00fck ve karma\u015f\u0131k state y\u00f6netimi gerektiriyorsa, Redux (\u00f6zellikle Redux Toolkit) daha g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcm sunar ve geli\u015ftirici ara\u00e7lar\u0131 a\u00e7\u0131s\u0131ndan zengindir.<\/p>\n<\/li>\n
- \n Soru: Node.js’te g\u00fcvenlik i\u00e7in en \u00f6nemli \u00f6nlemler nelerdir?<\/strong><\/p>\n
Cevap: Kullan\u0131c\u0131 girdilerini her zaman do\u011frulay\u0131n ve sanitasyon uygulay\u0131n, g\u00fc\u00e7l\u00fc \u015fifreleme algoritmalar\u0131 kullan\u0131n, g\u00fcncel ve g\u00fcvenli k\u00fct\u00fcphaneler tercih edin, kimlik do\u011frulama ve yetkilendirme mekanizmalar\u0131n\u0131 do\u011fru uygulay\u0131n, ve g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 d\u00fczenli olarak taray\u0131n.<\/p>\n<\/li>\n<\/ul>\n
#MERNStack #WebGeli\u015ftirme #JavaScript #React #Nodejs #Expressjs #MongoDB<\/p>\n