[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"me":3,"catalog:tr:frontend\u002Fvue-router-state-management":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","","vue-router-state-management","Vue Router State Management","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,90,93,96,99,102,105,108,111,114,117,120,123,126,129,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":88,"name":89,"count":11},"rendering-reactivity","Rendering Reactivity",{"key":91,"name":92,"count":11},"state-management","State Management",{"key":94,"name":95,"count":11},"testing","Testing",{"key":97,"name":98,"count":11},"typescript-advanced-types","Typescript Advanced Types",{"key":100,"name":101,"count":11},"typescript-generics","Typescript Generics",{"key":103,"name":104,"count":11},"typescript-modules-declarations","Typescript Modules Declarations",{"key":106,"name":107,"count":11},"typescript-narrowing-control-flow","Typescript Narrowing Control Flow",{"key":109,"name":110,"count":11},"typescript-tooling-config","Typescript Tooling Config",{"key":112,"name":113,"count":11},"typescript-type-fundamentals","Typescript Type Fundamentals",{"key":115,"name":116,"count":11},"vue-components-props","Vue Components Props",{"key":118,"name":119,"count":11},"vue-composition-api","Vue Composition Api",{"key":121,"name":122,"count":11},"vue-directives-templates","Vue Directives Templates",{"key":124,"name":125,"count":11},"vue-performance-testing","Vue Performance Testing",{"key":127,"name":128,"count":11},"vue-reactivity-system","Vue Reactivity System",{"key":8,"name":9,"count":11},{"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,195,209,222],{"id":152,"topic":9,"difficulty":153,"body":154,"options":155,"correct_key":160,"explanation":168},"019f7766-3002-7705-adcc-e5a44046846c",1,"Vue Router kurulumunda `\u003Crouter-view \u002F>` ne yapar?",[156,159,162,165],{"key":157,"text":158},"a","Route yapılandırmasından oluşturulan bir navigasyon menüsü render eder",{"key":160,"text":161},"b","Mevcut route'un eşleştiği component'i render eder",{"key":163,"text":164},"c","Kayıtlı tüm route'ların component'lerini aynı anda render eder",{"key":166,"text":167},"d","Yalnızca kök `App.vue` içinde render edilebilir, başka yerde olmaz","`\u003Crouter-view \u002F>`, mevcut URL'nin router yapılandırmasına göre eşleştiği component'i render eden bir yer tutucudur. İç içe route'lar için iç içe geçebilir ve birden fazla kez görünebilir (named view), ama temel işi her zaman 'aktif route'un component'ini göster'tir.",{"id":170,"topic":9,"difficulty":153,"body":171,"options":172,"correct_key":163,"explanation":181},"019f7766-3002-7ea4-96c3-01ed9c46b1c7","```javascript\n\u002F\u002F router config\n{ path: '\u002Fuser\u002F:id', component: UserView }\n```\n```vue\n\u003Cscript setup>\nimport { useRoute } from 'vue-router'\nconst route = useRoute()\nconsole.log(route.params.id)\n\u003C\u002Fscript>\n```\nURL `\u002Fuser\u002F42` olduğunda bu ne loglar?",[173,175,177,179],{"key":157,"text":174},"`undefined`, çünkü `params` yalnızca `useRouter` ile çalışır",{"key":160,"text":176},"Tam yol string'i `\u002Fuser\u002F42`",{"key":163,"text":178},"`\"42\"` string'i",{"key":166,"text":180},"42'ye resolve olan bir `Promise`","`useRoute()` mevcut route nesnesini döner; `route.params`, path'ten eşleşen dinamik segmentleri, route yapılandırmasında verilen isimle (`:id`) tutar. Tekrarlanmayan bu `id` parametresi bir string'dir, bu yüzden `route.params.id` bir sayı değil `\"42\"`'dir.",{"id":183,"topic":9,"difficulty":153,"body":184,"options":185,"correct_key":157,"explanation":194},"019f7766-3003-76a6-9365-a16d9bcf6b65","`router.push('\u002Fabout')` ile `\u003Crouter-link to=\"\u002Fabout\">` arasındaki temel fark nedir?",[186,188,190,192],{"key":157,"text":187},"`router-link` tıklanabilir bir `\u003Ca>` elemanı render eder; `router.push` aynı navigasyonun kod içinden programatik olarak tetiklenmiş halidir",{"key":160,"text":189},"`router.push` tüm sayfayı yeniden yükler, `router-link` yüklemez",{"key":163,"text":191},"`router-link` yalnızca `\u003Ctemplate>` içinde çalışır, bu yüzden `router.push` olmadan hiç navigasyon yapamaz",{"key":166,"text":193},"Tamamen ilgisiz şeyler yaparlar — biri URL'yi değiştirir, diğeri component state'ini değiştirir","İkisi de sonuçta router'ın navigasyon mantığını çağırır; `\u003Crouter-link>` navigasyon yapılabilir bir anchor render etmenin bildirimsel, template-dostu yoludur, `router.push()` ise aynı türde navigasyonu JavaScript'ten (örn. bir form submit'inden sonra) tetiklemenin buyuru (imperative) API'sidir.",{"id":196,"topic":9,"difficulty":197,"body":198,"options":199,"correct_key":160,"explanation":208},"019f7766-3003-7d63-91fc-2944c086d615",2,"```javascript\nconst routes = [\n  { path: '\u002Fproducts', name: 'products', component: ProductList },\n]\nrouter.push({ name: 'products' })\n```\nBu çağrı ne yapar?",[200,202,204,206],{"key":157,"text":201},"Hata fırlatır, çünkü `push` string path bekler, obje değil",{"key":160,"text":203},"Eşleşen `name`'e sahip route'u çözerek `\u002Fproducts`'a navigasyon yapar",{"key":163,"text":205},"Literal olarak `\u002F{ name: 'products' }` adlı bir route'a navigasyon yapar",{"key":166,"text":207},"Sadece URL'yi günceller, eşleşen component'i render etmez","`router.push`, ya bir path string ya da bir location objesi kabul eder. `{ name: 'products' }` verildiğinde router, `name`'i eşleşen route'u bulup çözümlenmiş path'ine navigasyon yapar — bu standart 'named route' navigasyon kalıbıdır, navigasyon kodunu literal URL string'inden ayırdığı için faydalıdır.",{"id":210,"topic":9,"difficulty":197,"body":211,"options":212,"correct_key":166,"explanation":221},"019f7766-3006-7b69-a38a-4fc6c9ad3bbd","`router.beforeEach((to, from, next) => { ... })`'ın amacı nedir?",[213,215,217,219],{"key":157,"text":214},"Her route değişikliğinden sonra çalışıp geride kalan DOM elemanlarını temizler",{"key":160,"text":216},"Yalnızca bir kez, uygulama ilk mount olduğunda çalışır",{"key":163,"text":218},"`\u003Crouter-view>`'ı özel render mantığıyla değiştirir",{"key":166,"text":220},"Her navigasyondan önce çalışır, seni onu inceleme\u002Fyönlendirme\u002Fiptal etme imkanı verir (örn. auth kontrolü için)","Global bir `beforeEach` guard'ı, her navigasyon tamamlanmadan önce tetiklenir. 'Kullanıcı kimlik doğrulaması yapmış mı' gibi çapraz-kesen kontroller için standart yerdir — guard, devam etmek için `next()`, iptal etmek için `next(false)`, ya da yönlendirmek için `next('\u002Flogin')` çağırabilir.",{"id":223,"topic":9,"difficulty":197,"body":224,"options":225,"correct_key":163,"explanation":234},"019f7766-3007-7227-9ab4-fdabd8d05e3e","```javascript\n\u002F\u002F pinia store\nimport { defineStore } from 'pinia'\n\nexport const useCounterStore = defineStore('counter', {\n  state: () => ({ count: 0 }),\n  actions: {\n    increment() { this.count++ }\n  }\n})\n```\n`state` seçeneği ne olmalı ve neden?",[226,228,230,232],{"key":157,"text":227},"Düz bir obje literal `{ count: 0 }`, böylece Pinia onu değişmezlik için dondurabilir",{"key":160,"text":229},"`async` bir fonksiyon, çünkü state her zaman sunucudan çekilir",{"key":163,"text":231},"Başlangıç state objesini döndüren bir fonksiyon, böylece her Pinia\u002Fstore örneği yeni bir state objesiyle başlar",{"key":166,"text":233},"Bir `computed()` çağrısı, çünkü state başka reaktif kaynaklardan türetilmek zorundadır","Pinia'nın `state` seçeneği düz bir obje değil, bir factory fonksiyonu (`() => ({...})`) olmalıdır — bu, Vue component'lerinin `data()`'yı nasıl tanımladığını yansıtır. Factory, her Pinia\u002Fstore örneğine yeni bir başlangıç state objesi verir; bu, her SSR isteği için yeni bir Pinia örneği oluşturulduğunda özellikle önemlidir. Aynı Pinia örneğinde aynı store'u kullanan component'ler ise o store'un state'ini bilinçli olarak paylaşır.",{"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":197,"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]