SOLID ve Temiz Kod: React/TypeScript Projelerinde Uygulama
Tunahan İpek · Yönetici
Bu rehberde ne öğreneceksiniz?
Bu yazı bir haber özeti değil; adım adım uygulayabileceğiniz bir öğretici makale (tutorial) formatındadır. Her bölümün sonunda pratik çıkarımlar ve üretim ortamında karşılaşacağınız senaryolar yer alır.
- Her SOLID prensibini somut örnekle anlamak
- God component'i parçalamak
- Bağımlılığı interface ile ters çevirmek (gerektiğinde)
- Over-engineering'den kaçınmak
Ön koşullar
Rehberi verimli takip etmek için aşağıdaki bilgilere aşina olmanız önerilir. Eksik hissettiğiniz konularda ilgili bölümde ek kaynak ipuçları bulacaksınız.
- React component ve hook kullanımı
- TypeScript interface ve type
- Kod review deneyimi
Güncellik ve teknoloji yığını
Makale 2026 itibarıyla güncellenmiştir. Örnekler ve API referansları şu yığınla uyumludur: TypeScript 5.9+, React 19, Next.js 16 component modeli. Eski sürüm dokümantasyonu ile karıştırmamak için major versiyon farklarını özellikle belirttik.
Framework sürümleri hızla değişir; kalıcı olan prensipler (güvenlik, katman ayrımı, ölçüm) bu rehberin omurgasını oluşturur.
S — Single Responsibility
BlogForm yalnızca form state ve submit UI. API çağrısı parent veya custom hook'ta. Validation Zod modülünde.
Adım adım uygulama
Aşağıdaki sırayı takip edin. Her adımı tamamlamadan bir sonrakine geçmeyin; özellikle güvenlik ve veri katmanı adımları atlanmamalıdır.
- 200+ satır component'i bölün.
- İş kuralını service fonksiyonuna taşıyın.
- Test'i küçük birimlere yazın.
O — Open/Closed
Yeni comment status eklerken mevcut switch'leri kırmayın; status → handler map kullanın.
const statusHandlers: Record<Status, (c: Comment) => void> = {
PENDING: moderatePending,
APPROVED: noop,
REJECTED: notifyRejection,
};D — Dependency Inversion
Route handler doğrudan prisma çağırmak yerine data katmanına bağımlı. Test'te mock data layer inject edilebilir.
İpucu: Her fonksiyon için interface şart değil; karmaşıklık arttıkça ekleyin.
Derinlemesine: Senaryo çalışması
Gerçek bir ekip senaryosu: Cuma akşamı deploy sonrası hata oranı yükseldi. Aşağıdaki kontrol listesi ile kök nedeni daraltın.
Son deploy diff'ine bakın: şema migration, env değişikliği, feature flag açılışı.
Trace id ile tek bir başarısız isteği uçtan uca izleyin (edge → server → DB).
Gerekirse kill switch veya önceki imaja rollback; veri migration geri alınamazsa kod rollback yeterli olmayabilir.
Adım adım uygulama
Aşağıdaki sırayı takip edin. Her adımı tamamlamadan bir sonrakine geçmeyin; özellikle güvenlik ve veri katmanı adımları atlanmamalıdır.
- Metrik panosunda hata oranı ve p95 latency
- Log'da son 15 dakika exception grupları
- Son başarılı deploy tag'ine dönüş kararı
Production checklist
Canlıya çıkmadan önce bu maddeleri review edin.
Production ortamında üretim ortamı ile ilgili en sık görülen sorun, geliştirme ortamındaki varsayımların (küçük veri seti, tek kullanıcı, sıcak cache) canlı trafikte çökmemesidir. Bu yüzden her değişiklikten önce yük testi veya en azından p95 latency ölçümü yapın.
Structured logging (request id, route, süre, kullanıcı id’si — PII olmadan) ve hata oranı alarmları, sorunları kullanıcı şikayetinden önce yakalamanızı sağlar. Log’da stack trace tutun; kullanıcıya generic mesaj gösterin.
Dokümantasyonu kod ile birlikte güncelleyin: README, ADR (Architecture Decision Record) veya ekip wiki’sinde “neden bu kararı aldık?” sorusunun cevabı gelecekteki sizin en büyük yardımcınızdır.
- Rate limit ve timeout tanımlı
- Secret'lar secret manager'da
- Health check ve readiness probe çalışıyor
- Alarm eşikleri tanımlı (5xx, latency)
Sık yapılan hatalar
Aşağıdaki tuzaklar eğitim ortamlarında nadiren, production'da ise pahalıya mal olur. Code review checklist'inize eklemenizi öneririz.
- Abstraction enflasyonu
- SOLID isimlerini ezberleyip uygulamamak
- Client'ta business rule
Pratik alıştırmalar
Okumak yeterli değildir; öğrenmeyi pekiştirmek için küçük bir side-project veya mevcut kod tabanınızda şu görevleri uygulayın:
- Bir büyük component'i 3 dosyaya bölün
- Status switch'i map pattern'e çevirin
Özet ve sonraki adımlar
Bu rehberdeki prensipleri tek seferde tüm projeye uygulamaya çalışmayın. Önce tek bir route veya modül seçin, ölçün, sonra yaygınlaştırın.
- Design Patterns (Gang of Four) seçici okuma