Geliştirme Ortamı Kurulumu

Giriş — Neden Doğru Araçlar Önemli?

Bir ressamın en iyi tablolarını çizebilmesi için kaliteli fırçalara, tuvale ve iyi bir atölyeye ihtiyacı vardır. Teorik olarak parmakla kuma da çizebilirsiniz, ama ciddi bir eser ortaya koyamazsınız. Programlama da aynıdır — doğru araçlarla çalışmak, üretkenliğinizi katlayarak artırır, hataları erken yakalamanızı sağlar ve öğrenme sürecinizi hızlandırır.

Bu derste JavaScript geliştirme ortamınızı sıfırdan kuracağız. Üç temel aracımız var: yazdığınız kodu düzenlediğiniz editör (VS Code), kodun çalıştığını gördüğünüz tarayıcı DevTools ve JavaScript'i tarayıcı dışında çalıştırmanızı sağlayan Node.js. Bu üç araçla, JavaScript dünyasında ihtiyacınız olan her şeyi yapabilirsiniz.

Visual Studio Code (VS Code)

Neden VS Code?

Kod editörü seçimi kişisel bir tercihtir, ama VS Code bugün JavaScript geliştiricileri arasında açık ara en popüler editördür. Bunun nedenleri:

Ücretsiz ve açık kaynaklı — Microsoft tarafından geliştirilir, MIT lisanslıdır
Hafif ama güçlü — Notepad kadar hızlı açılır, bir IDE kadar özellik sunar
JavaScript/TypeScript desteği dahili — IntelliSense (akıllı kod tamamlama) kutudan çıktığı gibi çalışır
Devasa eklenti ekosistemi — 50.000'den fazla eklenti
Entegre terminal — Komut satırını editörün içinde kullanabilirsiniz
Git entegrasyonu — Versiyon kontrolü doğrudan editörde

Analoji: VS Code bir İsviçre çakısı gibidir — temel haliyle bile çok kullanışlıdır, ama ihtiyacınıza göre yeni araçlar (eklentiler) ekleyerek tam size özel bir çalışma ortamına dönüştürebilirsiniz.

VS Code Kurulumu

