En İyi 40 Ön Uç Geliştirici Mülakat Sorusu ve Cevabı (2026)

By: Editoryal Takım Editoryal Takım
Hours Güncellenmiş

En Sık Sorulan Ön Uç Geliştirici Mülakat Soruları ve Cevapları

Ön uç geliştirici mülakatına hazırlanmak, zorlukları öngörmeyi ve pratik becerileri sergilemeyi gerektirir. Ön uç geliştirici mülakat soruları, modern ekipler için teknik muhakeme, tasarım odaklı düşünme ve problem çözme olgunluğunu vurgular.

Bu program, pratik deneyimin, alan bilgisinin ve analizin etkiye dönüştüğü, büyüyen web ekosistemlerinde yeni yollar açıyor. Yeni mezunlardan kıdemli profesyonellere kadar, gerçek projeler becerileri geliştiriyor, ekipleri destekliyor, yöneticilere rehberlik ediyor ve adayların yıllarca küresel ölçekte sahada çalışarak kazandıkları özgüvenle temel, ileri düzey ve teknik sözlü sınavları başarıyla geçmelerine yardımcı oluyor. Daha fazla oku…

👉 Ücretsiz PDF İndir: Ön Uç Geliştirici Mülakat Soruları ve Cevapları

En Sık Sorulan Ön Uç Geliştirici Mülakat Soruları ve Cevapları

1) Bir Ön Uç Geliştiricinin rolleri ve temel sorumlulukları nelerdir?

Bir ön uç geliştirici şunlardan sorumludur: görsel ve etkileşimli kısımların uygulanması Kullanıcıların doğrudan etkileşimde bulunduğu bir web sitesi veya web uygulamasının geliştiricileridir. HTML, CSS ve diğer teknolojileri kullanarak temiz ve verimli kod yazarak tasarım ve işlevsel uygulama arasındaki mantığı birleştirirler. JavaKodlama işleri. Sayfaların duyarlı, erişilebilir, çeşitli tarayıcılarla uyumlu ve performans açısından optimize edilmiş olmasını sağlarlar. Ayrıca kusursuz kullanıcı deneyimleri sunmak için tasarımcılar, arka uç geliştiriciler ve UX ekipleriyle işbirliği yaparlar.

Temel sorumluluklar şunları içerir:

  • Duyarlı kullanıcı arayüzleri oluşturmak.
  • Etkileşimli özelliklerin uygulanması JavaSenaryo.
  • Yükleme hızını ve performansını optimize etme.
  • Tarayıcılar arası uyumluluğu korumak.
  • Test edilebilir ve bakımı kolay kod yazmak.

Örnek: Kullanıcı girişini gerçek zamanlı olarak doğrulayan ve sayfa yenilenmeden hataları görüntüleyen bir form oluşturmak, her iki özelliği de göstermektedir. JavaSenaryo yazma becerisi ve kullanıcı deneyimine odaklanma.

2) HTML, CSS ve CSS arasındaki farkı açıklayın. JavaSenaryo.

HTML, CSS ve JavaSenaryolar şunlardır: ön uç geliştirmenin yapı taşlarıHer biri web sayfası oluşturmada farklı amaçlara hizmet eder.

  • HTML (Köprü Metni İşaretleme Dili): tanımlar yapı ve içerik bir web sayfasının. Etiketler gibi. <header>, <p>, <ul> Metinleri, görselleri, bağlantıları ve bölümleri düzenleyin.
  • CSS (Basamaklı Stil Sayfaları): Açıklar sunum ve düzen — Renkler, yazı tipleri, boşluklar ve yerleşim dahil olmak üzere öğelerin nasıl görünmesi gerektiği.
  • JavaSenaryo: Bu, bir Programlama dili Bu, web sayfalarına davranış ve etkileşim özelliği kazandırır; dinamik güncellemeleri, olayları ve eşzamansız işlemleri yönetir.

Uygulamadaki farklılıklara örnekler:

Teknoloji Amaç Tipik Kullanım
HTML Structure Sayfa başlıkları, metin, listeler
CSS stil Yerleşim, renkler, boşluk
JavaSenaryo Davranış Kaydırıcılar, form doğrulama

3) CSS nedir? Box Model ve önemi nedir?

MKS CSS Box Model Bir web sayfasındaki öğelerin boyutlandırılmasını ve aralıklarının nasıl yerleştirildiğini açıklar. Sayfa düzeni tasarımının temelidir ve dört bileşeni içerir: içerik, dolgu malzemesi, sınır, ve kenar.

  • İçerik: Metin ve görsellerin göründüğü temel alan.
  • Dolgu malzemesi: İçerik ile kenar çerçevesi arasındaki boşluk.
  • Sınır: Dolgu ve içerik çevresindeki kenar.
  • Marj: En dıştaki katman, öğeleri birbirinden ayırır.

Bu model önemlidir çünkü öğelerin alanı nasıl kapladığını ve birbirleriyle nasıl etkileşim kurduğunu etkiler. Bunu anlamak, hassas düzenler oluşturmaya ve içerik taşması veya yanlış öğe aralığı gibi düzen sorunlarından kaçınmaya yardımcı olur.

4) Duyarlı web tasarımı nasıl çalışır? Teknik örnekler verin.

Duyarlı web tasarımı, bir web sayfasının mobil telefonlardan masaüstü bilgisayarlara kadar farklı ekran boyutlarına sorunsuz bir şekilde uyum sağlamasını, aşağıdaki yöntemler kullanılarak garanti eder. akışkan düzenler, esnek görüntüler ve medya sorguları.

Teknikler şunları içerir:

  • CSS Medya Sorguları: Stilleri, görüntü alanı genişliğine göre uygulayın.
  • Esnek Birimler: kullanma em, rem, % sabit pikseller yerine.
  • Duyarlı Görseller: Kullanım <picture> hem de srcset farklı çözünürlükler için.

