Frontend Geliştirici Mülakat Soruları ve Cevapları: Teknik ve Teorik Hazırlık Rehberi

Frontend Mülakat Süre Süreci: Teknik Beklentiler ve Hazırlık

Bir Kariyer Rehberi ve Pratik İpuçları" data-seo-auto-link="true">frontend geliştirici mülakatı, sadece kod yazma yeteneğinizin değil, aynı zamanda problem çözme yaklaşımınızın, modern web standartlarına hakimiyetinizin ve kullanıcı deneyimine (UX) verdiğiniz önemin test edildiği bir süreçtir. Şirketler artık sadece "çalışan kod" değil, sürdürülebilir, performanslı ve erişilebilir kodlar yazabilen mühendisler aramaktadır.

Mülakat süreci genellikle üç ana aşamadan oluşur: İK görüşmesi, teknik test (live coding veya ödev) ve teknik mülakat. Teknik mülakat aşamasında ise temel web teknolojilerinden başlayarak, kullandığınız framework'lerin derinliklerine kadar inen sorularla karşılaşırsınız. Bu aşamaya gelmeden önce, yetkinliklerinizi doğru yansıtan bir Cv oluştur sürecini tamamlamış ve projelerinizi somutlaştırmış olmanız şarttır.

Temel HTML ve Web Standartları Soruları

HTML, web'in iskeletidir. Modern frontend mülakatlarında artık basit etiket sorularından ziyade, semantik yapı ve erişilebilirlik (accessibility) üzerine odaklanılmaktadır.

Semantik HTML Nedir ve Neden Önemlidir?

Semantik HTML, içeriğin anlamını hem tarayıcıya hem de geliştiriciye açıkça belirten etiketlerin kullanılmasıdır. Örneğin, <div> etiketi hiçbir anlam taşımazken; <article>, <section>, <nav> ve <header> gibi etiketler sayfanın yapısını tanımlar.

• SEO Avantajı: Arama motorları semantik etiketler sayesinde sayfanın hangi kısmının önemli olduğunu daha iyi anlar.
• Erişilebilirlik: Ekran okuyucular, görme engelli kullanıcılar için semantik yapıları kullanarak sayfayı daha anlamlı hale getirir.
• Bakım Kolaylığı: Kodun okunabilirliğini artırarak ekip çalışmasını kolaylaştırır.

Critical Rendering Path (Kritik İşleme Yolu) Nedir?

Tarayıcının HTML, CSS ve JavaScript dosyalarını alıp bunları ekranda piksellere dönüştürme sürecine kritik işleme yolu denir. Bu süreç şu adımları izler:

1. DOM (Document Object Model) Oluşturma: HTML okunur ve ağaç yapısı oluşturulur.
2. CSSOM (CSS Object Model) Oluşturma: CSS kuralları işlenir ve stil ağacı oluşturulur.
3. Render Tree Oluşturma: DOM ve CSSOM birleştirilerek ekranda görünecek elementlerin listesi çıkarılır.
4. Layout (Düzen): Elementlerin ekrandaki kesin konumları ve boyutları hesaplanır.
5. Paint (Boyama): Pikseller ekrana çizilir.

CSS ve Modern Stil Yaklaşımları

CSS mülakatlarında genellikle layout (düzen) yönetimi, performans ve modern CSS özellikleri sorgulanır.

CSS Box Model Nedir?

Box Model, HTML'deki her elementin dikdörtgen bir kutu olarak kabul edildiği kavramdır. Bir elementin toplam alanı şu bileşenlerden oluşur:

• Content: Metin veya görselin bulunduğu asıl alan.
• Padding: İçerik ile kenarlık arasındaki boşluk.
• Border: İçeriği ve padding'i çevreleyen çizgi.
• Margin: Elementin diğer elementlerle arasındaki dış boşluk.

Box-sizing: border-box; özelliğinin kullanımı, padding ve border değerlerinin toplam genişliğe dahil edilmesini sağlayarak hesaplamaları kolaylaştırır.

Flexbox ve CSS Grid Arasındaki Farklar Nelerdir?

Her iki teknoloji de sayfa düzeni oluşturmak için kullanılır ancak farklı amaçlara hizmet ederler:

• Flexbox: Tek boyutlu (ya yatay ya da dikey) yerleşimler için idealdir. Dinamik içeriklerin hizalanması ve dağıtılmasına odaklanır.
• CSS Grid: İki boyutlu (hem satır hem sütun) yerleşimler için tasarlanmıştır. Sayfanın genel iskeletini kurmak için daha güçlüdür.

