Frontend & Entegrasyon
React neden yeniden render ediyor
TypeScript tip sistemi, React render modeli, hooks, state yönetimi ve REST entegrasyonunda yarış durumları.
20 ders 177 dk toplam süre Sertifikan
Bu konunun dersleri şu çalışma yollarında: Ön Yüz Adım Adım (20)
Başlangıç
- 1/3 yıldız2/3 yıldız3/3 yıldız TypeScript Tip Sistemi ve Daraltma as yazmak derleyiciye 'bana güven, sus' demektir; tip daraltma ise ona bir kontrolle kanıt sunar. Ama tip doğru diye mantık da doğru olmaz: !count kontrolü sıfırı da eler. 10 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız JavaScript Olay Döngüsü — setTimeout(0) Neden Sonra Yazıyor? ✦ yeni JavaScript tek bir aşçıyla çalışan bir mutfak: elindeki işi bitirir, sonra kapıdaki acil notların hepsini, en son sıradaki müşteriyi. Promise ve await notlara, setTimeout sıraya girer. Konsolun sırası buradan gelir. 9 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız Flexbox mı Grid mi — Telefonda Sayfa Neden Yana Kayıyor? ✦ yeni Flexbox öğeleri tek yönde dizer, grid satır ve sütunu birlikte kurar. Flex öğeleri varsayılan olarak içeriklerinden küçük olamaz; tek satıra sığmayınca sayfa yana kayar. Doğru seçim, hangi yönde düzen istediğine bağlı. 9 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız Erişilebilirlik Temelleri — Gözü Kapalı Para Gönderebilir misin? ✦ yeni Herkes sayfayı fareyle ve gözüyle kullanmıyor. Ekran okuyucu yalnızca HTML'in söylediğini okur: etiketsiz kutu adsızdır, div düğmeye Tab ile ulaşılmaz, kırmızı çerçeve hiç duyulmaz. Çoğu düzeltme tek bir doğru etikettir. 9 dk
Orta
- 1/3 yıldız2/3 yıldız3/3 yıldız React Render Modeli React'in bir bileşeni yeniden çizmesi (render), ekranın değişmesi demek değil. React.memo ise ancak verdiğin değerler her seferinde aynı nesneyse işe yarar; yoksa hiçbir şey kazandırmaz. 10 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız useEffect — Bağımlılıklar ve Temizlik useEffect'te iki ayrı hata yapılabilir: eksik bağımlılık eski veriyi gösterir, eksik temizlik açık bağlantı bırakır. Çoğu kişi birini fark edip ötekini düzeltir. 10 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız Tarayıcı Nasıl Çizer — Animasyon Neden Takılıyor? ✦ yeni Tarayıcı her kareyi dört adımda çizer: stil, yerleşim, boyama, birleştirme. Değiştirdiğin özellik hangi adımdan başlarsa, ondan sonrakiler de çalışır. Oku-yaz-oku-yaz döngüsü ise yerleşimi tekrar tekrar zorlar. 9 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız Form Gönderimi — Bir Tıkla İki Havale Nasıl Olur? ✦ yeni Kullanıcı bir kez gönderir ama sunucuya iki istek gider: çift tıklamadan ya da kaybolan bir cevaptan sonraki tekrar denemeden. Kilit ilkini durdurur; ikisini birden durduran şey idempotency anahtarıdır. 8 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız CORS — Postman'de Çalışıyor, Tarayıcıda Neden Hata? ✦ yeni Tarayıcı, bir sayfanın başka bir adrese yaptığı isteğin cevabını ancak sunucu izin verirse sayfaya verir. CORS bu izni anlatır. Kuralı yalnızca tarayıcı uygular; isteğin kendisi çoğu zaman sunucuya ulaşır. 9 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız Canlı Veri — Polling, SSE ve WebSocket ✦ yeni Tarayıcı sunucuya "yeni bir şey var mı?" diye sık sık sorabilir (polling), sunucu açık bir cevaptan olayları akıtabilir (SSE) ya da iki taraf tek bir bağlantıdan konuşabilir (WebSocket). Seçim, verinin yönüne ve sıklığına bağlı. 9 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız Core Web Vitals — Sayfa Ne Zaman Gerçekten Hazır? ✦ yeni Bir sayfanın hızlı hissettirmesi tek bir sayıyla ölçülmez. LCP ana içeriğin ne zaman göründüğünü, CLS ekranın ne kadar zıpladığını, INP dokunuşa ne çabuk cevap verildiğini ölçer. Her biri ayrı bir sorunun izini sürer. 9 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız State Nerede Yaşamalı? — Bileşen, Üst Bileşen, Context, Cache, URL ✦ yeni Her state'i tek bir global yere koymak kolay görünür, ama yeniden çizim fırtınası, kaybolan filtreler ve bayat sunucu verisi getirir. Her parça için üç soru sor: kimler kullanıyor, sunucudan mı geliyor, paylaşılabilir mi olmalı? 9 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız Form Doğrulama — Hatayı Ne Zaman Göstermeli? ✦ yeni Bir alan daha yazılırken hata göstermek azar gibi hissettirir, yalnızca gönderince göstermek ise çok geçtir. İyi bir form alan bitince kontrol eder, hata gösterdikten sonra düzeltmeyi hemen onaylar ve aynı kuralı sunucuda da uygular. 9 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız Tarayıcı Önbelleği — Yeni Sürümü Yayına Aldın, Müşteri Neden Hâlâ Eskisini Görüyor? ✦ yeni Tarayıcı dosyaları önbellekte tutar ve sunucunun söylediği kadar süre bir daha sormaz. HTML'i her seferinde ETag ile sor, adında içerik özeti olan dosyaları uzun süre sakla, hassas veriyi hiç saklatma. 9 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız XSS — Havale Açıklamasına Yazılan Kod Neden Müşterinin Sayfasında Çalışır? ✦ yeni Kullanıcının yazdığı metni HTML olarak yorumlarsan, içine gizlenmiş kodu da çalıştırırsın. Metni metin olarak yaz, HTML gerekiyorsa izin listesiyle temizle, Content-Security-Policy ile ikinci bir kat ekle. 9 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız İyimser Arayüz — Ne Zaman Hemen 'Tamam' Denir, Ne Zaman Beklenir? ✦ yeni Arayüz bir işlemi sunucu cevap vermeden 'tamam' gösterirse uygulama hızlı hissettirir. Favori eklemek gibi geri alınabilen işlerde bu iyidir; havale gibi geri alınamayan işlerde müşteriye yalan söylemek olur. 8 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız Kod Bölme — Giriş Ekranı Neden Grafik Kütüphanesini İndiriyor? ✦ yeni Bütün uygulama tek bir JavaScript paketindeyse, yalnızca şifre isteyen giriş ekranı bile grafik ve PDF kütüphanelerini indirir. Paketi sayfalara bölmek ve nadir kullanılan ağır kodu kullanıldığı anda yüklemek ilk açılışı hafifletir. 8 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız Çevrimdışı Uygulama — Metroda Bağlantı Kopunca Ne Gösterilir? ✦ yeni Service worker, bağlantı yokken de uygulamanın açılmasını sağlar. Ama her şeyi önbellekten vermek tehlikelidir: değişmeyen iskelet önbellekten gelir, bakiye ağdan istenir, para çevrimdışı gönderilmez. 8 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız Bileşen Testi — Sınıf Adı Değişti, Test Neden Kırıldı? ✦ yeni Bileşenin içine bakan testler, davranış aynıyken kırılır ve gerçek hatayı kaçırır. Testing Library ile öğeleri rol ve etiketle bulup kullanıcı gibi yazan, tıklayan testler düzenlemede yeşil, hatada kırmızı kalır. 8 dk
- 1/3 yıldız2/3 yıldız3/3 yıldız Anında Arama — Müşteri "kira" Yazdı, Ekranda Neden "k" Sonuçları Var? ✦ yeni Her tuşta arama isteği göndermek hem çok istek doğurur hem de cevapları karıştırır: yavaş gelen eski cevap yenisinin üstüne yazılır. Eski cevabı yok saymak ekranı doğru tutar; debounce ise yazma bitene kadar bekleyip tek istek gönderir. 8 dk