Frontend

Wie man das Problem redundanter Datenanfragen auf dem Client behebt, wenn die Daten bereits über SSR auf dem Server geladen wurden?

Wie optimiert man das Laden von Bildern in Karten, die im Viewport sichtbar sind? Wie löst man das Problem des Race Conditions beim schnellen Wechseln von Inhalten (z.B. YouTube Shorts)?

Was wurde verwendet, um mit mehrdimensionalen Formularen zu arbeiten, für die Validierung, welche Probleme traten auf, wie wurden sie getestet?

Sie haben Docker, CI/CD, GitHub Actions, GitLab erwähnt — können Sie erläutern, was genau Sie gemacht haben, welche Pipelines, was in den Containern war?

Wie kann man Daten auf dem Server zwischenspeichern, um das Laden für Benutzer zu beschleunigen?

Mit welchen Frameworks oder Tools arbeitest du? Verwendest du KI-Tools bei deiner Arbeit?

#React-Anmeldeformular 1. Erklären Sie, wie StateProvider funktioniert, teilen Sie Ihre Gedanken mit dem Interviewer. 2. Schauen Sie sich /src/api/mock an, erklären Sie, wie es funktioniert. 3. Überprüfen Sie die Farbe des SubmitButton und beheben Sie sie. 4. Implementieren Sie die Client-Formularvalidierung im Signup-Komponenten. (\*) Beachten Sie die Aufgaben Nummer 9. Regeln: - Benutzername, E-Mail, Passwort und Wiederholpasswort-Felder sollten mindestens 6 Zeichen lang sein; - Passwort sollte mit Wiederholpasswort übereinstimmen; - Validierung sollte beim Klick auf "SignUp" erfolgen; - Felder mit ungültigen Werten sollten markiert werden (error und helperText props); 6. Die API-Antwort kann einen Fehler enthalten, der dem Benutzer in der Nähe des entsprechenden Feldes angezeigt werden sollte. 7. Stellen Sie sicher, dass das UserName-Komponente den neuen Benutzernamen nach erfolgreicher Übermittlung rendert. 8. Implementieren Sie die neue SignupSuccess-Komponente. Sie sollte anstelle des Anmeldeformulars angezeigt werden. 9. Implementieren Sie serverseitige Validierung für die entsprechenden Felder. --- Code aus mock.ts: ```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( `Benutzername "${userName}" ist bereits vergeben. Bitte versuchen Sie einen anderen.` ) ); } }, 500); }); }, }; export default api; ```

Wie funktioniert die Listenvirtualisierung? Wie wird dies technisch über JavaScript umgesetzt?

Implementieren Sie die serverseitige Validierung für die entsprechenden Felder.

Auf der Seite gibt es einen Player. Es muss so gemacht werden, dass beim Drücken von Stopp in einem Tab die Wiedergabe auch in einem anderen Tab gestoppt wird. Wie würdest du die Kommunikation zwischen den Tabs realisieren?

Implementieren Sie die TypeScript-Typisierung für die Funktion customMap, die ein Array beliebigen Typs und eine Transformationsfunktion akzeptiert, die einen anderen Typ zurückgibt. Die Transformationsfunktion sollte drei Argumente akzeptieren (wie der Callback in Array.map).

Implementieren Sie die Funktion promiseWithResolver (verzögerte Versprechen), die ein Objekt mit den Feldern resolve und promise zurückgibt.

Wie wurden die Releases bereitgestellt, getestet, wie häufig wurden sie veröffentlicht?

Wie erfährst du überhaupt etwas Neues über Programmierung und was ist dir zuletzt im Gedächtnis geblieben?

Wir haben eine sehr große Frontend in einem Monorepo, an dem viele verschiedene Teams gleichzeitig arbeiten. Wir können nicht auf Micro-Frontends umsteigen. Wie können wir das Risiko minimieren, dass verschiedene Teams die Arbeit voneinander beeinflussen?

Gestalte das STOP-Zeichen (ein roter Kreis mit weißem Streifen und doppeltem Rand) nur mit einem div und CSS (Pseudo-Elemente erlaubt).

Was machst du normalerweise, wenn du das Gefühl hast, dass die Entwicklung läuft und du ein bisschen hinter den Fristen bist? Es gibt ein Veröffentlichungsdatum, aber du verstehst, dass du die Aufgabe nicht rechtzeitig abschließen wirst.

#React-Anmeldeformular 1. Erklären Sie, wie StateProvider funktioniert, teilen Sie Ihre Gedanken mit dem Interviewer. 2. Werfen Sie einen Blick auf /src/api/mock, erklären Sie, wie es funktioniert. 3. Überprüfen Sie die Farbe des SubmitButton und beheben Sie sie. 4. Implementieren Sie die Client-Formularvalidierung im Signup-Komponenten. (* ) Beachten Sie die Aufgaben Nummer 9. Regeln: - Benutzername, E-Mail, Passwort, Passwort wiederholen Felder sollten mindestens 6 Zeichen lang sein; - Passwort sollte mit Passwort wiederholen übereinstimmen; - Validierung sollte beim Klick auf "Registrieren" erfolgen; - Felder mit ungültigen Werten sollten markiert werden (error und helperText props); 6. Die API-Antwort kann einen Fehler enthalten, der dem Benutzer in der Nähe des entsprechenden Feldes angezeigt werden sollte. 7. Stellen Sie sicher, dass der UserName-Komponente den neuen Benutzernamen nach erfolgreicher Übermittlung rendert. 8. Implementieren Sie die neue SignupSuccess-Komponente. Sie sollte anstelle des Anmeldeformulars angezeigt werden. 9. Implementieren Sie serverseitige Validierung für die entsprechenden Felder.

Wie wurden Dateien im Chat ausgetauscht — einfach per POST-Anfrage oder gab es große Dateien?

Schauen Sie sich dieses Stück Code an — verstehen Sie, was es tut, und schreiben Sie ein einfaches Beispiel für die Verwendung. Es gibt auch einen ähnlichen Helper in lodash.