CSS Performans Optimizasyonu Nasıl Yapılır?

CSS dosyalarının boyutu ve işlenme süresi sayfa hızını etkiler. Optimizasyon için şu yöntemler izlenebilir:

• Kullanılmayan CSS kodlarının (Unused CSS) temizlenmesi.
• CSS dosyalarının minify edilmesi.
• Kritik CSS'in (Critical CSS) inline olarak eklenip, geri kalanının asenkron yüklenmesi.
• Will-change gibi özelliklerle tarayıcıyı GPU hızlandırmasına yönlendirmek.

JavaScript: Derinlemesine Teknik Sorular

Frontend mülakatlarının kalbi JavaScript'tir. Burada sadece sözdizimi değil, dilin çalışma mantığı (engine) sorgulanır.

Closure (Kapanış) Nedir?

Closure, bir fonksiyonun, dış kapsamındaki (outer scope) değişkenlere, o dış fonksiyon çalışmasını tamamladıktan sonra bile erişebilme yeteneğidir. Bu durum, JavaScript'in lexical scoping yapısından kaynaklanır.

Örnek kullanım alanı: Veri gizleme (private variables) ve fonksiyonel programlama kalıpları.

Hoisting Kavramını Açıklayınız

Hoisting, değişken ve fonksiyon deklarasyonlarının, kod çalıştırılmadan önce kapsamın (scope) en üstüne taşınması işlemidir. Ancak dikkat edilmesi gereken noktalar vardır:

• Var ile tanımlanan değişkenler Undefined olarak hoist edilir.
• Let ve Const hoist edilir ancak "Temporal Dead Zone" (Geçici Ölü Bölge) nedeniyle tanımlanmadan önce erişilmeye çalışıldığında hata verirler.
• Fonksiyon deklarasyonları tamamen hoist edilir, bu yüzden fonksiyonu tanımlamadan önce çağırabilirsiniz.

Event Loop ve Asenkron Yapı Nasıl Çalışır?

JavaScript tek iş parçacıklı (single-threaded) bir dildir. Ancak asenkron işlemleri (API istekleri, timerlar) yönetmek için Event Loop mekanizmasını kullanır:

• Call Stack: Mevcut çalışan fonksiyonların tutulduğu yerdir.
• Web APIs: setTimeout, fetch gibi işlemler tarayıcı tarafında yürütülür.
• Callback Queue: Tamamlanan asenkron işlemlerin sıraya girdiği yerdir.
• Event Loop: Call Stack boşaldığında, Callback Queue'daki ilk işlemi alıp stack'e iter.

Promise ve Async/Await Arasındaki Fark Nedir?

Promise, asenkron bir işlemin gelecekteki sonucunu temsil eden bir nesnedir. .then() ve .catch() zincirleri ile yönetilir. Async/Await ise Promise yapısı üzerine inşa edilmiş "syntactic sugar"dır. Asenkron kodu senkronmuş gibi yazmamıza olanak tanıyarak okunabilirliği artırır ve hata yönetimini Try-catch blokları ile kolaylaştırır.

Modern Framework Soruları (React, Vue, Angular)

Hangi framework'ü kullanırsanız kullanın, temel prensipler benzerdir. Mülakatlarda ekseriyetle "neden bu framework?" ve "nasıl çalışır?" soruları gelir.

Virtual DOM Nedir ve Nasıl Çalışır?

Virtual DOM, gerçek DOM'un hafif bir kopyasıdır. Bir state değişikliği olduğunda:

1. Yeni bir Virtual DOM ağacı oluşturulur.
2. Eski Virtual DOM ile yeni olan karşılaştırılır (Diffing algoritması).
3. Sadece değişen kısımlar gerçek DOM'a yansıtılır (Reconciliation).

Bu süreç, tüm sayfayı yeniden render etmekten çok daha hızlıdır ve performansı artırır.

State Management (Durum Yönetimi) Neden Gereklidir?

Uygulama büyüdükçe, veriyi alt bileşenlere (props drilling) taşımak zorlaşır. Redux, Vuex veya Context API gibi araçlar, veriyi merkezi bir depoda (store) tutarak herhangi bir bileşenin bu veriye doğrudan erişmesini sağlar.

Lifecycle Methods (Yaşam Döngüsü Metotları) Nedir?

Bileşenlerin oluşturulma (mount), güncellenme (update) ve yok olma (unmount) süreçleridir. Modern React'te bu süreçler UseEffect gibi hooklar ile yönetilir. Örneğin, API çağrıları genellikle bileşen mount olduğunda (useEffect'in boş dependency array ile kullanımı) yapılır.