Örnek: Küçük ekranlarda hamburger menüsüne dönüşen bir gezinme çubuğu, düzeni değiştirmek ve öğeleri gizlemek/göstermek için medya sorguları kullanır.

5) HTML/CSS'de block, inline ve inline-block öğeleri arasındaki farkları açıklayın.

Bu görüntüleme davranışları, öğe yerleşim akışını kontrol eder.

Menşei Yeni Satır Başlatıyor En boy Yaygın Örnekler
Engellemek Evet Genişlik/yükseklik değerlerini kabul eder. <div>, <p>
Çizgide Yok hayır Genişlik/yükseklik dikkate alınmadı. <span>, <a>
Satır içi blok Yok hayır Genişlik/yükseklik kabul edildi. <img>, <input>

Açıklama: Blok öğeler dikey olarak üst üste dizilir; satır içi öğeler yatay olarak sıralanır; satır içi blok öğeler satır içi akışı korur ancak aralık kontrolüne izin verir.

6) Semantik HTML nedir ve neden önemlidir?

Semantik HTML, HTML öğelerini kullanır. anlam aktarmak ve yapılandırma, içeriği kullanıcılar, arama motorları ve yardımcı teknolojiler için daha kolay anlaşılır hale getirir. Örnekler şunlardır: <header>, <article>, <nav>, ve <footer>.

Faydaları:

  • Geliştirir ulaşabilme ve ekran okuyucu desteği.
  • Boosts'un SEO Sayfa yapısını netleştirerek.
  • Geliştiriciler için bakım kolaylığını ve anlaşılırlığı artırır.

Örnek: kullanma <nav> Gezinti bağlantıları için genel bağlantılar kullanmaktan daha anlamlıdır. <div> Etiketler. Ekran okuyucular bunu doğru şekilde yorumlar.

7) == ve === arasındaki fark nedir? JavaSenaryo?

In JavaSenaryo, == gerçekleştirir tür zorlamasıKarşılaştırmadan önce değerleri dönüştürürken === çekler katı eşitlik Zorlama olmaksızın.

  • == Örnek: "5" == 5 İade true Çünkü JavaBu komut dosyası, metin dizisini sayıya dönüştürür.
  • === Örnek: "5" === 5 İade false Çünkü türler farklıdır.

Mutlak eşitlik Genellikle mülakatlarda ve profesyonel kodlarda tercih edilir çünkü öngörülemeyen tür dönüşümlerini önler.

Kaçırmayın:

8) CSS önişlemcileri nedir ve neden kullanılırlar?

CSS önişlemcileri gibi SUKDÖ or DAHA AZ Standart CSS'i aşağıdaki özelliklerle genişletin: değişkenler, iç içe geçme, mixin'ler ve fonksiyonlarBu sayede daha modüler ve bakımı kolay stil sayfaları oluşturulabiliyor.

Avantajları şunlardır:

  • Yeniden kullanılabilir stil bileşenleri (mixin'ler).
  • Değişkenler (örneğin, renk paletleri) kullanarak daha temiz kod.
  • Büyük stil sayfaları için daha kolay bakım.

Örnek: SASS değişkenlerini kullanmak tekrarlamayı azaltır; örneğin, birincil marka rengi değişirse, yalnızca bir değişkenin güncellenmesi gerekir.

9) CSS'nin özgüllüğünü ve öncelik sırasını açıklayın.

CSS özgüllüğü belirler Hangi kural geçerlidir? Birden fazla kural aynı öğeyi hedeflediğinde. Özgüllük, seçicilere göre puanlanır:

  • Kimlik seçiciler (#id) daha yüksek ağırlığa sahiptir.
  • Sınıf seçiciler (.class) sıradakiler.
  • Element seçiciler (div, h1En az yükü taşırlar. Satır içi stiller, aşağıdaki durumlar dışında bunları geçersiz kılar. !important (Az miktarda kullanın).

Örnek: Bir kural #header .nav a geçersiz kılacak nav a Çünkü kimlik belirleme işlemi özgüllüğü artırır.

10) localStorage, sessionStorage ve çerezler arasındaki fark nedir?

Bunlar, farklı kapsam ve ömür sürelerine sahip tarayıcı depolama mekanizmalarıdır.

Depolama türü Ömür Boyut Sınırı Erişilebilir
Çerezler Yapılandırılabilir son kullanma tarihi ~4KB Sunucu ve istemci
yerel depolama Kalıcı ~5MB+ Yalnızca müşteri
oturumDepolama Yalnızca sekme oturumu ~5MB Yalnızca müşteri

Kullanım Durumu Örnekleri:

  • Çerezler: Oturum kimlik doğrulama belirteçleri.
  • YerelDepolama: Kullanıcı tercihlerini kaydetme.
  • oturum depolaması: Veriler yalnızca sekme açıkken geçerlidir.

11) Belge Nesne Modeli (DOM) nedir ve nasıl çalışır?

MKS Belge Nesne Modeli (DOM) bir web sayfasını temsil eden bir programlama arayüzüdür. ağaç yapısı Burada her düğüm bir öğeye, özniteliğe veya metin düğümüne karşılık gelir. JavaBu komut dosyası, sayfayı yeniden yüklemeden içeriği, stilleri ve yapıyı dinamik olarak güncellemek için DOM ile etkileşim kurar.

Örneğin, bir kullanıcı bir düğmeye tıkladığında, JavaKomut dosyası, açılır pencere göstermek veya metni değiştirmek için DOM'u değiştirebilir. DOM, geliştiricilerin öğeleri gerçek zamanlı olarak oluşturmasına, silmesine veya değiştirmesine olanak tanır.

Örnek:

document.getElementById("title").textContent = "Hello, World!";