İndirin: [code.visualstudio.com](https://code.visualstudio.com) adresine gidin
İşletim sisteminize uygun sürümü (Windows / macOS / Linux) indirin
Kurulum sihirbazını takip edin
İlk açılışta dil ayarlarını yapın

Temel Arayüz Tanıtımı

VS Code'u ilk açtığınızda şu bölümleri göreceksiniz:

┌─────────────────────────────────────────────────┐
│  Menü Çubuğu (File, Edit, View, ...)            │
├──────┬──────────────────────────────────────────│
│      │                                           │
│  S   │        Editör Alanı                       │
│  i   │    (Kodunuzu burada yazarsınız)           │
│  d   │                                           │
│  e   │                                           │
│  b   │                                           │
│  a   │──────────────────────────────────────────│
│  r   │      Terminal / Output / Problems         │
│      │    (Komut satırı ve hata mesajları)        │
├──────┴──────────────────────────────────────────│
│  Status Bar (Satır numarası, dil, git branch)    │
└─────────────────────────────────────────────────┘

Sidebar (sol): Dosya gezgini, arama, Git, eklentiler, debug
Editör (ortada): Kodunuzu yazdığınız ana alan. Birden fazla dosyayı sekmelerle açabilirsiniz
Terminal (alt): Ctrl + ` (backtick) ile açılır. Node.js komutlarını buradan çalıştıracaksınız
Status Bar (en alt): Mevcut satır, sütun, dosya tipi ve Git branch bilgisi

Hayat Kurtaran Kısayollar

Kısayolları öğrenmek, uzun vadede inanılmaz zaman kazandırır. İlk gün hepsini ezberlemeyin — zamanla kas hafızanıza yerleşecek:

Kısayol (Windows/Linux)	macOS	İşlev
`Ctrl + Shift + P`	`Cmd + Shift + P`	Komut Paleti — her şey buradan aranabilir
`Ctrl + P`	`Cmd + P`	Dosya adına göre hızlı arama
`Ctrl +`	`Cmd +`	Entegre terminali aç/kapat
`Ctrl + S`	`Cmd + S`	Kaydet
`Ctrl + /`	`Cmd + /`	Satırı yorum satırına çevir
`Alt + ↑/↓`	`Option + ↑/↓`	Satırı yukarı/aşağı taşı
`Ctrl + D`	`Cmd + D`	Aynı kelimeyi çoklu seç
`Ctrl + Shift + K`	`Cmd + Shift + K`	Satırı sil
`Ctrl + B`	`Cmd + B`	Sidebar'ı aç/kapat

💡 İpucu: Komut Paleti (Ctrl + Shift + P) en güçlü araçtır. VS Code'da yapılabilecek her şeyi buradan arayabilirsiniz. Kısayolu unuttuğunuzda, Komut Paleti'ne yazın — size kısayolu da gösterecektir.

Önerilen Eklentiler

VS Code'u kurduktan sonra şu eklentileri yükleyin — JavaScript geliştirme deneyiminizi önemli ölçüde artıracaklar:

Zorunlu Eklentiler:

ESLint — Kod hatalarını ve kötü alışkanlıkları anında yakalayan bir linter
Prettier — Kodunuzu otomatik formatlayan araç. Kod stili tartışmalarına son verir
Live Server — HTML dosyalarınızı bir geliştirme sunucusunda açar, kaydettiğinizde otomatik yeniler

Çok Faydalı Eklentiler:

Error Lens — Hata mesajlarını satırın yanında gösterir (ayrı panele bakmanıza gerek kalmaz)
Path Intellisense — Dosya yollarını yazarken otomatik tamamlar
Auto Rename Tag — HTML'de açılış tag'ını değiştirince kapanış tag'ını da otomatik değiştirir
Material Icon Theme — Dosya simgelerini güzelleştirir, dosya tiplerini daha kolay ayırt edersiniz
GitLens — Her satırın kim tarafından, ne zaman değiştirildiğini gösterir

VS Code Ayarları — İlk Yapılandırma

Ctrl + Shift + P → "settings json" yazın → "Preferences: Open User Settings (JSON)" seçin. Şu ayarları ekleyin:

{
  "editor.fontSize": 16,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.minimap.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "files.autoSave": "onFocusChange",
  "terminal.integrated.fontSize": 14,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

Bu ayarların ne yaptığını açıklayalım:

formatOnSave: Dosyayı kaydettiğinizde Prettier otomatik formatlar — bir daha girintileme düşünmezsiniz
tabSize: 2: JavaScript dünyasında 2 boşluk standart girintileme pratiğidir
wordWrap: Uzun satırları ekrana sığdırır, yatay kaydırma yapmak zorunda kalmazsınız
bracketPairColorization: İç içe parantezleri farklı renklerde gösterir — hangi açan hangi kapanla eşleşiyor, bir bakışta görürsünüz

Tarayıcı DevTools (Geliştirici Araçları)

Tarayıcı DevTools, JavaScript geliştirmenin olmazsa olmaz aracıdır. Her modern tarayıcıda bulunur, ama biz Google Chrome DevTools'u kullanacağız çünkü en gelişmiş ve yaygın olanıdır.

DevTools'u Açma

Üç yol vardır:

Sağ tık → "İncele" (Inspect)
`F12` tuşu
`Ctrl + Shift + I` (Windows/Linux) veya `Cmd + Option + I` (macOS)

Console Sekmesi — JavaScript Oyun Alanınız

Console sekmesi, JavaScript'i anında test edebileceğiniz interaktif bir ortamdır. REPL (Read-Eval-Print Loop) olarak çalışır: yazdığınız her ifadeyi okur, çalıştırır ve sonucunu gösterir.

// Console'a girin ve her satırı sırayla yazın:

// Temel hesaplamalar
2 + 3                    // → 5
"merhaba".toUpperCase()  // → "MERHABA"

// Değişken tanımlama
let isim = "Dünya";
console.log(`Merhaba, ${isim}!`);  // → "Merhaba, Dünya!"

// Sayfa ile etkileşim
document.title           // → Sayfanın başlığını gösterir
document.title = "JavaScript Kursu";  // → Başlığı değiştirir!

Console'un Gizli Güçleri

console nesnesi sadece log'dan ibaret değildir:

// Farklı console metotları
console.log("Normal mesaj");           // Standart çıktı
console.warn("Dikkat! Bu bir uyarı");  // Sarı uyarı mesajı
console.error("Hata oluştu!");         // Kırmızı hata mesajı
console.info("Bilgi mesajı");          // Bilgi ikonu ile

// Tablo şeklinde veri gösterme
const kullanicilar = [
  { isim: "Ali", yas: 25 },
  { isim: "Ayşe", yas: 30 },
  { isim: "Mehmet", yas: 28 }
];
console.table(kullanicilar);  // Güzel bir tablo olarak gösterir!

// Performans ölçümü
console.time("döngü");
for (let i = 0; i < 1000000; i++) { /* bir şeyler yap */ }
console.timeEnd("döngü");  // → "döngü: 5.123ms"

// Gruplayarak organize etme
console.group("Kullanıcı Bilgileri");
console.log("İsim: Ali");
console.log("Yaş: 25");
console.groupEnd();

// Koşullu log — sadece koşul false ise yazar
console.assert(1 === 2, "Bu mesaj görünecek çünkü koşul false");

⚠️ Dikkat: console.log() production (canlı) kodda bırakılmamalıdır. Geliştirme sırasında debugging için kullanışlıdır, ama canlıya çıkmadan önce temizlenmeli veya bir loglama kütüphanesi kullanılmalıdır. ESLint'in no-console kuralı bu konuda yardımcı olur.

Elements Sekmesi

HTML ve CSS yapısını incelemenizi, canlı olarak değiştirmenizi sağlar. Bir elemente sağ tıklayıp "İncele" dediğinizde, o elementin HTML kodunu ve uygulanan CSS kurallarını görürsünüz. Değişiklikler anlık olarak sayfaya yansır (ama kalıcı değildir — sayfayı yenileyince sıfırlanır).

Network Sekmesi

Web sayfasının yüklediği tüm kaynakları (HTML, CSS, JavaScript, resimler, API çağrıları) görürsünüz. Bir API çağrısının ne gönderdiğini, ne aldığını, ne kadar sürdüğünü buradan takip edersiniz. İlerleyen bölümlerde Fetch API ile çalışırken çok kullanacaksınız.

Sources Sekmesi ve Debugging

JavaScript kodunuzda hata ayıklamak (debugging) için en güçlü araç bu sekmedir. Breakpoint koyarak kodun belirli bir satırda durmasını sağlayabilir, değişkenlerin o andaki değerlerini inceleyebilirsiniz.

// Bu kodu bir .js dosyasına yazın ve tarayıcıda çalıştırın
function hesapla(a, b) {
  let toplam = a + b;      // Bu satıra breakpoint koyun
  let sonuc = toplam * 2;  // Adım adım ilerleyerek değerleri izleyin
  return sonuc;
}

let deger = hesapla(5, 3);
console.log(deger);  // 16

Breakpoint koymak için Sources sekmesinde satır numarasına tıklayın — mavi bir nokta belirir. Sayfa yenilendiğinde kod o noktada durur ve siz adım adım ilerleyebilirsiniz.

Node.js Kurulumu

Node.js Nedir?

Bir önceki derste Node.js'i tanıştırmıştık: Google V8 motorunu tarayıcıdan bağımsız çalıştıran bir ortam. Node.js'i kurduğunuzda iki önemli araç birden gelir:

node — JavaScript dosyalarını komut satırından çalıştırmanızı sağlar
npm (Node Package Manager) — JavaScript paketlerini yönetmenizi sağlar

Kurulum Adımları

Yöntem 1: Resmi Siteden (Basit)

[nodejs.org](https://nodejs.org) adresine gidin
LTS (Long Term Support) sürümünü indirin — kararlı ve uzun süre desteklenen sürüm
Kurulum sihirbazını takip edin
Terminal açın ve doğrulayın:

node --version    # → v20.x.x (veya güncel LTS)
npm --version     # → 10.x.x

Yöntem 2: nvm ile (Önerilen)

nvm (Node Version Manager), birden fazla Node.js sürümünü yönetmenizi sağlar. Farklı projeler farklı Node.js sürümleri gerektirebilir — nvm bunu kolaylaştırır.

# Linux / macOS için nvm kurulumu
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Terminal'i yeniden açın, sonra:
nvm install --lts        # En güncel LTS sürümü kur
nvm use --lts            # O sürümü etkinleştir
node --version           # Kontrol et

Windows kullanıcıları için nvm-windows alternatifi mevcuttur: [github.com/coreybutler/nvm-windows](https://github.com/coreybutler/nvm-windows)

💡 İpucu: Her zaman LTS sürümünü tercih edin. "Current" sürüm en yeni özellikleri içerir ama kararlılık garantisi yoktur. LTS sürümü güvenli ve production-ready'dir.

Node.js REPL

Terminalde node yazıp Enter tuşuna basın — tarayıcı console'una benzer bir etkileşimli ortam açılır:

$ node
Welcome to Node.js v20.x.x
> 2 + 3
5
> let isim = "Node"
undefined
> `Merhaba, ${isim}!`
'Merhaba, Node!'
> .exit

.exit veya Ctrl + C (iki kez) ile çıkabilirsiniz. Bu REPL, hızlı denemeler için çok kullanışlıdır.

İlk JavaScript Dosyası

Artık araçlarımız hazır. Gelin ilk gerçek JavaScript dosyamızı oluşturalım.

Proje Klasörü Oluşturma

Organize çalışmak çok önemlidir. Her proje kendi klasöründe olmalıdır.

# Terminal'de (VS Code'un entegre terminalini kullanabilirsiniz)
mkdir js-kurs
cd js-kurs
mkdir 01-giris
cd 01-giris

VS Code'da File → Open Folder ile js-kurs klasörünü açın.

merhaba.js — İlk Dosyanız

01-giris klasörü içinde merhaba.js adında bir dosya oluşturun:

// merhaba.js — İlk JavaScript dosyamız!

// 1. Basit bir çıktı
console.log("Merhaba, JavaScript Dünyası!");

// 2. Değişkenler ve hesaplama
let kursAdi = "JavaScript & TypeScript: Sıfırdan İleri Seviyeye";
let toplamBolum = 12;
let dersPerBolum = 4;
let toplamDers = toplamBolum * dersPerBolum;

console.log(`Kurs: ${kursAdi}`);
console.log(`Toplam ${toplamDers} ders sizi bekliyor!`);

// 3. Basit bir fonksiyon
function ilerlemeHesapla(tamamlanan, toplam) {
  let yuzde = (tamamlanan / toplam) * 100;
  return yuzde.toFixed(1); // Ondalıklı kısmı 1 basamağa yuvarla
}

let tamamlanan = 1;
console.log(`İlerleme: %${ilerlemeHesapla(tamamlanan, toplamDers)}`);
console.log("Harika bir başlangıç! 🚀");

Çalıştırma — İki Yol

Yol 1: Node.js ile (Terminal)

# Terminal'de dosyanın olduğu klasördeyken:
node merhaba.js

Çıktı:

Merhaba, JavaScript Dünyası!
Kurs: JavaScript & TypeScript: Sıfırdan İleri Seviyeye
Toplam 48 ders sizi bekliyor!
İlerleme: %2.1
Harika bir başlangıç! 🚀

Yol 2: Tarayıcıda (HTML ile)

Aynı klasörde index.html oluşturun:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Kursu</title>
</head>
<body>
  <h1>JavaScript Kursu — İlk Sayfa</h1>
  <p>Konsolu açın (F12) ve mesajları görün!</p>

  <!-- JavaScript dosyasını en sona ekleyin -->
  <script src="merhaba.js"></script>
</body>
</html>

Bu dosyayı tarayıcıda açın (Live Server eklentisi ile otomatik olarak açılır) ve DevTools Console'u kontrol edin — aynı mesajları göreceksiniz.

⚠️ Dikkat: <script> etiketini </body> kapanış etiketinin hemen önüne koyun. Bunun nedeni şu: tarayıcı HTML'i yukarıdan aşağıya işler. <script> etiketini <head> bölümüne koyarsanız, JavaScript DOM elementlerine erişmeye çalıştığında henüz oluşturulmamış olabilirler. Bu sorunu Bölüm 4'te (DOM) detaylıca ele alacağız.

`<script>` Etiketi — Detaylı İnceleme

JavaScript'i HTML'e bağlamanın birkaç yolu vardır ve her birinin kullanım yeri farklıdır.

Inline (Satır İçi) JavaScript

<!-- Doğrudan HTML içinde JavaScript — KÜÇÜK işler için -->
<button onclick="alert('Tıklandı!')">Tıkla</button>

Bu yöntem çok küçük işler için kabul edilebilir, ama genel olarak kaçınılmalıdır. HTML ve JavaScript'i karıştırmak, kodu okunaksız ve bakımı zor hale getirir. Buna separation of concerns (ilgilerin ayrılması) prensibi der.

Internal (Dahili) JavaScript

<!-- HTML dosyasının içinde <script> bloğu -->
<script>
  console.log("Bu kod HTML dosyasının içinde");
  let mesaj = "Merhaba!";
  document.body.style.backgroundColor = "#f0f0f0";
</script>

Hızlı denemeler ve çok küçük projeler için kullanılabilir. Ama ciddi projelerde JavaScript kodunu ayrı dosyalarda tutmalısınız.

External (Harici) JavaScript — Önerilen Yöntem

<!-- Ayrı .js dosyası — EN İYİ PRATİK -->
<script src="app.js"></script>

<!-- Birden fazla dosya yüklenebilir -->
<script src="utils.js"></script>
<script src="main.js"></script>

Bu yaklaşımın avantajları:

Kod organizasyonu: Her dosyanın tek bir sorumluluğu olur
Yeniden kullanılabilirlik: Aynı .js dosyası birden fazla HTML sayfasında kullanılabilir
Önbellekleme (caching): Tarayıcı .js dosyasını önbelleğe alır, tekrar indirmesi gerekmez
Bakım kolaylığı: HTML'e dokunmadan JavaScript'i değiştirebilirsiniz

`defer` ve `async` Nitelikleri

<!-- Normal yükleme — HTML işlemeyi durdurur, script'i indirir ve çalıştırır -->
<script src="app.js"></script>

<!-- defer — HTML işlemeye devam eder, DOM hazır olunca çalıştırır -->
<script src="app.js" defer></script>

<!-- async — HTML işlemeye devam eder, indirilince hemen çalıştırır -->
<script src="app.js" async></script>

Normal:   HTML ──── [Dur! Script indir + çalıştır] ──── HTML devam
defer:    HTML ──────────────────────────────────── DOM hazır → Script çalıştır
async:    HTML ────── [Script indi → Çalıştır] ───── HTML devam

defer kullanın: Kodunuz DOM elementlerine erişiyorsa (çoğu durumda)
async kullanın: Bağımsız scriptler için (analytics, reklam) — DOM ile etkileşimi yoksa
Hiçbiri: Çok eski tarayıcı desteği gerekiyorsa (artık nadir)

💡 İpucu: Modern projelerde <script src="app.js" defer></script> etiketini <head> bölümüne koymak en iyi pratiktir. defer sayesinde HTML işlemeyi yavaşlatmaz, DOM tamamen yüklendikten sonra çalışır. Bu, </body> önüne koyma pratiğinin modern alternatifidir.

Proje Yapısı — İyi Alışkanlıklar

Küçük bir proje bile organize olmalıdır. İşte başlangıç için iyi bir yapı:

js-kurs/
├── 01-giris/
│   ├── index.html
│   ├── merhaba.js
│   └── deneme.js
├── 02-kontrol/
│   ├── index.html
│   └── app.js
├── 03-diziler/
│   ├── index.html
│   └── app.js
└── notlar.md

Her bölüm için ayrı bir klasör oluşturun. Bu, dosyalarınızın karışmasını önler ve ilerlemenizi takip etmenizi kolaylaştırır.

Pratik: Ortamınızı Test Edin

Her şeyi doğru kurduğunuzdan emin olmak için şu adımları uygulayın:

Test 1: Node.js Kontrolü

# Terminal'de:
node -e "console.log('Node.js çalışıyor! Sürüm:', process.version)"

Test 2: Dosya Oluşturma ve Çalıştırma

test.js adında bir dosya oluşturun:

// test.js — Ortam testi

// Node.js bilgileri
console.log("=== Ortam Bilgileri ===");
console.log(`Node.js sürümü: ${process.version}`);
console.log(`İşletim sistemi: ${process.platform}`);
console.log(`Çalışma dizini: ${process.cwd()}`);

// JavaScript temel özellik testi
console.log("\n=== JavaScript Temel Test ===");

// let/const çalışıyor mu? (ES6)
const PI = 3.14159;
let daire = { yaricap: 5 };
console.log(`Dairenin alanı: ${(PI * daire.yaricap ** 2).toFixed(2)}`);

// Arrow function çalışıyor mu? (ES6)
const selamla = (isim) => `Merhaba, ${isim}!`;
console.log(selamla("Geliştirici"));

// Destructuring çalışıyor mu? (ES6)
const [ilk, ...geri] = [1, 2, 3, 4, 5];
console.log(`İlk: ${ilk}, Geri kalan: ${geri}`);

// Optional chaining çalışıyor mu? (ES2020)
const kullanici = { profil: { isim: "Ali" } };
console.log(`Kullanıcı: ${kullanici?.profil?.isim ?? "Bilinmiyor"}`);

console.log("\n✅ Tüm testler başarılı! Ortamınız hazır.");

node test.js

Tüm çıktıları hatasız görüyorsanız, ortamınız hazır demektir!

Test 3: Tarayıcı Testi

Bir HTML dosyası oluşturun, Live Server ile açın ve DevTools Console'da şunu çalıştırın:

// Console'a yapıştırın
document.body.innerHTML = `
  <div style="text-align: center; padding: 50px; font-family: Arial;">
    <h1 style="color: #2196F3;">🎉 DevTools Çalışıyor!</h1>
    <p>JavaScript ile bu sayfanın tamamını değiştirdim.</p>
    <p>Tarih: ${new Date().toLocaleDateString('tr-TR')}</p>
  </div>
`;

Sayfa tamamen değişiyorsa, tarayıcı ortamınız da hazır!

Yaygın Kurulum Sorunları ve Çözümleri

Sorun: `node` komutu bulunamıyor

# Hata:
'node' is not recognized as an internal or external command

Çözüm: Node.js kurulumunda PATH değişkenine eklenmemiş olabilir. Node.js'i yeniden kurun ve "Add to PATH" seçeneğinin işaretli olduğundan emin olun. Kurulumdan sonra terminali kapatıp yeniden açın.

Sorun: Permission denied (macOS/Linux)

# Hata:
npm WARN: permission denied

Çözüm: sudo ile çalıştırmayın — bu kötü bir alışkanlıktır. Bunun yerine nvm kullanın veya npm'in global dizinini değiştirin:

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
# ~/.bashrc veya ~/.zshrc'ye ekleyin:
# export PATH=~/.npm-global/bin:$PATH

Sorun: VS Code'da Türkçe karakter sorunu

// Dosya kaydedilince Türkçe karakterler bozuluyor

Çözüm: VS Code'un sağ alt köşesindeki "UTF-8" yazısına tıklayın. "Save with Encoding" → "UTF-8" seçin. Tüm dosyalarınızı UTF-8 ile kaydedin.

Özet

🔹 VS Code, JavaScript geliştirme için en popüler editördür. ESLint, Prettier ve Live Server eklentileri ilk gün kurulmalıdır
🔹 DevTools Console (F12), JavaScript'i anında test etmek ve hata ayıklamak için kullanılır. console.log dışında console.table, console.time, console.group gibi güçlü metotlar vardır
🔹 Node.js sayesinde JavaScript'i tarayıcı dışında, komut satırından çalıştırabilirsiniz. Her zaman LTS sürümünü tercih edin
🔹 JavaScript'i HTML'e bağlarken harici dosya (external) yöntemi tercih edilmeli, <script defer> ile <head>'e konulmalıdır
🔹 defer DOM hazır olunca çalıştırır, async indirilir indirilmez çalıştırır — çoğu durumda defer doğru seçimdir
🔹 İyi bir klasör organizasyonu ilk günden başlamalı — her bölüm/proje kendi klasöründe yaşamalıdır