Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
React'te Test: Vitest, React Testing Library ve MSW ile API Mock'lamak
React'i test etmenin pratik yolu, kodu kullanıcı gibi sorgulayan React Testing Library'yi Vite'la aynı config'i kullanan Vitest'le çalıştırmak ve API'yi kodu değiştirmeden network seviyesinde MSW ile taklit etmek. Bookstore'da saf applyChange fonksiyonunu, renderHook ile useDebouncedValue ve useCart'ı, user-event ile BookCard'ı ve memory router'daki gerçek route ağacıyla katalog ve checkout ekranlarını test ediyor; getBy/findBy farkını ve store sızmasını gerçek hata çıktılarıyla gösteriyoruz.
Bookstore SPA'yı Uçtan Uca Bitirmek: Feature Klasörleri, Authentication, Environment'lar ve Deploy
Bir React SPA'yı production'a hazırlamak, feature sınırlarını lint kuralıyla korumak, VITE_ değişkenlerinin build sırasında bundle'a yazıldığını bilip secret'ı tarayıcıdan uzak tutmak ve oturumu token yerine HttpOnly cookie taşıyan bir BFF'e vermek demek. Bookstore'a ASP.NET Core ve YARP ile küçük bir BFF ekliyor, sign in akışını, SPA fallback'i, cache header'larını, nginx yapılandırmasını ve bundle analizini gerçek çıktılarla gösteriyoruz.
Next.js'e Kısa Bakış: Server Components, App Router, Server Action'lar, Cache Components ve Ne Zaman SPA Yeter?
Next.js, React'i sunucuda çalıştırır: Server Component'ler veriyi doğrudan await eder ve kodları tarayıcıya inmez, Cache Components ile neyin cache'leneceğini 'use cache' ve cacheLife ile sen seçersin, her Server Function ise doğrulama ve yetki kontrolü isteyen public bir endpoint'tir. Bookstore'un kitap detayını Next.js 16.4 ile Partial Prerender olarak sunuyor, curl ile Server Function'ı doğrudan çağırıyor ve SPA'nın ne zaman yettiğini tartışıyoruz.
React 18'den 19.3'e: Concurrent Rendering, Actions, use(), ref as prop, Activity, useEffectEvent, ViewTransition ve Fragment Ref'leri
React 18 concurrent rendering'in temelini (createRoot, batching, transition'lar), 19 Actions, use() ve ref'in props olmasını, 19.2 Activity ve useEffectEvent'i, 19.3 ise stable ViewTransition ve Fragment ref'lerini getirdi. Bookstore'a ViewTransition ve Fragment ref ekliyor, React Router 8.5'in deprecation'ını uyguluyor ve küçük bir React 18 projesini 18.3 uyarıları, TypeScript codemod'u ve elle düzeltmelerle 19.3'e yükseltiyoruz.