Bu, "title" kimliğine sahip bir öğenin içeriğini değiştirir.

Anahtar paket servisi olan restoran: DOM manipülasyonu, modern web uygulamalarında etkileşimi güçlendirir.

12) Olay kabarcıklanması ve olay yakalama kavramlarını açıklayınız. JavaSenaryo.

JavaKomut dosyası, kullanıcı eylemlerini şu şekilde yönetir: Olay Yayılım ModeliBu, olayların DOM içinde nasıl ilerlediğini tanımlar. İki aşaması vardır:

  • Yakalama aşaması: Etkinlik gezici Kökten hedef öğeye kadar.
  • Bubblaşama: Olay baloncukları Hedef noktadan yukarı doğru, tekrar kök noktaya doğru.

Varsayılan olarak, olaylar aşağıdaki durumlar dışında yayılır. capture: true kullanılır. Geliştiriciler yayılımı kontrol edebilirler. event.stopPropagation() or event.stopImmediatePropagation().

Örnek:

document.querySelector("button").addEventListener("click", handleClick, true);

Bu, dinleme sırasında gerçekleşir. yakalama aşaması.

Bahşiş: Olay akışını anlamak, iç içe geçmiş olay işleyicilerinde hata ayıklama ve kullanıcı arayüzü etkileşimlerini optimize etme açısından kritik öneme sahiptir.

13) Kapanışlar nelerdir? JavaSenaryo mu? Bir örnekle açıklayın.

A kapatma Kapanış fonksiyonu, dış kapsamındaki değişkenlere, bu kapsamın yürütülmesi bittikten sonra bile erişimi sürdüren bir fonksiyondur. Kapanış fonksiyonları, veri gizliliğini ve durum bilgisi içeren fonksiyonları mümkün kılar.

Örnek:

function counter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}
const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2

Burada, increment erişimini sürdürüyor count sonra bile counter() geri döndü.

Kapaklar yaygın olarak kullanılmaktadır. modüller, olay işleyicileri ve React hook'ları (useState) İşlemler arasında durumu korumak için.

14) var, let ve const arasındaki farkı açıklayınız. JavaSenaryo.

Özellik var let const
kapsam İşlev Engellemek Engellemek
Yeniden beyan İzin verildi İzin yok İzin yok
Yeniden atama İzin verildi İzin verildi İzin yok
kaldırma Evet (tanımlanmamış) Evet (TDZ) Evet (TDZ)

var İşlevsel kapsamdadır ve tanımsız değerle yukarı taşınır, oysa let hem de const vardır blok kapsamlı ve orada ikamet etmek Zamansal Ölü Bölge (TDZ) başlatılana kadar.

kullanma let hem de const Özellikle modern ES6+ sözdiziminde daha temiz ve güvenli kod için tercih edilir.

15) Promise'ler nedir ve geri aramalardan nasıl farklıdırlar?

A Söz Şu anda, daha sonra veya asla kullanılamayacak bir değeri temsil eder. Asenkron işlemleri basitleştirir ve "geri çağrı karmaşasından" kaçınmaya yardımcı olur.

Vaat Edilen Devletler:

  • Pending → İşlem tamamlanmadı.
  • Fulfilled → İşlem başarılı.
  • Rejected → İşlem başarısız oldu.

Örnek:

fetch('/data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Geri çağrıların aksine, Promise'ler daha temiz bir sözdizimi ve daha iyi hata yönetimi sunar. .catch()Ayrıca şunlarla da bütünleşirler: async/awaitBu da eşzamansız iş akışlarını daha da basitleştiriyor.

16) async/await, eşzamansız programlamayı nasıl geliştirir?

async/await Promise'lar üzerine kurulu sözdizimsel bir kolaylıktır ve eşzamansız kodun eşzamanlı kod gibi görünmesini ve davranmasını sağlar. Okunabilirliği ve hata yönetimini iyileştirir.

Örnek:

async function getUser() {
  try {
    const response = await fetch('/api/user');
    const user = await response.json();
    console.log(user);
  } catch (error) {
    console.error(error);
  }
}

Avantajları:

  • Sıralı, kolay okunabilir akış.
  • Basitleştirilmiş hata yönetimi kullanılarak try...catch.
  • İç içe geçmiş yapıları azaltır. .then() zincirler.

Röportajlarda, bahsetmek async/await'in hata ayıklamayı nasıl iyileştirdiği ve geri çağırma işlemlerinin iç içe geçmesini nasıl azalttığı modern çağa dair güçlü bir anlayış sergiliyor. JavaSenaryo.

17) Senkron ve asenkron arasındaki farkı açıklayın. JavaSenaryo.

Menşei Açıklama Örnek E-posta
Syncküstah Code Kod satır satır yürütülür; sonraki görev bir öncekinin tamamlanmasını bekler. tuvaletping Veriler aracılığıyla
eşzamanlı olmayan Code Bağımsız olarak çalışır; engelleme yapmaz. API'den veri çekme, zaman aşımını ayarlama

Açıklama: JavaKomut dosyası tek iş parçacıklı olduğundan, eşzamansız işlemler (API çağrıları gibi) bu şekilde ele alınır. Olay Döngüsü hem de Geri Arama Kuyruğu Ana iş parçacığının bloke olmasını önlemek için.

Örneğin, bir API'den veri beklenirken, diğer kullanıcı arayüzü görevleri (animasyonlar gibi) sorunsuz bir şekilde çalışmaya devam eder.

