Frontend
import React, { useMemo } from 'react'; import { Button, Table, Tag } from 'antd'; import { useAppDispatch, useAppSelector } from '../hooks/redux'; import { Product } from '../types'; import { deleteProduct } from '../store/productSlice'; const categoryColors: Record<string, string> = { Electronics: 'blue', Accessories: 'green', Tools: 'orange', }; export const ProductList: React.FC = () => { const allProducts = useAppSelector((state) => state.products.items); const products = useMemo(() => [...allProducts], [allProducts]); const dispatch = useAppDispatch(); const handleDelete = (id: string) => { dispatch(deleteProduct(id)); }; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Sales', dataIndex: 'sales', key: 'sales', sorter: (a: Product, b: Product) => a.sales - b.sales, render: (v: number) => v.toLocaleString(), }, { title: 'Category', dataIndex: 'category', key: 'category', render: (category: string) => ( <Tag color={categoryColors[category]}>{category}</Tag> ), }, { title: 'Action', key: 'action', render: (_: any, record: Product) => ( <Button danger onClick={() => handleDelete(record.id)}> Delete </Button> ), }, ]; return <Table dataSource={products} columns={columns} rowKey="id" />; };
Boş zamanlarında ne yapıyorsun?
```javascript const obj = { isim: 'Alex', söyle() { console.info(this.isim); } }; const obj2 = { isim: 'Ivan' } const fn = obj.soyle.bind(obj).bind(obj2); fn(); obj.soyle(); ```
#React kayıt formu 1. StateProvider nasıl çalışır, görüşmeciyle düşüncelerinizi paylaşın. 2. /src/api/mock'a bakın, nasıl çalıştığını açıklayın. 3. SubmitButton rengini kontrol edin ve düzeltin. 4. Signup bileşeninde istemci form doğrulamasını uygulayın. (\*) Görev numarası 9'u aklınızda bulundurun. Kurallar: - Kullanıcı Adı, E-posta, Şifre ve Tekrar Şifre alanları en az 6 karakter olmalı; - Şifre, Tekrar Şifre ile eşleşmeli; - Doğrulama "SignUp" düğmesine tıklandığında yapılmalı; - Geçersiz değerlere sahip alanlar işaretlenmeli (error ve helperText props); 6. API yanıtında kullanıcıya gösterilecek bir hata olabilir. 7. Kullanıcı Adı bileşeninin, başarılı gönderimden sonra yeni kullanıcı adını render ettiğinden emin olun. 8. Yeni SignupSuccess bileşenini uygulayın. Bu, kayıt formunun yerine gösterilmeli. 9. Uygun alanlar için sunucu doğrulaması yapın. --- mock.ts dosyasından kod: ```typescript const fakeResponse = (userName) => ({ code: 200, user: { id: 42, userName, }, }); let a = 0; const api = { '/signup': function (userName: string, email: string, password: string) { a++; return new Promise((resolve, reject) => { setTimeout(() => { if (a % 2 === 0) { return resolve(fakeResponse(userName)); } else { return reject( new Error( `Kullanıcı adı "${userName}" zaten alınmış. Lütfen başka bir tane deneyin.` ) ); } }, 500); }); }, }; export default api; ```
Event Loop'u açıklayabilir misiniz: senkron kod, mikro görevler ve makro görevler hangi sırayla çalışır?
/** * Görev 3: Aşağıdaki fonksiyonu analiz edin ve herhangi bir hatayı düzeltin. TypeScript'te `never` türünün rolünü açıklayın. */ function throwError(): never { throw new Error('Bir hata oluştu'); } /** * Görev 4: Verilen `MaybeProps` türünü, tüm özelliklerini zorunlu hale getirecek şekilde dönüştürün. */ type MaybeProps = { a?: number; b?: string; }; /** * Görev 5: Tek bir `value` özelliği içeren bir genel tür `Container` oluşturun. * `value`'nun türü, `string` veya `number` ile sınırlandırılmalıdır. */ type Container<T> = { value: T; };
URL'deki sorgu parametreleri aracılığıyla giriş bilgisi ve şifre iletiminde hangi güvenlik sorunlarını görüyorsunuz?
React'te key özniteliği ne işe yarar? Eğer key değişirse ne olur?
En çok hangi görevleri yapmaktan hoşlanıyordun?
// ve her değer, bu anahtarla orijinal dizinin tüm öğelerini içeren bir dizi. // Burada kod // Örnek 1 const array1 = [ { id: 1 }, { id: 1 }, { id: 2 } ]; const fn = (item) => item.id; console.log(array1.groupBy(fn)); // { // 1: [{ id: 1 }, { id: 1 }], // 2: [{ id: 2 }] // } // Örnek 2 const array2 = [1, 2, 3]; console.log(array2.groupBy(String));
Sayfa hızlı teslimatı için önbellekleme hakkında daha fazla bilgi ver. İkinci arayüzde (soru ekranı) bir örnek ver.
HTTP protokolünün farklı sürümleri (HTTP/1, HTTP/2, HTTP/3) hakkında bilgin var mı? Aralarındaki fark nedir?
Sanal DOM ile normal DOM arasındaki fark nedir?
ES6'de ortaya çıkan startsWith metodunun polyfill'ini, sadece ES5 olanaklarını kullanarak (let/const, ok fonksiyonları vb. olmadan), prototip kalıtımı aracılığıyla yaz.
Mevcut iş yeriniz ve ne yaptığınız hakkında bana bilgi verin.
React'te props ve state nedir? Aralarındaki fark nedir?
Geliştirmenin içine alınmış olan bir görevin, mevcut sürüme dahil edilmemesi gereken durumlar oldu mu? Bu durumda nasıl hareket ettiniz?
Hangi yardımcı araçları, test araçları, yeniden yapılandırma ve kod inceleme araçları dahil olmak üzere kullanıyorsunuz?
Bir projede zor bir görevi çözme konusunda ilginç bir durumu anlat.
Bir şirket veya proje seçerken sizin için ikna edici bir argüman nedir?