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 frontend geliştirici mülakatı, hem kod yazma yeteneğinizin hem problem çözme yaklaşımınızın. Genelde, 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 arar.

Sahada, mülakat süreci sıklıkla üç 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 isabetli 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. Genelde, 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 gerekir?

İşin aslı, semantik HTML, içeriğin anlamını hem tarayıcıya hem de geliştiriciye açıkça belirten etiketlerin kullanılmasıdır. Söz gelimi, <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.
• Kısaca, 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 iş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 akış şu adımları izler:

1. DOM (Document Object Model) Oluşturma: HTML okunur ve ağaç yapısı oluşturulur.
2. Aslına bakılırsa, 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ı.

Flexbox ve CSS grid arasındaki farklar nelerdir?

Gerçekte, her iki teknoloji de sayfa düzeni oluşturmak için kullanılır ancak değişik 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?

Şöyle ki, 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. Şöyle ki, 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. Ne var ki dikkat edilmesi gereken noktalar vardır:

• Var ile tanımlanan değişkenler Undefined olarak hoist edilir.
• Let ve Const hoist edilir fakat "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 ayrım 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 yükseltir 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. Şöyle ki, 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. Taze bir Virtual DOM ağacı oluşturulur.
2. Eski Virtual DOM ile güncel 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).

Somut olarak, bu süreç, tüm sayfayı yeniden render etmekten çok daha hızlıdır ve performansı yükseltir.

State management (Durum yönetimi) neden gereklidir?

Pratikte, 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 kazandırır.

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. Söz gelimi, API çağrıları çoğunlukla 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 sıklıkla kod yazımından ziyade mimari kararlara odaklanır.

Web performance optimizasyonu iç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 hatırı sayılır JS dosyası yerine sınırlı parçalara bölünerek yüklenmesi.
• Caching: Service Worker'lar ve HTTP cache kullanımı.
• Somut olarak, ımage 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 işe yarar. Aslına bakılırsa, 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. Çoğu durumda, "Şu problemi çözmek için şu teknolojiyi seçtim zira..." ş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. Pratikte, deneyimlerinizi maddeler halinde, başarı odaklı ve ölçülebilir verilerle (örneğin: "Sayfa yükleme hızını %30 artırdım") vurgulayın.

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 ayrım 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 ayrım 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?

• Çoğu durumda, 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

Net konuşmak gerekirse, 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.