Frontend Academy · Ders

Özellik Tabanlı Klasör Yapısı

Kodu türe göre değil özellik alanına göre düzenlemeyi, testleri, stilleri ve bileşenleri ilgili yerde tutmayı ve sınırları eslint-plugin-boundaries ile zorunlu kılmayı öğrenin.

Özellik Tabanlı Klasör Yapısı, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Kodu Düzenlemenin İki Yolu

Kodu türe göre (bileşenler/, kancalar/, hizmetler/, türler/) veya özelliğe göre (kimlik doğrulama/, ödeme/, gösterge paneli/ — her biri kendi bileşenlerini, kancalarını vb. içerir) gruplayabilirsiniz. Orta ve büyük uygulamalarda özelliğe göre düzenleme daha iyi sonuç verir.

Türe Göre Düzenleme — Varsayılan Tuzak

Klasik React eğitimi yapısı her şeyi türe göre gruplar. Bu yapı kötü ölçeklenir: her dosya değişikliği birbiriyle ilgisiz birden çok klasöre dokunur ve 'tüm ödeme kodunu bul' demek, ağacın tamamında arama yapmayı gerektirir.

// Type-based (avoid for large apps):
src/
  components/
    Button.tsx
    LoginForm.tsx
    CartItem.tsx
  hooks/
    useAuth.ts
    useCart.ts
  services/
    auth.ts
    cart.ts
  types/
    User.ts
    CartItem.ts

Özelliğe Göre Yapı

Bir özellikle ilgili her şeyi tek bir klasörde gruplayın. Bulması kolaydır, silmesi kolaydır ve anlamlandırması kolaydır.

src/
  features/
    auth/
      LoginForm.tsx
      SignupForm.tsx
      useAuth.ts
      auth.service.ts
      auth.types.ts
      auth.test.tsx
    cart/
      CartItem.tsx
      CartSummary.tsx
      useCart.ts
      cart.service.ts
      cart.types.ts
  shared/
    components/
      Button.tsx
    hooks/
      useDebounce.ts

Bir Özellik İçinde Birlikte Konumlandırma

Bir özellik klasörü şunları içerir: bileşenler, kancalar, hizmetler, türler, testler — o alanda gereken tüm kod. Yeni bir geliştirici kimlik doğrulamayı anlamak mı istiyor? Kimlik doğrulama klasörünü açar. Kimlik doğrulamayı silmek mi istiyorsunuz? Klasörü silin.

Paylaşılan Kod ve Özelliğe Özel Kod

2 veya daha fazla özellik tarafından kullanılan kod shared/ (veya lib/) klasörüne taşınır. Yalnızca bir özellik tarafından kullanılan kod, o özelliğin içinde kalır. 'İleride yeniden kullanılabilir' düşüncesine direnin — ikinci kullanım ortaya çıkana kadar ayıklamayın.

Özellik Sınırı Kuralları

Özellikler birbirlerinden doğrudan içe aktarma yapmamalıdır. İki özelliğin kod paylaşması gerekiyorsa paylaşılan parça shared/ klasörüne taşınır. Koordinasyon gerekiyorsa uygulama düzeyinde olayları veya paylaşılan bir durumu kullanın.

ESLint ile Sınırları Uygulama

Şu kuralı uygulamak için eslint-plugin-boundaries veya eslint-plugin-import kullanın: özellikler shared klasöründen içe aktarabilir, ancak birbirlerinden aktaramaz.

// .eslintrc.json
{
  "plugins": ["boundaries"],
  "settings": {
    "boundaries/elements": [
      { "type": "feature", "pattern": "src/features/*" },
      { "type": "shared",  "pattern": "src/shared/*" }
    ]
  },
  "rules": {
    "boundaries/element-types": ["error", {
      "default": "disallow",
      "rules": [
        { "from": "feature", "allow": ["shared"] },
        { "from": "shared",  "allow": ["shared"] }
      ]
    }]
  }
}

Her Özellik İçin Genel API

Her özellik, features/auth/index.ts aracılığıyla bir genel API dışa aktarır. Diğer kod, derin yollar yerine '@/features/auth' yolundan içe aktarır. Böylece iç yapıyı, kullanıcıları bozmadan yeniden düzenleyebilirsiniz.

// features/auth/index.ts
export { LoginForm } from './LoginForm';
export { useAuth } from './useAuth';
export type { User, AuthState } from './auth.types';

// Consumers:
import { LoginForm, useAuth } from '@/features/auth';
// NOT: import { LoginForm } from '@/features/auth/LoginForm';

Alt Özellikleri İç İçe Yerleştirme

Büyük özelliklerin alt klasörleri olabilir: dashboard/widgets/, dashboard/charts/. 2-3 düzeyden daha derine iç içe yerleştirmekten kaçının — arama yapmak zahmetli hâle gelir.

Yollar Nerede Bulunur

Sayfalar ve yollar, üst düzey pages/ veya routes/ klasöründe bulunabilir. Bunlar incedir — özelliklerdeki bileşenleri ve kancaları alıp birleştirirler.

src/
  pages/
    Dashboard.page.tsx   // composes Dashboard widgets from features/dashboard/
    Cart.page.tsx        // composes from features/cart/
  features/
  shared/

Mevcut Bir Uygulamayı Taşıma

Yalnızca yeni özelliklerle başlayın — yeni kodu features/ içine yerleştirin. Her şeyi aynı anda yeniden düzenlemeyin. Eski dosyalara dokundukça onları kademeli olarak taşıyın. ESLint sınır kuralları, yeni yapıdaki gerilemeleri önler.

Türe Göre Düzenlemenin Hâlâ İşe Yaradığı Durumlar

Çok küçük uygulamalarda (30'dan az bileşen) veya kütüphanelerde türe göre düzenleme uygundur. Farklı iş alanlarınız olur olmaz (kimlik doğrulama, ödeme, faturalandırma, ayarlar) özelliğe göre düzenlemeye geçin.

Hızlı Kontrol

Kodu dosya türüne göre değil de özelliğe göre gruplamanın temel organizasyonel yararı nedir?

Özet: Özelliğe Göre Yapı

features/ alana özgü kodu; shared/ özellikler arası yardımcı araçları içerir. Her özellik genel bir index.ts dışa aktarır. Özellikler birbirlerinden değil, yalnızca shared klasöründen içe aktarır. Bunu eslint-plugin-boundaries ile uygulayın. Sayfalar ve yollar özellikleri birleştirir. Geçişi kademeli olarak yapın. Küçük uygulamalarda türe göre düzenleme uygundur.

Sıkça Sorulan Sorular

“Özellik Tabanlı Klasör Yapısı” dersi ücretsiz mi?

Evet — “Özellik Tabanlı Klasör Yapısı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Özellik Tabanlı Klasör Yapısı” dersinde ne öğreneceğim?

Kodu türe göre değil özellik alanına göre düzenlemeyi, testleri, stilleri ve bileşenleri ilgili yerde tutmayı ve sınırları eslint-plugin-boundaries ile zorunlu kılmayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Özellik Tabanlı Klasör Yapısı” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Atomik Tasarım: Atomlar, Moleküller ve Organizmalar
Turborepo ile Monorepo Kurulumu
Mikro Ön Uçlar: Module Federation
Özellik Tabanlı Klasör Yapısı

← Frontend Academy Sayfasına Dön