[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"me":3,"catalog:tr:frontend\u002Frendering-reactivity":4,"config":235},null,{"field_key":5,"field_name":6,"seniority":7,"topic_key":8,"topic_name":9,"spec_key":7,"spec_name":7,"locale":10,"cell_total":11,"field_total":12,"seniorities":13,"topics":17,"specs":133,"samples":150},"frontend","Frontend","","rendering-reactivity","Rendering Reactivity","tr",75,2925,[14,15,16],"junior","mid","senior",[18,21,24,27,30,33,36,39,42,45,48,51,54,57,60,63,66,69,72,75,78,81,84,87,88,91,94,97,100,103,106,109,112,115,118,121,124,127,130],{"key":19,"name":20,"count":11},"accessibility","Accessibility",{"key":22,"name":23,"count":11},"angular-change-detection","Angular Change Detection",{"key":25,"name":26,"count":11},"angular-components-lifecycle","Angular Components Lifecycle",{"key":28,"name":29,"count":11},"angular-dependency-injection","Angular Dependency Injection",{"key":31,"name":32,"count":11},"angular-directives-pipes","Angular Directives Pipes",{"key":34,"name":35,"count":11},"angular-router-forms","Angular Router Forms",{"key":37,"name":38,"count":11},"angular-testing-performance","Angular Testing Performance",{"key":40,"name":41,"count":11},"css-layout","Css Layout",{"key":43,"name":44,"count":11},"dom-browser-apis","Dom Browser Apis",{"key":46,"name":47,"count":11},"javascript-async-concurrency","Javascript Async Concurrency",{"key":49,"name":50,"count":11},"javascript-language","Javascript Language",{"key":52,"name":53,"count":11},"javascript-memory-performance","Javascript Memory Performance",{"key":55,"name":56,"count":11},"javascript-modules-bundling","Javascript Modules Bundling",{"key":58,"name":59,"count":11},"javascript-prototypes-oop","Javascript Prototypes Oop",{"key":61,"name":62,"count":11},"javascript-runtime-apis","Javascript Runtime Apis",{"key":64,"name":65,"count":11},"javascript-testing-tooling","Javascript Testing Tooling",{"key":67,"name":68,"count":11},"performance","Performance",{"key":70,"name":71,"count":11},"react-components-jsx","React Components Jsx",{"key":73,"name":74,"count":11},"react-context-state","React Context State",{"key":76,"name":77,"count":11},"react-effects-lifecycle","React Effects Lifecycle",{"key":79,"name":80,"count":11},"react-forms-suspense","React Forms Suspense",{"key":82,"name":83,"count":11},"react-hooks-state","React Hooks State",{"key":85,"name":86,"count":11},"react-rendering-performance","React Rendering Performance",{"key":8,"name":9,"count":11},{"key":89,"name":90,"count":11},"state-management","State Management",{"key":92,"name":93,"count":11},"testing","Testing",{"key":95,"name":96,"count":11},"typescript-advanced-types","Typescript Advanced Types",{"key":98,"name":99,"count":11},"typescript-generics","Typescript Generics",{"key":101,"name":102,"count":11},"typescript-modules-declarations","Typescript Modules Declarations",{"key":104,"name":105,"count":11},"typescript-narrowing-control-flow","Typescript Narrowing Control Flow",{"key":107,"name":108,"count":11},"typescript-tooling-config","Typescript Tooling Config",{"key":110,"name":111,"count":11},"typescript-type-fundamentals","Typescript Type Fundamentals",{"key":113,"name":114,"count":11},"vue-components-props","Vue Components Props",{"key":116,"name":117,"count":11},"vue-composition-api","Vue Composition Api",{"key":119,"name":120,"count":11},"vue-directives-templates","Vue Directives Templates",{"key":122,"name":123,"count":11},"vue-performance-testing","Vue Performance Testing",{"key":125,"name":126,"count":11},"vue-reactivity-system","Vue Reactivity System",{"key":128,"name":129,"count":11},"vue-router-state-management","Vue Router State Management",{"key":131,"name":132,"count":11},"web-security","Web Security",[134,138,141,144,147],{"key":135,"name":136,"count":137},"angular","Angular",450,{"key":139,"name":140,"count":137},"javascript","JavaScript",{"key":142,"name":143,"count":137},"react","React",{"key":145,"name":146,"count":137},"typescript","TypeScript",{"key":148,"name":149,"count":137},"vue","Vue",[151,169,182,196,209,222],{"id":152,"topic":9,"difficulty":153,"body":154,"options":155,"correct_key":163,"explanation":168},"019f56bb-ba8d-7256-868f-e807a3b03814",1,"UI geliştirmede bir *component* nedir?",[156,159,162,165],{"key":157,"text":158},"a","Uygulamanın her sayfasındaki renk ve boşlukları kontrol eden bir CSS stylesheet",{"key":160,"text":161},"b","Tüm uygulama başlarken tam olarak bir kez çalışan global bir fonksiyon",{"key":163,"text":164},"c","Yeniden kullanılabilir, kendi içinde bütün, birleştirilerek ekran kuran bir UI parçası",{"key":166,"text":167},"d","Belirli bir ekranın göstereceği satırları tutan bir veritabanı tablosu","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.",{"id":170,"topic":9,"difficulty":153,"body":171,"options":172,"correct_key":157,"explanation":181},"019f56bb-ba8d-79a7-bcf2-58ce6a503554","UI kurmakta *declarative* (bildirimsel) yaklaşımı en iyi hangisi anlatır?",[173,175,177,179],{"key":157,"text":174},"Verilen bir state için UI'nin nasıl görünmesi gerektiğini tanımlarsın; sistem DOM'u buna uydurur",{"key":160,"text":176},"Tarayıcının kaydedip sonra otomatik tekrar oynattığı adım adım DOM komutları yazarsın",{"key":163,"text":178},"UI'yi tamamen CSS ile şekillendirir, hiç JavaScript yazmaktan kasıtlı olarak kaçınırsın",{"key":166,"text":180},"Veri her değiştiğinde her bir DOM node'unu kendin tek tek elle okuyup güncellersin","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.",{"id":183,"topic":9,"difficulty":184,"body":185,"options":186,"correct_key":166,"explanation":195},"019f56bb-ba8d-7f3f-a11a-978b34febf75",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?",[187,189,191,193],{"key":157,"text":188},"Hem etiket hem açık\u002Fkapalı değeri state'tir, çünkü ikisini de gösteren şey component'in kendisidir",{"key":160,"text":190},"Etiket state'tir, açık\u002Fkapalı değeri ise parent'tan aşağı geçirilen bir prop'tur",{"key":163,"text":192},"İkisi de prop'tur, çünkü bir component render ettiği verinin hiçbirine sahip olmaz",{"key":166,"text":194},"Etiket dışarıdan verilen bir prop, açık\u002Fkapalı değeri ise component'in kendi state'idir","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\u002Fkapalı durumu içseldir yani state'tir. (c) yanlıştır çünkü component'ler çok sık kendi local state'ine sahip olur.",{"id":197,"topic":9,"difficulty":184,"body":198,"options":199,"correct_key":160,"explanation":208},"019f56bb-ba8e-76a9-93b4-98080ae3701e","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ı?",[200,202,204,206],{"key":157,"text":201},"Child, referansı zaten elinde olduğu için aldığı array'den item'ı doğrudan siler",{"key":160,"text":203},"Child parent'a haber verir, parent listeyi günceller ve güncel liste tekrar child'a aşağı akar",{"key":163,"text":205},"Child listenin kendi özel kopyasını tutup onu düzenler, parent'ın versiyonunu tamamen yok sayar",{"key":166,"text":207},"Child parent'ın içine uzanıp parent'ın liste değişkenini doğrudan yeniden atar","Tek yönlü flow'da veri prop'larla aşağı iner, değişiklikler event\u002Fcallback 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.",{"id":210,"topic":9,"difficulty":153,"body":211,"options":212,"correct_key":166,"explanation":221},"019f56bb-ba8e-7e06-bf34-d765b4e4a81f","Modern UI sık sık 'UI, state'in bir fonksiyonudur' fikriyle özetlenir. Bu ne demektir?",[213,215,217,219],{"key":157,"text":214},"UI yalnızca fonksiyonların içinde yazılabilir, asla class veya obje kullanılamaz",{"key":160,"text":216},"Uygulamadaki her fonksiyon, arayüzün bir parçasını döndürmek zorundadır",{"key":163,"text":218},"Uygulama, tek sorumluluğu state'i sunucudan çekmek olan tam olarak bir fonksiyon barındırır",{"key":166,"text":220},"Belirli bir state için render edilen UI o state ile belirlenir — aynı state aynı UI'yi üretir","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.",{"id":223,"topic":9,"difficulty":184,"body":224,"options":225,"correct_key":163,"explanation":234},"019f56bb-ba8f-7516-9da7-6b99d258a770","```\nlet count = 0\n\nfunction render() {\n  screen.innerHTML = `\u003Cp>Count: ${count}\u003C\u002Fp>`\n}\n\nfunction increment() {\n  count = count + 1\n}\n```\n`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?",[226,228,230,232],{"key":157,"text":227},"`count` local bir değişken; `increment()` sonuçta `render()`'ın okuduğundan farklı bir kopyayı günceller",{"key":160,"text":229},"`innerHTML` ilk değerini cache'ler ve ilk atamadan sonra değişmeyi reddeder",{"key":163,"text":231},"Veri değiştikten sonra `render()`'ı yeniden çalıştıran hiçbir şey yok, bu yüzden metin hiç yeniden üretilmez",{"key":166,"text":233},"Template string'ler yalnızca bir kez değerlendirilir, `${count}` ilk değerinde donar","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.",{"fields":236,"seniorities":410,"interview_shapes":411,"locales":416,"oauth":418,"question_count":421,"coach_enabled":422,"jd_match_enabled":422},[237,262,270,287,311,324,343,362,384,391,397,404],{"key":238,"name_tr":239,"name_en":239,"sort":153,"specializations":240},"backend","Backend",[241,244,247,250,253,256,259],{"key":242,"name":243,"field":238},"general","Genel",{"key":245,"name":246,"field":238},"go","Go",{"key":248,"name":249,"field":238},"python","Python",{"key":251,"name":252,"field":238},"java","Java",{"key":254,"name":255,"field":238},"csharp","C#\u002F.NET",{"key":257,"name":258,"field":238},"nodejs","Node.js",{"key":260,"name":261,"field":238},"php","PHP",{"key":5,"name_tr":6,"name_en":6,"sort":184,"specializations":263},[264,265,266,267,268,269],{"key":242,"name":243,"field":5},{"key":139,"name":140,"field":5},{"key":145,"name":146,"field":5},{"key":142,"name":143,"field":5},{"key":148,"name":149,"field":5},{"key":135,"name":136,"field":5},{"key":271,"name_tr":272,"name_en":272,"sort":273,"specializations":274},"fullstack","Fullstack",3,[275,276,277,278,279,280,281,282,283,284,285,286],{"key":242,"name":243,"field":271},{"key":245,"name":246,"field":238},{"key":248,"name":249,"field":238},{"key":251,"name":252,"field":238},{"key":254,"name":255,"field":238},{"key":257,"name":258,"field":238},{"key":260,"name":261,"field":238},{"key":139,"name":140,"field":5},{"key":145,"name":146,"field":5},{"key":142,"name":143,"field":5},{"key":148,"name":149,"field":5},{"key":135,"name":136,"field":5},{"key":288,"name_tr":289,"name_en":289,"sort":290,"specializations":291},"devops-cloud","DevOps \u002F Cloud",4,[292,293,296,299,302,305,308],{"key":242,"name":243,"field":288},{"key":294,"name":295,"field":288},"aws","AWS",{"key":297,"name":298,"field":288},"gcp","GCP",{"key":300,"name":301,"field":288},"azure","Azure",{"key":303,"name":304,"field":288},"kubernetes","Kubernetes",{"key":306,"name":307,"field":288},"terraform","Terraform",{"key":309,"name":310,"field":288},"linux","Linux",{"key":312,"name_tr":313,"name_en":313,"sort":314,"specializations":315},"ai-engineer","AI Engineer",5,[316,317,318,321],{"key":242,"name":243,"field":312},{"key":248,"name":249,"field":312},{"key":319,"name":320,"field":312},"llm-rag","LLM\u002FRAG",{"key":322,"name":323,"field":312},"mlops","MLOps",{"key":325,"name_tr":326,"name_en":327,"sort":328,"specializations":329},"database","Veritabanı","Database",6,[330,331,334,337,340],{"key":242,"name":243,"field":325},{"key":332,"name":333,"field":325},"postgresql","PostgreSQL",{"key":335,"name":336,"field":325},"mysql","MySQL",{"key":338,"name":339,"field":325},"mongodb","MongoDB",{"key":341,"name":342,"field":325},"redis","Redis",{"key":344,"name_tr":345,"name_en":346,"sort":347,"specializations":348},"mobile","Mobil","Mobile",7,[349,350,353,356,359],{"key":242,"name":243,"field":344},{"key":351,"name":352,"field":344},"ios-swift","iOS (Swift)",{"key":354,"name":355,"field":344},"android-kotlin","Android (Kotlin)",{"key":357,"name":358,"field":344},"flutter","Flutter",{"key":360,"name":361,"field":344},"react-native","React Native",{"key":363,"name_tr":364,"name_en":365,"sort":366,"specializations":367},"security","Güvenlik","Security",8,[368,369,372,375,378,381],{"key":242,"name":243,"field":363},{"key":370,"name":371,"field":363},"appsec","AppSec",{"key":373,"name":374,"field":363},"offensive-pentest","Offensive \u002F Pentest",{"key":376,"name":377,"field":363},"cloud-security","Cloud Security",{"key":379,"name":380,"field":363},"devsecops","DevSecOps",{"key":382,"name":383,"field":363},"blue-team-incident","Blue Team \u002F Incident",{"key":385,"name_tr":386,"name_en":387,"sort":388,"specializations":389},"qa-test-automation","QA \u002F Test Otomasyonu","QA \u002F Test Automation",9,[390],{"key":242,"name":243,"field":385},{"key":392,"name_tr":393,"name_en":393,"sort":394,"specializations":395},"data-engineer","Data Engineer",10,[396],{"key":242,"name":243,"field":392},{"key":398,"name_tr":399,"name_en":400,"sort":401,"specializations":402},"game-dev","Oyun Geliştirme","Game Development",11,[403],{"key":242,"name":243,"field":398},{"key":405,"name_tr":406,"name_en":406,"sort":407,"specializations":408},"ml-engineer","ML Engineer",12,[409],{"key":242,"name":243,"field":405},[14,15,16],{"junior":412,"mid":414,"senior":415},{"questions":413,"median_sec":3},20,{"questions":413,"median_sec":3},{"questions":413,"median_sec":3},[10,417],"en",[419,420],"google","github",21750,true]