18) Tek Sayfalı Başvurular (SPA'lar) nedir? Avantajlarını ve dezavantajlarını açıklayın.

SPA'lar bir yük yüklüyor. tek bir HTML sayfası Kullanıcı etkileşimine bağlı olarak içeriği dinamik olarak güncelleyen ve sayfayı yeniden yüklemeye gerek kalmadan içeriği güncelleyen çerçeveler. React, Angular ve Vue Genellikle SPA'ların yapımında kullanılırlar.

Avantajları:

  • Daha hızlı gezinme ve geliştirilmiş kullanıcı deneyimi.
  • Sunucu yükü azaltıldı.
  • Sorunsuz geçişler ve yönlendirme.

Dezavantajları:

  • Zayıf SEO (SSR değilse).
  • İlk yükleme süresi uzun olabilir.
  • Karmaşık tarayıcı geçmişi yönetimi.
Görünüş Yarar sakınca
SEO SSR gerektirir Daha zorlu indeksleme
Performans Yüklemeden sonra hızlı İlk yükleme daha yavaş
karmaşa Modüler Hata ayıklamak daha zor

19) Web Bileşenleri nedir ve neden önemlidir?

Web bileşenleri, projeler ve çerçeveler genelinde kullanılabilen, yeniden kullanılabilir, kapsüllenmiş öğelerdir. Temelleri şunlara dayanmaktadır: dört temel özellik:

  1. Özel Öğeler – Yeni HTML öğeleri tanımlayın.
  2. Gölge DOM – Bileşen stillerini ve işaretlemelerini ayırın.
  3. HTML Şablonları – Yeniden kullanılabilir içerik parçaları.
  4. ES Modülleri – İthalat/ihracat JavaKomut dosyası mantığı.

Örnek:

