Mon Oct 05 2026
Selam! 👋
Öncelikle kahvenizi alın, rahatlayın — bu yazı bir "öğretmen" tonunda değil, yanınızda oturup paylaştığımız bir sohbet gibi akacak.
Son iki yılda ne değişti, hatırlıyor musunuz?
Kod yazmak artık eski gibi mi aynı? ❓
Geçen hafta bir junior arkadaşımla pair programming yaptık.
O: "Bu fonksiyonu nasıl yazacağım?"
Ben: "Copilot'a sor, bakalım ne çıkacak"
Saniyeler içinde tam istenen mantık, hatta testleri bile önerebilen bir kod bloğu geldi.
O an fark ettik: soruyu sormak artık kodu yazmaktan daha kritik. 🎯
| Alan | Eski Durum | Yeni Gerçeklik |
|---|---|---|
| Junior geliştirici | Syntax ezberler, boilerplate yazar | Prompt yazır, review eder, mimari düşünür |
| Bootcamp / Eğitim | "Nasıl for döngüsü yazılır?" | "AI'dan doğru çıktıyı nasıl alırım?" |
| İş ilanları | "5 yıl React deneyimi" | "AI araçlarıyla verimli çalışma kanıtı" |
Hazırsan başlayalım — kod yazmanın yeni yüzü ile bizim yerimizi birlikte keşfedelim. 🚀
Hazırsan üç popüler aracı hızlıca tanıyalım ve ne kadar işimizi kolaylaştırdığını görelim 🚀
Tab ile kabul edip hemen devam edebilirsin.Her üç araç da ne yazdığını değil, nasıl istediğini anlar.
Button bileşeni yaz. variant prop’u primary | secondary | outline olsun.”className prop’unu merge et, forwardRef kullan.”Button bileşeniimport { forwardRef } from 'react';
import { cn } from '@/lib/utils'; // utility for className merging
export const Button = forwardRef<
HTMLButtonElement,
React.ButtonHTMLAttributes<HTMLButtonElement> & {
variant?: 'primary' | 'secondary' | 'outline';
}
>(({ className, variant = 'primary', children, ...props }, ref) => {
const base = 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50';
const variants = {
primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
};
return (
<button
ref={ref}
className={cn(base, variants[variant], className)}
{...props}
>
{children}
</button>
);
});
Button.displayName = 'Button';
import { forwardRef } from 'react';
import clsx from 'clsx';
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
variant?: 'primary' | 'secondary' | 'outline';
};
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant = 'primary', children, ...props }, ref) => {
const base = 'inline-flex items-center justify-center rounded px-4 py-2 text-sm font-medium transition';
const variantStyles = {
primary: 'bg-blue-600 text-white hover:bg-blue-700',
secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
outline: 'border border-gray-400 hover:bg-gray-100',
};
return (
<button
ref={ref}
className={clsx(base, variantStyles[variant], className)}
{...props}
>
{children}
</button>
);
}
);
Button.displayName = 'Button';
Ne fark var?
cn) ve shadcn/ui stillerini varsayar; projenizde yoksa import hatası alırsınız.forwardRef ve displayName ekler; bu iyi bir alışkanlık 👍Üçü de prompt kalitesine göre değişir. Kısa, net, bağlamlı prompt yazarsanız kod review süresi dramatik düşer ⏱️. Hangi aracı tercih edersiniz? Yanınızda bir kahveyle deneyip karar verin ☕️
Hazırsan başlayalım 🚀
Son 2‑3 yılda junior tanımı baştan aşağı değişti. Eskiden “syntax biliyorum, basit bir CRUD yazabilirim” demek yetiyordu. Şimdi ise:
| Eski Beklenti | Yeni Gerçeklik |
|---|---|
| Syntax ezberlemek | AI ile syntax otomatize edilip, mimari düşünme öne çıkıyor |
| Basit bir proje teslim etmek | CI/CD, test stratejisi, observability bilmek gerekiyor |
| Mentor beklemek | Mentor sayısı azalıyor, async code‑review kültürü yaygınlaşıyor |
Kod yazabiliyorum yalanı 🎭
Birçok aday “ben kod yazabiliyorum” derken aslında prompt engineering yapıyor. Bu, temel bilgi (algoritma karmaşıklığı, bellek yönetimi, concurrency) eksikliğiyle birleşince:
Özetle 🎯
Junior yetiştirme modeli çöküyor değil, dönüşüyor. Temel bilgi eksikliği ve mentorluk boşluğu riskleri gerçek. Ancak bu riskleri erken fark edip müfredatı, iş ilanlarını ve mentorluk sürecini buna göre şekillendirirse, yeni nesil geliştiriciler AI ile yarışmak yerine AI’yı yönlendiren profesyoneller olabilir.
Hadi bu değişimi birlikte yönetelim! 🚀
Modern yazılım dünyasında "sağlam bir temel" artık birkaç dil öğrenmekten ibaret değil. En değerli sermayen bir problemden bağımsız olarak çözüm üretme becerisidir. Aşağıda, hem bootcampler hem de bağımsız öğrencüler için eğitimin yeniden şekillendirilmesi ve pratik geliştirmenin açık bir haritası bulacaksın.
| Beceri | Neden Önemli? | Pratik Alıştırmalar |
|---|---|---|
| Sistem Tasarımı Düşüncesi 🎯 | Tek bir fonksiyon yazmak yerine, sorunlar hakkında nasıl düşündüğünü geliştirirsin. | • Basit bir mikro servis (örneğin, "şehirler ve hava durumu") tasarlayın ve uzun bir Markdown belgesi olarak kağıt üzerinde modelleyin.• Teknik olmayan biri için basit bir diyaloğu belgelendirin (ne işe yarar, akış). |
| Kod Okuma ve Hata Ayıklama 🛠 | Herhangi bir depoda hızlı sorun gidermek için gerçek dünyadaki yetenek. | • Başka bir geliştiricinin "bozuk" kodunu okuyun; mantığı anlamaya çalışın ve hatalı satırı belirtin.• Breakpoint'ler veya console.log'lar kullanarak süreci gösteren bir video/ kaydetme paylaşın. |
| Test Stratejileri ✅ | Çalışan kod, aynı zamanda çalışan bir sistemdir. | • Basit bir işlevi (örneğin, parola doğrulama) manuel olarak test edin, ardından kodu "test tabanlı geliştirme" yöntemini takip edecek şekilde yeniden yazın.• Kontrollü ve doğrulanabilir bir performans testi (örneğin, 1000 istek send etme ve yanıt sürelerini ölçme) sağlayın. |
| Güvenlik Farkındalığı ⛔ | Güçlü güvenlik alışkanlıkları bugün bir gerekliliktir, yarın bir rekabete dönüşebilir. | • Kullanıcı girişlerini inceleyin (örneğin, ; içeren SQL girişleri) ve saldırgan bir senaryo için (XSS, CSRF) "what if?" bir durum mentally deneyin.• Güvenli kodlama kontrolleri listesi (bruteforce koruması, güvenli şifre depolama) içeren bir özet pdf hazırlayın. |
| AI ile Etkili İletişim 🎯 | Şu anda üretkenliğinizi artırabilecek bir ortak. | • Görüntülenen AI'a verilebilecek iyi bir prompt hazırlayın ve ardından yapacağınız doğrulama adımlarını gösterin. |
// Prompt: Bir Python fonksiyonu oluşturma
// Amacım: Bir listeyi sıralama ve büyükten küçüğe sayıları ekleme
// Çıktı: "Veri akışı:\n- 42\n- 17\n- 9" formatında basit bir yazım
// Şimdi üret bakalım…
Kullanıcı: Bir Python listesi [42, 17, 9] verildiğinde, "Veri akışı:\n- 42\n- 17\n- 9" biçiminde basit bir yazım oluşturacak olan Python fonksiyonunu yazın.
Doğrulama adımları (pseudo‑code)
// Adım 1: Prompt'u AI'ya gönderin
cevap = ai_chat(prompt)
// Adım 2: Fonksiyonun sözde çıktısını çalıştırın (değişkeni yerel olarak tanımlayın)
sample_list = [42, 17, 9]
çıktı = python_çalıştır(cevap, sample_list) // Fonksiyonu eval eder
// Adım 3: Üretilen çıktının beklenen biçimiyle eşleştiğini doğrulayın
beklenen = "Veri akışı:\n- 42\n- 17\n- 9"
eşleşme_kontrolü = (çıktı == beklenen)
// Adım 4: Basit bir analiz içeren bir "yorum" oluşturun
yorum = eşleşme_kontrolü ?
"✅ Fonksiyon beklenen formatta çıktı üretti" :
"⛔ Çıktı uyumsuz – geliştirin"
console.log(yorum)
Ne oluyor? Bu adımlar, güvenilir bir alışkanlık oluşturur: AI'a ise veriyor, çıktıyı işaretliyor ve içsel "yorumlama" ile riskleri gözlemlüyoruz.
| Gün | Öğrenme Odaklılığı | Hızlı Pratik Aktivite |
|---|---|---|
| 1‑3 | Sistem Tasarımı "Düşüncesi" | Basit bir mesajlaşma uygulamasının arka plan akışını kağıt üzerinde haritalayın. |
| 4‑5 | Kod Okuma | Repodan bir 'secret‑branch' seçin, hızlı bir kod incelemesi yapın ve birkaç hata ayıklama ipucu paylaşın. |
| 6‑7 | Test Stratejileri | İki farklı test yaklaşımında (birinci sınıf vs. entegrasyon) aynı işlevi yazın, avantajları karşılaştırın. |
| 8‑9 | Güvenlik Farkındalığı | Bir web sayfası için temel güvenlik kontrolleri listesi oluşturun ve personele dağıtın. |
| 10‑12 | AI İletişim | Farklı istekleri deneyin, bir prompt koleksiyonu oluşturun ve her biri için doğrulama testleri yazın. |
İki haftalık bir proje (örneğin, "kullanıcı girişlerine karşı korumalı, AI desteğine sahip gerçek zamanlı to-do listesi") ile tüm becerileri birleştirin. "Çözüm tasarlayın", değil sadece "kod yazın".
Sonuç: Modern bir geliştirici olarak rakiplik kurmak, tek seferlik kodlama gücünden çoklu perspektif gücüne geçmektir. Problem → tasarım → kod → test → güvenlik → AI etkileşimi arasındaki devreleri öğrenin. Sonra deyin ki: "Artık sadece kod yazmak yerine çözüm tasarlıyorum." 🎯
Hadi, ilk günlük pratik egzersizi kaydedelim. Başaracağınıza inanıyorum! 🚀
Hazırsan başlayalım 🚀
Bu bölümde basit bir “Kullanıcı Kartı” bileşenini AI ile nasıl üreteceğimizi, ardından insan geliştiricisi olarak nasıl code review yapıp iyileştireceğimizi adım adım göreceğiz.
AI’ya şu prompt’u verdik:
“React + TypeScript ile,
name,avatarUrlprop’larını alan, kart görünümünde birUserCardbileşeni yaz. Stil için inline style kullan.”
AI bize şu kodu döndürdü:
// UserCard.tsx – AI tarafından üretilen ilk versiyon
import React from 'react';
type Props = {
name: string;
email: string;
avatarUrl: string;
};
export const UserCard = ({ name, email, avatarUrl }: Props) => {
return (
<div style={{ border: '1px solid #ccc', padding: 16, borderRadius: 8, maxWidth: 300 }}>
<img src={avatarUrl} alt={name} style={{ width: 100, height: 100, borderRadius: '50%' }} />
<h3 style={{ margin: '8px 0' }}>{name}</h3>
<p style={{ margin: 0 }}>{email}</p>
</div>
);
};
Ne oluyor burada?
alt metni sadece name; avatar yüklenemezse boş kalır.Code review toplantısında şu noktları vurguladık 👇
alt için fallback, role="img" ve aria-label ekle.React.memo ile gereksiz render’ları engelle.avatarUrl opsiyonel olabilir, default avatar koy.// UserCard.tsx – İnsan geliştiricisi tarafından refactor edilmiş versiyon
import React, { memo } from 'react';
import styles from './UserCard.module.css'; // CSS Module
type UserCardProps = {
name: string;
email: string;
avatarUrl?: string; // opsiyonel
};
const DEFAULT_AVATAR = '/assets/default-avatar.png';
export const UserCard = memo(({ name, email, avatarUrl = DEFAULT_AVATAR }: UserCardProps) => {
return (
<article className={styles.card}>
<img
src={avatarUrl}
alt={`Kullanıcı: ${name}`}
className={styles.avatar}
role="img"
aria-label={`${name} kullanıcısının avatarı`}
/>
<h3 className={styles.name}>{name}</h3>
<p className={styles.email}>{email}</p>
</article>
);
});
UserCard.displayName = 'UserCard';
CSS Module (UserCard.module.css)
.card {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 1rem;
max-width: 300px;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 0.5rem;
}
.name {
margin: 0.5rem 0;
font-size: 1.1rem;
color: #333;
}
.email {
margin: 0;
font-size: 0.9rem;
color: #666;
}
UserCard.test.tsx)// UserCard.test.tsx – Jest + React Testing Library
import { render, screen } from '@testing-library/react';
import { UserCard } from './UserCard';
describe('UserCard', () => {
const defaultProps = {
name: 'Ayşe Yılmaz',
email: 'ayse@example.com',
avatarUrl: '/assets/ayse.png',
};
it('props ile doğru içeriği render eder', () => {
render(<UserCard {...defaultProps} />);
expect(screen.getByText('Ayşe Yılmaz')).toBeInTheDocument();
expect(screen.getByText('ayse@example.com')).toBeInTheDocument();
expect(screen.getByAltText('Kullanıcı: Ayşe Yılmaz')).toHaveAttribute('src', '/assets/ayse.png');
});
it('avatarUrl verilmezse default avatar kullanır', () => {
render(<UserCard name="Test" email="test@test.com" />);
const img = screen.getByAltText('Kullanıcı: Test');
expect(img).toHaveAttribute('src', '/assets/default-avatar.png');
});
it('memo ile aynı props için yeniden render etmez', () => {
const { rerender } = render(<UserCard {...defaultProps} />);
const firstImg = screen.getByAltText('Kullanıcı: Ayşe Yılmaz');
rerender(<UserCard {...defaultProps} />);
expect(screen.getByAltText('Kullanıcı: Ayşe Yılmaz')).toBe(firstImg);
});
});
| Alan | AI Versiyon | Refactor Sonrası |
|---|---|---|
| Erişilebilirlik | ❌ Temel alt |
✅ aria-label, role, fallback |
| Performans | ❌ Her render yeniden | ✅ React.memo |
| Stil Yönetimi | Inline, tekrarlı | CSS Module, merkezi |
| Tip Güvenliği | Zorunlu avatarUrl |
Opsiyonel + default |
| Test Kapsamı | Yok | 3 temel test + memo doğrulaması |
Sonuç: AI harika bir başlangıç noktası verir ama production‑ready kod için insan gözünden geçmesi, state yönetimi, erişilebilirlik, performans ve test gibi konularda müdahale şarttır.
Hadi şimdi kendi bileşeninizde deneyin ve code review notlarınızı paylaşın! 🎯
Hazırsan hemen uygulayabileceğin üç somut eylem var. Hepsi küçük adımlar ama uzun vadede dev bir fark yaratıyor 🚀
Unutma: Her küçük adım, seni geleceğin geliştiricisi yapar. Sen de bu dönüşümün bir parçasısın 🌟
Bu içerik tamamen yapay zeka destekli otomasyon sistemi ile üretilmiştir.
All rights reserved