yoklateknik mülakat
GelişimGeçmiş

Frontend Rendering Reactivity Mülakat Soruları

75 doğrulanmış Frontend Rendering Reactivity mülakat sorusu — cevaplarıyla çöz, açıklamalarıyla öğren, gerçek simülasyonda kendini test et.

Gerçek simülasyonu dene →

Örnek sorular

Rendering ReactivityZorluk 1
UI geliştirmede bir component nedir?
  • aUygulamanın her sayfasındaki renk ve boşlukları kontrol eden bir CSS stylesheet
  • bTüm uygulama başlarken tam olarak bir kez çalışan global bir fonksiyon
  • cYeniden kullanılabilir, kendi içinde bütün, birleştirilerek ekran kuran bir UI parçası✓
  • dBelirli bir ekranın göstereceği satırları tutan bir veritabanı tablosu
Açıklama:Bir component; markup'ı, çoğu zaman kendi logic ve styling'ini de tek bir isimli birime paketler — yeniden kullanıp iç içe koyabildiğin, UI'nin temel yapı taşıdır. (a) component'i styling ile, (d) ise data katmanıyla karıştırır; component veriyi kullanabilir ama onun saklandığı yer değildir.
Rendering ReactivityZorluk 1
UI kurmakta declarative (bildirimsel) yaklaşımı en iyi hangisi anlatır?
  • aVerilen bir state için UI'nin nasıl görünmesi gerektiğini tanımlarsın; sistem DOM'u buna uydurur✓
  • bTarayıcının kaydedip sonra otomatik tekrar oynattığı adım adım DOM komutları yazarsın
  • cUI'yi tamamen CSS ile şekillendirir, hiç JavaScript yazmaktan kasıtlı olarak kaçınırsın
  • dVeri her değiştiğinde her bir DOM node'unu kendin tek tek elle okuyup güncellersin
Açıklama:Declarative UI, hedef state'i ifade edip ("şu an şöyle görünmeli") gerçek DOM'u framework'e ya da render fonksiyonuna eşitletmen demektir. (d) tam tersini, imperative stili tarif eder — her DOM mutation'ını elle yazarsın; (b) declarative render'ın gerçek çalışma modeli değildir.
Rendering ReactivityZorluk 2
Bir Toggle component'i kuruyorsun. Üzerinde görünen metin etiketini toggle'ı kullanan ekran veriyor; açık mı kapalı mı olduğunu ise toggle kendisi tutuyor. Bu iki veri nasıl sınıflandırılır?
  • aHem etiket hem açık/kapalı değeri state'tir, çünkü ikisini de gösteren şey component'in kendisidir
  • bEtiket state'tir, açık/kapalı değeri ise parent'tan aşağı geçirilen bir prop'tur
  • cİkisi de prop'tur, çünkü bir component render ettiği verinin hiçbirine sahip olmaz
  • dEtiket dışarıdan verilen bir prop, açık/kapalı değeri ise component'in kendi state'idir✓
Açıklama:Prop, component'e dışarıdan verilen ve parent'ın sahip olduğu girdidir; state ise component'in kendi ömrü boyunca yaratıp kontrol ettiği veridir. Etiket parent'tan gelir (prop), açık/kapalı durumu içseldir yani state'tir. (c) yanlıştır çünkü component'ler çok sık kendi local state'ine sahip olur.
Rendering ReactivityZorluk 2
Bir parent, item listesini child'a aşağı geçiriyor ve child bunlardan birini silmek istiyor. Tek yönlü (unidirectional) data flow'da silme nasıl olmalı?
  • aChild, referansı zaten elinde olduğu için aldığı array'den item'ı doğrudan siler
  • bChild parent'a haber verir, parent listeyi günceller ve güncel liste tekrar child'a aşağı akar✓
  • cChild listenin kendi özel kopyasını tutup onu düzenler, parent'ın versiyonunu tamamen yok sayar
  • dChild parent'ın içine uzanıp parent'ın liste değişkenini doğrudan yeniden atar
Açıklama:Tek yönlü flow'da veri prop'larla aşağı iner, değişiklikler event/callback ile yukarı çıkar; veriyi yalnızca sahibi (parent) değiştirir. (a) child'ın sahibi olmadığı veriyi mutate eder ve single source of truth'u bozar; (c) aynı listenin birbirinden ayrışan iki kopyasını yaratır.
Rendering ReactivityZorluk 1
Modern UI sık sık 'UI, state'in bir fonksiyonudur' fikriyle özetlenir. Bu ne demektir?
  • aUI yalnızca fonksiyonların içinde yazılabilir, asla class veya obje kullanılamaz
  • bUygulamadaki her fonksiyon, arayüzün bir parçasını döndürmek zorundadır
  • cUygulama, tek sorumluluğu state'i sunucudan çekmek olan tam olarak bir fonksiyon barındırır
  • dBelirli bir state için render edilen UI o state ile belirlenir — aynı state aynı UI'yi üretir✓
Açıklama:Slogan, görünümün state'ten türediğini anlatır: state'in çıktıya nasıl eşlendiğini tarif edersin, aynı state hep aynı görünümü verir. Class'tan kaçınmak (a) ya da her fonksiyonun UI döndürmesi (b) ile ilgili değildir; bunlar metaforu birebir kod kuralıyla karıştırır.
Rendering ReactivityZorluk 2
let count = 0

function render() {
  screen.innerHTML = `<p>Count: ${count}</p>`
}

function increment() {
  count = count + 1
}

render() başlangıçta bir kez çağrılıyor. Sonra increment()'i birkaç kez çağırıyorsun ama ekran hâlâ Count: 0 gösteriyor. Neden?
  • acount local bir değişken; increment() sonuçta render()'ın okuduğundan farklı bir kopyayı günceller
  • binnerHTML ilk değerini cache'ler ve ilk atamadan sonra değişmeyi reddeder
  • cVeri değiştikten sonra render()'ı yeniden çalıştıran hiçbir şey yok, bu yüzden metin hiç yeniden üretilmez✓
  • dTemplate string'ler yalnızca bir kez değerlendirilir, ${count} ilk değerinde donar
Açıklama:Düz imperative kodda veriyi güncellemek tek başına DOM'a bir şey yapmaz — yeni değeri yansıtmak için render()'ı tekrar çağırman gerekir. Reactivity'nin kapattığı boşluk tam da budur: reaktif bir sistem, bağımlı olduğu veri değiştiğinde render'ı senin yerine tekrar çalıştırır. innerHTML (b) ve template string'ler (d) her render() koşusunda sorunsuz yeniden değerlendirilir.

Uzmanlığa göre

Angular 450JavaScript 450React 450TypeScript 450Vue 450

Kıdeme göre

Frontend JuniorFrontend MidFrontend Senior

Diğer alanlar

BackendFullstackDevOps / CloudAI EngineerVeritabanıMobilGüvenlikQA / Test OtomasyonuData EngineerOyun GeliştirmeML Engineer

2925 soruluk Frontend bankasında kendini sına.

Mülakata başla