Geli\u015ftirme projelerinizde dosya karma\u015fas\u0131 ve kod y\u00f6netimi zorluklar\u0131 m\u0131 ya\u015f\u0131yorsunuz? \u00d6zellik tabanl\u0131 klas\u00f6r yap\u0131s\u0131na ge\u00e7i\u015f yaparak kod okunabilirli\u011fini, bak\u0131m\u0131n\u0131 ve projenizin \u00f6l\u00e7eklenebilirli\u011fini \u00e7arp\u0131c\u0131 bir \u015fekilde art\u0131rabilirsiniz. Bu makale, neden bu modern yakla\u015f\u0131ma ge\u00e7meniz gerekti\u011fini ve onu nas\u0131l ad\u0131m ad\u0131m uygulayaca\u011f\u0131n\u0131z\u0131 detayl\u0131ca a\u00e7\u0131kl\u0131yor.<\/p>\n
Modern yaz\u0131l\u0131m geli\u015ftirme d\u00fcnyas\u0131nda, projelerin karma\u015f\u0131kl\u0131\u011f\u0131 ve ekip b\u00fcy\u00fckl\u00fckleri s\u00fcrekli art\u0131\u015f g\u00f6steriyor. Geleneksel klas\u00f6r yap\u0131lar\u0131, \u00e7o\u011fu zaman bu artan karma\u015f\u0131kl\u0131kla ba\u015fa \u00e7\u0131kmakta zorlan\u0131yor ve geli\u015ftiriciler i\u00e7in \u00e7e\u015fitli zorluklara yol a\u00e7abiliyor. Genellikle, projeler ilk ba\u015fta katman tabanl\u0131 veya t\u00fcr tabanl\u0131 bir yakla\u015f\u0131mla organize edilir: t\u00fcm bile\u015fenler (components) bir klas\u00f6re, t\u00fcm servisler (services) ba\u015fka bir klas\u00f6re, t\u00fcm yard\u0131mc\u0131 fonksiyonlar (utilities) ise bamba\u015fka bir klas\u00f6re yerle\u015ftirilir. \u0130lk bak\u0131\u015fta mant\u0131kl\u0131 gibi g\u00f6r\u00fcnse de, bu yap\u0131 \u00f6zellikle b\u00fcy\u00fck ve \u00e7ok \u00f6zellikli projelerde ciddi sorunlara neden olabilir.<\/p>\n
Bu t\u00fcr yap\u0131larda kar\u015f\u0131la\u015f\u0131lan en b\u00fcy\u00fck problemlerden biri, belirli bir \u00f6zelli\u011fi geli\u015ftirmek veya hata ay\u0131klamak istedi\u011finizde, projenin farkl\u0131 katmanlar\u0131nda da\u011f\u0131lm\u0131\u015f dosyalar\u0131 bulmak zorunda kalman\u0131zd\u0131r. \u00d6rne\u011fin, “Kullan\u0131c\u0131 Profili” \u00f6zelli\u011fini ele alal\u0131m. Bu \u00f6zelli\u011fe ait kod par\u00e7ac\u0131klar\u0131, Ek olarak, bu da\u011f\u0131n\u0131k yap\u0131, yeni ekip \u00fcyelerinin projeye adaptasyon s\u00fcrecini uzat\u0131r. Projenin genel mimarisini ve bir \u00f6zelli\u011fin farkl\u0131 par\u00e7alar\u0131n\u0131n nerede oldu\u011funu anlamak i\u00e7in daha fazla efor sarf etmeleri gerekir. Kodun nerede oldu\u011funu bulmak i\u00e7in harcanan zaman, asl\u0131nda kod yazmaya ayr\u0131lmas\u0131 gereken de\u011ferli dakikalard\u0131r. Proje b\u00fcy\u00fcd\u00fck\u00e7e ve yeni \u00f6zellikler eklendik\u00e7e, bu sorun daha da derinle\u015fir. Bir \u00f6zelli\u011fi silmek veya refakt\u00f6r etmek istedi\u011finizde, ilgili t\u00fcm dosyalar\u0131 bulup kald\u0131rmak veya d\u00fczenlemek adeta bir dedektiflik oyununa d\u00f6n\u00fc\u015febilir ve istenmeyen yan etkilerin ortaya \u00e7\u0131kma riski artar. Bu durum, \u00f6zellikle mikro servis mimarileri veya mod\u00fcler front-end uygulamalar\u0131nda esneklik ve h\u0131zl\u0131 geli\u015ftirme ihtiyac\u0131n\u0131 kar\u015f\u0131lamakta yetersiz kal\u0131r. \u0130\u015fte tam da bu noktada, \u00f6zellik tabanl\u0131 klas\u00f6r yap\u0131s\u0131n\u0131n sundu\u011fu avantajlar devreye girer ve mevcut yap\u0131lar\u0131n neden yetersiz kald\u0131\u011f\u0131n\u0131 daha net bir \u015fekilde ortaya koyar.<\/p>\n \u00d6zellik tabanl\u0131 klas\u00f6r yap\u0131s\u0131 (Feature-Based Folder Structure), ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, projenizi temel i\u015flevsel \u00f6zellikler veya mod\u00fcller etraf\u0131nda organize etme prensibine dayan\u0131r. Bu yakla\u015f\u0131mda, belirli bir \u00f6zelli\u011fe ait t\u00fcm kod par\u00e7ac\u0131klar\u0131 \u2013 ister bile\u015fenler, ister servisler, ister stil dosyalar\u0131, isterse testler olsun \u2013 tek bir ana klas\u00f6r alt\u0131nda toplan\u0131r. Ama\u00e7, bir geli\u015ftiricinin belirli bir \u00f6zellik \u00fczerinde \u00e7al\u0131\u015f\u0131rken, ihtiya\u00e7 duydu\u011fu her \u015feyi tek bir yerden bulabilmesini sa\u011flamakt\u0131r. Bu sayede, kodun mant\u0131ksal ba\u011f\u0131ms\u0131zl\u0131\u011f\u0131 artar ve proje genelindeki karma\u015f\u0131kl\u0131k azal\u0131r.<\/p>\n Temel olarak, her ana \u00f6zellik kendi ad\u0131yla an\u0131lan bir klas\u00f6re sahip olur. \u00d6rne\u011fin, bir e-ticaret uygulamas\u0131nda “\u00dcr\u00fcnler”, “Sepet”, “Kullan\u0131c\u0131 Profili”, “\u00d6deme” gibi \u00f6zellikler olabilir. Her bir \u00f6zellik, kendi i\u00e7inde \u00f6zel bir mini-uygulama gibi d\u00fc\u015f\u00fcn\u00fcl\u00fcr ve bu \u00f6zelli\u011fe ait her \u015fey kendi klas\u00f6r\u00fcnde bulunur. Bu klas\u00f6r\u00fcn i\u00e7 yap\u0131s\u0131 ise genellikle yine t\u00fcr tabanl\u0131 olabilir, ancak bu sefer sadece o \u00f6zelli\u011fin kapsam\u0131yla s\u0131n\u0131rl\u0131d\u0131r. Yani, “\u00dcr\u00fcnler” klas\u00f6r\u00fcn\u00fcn i\u00e7inde Bu yakla\u015f\u0131m\u0131n temel prensipleri \u015funlard\u0131r:<\/p>\n Bu prensipler \u0131\u015f\u0131\u011f\u0131nda, \u00f6zellik tabanl\u0131 bir klas\u00f6r yap\u0131s\u0131, geleneksel yakla\u015f\u0131mlar\u0131n aksine, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r, hata oranlar\u0131n\u0131 azalt\u0131r ve uzun vadede projenin s\u00fcrd\u00fcr\u00fclebilirli\u011fini ve bak\u0131m\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. Ayn\u0131 zamanda, kodun yeniden kullan\u0131labilirli\u011fini art\u0131rarak benzer fonksiyonelliklerin farkl\u0131 yerlerde tekrar tekrar yaz\u0131lmas\u0131n\u0131n \u00f6n\u00fcne ge\u00e7er.<\/p>\n Uzman \u0130pucu: \u00d6zellik tabanl\u0131 bir yap\u0131da, ortak kullan\u0131lan (shared) bile\u015fenler veya yard\u0131mc\u0131 fonksiyonlar i\u00e7in ayr\u0131 bir \u00d6zellik tabanl\u0131 klas\u00f6r yap\u0131s\u0131na ge\u00e7i\u015f yapmak, sadece dosya d\u00fczenlemenin \u00f6tesinde, bir geli\u015ftirme ekibinin i\u015f ak\u0131\u015f\u0131n\u0131 ve projenin genel sa\u011fl\u0131\u011f\u0131n\u0131 d\u00f6n\u00fc\u015ft\u00fcrebilecek bir dizi \u00f6nemli avantaj sunar. Bu avantajlar, projenin farkl\u0131 a\u015famalar\u0131nda ve farkl\u0131 ekip \u00fcyeleri i\u00e7in kendini g\u00f6sterir.<\/p>\n T\u00fcm bu avantajlar bir araya geldi\u011finde, \u00f6zellik tabanl\u0131 klas\u00f6r yap\u0131s\u0131, \u00f6zellikle orta ve b\u00fcy\u00fck \u00f6l\u00e7ekli projeler i\u00e7in geli\u015ftirme s\u00fcrecini daha keyifli, verimli ve s\u00fcrd\u00fcr\u00fclebilir hale getiren g\u00fc\u00e7l\u00fc bir mimari se\u00e7im olarak \u00f6ne \u00e7\u0131kar. Uzun vadede projenizin “teknik borcunu” azaltarak, gelecekteki geli\u015ftirmeler i\u00e7in sa\u011flam bir zemin haz\u0131rlar.<\/p>\n \u00d6zellik tabanl\u0131 klas\u00f6r yap\u0131s\u0131na ge\u00e7i\u015f yapmak, mevcut bir projede biraz \u00e7aba gerektirse de, uzun vadede sa\u011flayaca\u011f\u0131 faydalar bu \u00e7abaya de\u011ferdir. Yeni bir projeye ba\u015flarken bu yap\u0131y\u0131 benimsemek ise \u00e7ok daha kolayd\u0131r. \u0130\u015fte ad\u0131m ad\u0131m uygulama rehberi:<\/p>\n \u0130lk ad\u0131m, projenizin temel i\u015flevsel \u00f6zelliklerini (mod\u00fcllerini) tan\u0131mlamakt\u0131r. Mevcut uygulaman\u0131zda hangi ana b\u00f6l\u00fcmler veya kullan\u0131c\u0131 hikayeleri var? \u00d6rne\u011fin, bir e-ticaret uygulamas\u0131nda “Kullan\u0131c\u0131 Y\u00f6netimi”, “\u00dcr\u00fcn Katalo\u011fu”, “Sepet”, “\u00d6deme”, “Sipari\u015f Ge\u00e7mi\u015fi” gibi \u00f6zellikler olabilir. Bu \u00f6zellikler genellikle uygulaman\u0131z\u0131n ana navigasyon men\u00fcs\u00fc veya farkl\u0131 kullan\u0131c\u0131 ak\u0131\u015flar\u0131yla do\u011frudan ili\u015fkilidir.<\/p>\n Mevcut kod taban\u0131n\u0131z\u0131 g\u00f6zden ge\u00e7irerek, belirli bir \u00f6zelli\u011fe ait olan t\u00fcm dosyalar\u0131 (bile\u015fenler, servisler, state y\u00f6netimi, stiller, testler vb.) listeleyin. Bu, ge\u00e7i\u015f s\u00fcrecinde neleri ta\u015f\u0131man\u0131z gerekti\u011fini anlaman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n Projenizin k\u00f6k dizininde (root directory) bir \u00d6rnek bir yap\u0131 \u015f\u00f6yle g\u00f6r\u00fcnebilir:<\/p>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte Bu, en \u00e7ok \u00e7aba gerektiren ad\u0131md\u0131r. Belirledi\u011finiz \u00f6zelliklere ait dosyalar\u0131 tek tek ilgili \u00f6zellik klas\u00f6rlerine ta\u015f\u0131y\u0131n. Ta\u015f\u0131ma i\u015flemi s\u0131ras\u0131nda, dosya yollar\u0131n\u0131n (import\/export statements) do\u011fru \u015fekilde g\u00fcncellendi\u011finden emin olun. Modern IDE'ler (VS Code, WebStorm gibi) bu i\u015flemi otomatik olarak yapma yetene\u011fine sahiptir (refactoring -> move file), bu da s\u00fcreci olduk\u00e7a kolayla\u015ft\u0131r\u0131r.<\/p>\n <\/code><\/p>\n Bu a\u015famada \u00f6zellikle dikkatli olmal\u0131s\u0131n\u0131z. Kapsaml\u0131 bir test s\u00fcreci, bu ge\u00e7i\u015fin sorunsuz oldu\u011fundan emin olman\u0131z\u0131 sa\u011flayacakt\u0131r.<\/p>\n T\u00fcm dosyalar ta\u015f\u0131nd\u0131ktan ve yollar g\u00fcncellendikten sonra, uygulaman\u0131z\u0131 kapsaml\u0131 bir \u015fekilde test edin. Her \u00f6zelli\u011fin beklendi\u011fi gibi \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan, herhangi bir bozuk ba\u011flant\u0131 olmad\u0131\u011f\u0131ndan veya beklenmeyen hatalar\u0131n olu\u015fmad\u0131\u011f\u0131ndan emin olun. Bu s\u00fcre\u00e7te, birim testleri ve entegrasyon testleri \u00e7ok de\u011ferli olacakt\u0131r. E\u011fer projenizde testleriniz yoksa, bu ge\u00e7i\u015f s\u00fcreci ayn\u0131 zamanda testleri yazmaya ba\u015flamak i\u00e7in iyi bir f\u0131rsat olabilir.<\/p>\n \u00d6zellik tabanl\u0131 yap\u0131 statik de\u011fildir. Projeniz geli\u015ftik\u00e7e yeni \u00f6zellikler eklenecek, mevcutlar de\u011fi\u015fecektir. Bu nedenle, yeni \u00f6zellikler eklerken veya mevcutlar\u0131 refakt\u00f6r ederken bu yap\u0131ya uygun hareket etmeye devam edin. Ekip olarak bu yap\u0131y\u0131 benimseyin ve standartlar\u0131n\u0131z\u0131 belirleyin.<\/p>\n Bu ad\u0131mlar\u0131 izleyerek, projenizin yap\u0131s\u0131n\u0131 daha mod\u00fcler, s\u00fcrd\u00fcr\u00fclebilir ve y\u00f6netilebilir hale getirebilirsiniz. Unutmay\u0131n, bu bir defal\u0131k bir ge\u00e7i\u015f de\u011fil, s\u00fcrekli bir geli\u015ftirme felsefesidir.<\/p>\n \u00d6zellik tabanl\u0131 klas\u00f6r yap\u0131s\u0131n\u0131n teorik faydalar\u0131 kula\u011fa ho\u015f gelse de, ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l bir etki yaratt\u0131\u011f\u0131n\u0131 g\u00f6rmek bu yakla\u015f\u0131m\u0131n g\u00fcc\u00fcn\u00fc daha iyi anlamam\u0131z\u0131 sa\u011flar. \u0130\u015fte birka\u00e7 kurgusal vaka analizi:<\/p>\n Eski Yap\u0131:<\/strong> Bir perakende devi olan \"GlobalShop\", eski ve monolitik e-ticaret platformunda t\u00fcr tabanl\u0131 bir klas\u00f6r yap\u0131s\u0131 kullan\u0131yordu. Yeni \u00d6zellik Tabanl\u0131 Yap\u0131:<\/strong> GlobalShop, platformu React ve Redux ile yeniden yazmaya karar verdi\u011finde, \u00f6zellik tabanl\u0131 bir yakla\u015f\u0131m benimsedi. \u015eimdi, <\/code><\/p>\n Sonu\u00e7:<\/strong> Art\u0131k, \"Sepete \u00dcr\u00fcn Ekleme\" \u00f6zelli\u011fiyle ilgili bir hata \u00e7\u0131kt\u0131\u011f\u0131nda, geli\u015ftiriciler do\u011frudan Eski Yap\u0131:<\/strong> K\u00fc\u00e7\u00fck bir yaz\u0131l\u0131m firmas\u0131 olan \"BizSolutions\", uzun y\u0131llard\u0131r geli\u015ftirdi\u011fi kurumsal CRM uygulamas\u0131nda bile\u015fen bazl\u0131 kat\u0131 bir yap\u0131 kullan\u0131yordu. Uygulama, m\u00fc\u015fteri y\u00f6netimi, sat\u0131\u015f takibi, destek ve raporlama gibi bir\u00e7ok mod\u00fcle sahipti. Ancak, bu mod\u00fcller aras\u0131ndaki kod payla\u015f\u0131mlar\u0131 yanl\u0131\u015f y\u00f6netildi\u011finden ve dosyalar t\u00fcrlerine g\u00f6re da\u011f\u0131n\u0131k oldu\u011fundan, bir mod\u00fclde yap\u0131lan de\u011fi\u015fiklikler genellikle beklenmedik bir \u015fekilde di\u011fer mod\u00fclleri etkiliyordu. \"M\u00fc\u015fteri Bilgileri G\u00fcncelleme\" ekran\u0131nda yap\u0131lan basit bir de\u011fi\u015fiklik, \"Sat\u0131\u015f Takip\" raporunun bozulmas\u0131na neden olabiliyordu.<\/p>\n Yeni \u00d6zellik Tabanl\u0131 Yap\u0131:<\/strong> BizSolutions, projenin b\u00fcy\u00fckl\u00fc\u011f\u00fc ve karma\u015f\u0131kl\u0131\u011f\u0131 nedeniyle \u00f6zellik tabanl\u0131 bir yap\u0131ya ge\u00e7i\u015f yapma karar\u0131 ald\u0131. <\/code><\/p>\n Sonu\u00e7:<\/strong> Bu ge\u00e7i\u015f sayesinde, BizSolutions geli\u015ftiricileri art\u0131k bir mod\u00fcl \u00fczerinde \u00e7al\u0131\u015f\u0131rken di\u011fer mod\u00fcllerin kodlar\u0131na dokunma ihtiyac\u0131n\u0131 minimuma indirdi. \u00d6zellikle Bu vaka analizleri, \u00f6zellik tabanl\u0131 klas\u00f6r yap\u0131s\u0131n\u0131n sadece d\u00fczenli bir dosya yap\u0131s\u0131 sunmakla kalmay\u0131p, ayn\u0131 zamanda ekip verimlili\u011fini, kod kalitesini ve projenin uzun vadeli s\u00fcrd\u00fcr\u00fclebilirli\u011fini do\u011frudan etkileyen pratik faydalar sa\u011flad\u0131\u011f\u0131n\u0131 a\u00e7\u0131k\u00e7a g\u00f6stermektedir.<\/p>\n \u00d6zellik tabanl\u0131 bir klas\u00f6r yap\u0131s\u0131n\u0131 benimsemek harika bir ba\u015flang\u0131\u00e7t\u0131r, ancak bu yap\u0131y\u0131 uzun vadede verimli k\u0131lmak ve projenizin b\u00fcy\u00fcmesiyle birlikte kar\u015f\u0131la\u015fabilece\u011finiz zorluklar\u0131n \u00fcstesinden gelmek i\u00e7in baz\u0131 ileri d\u00fczey ipu\u00e7lar\u0131 ve en iyi uygulamalar mevcuttur. Bu ipu\u00e7lar\u0131, hem \u00f6l\u00e7eklenebilirli\u011fi art\u0131racak hem de projenizin bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131racakt\u0131r.<\/p>\n B\u00fcy\u00fck projeler ve mikro \u00f6n y\u00fcz (micro-frontend) mimarileri i\u00e7in monorepo (tek bir depoda birden fazla projenin\/paketin bulundu\u011fu yap\u0131) yakla\u015f\u0131m\u0131 giderek daha pop\u00fcler hale gelmektedir. \u00d6zellik tabanl\u0131 klas\u00f6r yap\u0131s\u0131, monorepo i\u00e7inde her bir \u00f6zelli\u011fi ayr\u0131 bir paket olarak tan\u0131mlayarak m\u00fckemmel bir uyum sa\u011flar. \u00d6rne\u011fin, bir monorepo i\u00e7inde Uzman \u0130pucu: Monorepo'da her bir \u00f6zelli\u011fi ayr\u0131 bir npm paketi olarak tan\u0131mlamak, \u00f6zelliklerin ba\u011f\u0131ms\u0131z olarak s\u00fcr\u00fcmlenmesine ve daha kolay entegre edilmesine olanak tan\u0131r. Bu, \u00f6zellikle b\u00fcy\u00fck ekiplerde kod izolasyonunu ve yeniden kullan\u0131labilirli\u011fi art\u0131r\u0131r.<\/p>\n<\/div>\n Her \u00f6zelli\u011fin kendi i\u00e7inde ba\u011f\u0131ms\u0131z olmas\u0131 hedeflense de, projenin genelinde kullan\u0131lan ortak bile\u015fenler, yard\u0131mc\u0131 fonksiyonlar ve stil kurallar\u0131 her zaman olacakt\u0131r. Bu t\u00fcr elementler i\u00e7in \u00d6rne\u011fin, bir \u00d6zellik tabanl\u0131 yap\u0131, modern web uygulamalar\u0131nda performans optimizasyonu i\u00e7in kritik bir teknik olan code splitting (kod b\u00f6lme) ve lazy loading (tembel y\u00fckleme) ile m\u00fckemmel bir \u015fekilde birle\u015fir. Her \u00f6zellik kendi klas\u00f6r\u00fcnde izole edildi\u011finden, her bir \u00f6zelli\u011fi ayr\u0131 bir JavaScript paketi olarak ay\u0131rmak ve yaln\u0131zca kullan\u0131c\u0131 o \u00f6zelli\u011fe ihtiya\u00e7 duydu\u011funda y\u00fcklemek kolayla\u015f\u0131r. Bu, uygulaman\u0131z\u0131n ilk y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\n <\/code><\/p>\n Bu yakla\u015f\u0131m, kullan\u0131c\u0131 deneyimini iyile\u015ftirirken bant geni\u015fli\u011fi kullan\u0131m\u0131n\u0131 da optimize eder.<\/p>\n Stillerin \u00f6zellik tabanl\u0131 yap\u0131ya entegrasyonu da \u00f6nemlidir. CSS Mod\u00fclleri, Styled Components veya Tailwind CSS gibi ara\u00e7lar, stillerin belirli \u00f6zelliklerle veya bile\u015fenlerle kaps\u00fcllenmesini (scoping) sa\u011flar. Her \u00f6zelli\u011fin kendi <\/code><\/p>\n Ekip genelinde tutarl\u0131l\u0131\u011f\u0131 sa\u011flamak i\u00e7in Prettier ve ESLint gibi ara\u00e7lar\u0131 kullanarak otomatik kod formatlama ve linting kurallar\u0131 belirleyin. Bu ara\u00e7lar, geli\u015ftiricilerin kodlar\u0131n\u0131 belirli bir standarda g\u00f6re yazmalar\u0131n\u0131 te\u015fvik eder ve yap\u0131sal tutarl\u0131l\u0131\u011f\u0131 korur. \u00d6zellikle \u00f6zellik tabanl\u0131 yap\u0131da, her geli\u015ftiricinin kendi \u00f6zelli\u011finde benzer kodlama stillerini takip etmesi \u00f6nemlidir.<\/p>\n Bu ileri d\u00fczey ipu\u00e7lar\u0131, \u00f6zellik tabanl\u0131 klas\u00f6r yap\u0131s\u0131n\u0131n potansiyelini tam olarak ortaya \u00e7\u0131karman\u0131za ve projenizin sadece bug\u00fcn de\u011fil, gelecekte de sa\u011fl\u0131kl\u0131 ve y\u00f6netilebilir kalmas\u0131n\u0131 sa\u011flaman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n Modern web geli\u015ftirme, mobil uyumluluk ve duyarl\u0131 tasar\u0131m\u0131 temel bir gereklilik olarak kabul eder. Bir projenin klas\u00f6r yap\u0131s\u0131, do\u011frudan olmasa da dolayl\u0131 yoldan bu alanlardaki geli\u015ftirme s\u00fcre\u00e7lerini etkileyebilir ve kolayla\u015ft\u0131rabilir. \u00d6zellik tabanl\u0131 bir yap\u0131, duyarl\u0131 tasar\u0131m yakla\u015f\u0131mlar\u0131n\u0131 entegre etmek i\u00e7in olduk\u00e7a elveri\u015fli bir zemin sunar.<\/p>\n Baz\u0131 durumlarda, bir \u00f6zelli\u011fin mobil ve masa\u00fcst\u00fc versiyonlar\u0131 aras\u0131nda o kadar b\u00fcy\u00fck farklar olabilir ki, ayn\u0131 kod taban\u0131n\u0131 kullanmak yerine ayr\u0131 dosyalara sahip olmak daha mant\u0131kl\u0131 olabilir. \u00d6zellik tabanl\u0131 yap\u0131, bu senaryo i\u00e7in esneklik sa\u011flar. \u00d6rne\u011fin, <\/code><\/p>\n Bu t\u00fcr bir ayr\u0131m, ancak ger\u00e7ekten \u00e7ok farkl\u0131 UI\/UX desenleri ve mant\u0131k gerektiren durumlarda anlaml\u0131d\u0131r. \u00c7o\u011fu durumda, daha esnek CSS ve bile\u015fen prop'lar\u0131 yeterli olacakt\u0131r.<\/p>\n \u00d6zellik tabanl\u0131 yap\u0131 i\u00e7erisinde, her \u00f6zelli\u011fin veya bile\u015fenin kendi stil dosyas\u0131 bulunur. Bu, duyarl\u0131 tasar\u0131m i\u00e7in gerekli olan medya sorgular\u0131n\u0131 (media queries) ve di\u011fer cihaz \u00f6zel stillerini ilgili bile\u015fenin veya \u00f6zelli\u011fin stil dosyas\u0131na do\u011frudan eklemeyi kolayla\u015ft\u0131r\u0131r. Stillerin, ilgili kodla ayn\u0131 klas\u00f6rde olmas\u0131, hem okunabilirli\u011fi art\u0131r\u0131r hem de de\u011fi\u015fiklik yapmay\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n <\/code><\/p>\n Bu \u00f6rnekte, Mobil uyumlulu\u011fun temelini olu\u015fturan Taray\u0131c\u0131lara sayfan\u0131n geni\u015fli\u011finin cihaz\u0131n ekran geni\u015fli\u011fine e\u015fit olmas\u0131n\u0131 ve ba\u015flang\u0131\u00e7 yak\u0131nla\u015ft\u0131rma seviyesinin 1.0 olmas\u0131n\u0131 s\u00f6yleyen bu meta etiketi, t\u00fcm mobil uyumlu web sitelerinin olmazsa olmaz\u0131d\u0131r:<\/p>\n <\/code><\/p>\n Bu etiket, mobil cihazlarda sayfan\u0131n do\u011fru \u00f6l\u00e7eklenmesini sa\u011flar ve duyarl\u0131 CSS kurallar\u0131n\u0131z\u0131n d\u00fczg\u00fcn \u00e7al\u0131\u015fmas\u0131n\u0131n temelini olu\u015fturur. Genellikle HTML belgesinin Sonu\u00e7 olarak, \u00f6zellik tabanl\u0131 klas\u00f6r yap\u0131s\u0131, duyarl\u0131 tasar\u0131m ve mobil uyumluluk prensiplerini projenize entegre etmek i\u00e7in mant\u0131ksal bir \u00e7er\u00e7eve sunar. Her \u00f6zelli\u011fin kendi stil ve bile\u015fenlerini kaps\u00fcllemesi, cihazlar aras\u0131 farkl\u0131l\u0131klar\u0131 y\u00f6netmeyi kolayla\u015ft\u0131r\u0131r ve genel olarak daha s\u00fcrd\u00fcr\u00fclebilir bir duyarl\u0131 tasar\u0131m yakla\u015f\u0131m\u0131n\u0131 te\u015fvik eder.<\/p>\n Bu makalede, \u00f6zellik tabanl\u0131 klas\u00f6r yap\u0131s\u0131n\u0131n ne oldu\u011funu, geleneksel yakla\u015f\u0131mlara g\u00f6re neden daha \u00fcst\u00fcn oldu\u011funu ve projenize nas\u0131l uygulayabilece\u011finizi detayl\u0131ca inceledik. B\u00fcy\u00fck ve orta \u00f6l\u00e7ekli projelerde geli\u015ftirme h\u0131z\u0131n\u0131 art\u0131rmas\u0131, bak\u0131m kolayl\u0131\u011f\u0131 sa\u011flamas\u0131, kod okunabilirli\u011fini iyile\u015ftirmesi ve ekip i\u015fbirli\u011fini g\u00fc\u00e7lendirmesi gibi pek \u00e7ok avantaj\u0131yla, bu yakla\u015f\u0131m modern yaz\u0131l\u0131m geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015ftir.<\/p>\n Geleneksel, t\u00fcr tabanl\u0131 yap\u0131lar\u0131n zamanla bir \"ba\u011f\u0131ml\u0131l\u0131k labirentine\" d\u00f6n\u00fc\u015febildi\u011fi ger\u00e7e\u011fi kar\u015f\u0131s\u0131nda, \u00f6zellik tabanl\u0131 yap\u0131, kodunuzu i\u015flevsel mod\u00fcller halinde d\u00fczenleyerek bu karma\u015f\u0131kl\u0131\u011f\u0131 ortadan kald\u0131r\u0131r. Ger\u00e7ek d\u00fcnya senaryolar\u0131yla bu avantajlar\u0131 somutla\u015ft\u0131rd\u0131k ve projelerinizi daha \u00f6l\u00e7eklenebilir ve s\u00fcrd\u00fcr\u00fclebilir hale getirmek i\u00e7in ileri d\u00fczey ipu\u00e7lar\u0131 sunduk. Unutmay\u0131n, bu bir defal\u0131k bir ge\u00e7i\u015f de\u011fil, s\u00fcrekli bir geli\u015fim ve ekip k\u00fclt\u00fcr\u00fc meselesidir. Projelerinizi bu felsefe etraf\u0131nda d\u00fczenlemek, uzun vadede size ve ekibinize b\u00fcy\u00fck faydalar sa\u011flayacakt\u0131r.<\/p>\n Hay\u0131r, asl\u0131nda tam tersi. \"Her \u015fey\" derken, o \u00f6zelli\u011fe ait olan her \u015feyi kastediyoruz. Bu, \"Sepet\" \u00f6zelli\u011fine ait bile\u015fenler, servisler, stiller ve testlerin Evet, k\u00fc\u00e7\u00fck projeler i\u00e7in de uygulanabilir ancak faydalar\u0131 b\u00fcy\u00fck projelerdeki kadar belirgin olmayabilir. K\u00fc\u00e7\u00fck projelerde, geleneksel yap\u0131lar da ba\u015flang\u0131\u00e7ta i\u015f g\u00f6rebilir. Ancak, projenizin b\u00fcy\u00fcme potansiyeli varsa veya ileriye d\u00f6n\u00fck olarak iyi bir temel atmak istiyorsan\u0131z, en ba\u015ftan \u00f6zellik tabanl\u0131 bir yakla\u015f\u0131m benimsemek ak\u0131ll\u0131ca olacakt\u0131r. Gelecekteki refakt\u00f6r eforundan tasarruf etmenizi sa\u011flar.<\/p>\n<\/li>\n \u00d6zellik tabanl\u0131 klas\u00f6r yap\u0131s\u0131, framework'ten ba\u011f\u0131ms\u0131z bir mimari yakla\u015f\u0131md\u0131r. React, Angular, Vue.js gibi pop\u00fcler \u00f6n y\u00fcz framework'lerinin yan\u0131 s\u0131ra, Node.js veya di\u011fer arka u\u00e7 dillerindeki uygulamalar i\u00e7in de ba\u015far\u0131yla uygulanabilir. \u00d6nemli olan, kodu i\u015flevsel \u00f6zelliklere g\u00f6re grupland\u0131rma prensibidir.<\/p>\n<\/li>\n Ge\u00e7i\u015f s\u00fcreci, projenin b\u00fcy\u00fckl\u00fc\u011f\u00fcne, karma\u015f\u0131kl\u0131\u011f\u0131na ve mevcut test kapsam\u0131na ba\u011fl\u0131 olarak de\u011fi\u015fir. K\u00fc\u00e7\u00fck bir proje birka\u00e7 g\u00fcn s\u00fcrerken, b\u00fcy\u00fck bir monolitik uygulama haftalar veya aylar s\u00fcrebilir. Modern IDE'lerin refakt\u00f6r ara\u00e7lar\u0131 bu s\u00fcreci kolayla\u015ft\u0131rsa da, \u00f6nemli bir de\u011fi\u015fikliktir ve dikkatli planlama, ad\u0131m ad\u0131m ilerleme ve kapsaml\u0131 test gerektirir. K\u00fc\u00e7\u00fck ad\u0131mlarla, \u00f6zellik baz\u0131nda ilerlemek en sa\u011fl\u0131kl\u0131 yakla\u015f\u0131md\u0131r.<\/p>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"Geli\u015ftirme projelerinizde dosya karma\u015fas\u0131 ve kod y\u00f6netimi zorluklar\u0131 m\u0131 ya\u015f\u0131yorsunuz? \u00d6zellik tabanl\u0131 klas\u00f6r yap\u0131s\u0131na ge\u00e7i\u015f yaparak kod okunabilirli\u011fini,…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-35210","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\ncomponents\/UserProfile.js<\/code>, services\/userService.js<\/code>, store\/userReducer.js<\/code>, pages\/ProfilePage.js<\/code> ve hatta styles\/profile.css<\/code> gibi farkl\u0131 klas\u00f6rlere yay\u0131lm\u0131\u015f olabilir. Bu durum, bir \u00f6zelli\u011fin ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca bir\u00e7ok farkl\u0131 klas\u00f6r\u00fc s\u00fcrekli olarak ziyaret etmeyi gerektirir. Bu da hem zaman kayb\u0131na yol a\u00e7ar hem de kodun b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc takip etmeyi zorla\u015ft\u0131r\u0131r.<\/p>\n\u00d6zellik Tabanl\u0131 Klas\u00f6r Yap\u0131s\u0131 Nedir ve Temel Prensipleri Nelerdir?<\/h2>\n
components<\/code>, services<\/code>, pages<\/code>, `styles<\/code> gibi alt klas\u00f6rler bulunabilir, ancak buradaki components<\/code> sadece “\u00dcr\u00fcnler” \u00f6zelli\u011fine ait bile\u015fenleri bar\u0131nd\u0131r\u0131r.<\/p>\n\n
shared<\/code> veya common<\/code> klas\u00f6r\u00fc olu\u015fturmay\u0131 unutmay\u0131n. Bu, hem DRY (Don’t Repeat Yourself) prensibine uyman\u0131z\u0131 sa\u011flar hem de \u00f6zellikler aras\u0131 ba\u011f\u0131ml\u0131l\u0131klar\u0131 minimize eder.<\/p>\n<\/div>\nNeden \u00d6zellik Tabanl\u0131 Yakla\u015f\u0131m? Avantajlar\u0131 Nelerdir?<\/h2>\n
\n
shared<\/code> veya common<\/code> klas\u00f6r\u00fc olu\u015fturarak, bu elementlerin farkl\u0131 \u00f6zellikler aras\u0131nda kolayca yeniden kullan\u0131lmas\u0131n\u0131 te\u015fvik edersiniz. Bu, kod tekrar\u0131n\u0131 azalt\u0131r ve projenin genel tutarl\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.<\/li>\n<\/ol>\n\u00d6zellik Tabanl\u0131 Yap\u0131ya Nas\u0131l Ge\u00e7ilir? Ad\u0131m Ad\u0131m Uygulama Rehberi<\/h2>\n
1. Mevcut Projenizi Analiz Edin ve \u00d6zellikleri Belirleyin<\/h3>\n
2. Yeni Klas\u00f6r Yap\u0131s\u0131n\u0131 Olu\u015fturun<\/h3>\n
src<\/code> veya app<\/code> klas\u00f6r\u00fc alt\u0131nda ana \u00f6zellik klas\u00f6rlerinizi olu\u015fturmaya ba\u015flay\u0131n. Her bir \u00f6zellik i\u00e7in ayr\u0131 bir klas\u00f6r a\u00e7\u0131n. Ortak kullan\u0131lan bile\u015fenler, yard\u0131mc\u0131 fonksiyonlar veya konfig\u00fcrasyon dosyalar\u0131 i\u00e7in shared<\/code>, common<\/code> veya core<\/code> gibi bir klas\u00f6r olu\u015fturmay\u0131 unutmay\u0131n. Bu klas\u00f6r, \u00f6zellikler aras\u0131 ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 azaltmak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n\nproje-k\u00f6k-dizini\/\n\u251c\u2500\u2500 src\/\n\u2502 \u251c\u2500\u2500 features\/\n\u2502 \u2502 \u251c\u2500\u2500 Authentication\/\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 components\/\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 LoginForm.js\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 hooks\/\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 useAuth.js\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 services\/\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 authService.js\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 pages\/\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 LoginPage.js\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 Authentication.module.css\n\u2502 \u2502 \u251c\u2500\u2500 Products\/\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 components\/\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 ProductCard.js\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 services\/\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 productService.js\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 pages\/\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 ProductListPage.js\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 index.js (feature entry point)\n\u2502 \u2502 \u251c\u2500\u2500 ShoppingCart\/\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 ...\n\u2502 \u2502 \u2514\u2500\u2500 UserProfile\/\n\u2502 \u2502 \u2514\u2500\u2500 ...\n\u2502 \u251c\u2500\u2500 shared\/\n\u2502 \u2502 \u251c\u2500\u2500 components\/\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 Button\/\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 Button.js\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 Button.module.css\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 Loader.js\n\u2502 \u2502 \u251c\u2500\u2500 utils\/\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 helpers.js\n\u2502 \u2502 \u2514\u2500\u2500 hooks\/\n\u2502 \u2502 \u2514\u2500\u2500 useDebounce.js\n\u2502 \u251c\u2500\u2500 App.js\n\u2502 \u251c\u2500\u2500 index.js\n\u2502 \u2514\u2500\u2500 styles\/\n\u2502 \u2514\u2500\u2500 global.css\n\u2514\u2500\u2500 public\/\n \u2514\u2500\u2500 index.html\n<\/pre>\nfeatures<\/code> klas\u00f6r\u00fc alt\u0131nda her bir ana \u00f6zellik kendi klas\u00f6r\u00fcne sahip. shared<\/code> klas\u00f6r\u00fc ise birden fazla \u00f6zellik taraf\u0131ndan kullan\u0131lan genel \u00f6\u011feleri i\u00e7eriyor. Button<\/code> gibi bir bile\u015fen, shared<\/code> i\u00e7inde kendi alt klas\u00f6r\u00fcne sahip olabilir, \u00e7\u00fcnk\u00fc kendi stil ve mant\u0131\u011f\u0131yla birlikte bir mod\u00fcl gibi davran\u0131r.<\/p>\n3. Dosyalar\u0131 Yeni Yap\u0131ya Ta\u015f\u0131y\u0131n ve Yollar\u0131 G\u00fcncelleyin<\/h3>\n
\n\/\/ \u00d6nceki durum (\u00f6rne\u011fin type-based yap\u0131)\n\/\/ src\/components\/UserProfile.js\n\/\/ import { getUserById } from '..\/services\/userService';\n\n\/\/ Yeni durum (feature-based yap\u0131)\n\/\/ src\/features\/UserProfile\/components\/UserProfile.js\n\/\/ import { getUserById } from '..\/services\/userProfileService'; \/\/ Path g\u00fcncellendi\n\n\/\/ Veya \u00f6zellik i\u00e7inden ortak bir servis \u00e7a\u011fr\u0131s\u0131:\n\/\/ src\/features\/Products\/services\/productService.js\n\/\/ import { http } from '..\/..\/shared\/utils\/http'; \/\/ Ortak utility'ye path\n<\/pre>\n4. Entegrasyon ve Test<\/h3>\n
5. S\u00fcrekli \u0130yile\u015ftirme<\/h3>\n
Ger\u00e7ek D\u00fcnya Senaryolar\u0131nda \u00d6zellik Tabanl\u0131 Yakla\u015f\u0131m: Vaka Analizleri<\/h2>\n
Vaka Analizi 1: B\u00fcy\u00fck Bir E-ticaret Platformunun Yeniden Yap\u0131land\u0131r\u0131lmas\u0131<\/h3>\n
components<\/code>, pages<\/code>, services<\/code>, store<\/code> gibi klas\u00f6rler her \u015feyi kar\u0131\u015ft\u0131r\u0131yordu. \u00d6rne\u011fin, ProductCard<\/code> bile\u015feni components<\/code> klas\u00f6r\u00fcndeyken, \u00fcr\u00fcn detaylar\u0131n\u0131 \u00e7eken productService<\/code> services<\/code> klas\u00f6r\u00fcndeydi. Sepete ekleme butonu i\u00e7in gerekli olan addToCart<\/code> aksiyonu ise store\/cartReducer.js<\/code> i\u00e7inde saklan\u0131yordu. Geli\u015ftiriciler, \"Sepete \u00dcr\u00fcn Ekleme\" \u00f6zelli\u011finde bir hata \u00e7\u0131kt\u0131\u011f\u0131nda, bu hata i\u00e7in 5 farkl\u0131 klas\u00f6rde 10'dan fazla dosyay\u0131 taramak zorunda kal\u0131yordu.<\/p>\nsrc\/features<\/code> alt\u0131nda Products<\/code>, ShoppingCart<\/code>, Checkout<\/code>, UserAccount<\/code>, Search<\/code> gibi ana klas\u00f6rler bulunuyor.<\/p>\n\nsrc\/features\/\n\u251c\u2500\u2500 Products\/\n\u2502 \u251c\u2500\u2500 components\/\n\u2502 \u2502 \u251c\u2500\u2500 ProductCard.js\n\u2502 \u2502 \u2514\u2500\u2500 ProductDetailModal.js\n\u2502 \u251c\u2500\u2500 services\/\n\u2502 \u2502 \u2514\u2500\u2500 productService.js\n\u2502 \u251c\u2500\u2500 store\/\n\u2502 \u2502 \u2514\u2500\u2500 productSlice.js\n\u2502 \u2514\u2500\u2500 pages\/\n\u2502 \u2514\u2500\u2500 ProductListingPage.js\n\u251c\u2500\u2500 ShoppingCart\/\n\u2502 \u251c\u2500\u2500 components\/\n\u2502 \u2502 \u251c\u2500\u2500 CartItem.js\n\u2502 \u2502 \u2514\u2500\u2500 CartSummary.js\n\u2502 \u251c\u2500\u2500 services\/\n\u2502 \u2502 \u2514\u2500\u2500 cartService.js\n\u2502 \u251c\u2500\u2500 store\/\n\u2502 \u2502 \u2514\u2500\u2500 cartSlice.js\n\u2502 \u2514\u2500\u2500 pages\/\n\u2502 \u2514\u2500\u2500 CartPage.js\n\u2514\u2500\u2500 ...\n<\/pre>\nsrc\/features\/ShoppingCart<\/code> klas\u00f6r\u00fcne gidiyor ve ilgili t\u00fcm kodlar\u0131 (bile\u015fenler, servisler, state y\u00f6netimi) tek bir yerden bulabiliyor. Bu durum, hata ay\u0131klama s\u00fcresini %60 oran\u0131nda azaltt\u0131 ve yeni \u00f6zelliklerin geli\u015ftirme s\u00fcresi %30 h\u0131zland\u0131. Ekip, yeni \u00f6zellikler \u00fczerinde paralel \u00e7al\u0131\u015f\u0131rken \u00e7ak\u0131\u015fmalar\u0131 (merge conflicts) \u00f6nemli \u00f6l\u00e7\u00fcde azaltt\u0131\u011f\u0131n\u0131 ve yeni ekip \u00fcyelerinin projeye adaptasyonunun \u00e7ok daha kolay oldu\u011funu belirtti.<\/p>\nVaka Analizi 2: Kurumsal Bir CRM Uygulamas\u0131n\u0131n Mod\u00fcler Hale Getirilmesi<\/h3>\n
src\/modules<\/code> alt\u0131nda CustomerManagement<\/code>, SalesTracking<\/code>, Support<\/code>, Reporting<\/code> gibi ana mod\u00fcl klas\u00f6rleri olu\u015fturuldu. Ortak kullan\u0131lan UI bile\u015fenleri ve API \u00e7a\u011fr\u0131lar\u0131 i\u00e7in src\/shared<\/code> ad\u0131nda bir klas\u00f6r ayr\u0131ld\u0131.<\/p>\n\nsrc\/modules\/\n\u251c\u2500\u2500 CustomerManagement\/\n\u2502 \u251c\u2500\u2500 components\/\n\u2502 \u2502 \u251c\u2500\u2500 CustomerForm.js\n\u2502 \u2502 \u2514\u2500\u2500 CustomerList.js\n\u2502 \u251c\u2500\u2500 api\/\n\u2502 \u2502 \u2514\u2500\u2500 customerApi.js\n\u2502 \u2514\u2500\u2500 views\/\n\u2502 \u2514\u2500\u2500 CustomerDetailView.js\n\u251c\u2500\u2500 SalesTracking\/\n\u2502 \u251c\u2500\u2500 components\/\n\u2502 \u2502 \u251c\u2500\u2500 OpportunityCard.js\n\u2502 \u2502 \u2514\u2500\u2500 SalesPipelineChart.js\n\u2502 \u251c\u2500\u2500 api\/\n\u2502 \u2502 \u2514\u2500\u2500 salesApi.js\n\u2502 \u2514\u2500\u2500 views\/\n\u2502 \u2514\u2500\u2500 SalesDashboardView.js\n\u2514\u2500\u2500 ...\nsrc\/shared\/\n\u251c\u2500\u2500 ui\/\n\u2502 \u251c\u2500\u2500 Table.js\n\u2502 \u2514\u2500\u2500 Modal.js\n\u2514\u2500\u2500 api\/\n \u2514\u2500\u2500 baseApi.js\n<\/pre>\nshared<\/code> klas\u00f6r\u00fcndeki ortak bile\u015fenlerin ve API katmanlar\u0131n\u0131n iyi tan\u0131mlanmas\u0131, mod\u00fcller aras\u0131 temiz bir aray\u00fcz olu\u015fturdu. Bu durum, de\u011fi\u015fikliklerin etkisini izole etmeyi kolayla\u015ft\u0131rd\u0131 ve mod\u00fcller aras\u0131 ba\u011f\u0131ml\u0131l\u0131ktan kaynaklanan hatalar\u0131 %80 oran\u0131nda azaltt\u0131. Ayr\u0131ca, farkl\u0131 geli\u015ftirici ekipleri ayn\u0131 anda farkl\u0131 mod\u00fcller \u00fczerinde g\u00fcvenle \u00e7al\u0131\u015fabildi, bu da proje teslim s\u00fcrelerini k\u0131saltt\u0131.<\/p>\nDaha \u0130leriye Gitmek: \u00d6l\u00e7eklenebilirlik ve Bak\u0131m \u0130\u00e7in \u0130pu\u00e7lar\u0131<\/h2>\n
Monorepo Yakla\u015f\u0131m\u0131 ve \u00d6zellik Tabanl\u0131 Yap\u0131<\/h3>\n
packages\/auth<\/code>, packages\/products<\/code>, packages\/cart<\/code> gibi ayr\u0131 paketleriniz olabilir. Her bir paketin i\u00e7inde ise kendi \u00f6zellik tabanl\u0131 klas\u00f6r yap\u0131s\u0131 devam eder. Bu sayede, farkl\u0131 \u00f6zellikler tamamen ba\u011f\u0131ms\u0131z hale gelir, kendi ba\u011f\u0131ml\u0131l\u0131klar\u0131na sahip olabilir ve ayr\u0131 ayr\u0131 da\u011f\u0131t\u0131labilirler. Nx, Lerna gibi ara\u00e7lar monorepo y\u00f6netimini kolayla\u015ft\u0131r\u0131r.<\/p>\nOrtak (Shared) Bile\u015fenlerin Do\u011fru Y\u00f6netimi<\/h3>\n
shared<\/code>, common<\/code> veya core<\/code> gibi bir klas\u00f6r olu\u015fturmak \u00e7ok \u00f6nemlidir. Ancak, bu klas\u00f6r\u00fcn bir \"\u00e7\u00f6p kutusu\" haline gelmemesine dikkat etmelisiniz. Ortak bile\u015fenlerin tan\u0131mlar\u0131 net olmal\u0131, m\u00fcmk\u00fcn oldu\u011funca jenerik olmal\u0131 ve belirli bir \u00f6zelli\u011fe s\u0131k\u0131ca ba\u011flanmamal\u0131d\u0131r.<\/p>\nButton<\/code> bile\u015feni shared\/components\/Button<\/code> alt\u0131nda kendi stil ve mant\u0131\u011f\u0131yla birlikte bulunurken, sadece \"\u00dcr\u00fcnler\" \u00f6zelli\u011fi i\u00e7in kullan\u0131lan \u00f6zel bir \"Favorilere Ekle\" butonu features\/Products\/components\/AddToFavoritesButton.js<\/code> alt\u0131nda olmal\u0131d\u0131r. Ortak klas\u00f6rdeki her \u015feyin ger\u00e7ekten ortak ve yeniden kullan\u0131labilir oldu\u011fundan emin olun.<\/p>\nCode Splitting ve Lazy Loading ile Performans Optimizasyonu<\/h3>\n
\n\/\/ React \u00f6rne\u011fi\nimport React, { lazy, Suspense } from 'react';\n\nconst ProductsFeature = lazy(() => import('..\/features\/Products'));\nconst ShoppingCartFeature = lazy(() => import('..\/features\/ShoppingCart'));\n\nfunction App() {\n return (\n Stil Y\u00f6netimi ve CSS Mod\u00fclleri<\/h3>\n
*.module.css<\/code> veya *.scss<\/code> dosyas\u0131na sahip olmas\u0131, stil \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nler ve bak\u0131m kolayl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.<\/p>\n\n\/\/ src\/features\/Products\/components\/ProductCard.module.css\n.card {\n border: 1px solid #ccc;\n padding: 1rem;\n}\n\n\/\/ src\/features\/Products\/components\/ProductCard.js\nimport styles from '.\/ProductCard.module.css';\n\nfunction ProductCard() {\n return (\n Otomatik Kod Formatlama ve Linting<\/h3>\n
Mobil Uyumluluk ve Duyarl\u0131 Tasar\u0131mda Klas\u00f6r Yap\u0131s\u0131n\u0131n Rol\u00fc Nedir?<\/h2>\n
Cihaz Odakl\u0131 \u00d6zellik S\u00fcr\u00fcmleri (Opsiyonel)<\/h3>\n
features\/ProductDetail<\/code> klas\u00f6r\u00fc i\u00e7inde ProductDetail.desktop.js<\/code> ve ProductDetail.mobile.js<\/code> gibi dosyalar olu\u015fturulabilir. Ancak bu yakla\u015f\u0131m, kod tekrar\u0131n\u0131 art\u0131rabilece\u011fi i\u00e7in dikkatli kullan\u0131lmal\u0131d\u0131r ve genellikle CSS tabanl\u0131 duyarl\u0131 tasar\u0131mlar\u0131n yetersiz kald\u0131\u011f\u0131 u\u00e7 durumlarda tercih edilir.<\/p>\n\n\/\/ src\/features\/ProductDetail\/index.js\nimport React from 'react';\nimport useDeviceType from '..\/..\/shared\/hooks\/useDeviceType'; \/\/ \u00d6zel hook\n\nconst ProductDetailDesktop = lazy(() => import('.\/ProductDetail.desktop'));\nconst ProductDetailMobile = lazy(() => import('.\/ProductDetail.mobile'));\n\nfunction ProductDetail() {\n const deviceType = useDeviceType(); \/\/ 'mobile' veya 'desktop'\n\n if (deviceType === 'mobile') {\n return Duyarl\u0131 Stillerin Kaps\u00fcllenmesi<\/h3>\n
\n\/* src\/features\/UserProfile\/components\/UserCard.module.css *\/\n.userCard {\n display: flex;\n flex-direction: column;\n padding: 1rem;\n border: 1px solid #eee;\n}\n\n@media (min-width: 768px) {\n .userCard {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n }\n}\n\n@media (min-width: 1200px) {\n .userCard {\n padding: 2rem;\n }\n}\n<\/pre>\nUserCard<\/code> bile\u015feninin stili, hem varsay\u0131lan (mobil \u00f6ncelikli) hem de belirli ekran boyutlar\u0131 i\u00e7in (tablet ve masa\u00fcst\u00fc) nas\u0131l davranaca\u011f\u0131n\u0131 kendi stil dosyas\u0131nda kaps\u00fcll\u00fcyor. Bu sayede, UserCard<\/code>'\u0131n duyarl\u0131 davran\u0131\u015f\u0131, sadece kendi dosyas\u0131nda y\u00f6netilebilir, di\u011fer bile\u015fenlerin stilleriyle \u00e7ak\u0131\u015fmaz.<\/p>\nViewport Meta Etiketi<\/h3>\n
viewport<\/code> meta etiketini <\/code> etiketleri aras\u0131na eklemeniz kritik \u00f6nem ta\u015f\u0131r. Ancak, bu makale sadece <\/code> i\u00e7eri\u011fini istedi\u011fi i\u00e7in, bunu bir not olarak ve kod \u00f6rne\u011fini <\/code> i\u00e7eri\u011fi i\u00e7inde g\u00f6sterebilirim:<\/p>\n\n\n\n<\/pre>\nhead<\/code> b\u00f6l\u00fcm\u00fcnde yer al\u0131r, ancak konsept olarak burada bahsedilmesi \u00f6nemlidir.<\/p>\nSonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\n
features\/ShoppingCart<\/code> klas\u00f6r\u00fcnde olmas\u0131 demektir. Bu yap\u0131, ilgili kodu tek bir mant\u0131ksal birim i\u00e7inde tutarak ba\u011flam\u0131 korur ve dosya aramay\u0131 kolayla\u015ft\u0131r\u0131r. Genel olarak kullan\u0131lan (shared) \u00f6\u011feler i\u00e7in ayr\u0131 bir klas\u00f6r bulunur.<\/p>\n<\/li>\nshared<\/code> (ortak) klas\u00f6r\u00fc ne kadar b\u00fcy\u00fck olmal\u0131?<\/strong><\/p>\nshared<\/code> klas\u00f6r\u00fcn\u00fcn amac\u0131, birden fazla \u00f6zellik taraf\u0131ndan kullan\u0131lan ve \u00f6zelli\u011fe \u00f6zel olmayan elementleri bar\u0131nd\u0131rmakt\u0131r. Bu klas\u00f6r, sadece ger\u00e7ekten ortak olan bile\u015fenleri, yard\u0131mc\u0131 fonksiyonlar\u0131, API istemcilerini veya genel stil kurallar\u0131n\u0131 i\u00e7ermelidir. E\u011fer bir \u00f6\u011fe sadece tek bir \u00f6zellik taraf\u0131ndan kullan\u0131l\u0131yorsa, o \u00f6zelli\u011fin kendi klas\u00f6r\u00fcnde kalmal\u0131d\u0131r. shared<\/code> klas\u00f6r\u00fcn\u00fcn a\u015f\u0131r\u0131 b\u00fcy\u00fcmesi, \u00f6zellik tabanl\u0131 yap\u0131n\u0131n mant\u0131\u011f\u0131na ayk\u0131r\u0131 bir \"\u00e7\u00f6p kutusu\" haline geldi\u011finin bir i\u015faretidir.<\/p>\n<\/li>\n