Frontend Mimari ve Performans Soruları

Kıdemli (Senior) pozisyonlar için sorulan sorular genellikle kod yazımından ziyade mimari kararlara odaklanır.

Web Performance Optimizasyonu İçin Neler Yapılabilir?

Kullanıcı deneyimini iyileştirmek için şu stratejiler uygulanmalıdır:

• Lazy Loading: Görsellerin ve bileşenlerin sadece ekrana girdiğinde yüklenmesi.
• Code Splitting: Uygulamanın tek bir büyük JS dosyası yerine küçük parçalara bölünerek yüklenmesi.
• Caching: Service Worker'lar ve HTTP cache kullanımı.
• Image Optimization: WebP formatı kullanımı ve responsive görseller (srcset).

PWA (Progressive Web Apps) Nedir?

Web uygulamalarının mobil uygulama benzeri özellikler kazanmasıdır. Çevrimdışı çalışma desteği, push bildirimleri ve ana ekrana ekleme özellikleri ile öne çıkar. Temel taşı Service Worker'lardır.

Mülakat Öncesi Hazırlık ve Kariyer Stratejileri

Teknik bilgi kadar, bu bilgiyi nasıl sunduğunuz da önemlidir. Bir mülakata girmeden önce sadece kodlama pratiği yapmak yetmez.

Portfolyo ve Proje Sunumu

Yaptığınız projeleri anlatırken "Şu teknolojiyi kullandım" demek yerine, "Şu problemi çözmek için şu teknolojiyi seçtim çünkü..." şeklinde bir yaklaşım sergileyin. Karşılaştığınız zorlukları ve bunları nasıl aştığınızı anlatmak, teknik derinliğinizi kanıtlar.

CV Hazırlama Süreci

Teknik mülakata çağrılmanın ilk adımı, dikkat çekici bir özgeçmişe sahip olmaktır. Bir Cv şablon seçerken sade, okunabilir ve ATS (Applicant Tracking System) uyumlu modelleri tercih edin. Deneyimlerinizi maddeler halinde, başarı odaklı ve ölçülebilir verilerle (örneğin: "Sayfa yükleme hızını %30 artırdım") belirtin.

Eğer mevcut özgeçmişinizin yeterliliğinden emin değilseniz, profesyonel bir Cv analiz hizmetinden yararlanarak eksiklerinizi belirleyebilir veya sektördeki başarılı örnekleri inceleyerek revize edebilirsiniz.

Sıkça Sorulan Pratik Sorular ve Hızlı Cevaplar

Mülakatların sonunda veya başlangıcında gelen "buz kırıcı" teknik sorulara hazırlıklı olun:

"==" ve "===" arasındaki fark nedir?

== (loose equality) değerleri karşılaştırırken tip dönüşümü yapar. === (strict equality) ise hem değeri hem de veri tipini kontrol eder. Her zaman === kullanımı önerilir.

Arrow Function'ların normal fonksiyonlardan farkı nedir?

En temel fark This bağlamıdır. Arrow function'lar kendi This bağlamına sahip değildir; bunun yerine tanımlandıkları kapsamın (lexical scope) This değerini kullanırlar.

Debounce ve Throttle nedir?

• Debounce: Bir işlem belirli bir süre boyunca tetiklenmezse çalışır (Örn: Arama kutusuna yazı yazmayı bitirdiğinizde API isteği atılması).
• Throttle: Bir işlemin belirli zaman aralıklarıyla en fazla bir kez çalışmasını sunar (Örn: Scroll event'i sırasında performans korumak için).

Son Hazırlık Kontrol Listesi

Mülakat gününden önce şu adımları kontrol ettiğinizden emin olun:

• Temel JavaScript konseptleri (Closure, Event Loop, Promises) tekrar edildi mi?
• CSS Grid ve Flexbox ile hızlıca layout oluşturulabiliyor mu?
• Kullanılan framework'ün güncel versiyonundaki yenilikler biliniyor mu?
• GitHub profilindeki projeler güncel ve README dosyaları açıklayıcı mı?
• Sektöre uygun, temiz bir Cv oluştur işlemi tamamlandı ve güncel linkler eklendi mi?

Frontend geliştirme dünyası sürekli evriliyor. Mülakatlarda "her şeyi bilmek" yerine, "nasıl öğreneceğinizi" ve "yeni teknolojilere nasıl adapte olduğunuzu" göstermek sizi diğer adayların önüne geçirir.