class MyButton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button>Click Me</button>`;
  }
}
customElements.define('my-button', MyButton);

Web bileşenleri modülerliği teşvik eder ve çerçeveye özgü bileşenlere olan bağımlılığı azaltarak uzun vadeli ölçeklenebilirlik sunar.

20) Bir ön uç uygulamasının performansını nasıl optimize edebilirsiniz?

Performans optimizasyonu, hızlı yükleme süreleri, yanıt verme hızı ve sorunsuz kullanıcı deneyimi sağlar. Bu, render işlemini engelleyen kaynakların en aza indirilmesini, kodun optimize edilmesini ve önbelleklemeden yararlanılmasını içerir.

En iyi uygulamalar:

  • Küçültmek CSS ve JavaKomut dosyası dosyaları.
  • Tembel yükleme Görseller ve varlıklar.
  • Kullanım kod bölme hem de ağaç sallanıyor.
  • Uygulamak tarayıcı önbelleği hem de CDN teslimatı.
  • optimize DOM yeniden düzenlemeleri hem de yeniden boyar.

Örnek: React'te, kullanarak React.memo or useCallback Gereksiz yeniden oluşturmaları önleyerek performansı önemli ölçüde artırır.

21) React nedir ve ön uç geliştirme alanında neden yaygın olarak kullanılır?

React Bildirimsel, bileşen tabanlıdır. JavaFacebook tarafından özellikle tek sayfa uygulamaları (SPA) olmak üzere kullanıcı arayüzleri oluşturmak için geliştirilen bir komut dosyası kütüphanesidir. Popülerliği, basitliğinden, verimliliğinden ve yeniden kullanılabilirliğinden kaynaklanmaktadır.

Temel avantajlar:

  • Sanal DOM: Yalnızca değişen kullanıcı arayüzü bölümlerini verimli bir şekilde günceller.
  • Bileşen tabanlı mimari: Yeniden kullanılabilir ve modüler kod yazımını teşvik eder.
  • Tek yönlü veri bağlama: Veri akışının öngörülebilir olmasını sağlar.
  • Ekosistem: Güçlü topluluk desteği ve kütüphaneler (örneğin, Redux, React Router).

Örnek: React'te bir giriş formu, aşağıdaki gibi bileşenlere ayrılabilir. <InputField>, <Button>, ve <Form>Bu sayede sayfalar arasında bakım kolaylığı ve yeniden kullanılabilirlik sağlanır.

22) Sanal DOM ile Gerçek DOM arasındaki fark nedir?

Özellik Sanal DOM gerçek DOM
Tabiat Hafif JavaYazı temsili Gerçek tarayıcı DOM'u
Güncelleme Hızı Hızlı (seçici olarak yeniden işler) Daha yavaş (tüm ağacı yeniden oluşturur)
verim Fark alma algoritmasını kullanır. Doğrudan manipülasyon
Örnek E-posta React, Vue Düz HTML, JS

Açıklama: Sanal DOM, doğrudan DOM manipülasyonunu en aza indirerek performansı artırır. Durum değiştiğinde, React sanal bir kopya oluşturur, bunu karşılaştırır (fark bulma) ve gerçek DOM'da yalnızca değişen öğeleri günceller.

Örnek: Büyük bir formdaki tek bir giriş alanını güncellemek, tüm sayfayı değil, yalnızca o alanı yeniden oluşturur; bu da önemli bir performans artışı sağlar.

23) React bileşenlerindeki yaşam döngüsü yöntemlerini açıklayın.

React bileşenlerinin (özellikle sınıf tabanlı olanların) kendine özgü özellikleri vardır. yaşam döngüsü aşamaları:

  1. Montaj: Bileşen oluşturuldu (constructor, componentDidMount).
  2. Güncelleniyor: Durum/özellik değişiklikleri tarafından tetiklenir (componentDidUpdate).
  3. Çıkarma: Çıkarma işleminden önce temizlik (componentWillUnmount).

Fonksiyonel bileşenlerde, useEffect hook bu yaşam döngülerini kopyalar:

useEffect(() => {
  console.log('Mounted');
  return () => console.log('Unmounted');
}, []);

Bunları anlamak, geliştiricilerin API çağrılarını, temizliği ve performans optimizasyonlarını etkili bir şekilde yönetmelerine yardımcı olur.

24) React'te state ve props arasındaki fark nedir?

Özellik Eyalet destekler
Mülkiyet Bileşen tarafından dahili olarak yönetilir. Üst bileşenden aktarıldı
mutability Değişken değişmez
Amaç Değişen verileri işler. Alt bileşenleri yapılandırır.
Örnek E-posta useState() <Button label="Submit" />

Açıklama: Props (kısaca “properties”), bileşen ağacında veri aktarmak için kullanılan salt okunur özelliklerdir; state ise dahili dinamik verileri yönetir. Örneğin, bir <Counter> bileşen durumu kullanır track sayısını alır ancak alır initialValue bir aksesuar olarak.

Bu ayrımı anlamak, veri akışını ve tepki verme hızını yönetmek için çok önemlidir.

25) React Hook'lar nedir ve neden tanıtıldılar?

Çengeller Geliştiricilerin durum ve yaşam döngüsü özelliklerini kullanmalarına olanak tanıyan özel fonksiyonlardır. fonksiyonel bileşenlerReact 16.8'de tanıtılan bu özellikler, kodu basitleştirir ve sınıf bileşenlerine olan bağımlılığı azaltır.

Yaygın Kullanılan Kancalar:

  • useState → Bileşen durumunu yönetir.
  • useEffect → yan etkiler (API çağrıları, abonelikler).
  • useContext → küresel devlet paylaşımı.
  • useMemo / useCallback → performans optimizasyonu.

Örnek:

const [count, setCount] = useState(0);
useEffect(() => console.log('Count changed:', count), [count]);

Hook'lar daha temiz kod, daha iyi kompozisyon ve daha kolay bakım imkanı sağlar.

26) React'te kontrollü ve kontrolsüz bileşenler nelerdir?

React'te, kontrollü bileşenler Form verilerinin eyalet tarafından işlenmesini sağlarken kontrolsüz bileşenler Doğrudan DOM'a güvenin.

Menşei Veri kaynağı Örnek E-posta
Kontrollü Tepki durumu value={inputValue} 'da onChange
Kontrolsüz KARAR ref giriş değerlerine erişmek için

Örnek:

const [name, setName] = useState('');
<input value={name} onChange={e => setName(e.target.value)} />

Kontrollü bileşenler öngörülebilir durum yönetimi için tercih edilirken, kontrolsüz bileşenler basit, dinamik olmayan yapılara uygundur.

27) React'te formları ve doğrulamayı nasıl ele alıyorsunuz?

Form işlemleri, kullanıcı girdisini yakalamayı, verileri doğrulamayı ve hataları yönetmeyi içerir. Bu işlemler manuel olarak veya aşağıdaki gibi kütüphaneler kullanılarak yapılabilir. formik, React Kanca Formuya da aynen.

Örnek (Manuel doğrulama):

if (!email.includes('@')) setError('Invalid email');

Adımlar:

  1. Durum değişkenlerini kullanarak kontrollü form alanları oluşturun.
  2. Değişiklik yaparken veya gönderirken girişleri doğrulayın.
  3. Hataları koşullu olarak görüntüle.
  4. Başarılı gönderimden sonra formu sıfırlayın.

Bahşiş: Performans ve sürdürülebilirlik için gecikmeli doğrulama veya şema tabanlı doğrulama kullanın.

28) CSS çerçeveleri nelerdir ve ön uç geliştirmeyi nasıl iyileştirirler?

CSS çerçeveleri sağlar önceden tanımlanmış stiller, düzenler ve bileşenler Kullanıcı arayüzü geliştirme sürecini hızlandıran çerçeveler. Popüler çerçeveler şunlardır: Bootstrap, Tailwind CSS, ve Malzeme Arayüzü.

iskelet Key Feature Kullanım çantası
Bootstrap Izgara sistemi Hızlı prototipping
Tailwind CSS Öncelikli fayda sağlayan sınıflar Özel kullanıcı arayüzü
Malzeme Arayüzü Reaksiyon bileşenleri Modern, erişilebilir kullanıcı arayüzleri

Avantajları:

  • Tutarlı tasarım dili.
  • Geliştirme süresi kısalır.
  • Varsayılan olarak duyarlı tasarım.

Çerçeveler kullanmak, geliştiricilerin projeler genelinde tasarım tutarlılığını korurken işlevselliğe odaklanmalarına yardımcı olur.

29) Ön uç uygulamalarında hata ayıklama işlemini etkili bir şekilde nasıl yaparsınız?

Hata ayıklama, sistematik inceleme yoluyla kod sorunlarını belirlemeyi ve düzeltmeyi içerir.

Yaygın hata ayıklama teknikleri:

  • Kullanım Tarayıcı Geliştirici Araçları (Öğeler, Ağ, Konsol sekmeleri).
  • Ekle console.log() stratejik olarak değişken için trackral.
  • Kullanmak Kesme noktaları hem de ifadeleri izleyin.
  • Çözümlemek ağ istekleri Başarısız API'ler için.
  • Onaylamak CSS seçicileri ve "İncele" aracını kullanarak düzeni inceleyin.

Örnek: Chrome Geliştirici Araçları'nda "İstisnalarda duraklat" seçeneğini işaretlemek, çalışma zamanı hatalarını erken yakalamaya yardımcı olur.

Gibi araçlar Tepki Geliştirme Araçları hem de Redux Geliştirme Araçları Ayrıca durum değişikliklerini etkili bir şekilde görselleştirebilir.

30) Web geliştirmede erişilebilirlik (a11y) nedir ve neden önemlidir?

Erişilebilirlik (a11y) Bu, web sitelerinin ekran okuyucu veya alternatif giriş cihazları kullananlar da dahil olmak üzere engelli kişiler tarafından kullanılabilir olmasını sağlar.

En İyi Uygulamalar:

  • Anlamsal HTML kullanın (<nav>, <main>, <header>).
  • Sağlamak alt resimler için metin.
  • Klavyeyle gezinmeyi sağlayın. tabindex.
  • ARIA özelliklerini kullanın (role, aria-label).
  • Yeterli renk kontrastını koruyun.

Örnek: kullanma <button aria-label="Submit Form"> Ekran okuyucuların düğmenin işlevini anlamasını sağlar.

Erişilebilirlik, kullanılabilirliği, SEO'yu ve kapsayıcılığı artırır; bu da modern kurumsal web uygulamaları için kritik öneme sahiptir.

31) Kritik işleme yolları nelerdir ve bunları nasıl optimize edebilirsiniz?

MKS kritik işleme yolu (CRP) Tarayıcının HTML, CSS ve diğer kodları dönüştürmek için izlediği adımlar dizisidir. JavaEkrandaki piksellere kod yazın. Optimize etmek, piksel sayısını en aza indirir. ilk render süresi ve algılanan performansı iyileştirir.

Optimizasyon teknikleri:

  1. Kritik kaynakları en aza indirin. — Sayfanın üst kısmında yer alan CSS kodu.
  2. Ertele veya eşzamansız JavaSenaryo Görüntü engellemesini önlemek için.
  3. Kaynak ipuçlarını kullanın. (<link rel="preload">, <link rel="dns-prefetch">).
  4. Varlıkları sıkıştır (Gzip/Brotli).
  5. Görüntüleri ve videoları tembel yükleme.

Örnek: Yerleştirme <script src="app.js" defer> DOM'un JavaScript çalıştırılmadan önce yüklenmesini sağlayarak FCP (İlk İçerik Boyama) gibi sayfa etkileşim metriklerini iyileştirir.

32) LCP, FID ve CLS gibi web performans ölçütleri nelerdir?

Modern performans ölçümü şunlara odaklanmaktadır: Temel Web Hayatı — Kullanıcı deneyimi odaklı temel ölçütler şu şekilde tanımlanmıştır: Google:

metrik Tam form Hedef Eşiği Neyi Ölçer?
LCP En Büyük Zengin İçerikli Boya ≤ 2.5 saniye Yükleme performansı
FID İlk Giriş Gecikmesi ≤ 100 ms Etkileşim
CLS Kümülatif Düzen Shift ≤ 0.1 Görsel stabilite

Örnek: Sürekli yer değiştiren "Şimdi Satın Al" butonu, müşteri yaşam boyu bekleme süresini artırıyor ve kullanıcıları hayal kırıklığına uğratıyor.

Görsel optimizasyonu veya tembel yükleme yoluyla LCP'yi iyileştirmek, SEO'yu ve kullanıcıyı elde tutmayı doğrudan artırır.

33) Ön uç geliştirme sürecinde güvenliği nasıl sağlayabilirsiniz?

Ön uç kodu istemci tarafından görülebildiği için güvenlik çok önemlidir. Geliştiricilerin en iyi uygulamaları hayata geçirmesi gerekir. Enjeksiyon, siteler arası ve veri ifşa saldırılarını önlemek.

Temel uygulamalar:

  • Kullanıcı girdilerini temizleyin ve doğrulayın (XSS saldırılarını önleme).
  • Kullanım İçerik Güvenliği Politikası (CSP) başlıklar.
  • Hassas verileri localStorage'da saklamaktan kaçının.
  • HTTPS'yi ve güvenli çerezleri uygulayın.
  • Dinamik HTML oluşturma işleminden kaçın.

Örnek:

element.textContent = userInput; // Safe
element.innerHTML = userInput;   // Unsafe (may run scripts)

Bahşiş: Gerçek hayattaki sorun giderme örneklerini (örneğin, React'in JSX'i otomatik olarak kaçırması) tartışmak mülakatçıları etkiler.

34) Servis çalışanları kimlerdir ve web uygulamalarını nasıl geliştirirler?

Hizmet Görevlileri Ağ isteklerini yakalayan ve bu sayede çalışan arka plan komut dosyalarıdır. çevrimdışı yetenek, önbelleğe alma, ve push bildirimleri — için gerekli Aşamalı Web Uygulamaları (PWA'lar).

Yaşam döngüsü:

  1. Kayıt – Tarayıcı hizmet çalışanını indirir.
  2. kurmak – Statik kaynakları önbelleğe alın.
  3. etkinleştirmek – Getirme olaylarını kontrol edin.

Örnek:

self.addEventListener('fetch', e => {
  e.respondWith(caches.match(e.request) || fetch(e.request));
});

Avantajları arasında daha hızlı yükleme ve çevrimdışı kullanılabilirlik yer alırken, sürümleme kontrollü güncellemeleri sağlar.

35) Ön uç geliştirmede kullanılan test çerçeveleri nelerdir?

Testler istikrarı sağlar ve geriye dönük uyumluluk sorunlarını önler. Farklı test seviyeleri belirli ihtiyaçları hedefler:

Menşei Amaç Montaj Ekipmanı
birim Bireysel fonksiyonları/bileşenleri test edin Şaka, Mocha
Entegrasyon Test modülü etkileşimleri Reaksiyon Test Kütüphanesi
Uçtan Uca (E2E) Kullanıcı iş akışlarını simüle edin CypressOyun yazarı
Görsel/Kullanıcı Arayüzü Tasarım akımlarını yakalayın Percy, Kromatik

Örnek: Jest'i React Test Kütüphanesi ile Kullanma:

test('renders heading', () => {
  render(<Header />);  expect(screen.getByText(/welcome/i)).toBeInTheDocument();
});

Modern mülakatlarda genellikle test kapsamı ve sürekli entegrasyon vurgulanmaktadır.

36) Ön uç geliştirme iş akışında Git'i nasıl kullanıyorsunuz?

Git İşbirliği ve değişiklik yönetimi için kullanılan dağıtık bir sürüm kontrol sistemidir. trackral.

Temel komutlar:

  • git clone → Depoyu kopyala.
  • git branch / checkout -b → Yeni özellik dalları oluşturun.
  • git commit / push → Değişiklikleri kaydedin ve paylaşın.
  • git merge / rebase → Özellikleri entegre edin.
  • git pull request → İşbirliği yapın ve gözden geçirin.

Örnek: Takip etme Git Akışı (develop, feature/*, release/*, hotfix/*Bu, birden fazla geliştiricinin yer aldığı projelerde yapılandırılmış sürümlemeyi sağlar.

Bilgisi GitHub Eylemleri or CI / CD boru hatları Bonus puanlar ekler.

37) Webpack, Vite ve Babel gibi derleme araçlarının rolü nedir?

Derleme araçları, kodun paketlenmesini, dönüştürülmesini ve optimize edilmesini otomatikleştirir.

araç İşlev
webpack Yükleyiciler ve eklentilerle birlikte JS/CSS/resim paketlerini içerir.
Babil ES6+ kodunu eski tarayıcılar için ES5'e dönüştürür.
Hayatları Yıldırım hızında geliştirme sunucusuna sahip modern derleme aracı
ESLint Kod kalitesi için lintleme

Örnek: Webpack, birden fazla modülü tek bir optimize edilmiş dosyada bir araya getirir.

Vite, modern React ve Vue uygulamaları için ideal olan, neredeyse anında yeniden yükleme sağlayan yerel ES Modüllerini kullanır.

Bu araçlar, üretime hazır ve verimli bir dağıtım sağlar.

38) Tarayıcı uyumluluk sorunlarını nasıl ele alıyorsunuz?

Tarayıcılar arası tutarsızlıklar, web standartlarının farklı uygulamalarından kaynaklanmaktadır.

En iyi uygulamalar:

  • Kullanım otomatik ön ek satıcı ön ekleri için.
  • Başlıca tarayıcılarda test edin. BrowserStack or SauceLabs.
  • Takip Edin aşamalı iyileştirmeÖnce temel işlevler, sonra da gelişmiş özellikler.
  • Kullanım özellik algılama (ModernizrTarayıcı izleme yerine.
  • Uygula polidolgular Eksik API'ler için.

Örnek: fetch() IE11 desteklenmiyor — polyfill kullanın veya yedek çözüme geçin. XMLHttpRequest.

Tarayıcılar arası tutarlı davranış, ön uç mühendisliğinde olgunluğun göstergesidir.

39) Bir web uygulamasının performansını veya kullanılabilirliğini iyileştirdiğiniz bir durumu açıklayın.

Örnek davranışsal yanıt:

Önceki projemde, kontrol panelimiz mobil cihazlarda düşük performans gösteriyordu. Chrome Lighthouse ile denetim yaptıktan sonra, optimize edilmemiş görseller ve React'te aşırı yeniden oluşturma işlemleri olduğunu keşfettim. Bunun üzerine bazı çözümler geliştirdim. yavaş yüklenme, hafızaya alma, ve kod bölmeSayfa yükleme süresi 6 saniyeden 1.8 saniyeye düştü ve Lighthouse Performans puanımız 52'den 92'ye yükseldi.

Ek olarak, ARIA etiketlerinin uygulanması erişilebilirlik uyumluluğunu (WCAG 2.1) artırdı. Bu bütünsel optimizasyon, kullanıcı deneyimini iyileştirdi ve hemen çıkma oranını %25 azalttı.

Mülakatçılar somut ölçütleri ve problem çözme becerilerini takdir ederler.

40) Bir ön uç geliştirici için hangi sosyal beceriler önemlidir?

Teknik yetkinlik önemli olsa da, işverenler kişilerarası ve organizasyonel becerilere de aynı derecede değer vermektedir.

Temel iletişim becerileri:

  • İşbirliği: Tasarımcılar, kalite kontrol ve arka uç geliştirme ekipleriyle birlikte çalışmak.
  • İletişim: Teknik dili, teknik olmayan paydaşlar için anlaşılır hale getirmek.
  • Detaylara dikkat: Piksel hassasiyetinde uygulama ve erişilebilirlik bilinci.
  • Adaptasyon: Gelişen framework'leri öğrenmek (React → Next.js → Solid).
  • Zaman yönetimi: Hızlı prototiplemenin dengelenmesiping Üretim istikrarı ile.
  • Sorun çözme zihniyeti: Karmaşık kullanıcı arayüzü veya API sorunlarını verimli bir şekilde giderme.

Örnek: Kullanıcı deneyimi tasarımı ve teknik uygulanabilirlik arasındaki dengeyi açıklayabilen bir ön uç geliştirici, ekip verimliliğini ve paydaş güvenini güçlendirir.

🔍 Gerçek Dünya Senaryoları ve Stratejik Yanıtlarla En Sık Sorulan Ön Uç Geliştirici Mülakat Soruları

1) Web uygulamalarınızın farklı cihazlarda ve ekran boyutlarında duyarlı olmasını nasıl sağlıyorsunuz?

Adaydan beklenenler: Mülakatçı, duyarlı tasarım ilkelerine dair anlayışınızı ve cihazlar arasında tutarlı kullanıcı deneyimleri sunma yeteneğinizi değerlendirmek istiyor.

Örnek cevap: "Önceki görevimde, mobil öncelikli bir yaklaşımla ve esnek ızgaralarla hızlı yanıt vermeyi sağladım; bu tema birçok projemde de karşımıza çıkıyor." React JS mülakat soruları Uyarlanabilir bileşen tasarımı hakkında bilgi sahibiydim. Düzenleri düzenli olarak birden fazla cihazda ve tarayıcı geliştirici araçlarında test ederek tutarlı davranış ve kullanılabilirlik sağladım.”

2) Anlamsal HTML ile anlamsal olmayan HTML arasındaki farkı ve bunun neden önemli olduğunu açıklayabilir misiniz?

Adaydan beklenenler: Mülakatçı, web standartları ve erişilebilirlik en iyi uygulamalarına ilişkin temel bilginizi değerlendiriyor.

Örnek cevap: “Semantik HTML, içerik yapısını tanımlamak için başlık, makale ve altbilgi gibi anlamlı etiketler kullanırken, semantik olmayan HTML, div ve span gibi genel etiketlere dayanır. Semantik HTML, erişilebilirliği, SEO'yu ve sürdürülebilirliği iyileştirerek uygulamaların kullanıcılar ve geliştiriciler tarafından daha kolay anlaşılmasını sağlar.”

3) Tasarımcılar veya arka uç geliştiricilerle yakın işbirliği yapmanız gereken bir durumu anlatın.

Adaydan beklenenler: Mülakatı yapan kişi, iletişim becerilerinizi ve farklı departmanlarla iş birliği yapabilme yeteneğinizi anlamak istiyor.

Örnek cevap: “Önceki görevimde, sprint planlaması ve günlük toplantılar sırasında tasarımcılar ve arka uç geliştiricilerle yakın işbirliği içinde çalıştım. Tasarım amacını erken aşamada netleştirdim ve uygulanabilirlik konusunda geri bildirim sağladım; bu da yeniden çalışma ihtiyacını azaltmamıza ve özellikleri daha verimli bir şekilde sunmamıza yardımcı oldu.”

4) Üretim ortamında kullanılan bir uygulamada ön uç performansını nasıl optimize edersiniz?

Adaydan beklenenler: Mülakatçı, performans optimizasyonu ve kullanıcı deneyimi üzerindeki etki konusundaki bilginizi test ediyor.

Örnek cevap: “Kod bölme, görüntü optimizasyonu ve tembel yükleme yoluyla varlık boyutlarını en aza indirmeye odaklanıyorum. Ayrıca gereksiz yeniden oluşturmaları azaltıyor ve daha hızlı yükleme süreleri ve daha sorunsuz etkileşimler sağlamak için tarayıcı önbelleklemesini kullanıyorum.”

5) Ön uçta karşılaştığınız zorlu bir hatayı ve nasıl çözdüğünüzü anlatın.

Adaydan beklenenler: Mülakatçı, problem çözme yaklaşımınızı ve azminizi değerlendirmek istiyor.

Örnek cevap: “Önceki işimde, çakışan CSS özgüllüğünden kaynaklanan aralıklı bir düzen sorunuyla karşılaştım. Sorunu tarayıcı inceleme araçlarını kullanarak tespit ettim, stilleri daha anlaşılır hale getirmek için yeniden düzenledim ve gelecekte benzer sorunların yaşanmasını önlemek için dokümantasyon ekledim.”

6) Geliştirdiğiniz uygulamalarda erişilebilirliği nasıl sağlıyorsunuz?

Adaydan beklenenler: Mülakatçı, kapsayıcı tasarım bilincini ve erişilebilirlik standartlarına uyumu arıyor.

Örnek cevap: “Semantik HTML, uygun ARIA öznitelikleri ve yeterli renk kontrastı kullanarak erişilebilirliği sağlıyorum. Ayrıca, tüm kullanıcıların uygulamayla etkili bir şekilde etkileşim kurabildiğini doğrulamak için klavye navigasyonu ve ekran okuyucularla testler yapıyorum.”

7) Kodunuzla ilgili eleştirel geri bildirimleri nasıl ele alıyorsunuz?

Adaydan beklenenler: Mülakatçı, geri bildirime açık oluşunuzu ve gelişim odaklı zihniyetinizi anlamak istiyor.

Örnek cevap: “Eleştirel geri bildirimleri iyileştirme fırsatı olarak görüyorum. Dikkatlice dinliyorum, gerekirse açıklayıcı sorular soruyorum ve kod kalitesini artırmak ve ekip standartlarına uyum sağlamak için önerileri özenle uyguluyorum.”

8) Kaliteden ödün vermeden sıkı bir teslim tarihine uymak zorunda kaldığınız bir durumu açıklayın.

Adaydan beklenenler: Mülakatçı, zaman yönetimi ve önceliklendirme becerilerinizi değerlendiriyor.

Örnek cevap: “Önceki görevimde, öncelikle temel işlevselliğe öncelik verdim ve gereksiz geliştirmeleri erteledim. Paydaşlarla ilerlemeyi şeffaf bir şekilde paylaştım ve kaliteyi feda etmeden son teslim tarihine yetişmek için temiz, bakımı kolay koda odaklandım.”

9) Ön uç geliştirme trendleri ve en iyi uygulamalarıyla nasıl güncel kalıyorsunuz?

Adaydan beklenenler: Mülakatçı, sürekli öğrenmeye olan bağlılığınızı değerlendirmek istiyor.

Örnek cevap: “Teknik blogları okuyarak, sektör liderlerini takip ederek ve kişisel projelerimde yeni araçlar deneyerek güncel kalıyorum. Bu sürekli öğrenme, çalışmalarıma modern ve etkili çözümler getirmeme yardımcı oluyor.”

10) Gereksinimler belirsiz veya sürekli değişiyorsa, yeni bir özellik geliştirmeye nasıl yaklaşırsınız?

Adaydan beklenenler: Mülakatçı, belirsiz durumlarda uyum sağlama ve karar verme yeteneğinizi test ediyor.

Örnek cevap: “Öncelikle paydaşlarla varsayımları netleştiriyor ve özelliği daha küçük, esnek bileşenlere ayırıyorum. Geri bildirimlere dayanarak yinelemeler yapıyorum ve değişen gereksinimlere paralel olarak çözümün gelişmesini sağlayarak uyum sağlamaya devam ediyorum.”

Bu yazıyı şu şekilde özetleyin: