Frontend

Comment résoudre le problème des requêtes de données redondantes côté client, lorsque les données ont déjà été chargées sur le serveur via SSR?

Si vous aviez carte blanche, quelle forme idéale créeriez-vous ? Quelles approches, technologies et méthodes utiliseriez-vous (validation, gestion des erreurs, UX, DX) ?

Qu'est-ce qui a été utilisé pour travailler avec des formulaires multidimensionnels, pour la validation, quels problèmes ont été rencontrés, comment ont-ils été testés?

Avec quels frameworks ou outils travailles-tu ? Utilises-tu des outils d'IA dans ton travail ?

Il y a un lecteur sur la page. Il faut faire en sorte que lorsque l'on appuie sur arrêter dans un onglet, la lecture s'arrête également dans un autre onglet. Comment réaliserais-tu la communication entre les onglets?

Comment mettre en cache les données sur le serveur pour accélérer le chargement des utilisateurs?

#Formulaire d'inscription React 1. Expliquez comment fonctionne StateProvider, partagez vos pensées avec l'intervieweur. 2. Regardez /src/api/mock, expliquez comment cela fonctionne. 3. Vérifiez la couleur du SubmitButton et corrigez-la. 4. Implémentez la validation du formulaire client dans le composant Signup. (\*) Gardez à l'esprit la tâche numéro 9. Règles : - Les champs Nom d'utilisateur, Email, Mot de passe et Répéter le mot de passe doivent comporter au moins 6 caractères ; - Le mot de passe doit correspondre à la répétition ; - La validation doit être effectuée lors du clic sur le bouton "SignUp" ; - Les champs avec des valeurs invalides doivent être marqués (props error et helperText) ; 6. La réponse de l'API peut contenir une erreur qui doit être affichée à l'utilisateur près du champ correspondant. 7. Assurez-vous que le composant UserName affiche le nouveau nom d'utilisateur après une soumission réussie. 8. Implémentez le nouveau composant SignupSuccess. Il doit être affiché à la place du formulaire d'inscription. 9. Implémentez la validation côté serveur pour les champs appropriés. --- Code de 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( `Le nom d'utilisateur "${userName}" est déjà pris. Veuillez en essayer un autre.` ) ); } }, 500); }); }, }; export default api; ```

Comment fonctionne la virtualisation de la liste ? Comment cela est-il réalisé techniquement via JavaScript ?

Implémentez la validation côté serveur pour les champs correspondants.

Implémentez la fonction promiseWithResolver (promesse différée), qui renvoie un objet avec les champs resolve et promise.

Implémentez la typage TypeScript pour la fonction customMap, qui prend un tableau de n'importe quel type et une fonction de transformation qui retourne un autre type. La fonction de transformation doit accepter trois arguments (comme le callback dans Array.map).

Nous avons une grande interface dans un monorepo, sur laquelle travaillent plusieurs équipes en même temps. Nous ne pouvons pas passer aux micro-frontend. Comment minimiser les risques que différentes équipes affectent le travail des autres?

Que fais-tu généralement si tu sens que le développement est en cours et que tu es un peu en retard par rapport aux délais ? Il y a une date de sortie, mais tu comprends que tu ne pourras pas finir la tâche à temps.

Comment apprends-tu de nouvelles choses sur la programmation et qu'est-ce qui t'a marqué récemment?

Comment les versions étaient-elles livrées, testées, à quelle fréquence sortaient-elles?

Vous avez mentionné Docker, CI/CD, GitHub Actions, GitLab — pouvez-vous préciser ce que vous faisiez exactement, quels pipelines, ce qu'il y avait dans les conteneurs ?

Comment échangeait-on les fichiers dans le chat : simplement par une requête POST ou y avait-il de gros fichiers ?

Créez le panneau STOP (cercle rouge avec une bande blanche et une double bordure) en utilisant uniquement un div et CSS (les pseudo-éléments sont autorisés).

const customMap = (array, transform) => { // quelque chose comme array.map(transform); }; const stringResults = customMap([1, 2, 3], item => item.toString()); const lengths = customMap(["bonjour", "monde"], item => item.length);

As-tu déjà travaillé avec Lighthouse ? Imagine qu'on te confie la tâche d'améliorer la métrique FCP (First Contentful Paint). Quelles idées te viennent à l'esprit ?