Frontend
Έγινε ένα σφάλμα στην παραγωγή, πρέπει να το διορθώσεις άμεσα, αλλά το branch dev έχει ήδη προχωρήσει πολύ με νέες λειτουργίες. Πώς θα ενεργούσες;
Έχετε ποτέ χρειαστεί να συνεργαστείτε με έναν διαχειριστή έργου σε αυστηρά χρονικά πλαίσια; Όταν κάτι πρέπει να γίνει πολύ γρήγορα, αλλά τεχνικά δεν είναι δυνατό να γίνει γρήγορα.
Ποια είναι η διαφορά μεταξύ display: none, visibility: hidden και opacity: 0;
Περιγράψτε τη διαδρομή της εργασίας από την εμφάνισή της στο backlog μέχρι την έξοδό της στην παραγωγή — όλα τα στάδια.
Για ένα τμήμα κώδικα με κλήση συνάρτησης πριν από την ανάθεσή της σε μια μεταβλητή, για παράδειγμα var foo = function () {}, προσδιορίστε το αποτέλεσμα εκτέλεσης και εξηγήστε το hoisting.
Συμφωνείτε με τη θέση ότι ένα καθολικό shared-component, που επαναλαμβάνεται σε διαφορετικά σημεία της εφαρμογής, και ένα βιβλιοθηκικό component, προορισμένο για εισαγωγή σε άλλες εφαρμογές, δεν είναι το ίδιο, και ότι η προσέγγισή τους πρέπει να διαφέρει; Ποια απαιτούμενα θα θέτατε σε ένα βιβλιοθηκικό component σε σύγκριση με ένα shared-component;
#React φόρμα εγγραφής 1. Εξηγήστε πώς λειτουργεί το StateProvider, μοιραστείτε τις σκέψεις σας με τον συνεντευξιαστή. 2. Ρίξτε μια ματιά στο /src/api/mock, εξηγήστε πώς λειτουργεί. 3. Ελέγξτε το χρώμα του SubmitButton και διορθώστε το. 4. Υλοποιήστε την επικύρωση της φόρμας πελάτη στο συστατικό Signup. (\*) Θυμηθείτε την εργασία αριθμός 9. Κανόνες: - Τα πεδία Όνομα χρήστη, Email, Κωδικός και Επανάληψη Κωδικού πρέπει να έχουν τουλάχιστον 6 χαρακτήρες; - Ο Κωδικός πρέπει να ταιριάζει με την Επανάληψη Κωδικού; - Η επικύρωση πρέπει να γίνεται κατά το πάτημα του κουμπιού "SignUp"; - Τα πεδία με μη έγκυρες τιμές πρέπει να σημειώνονται (props error και helperText); 6. Η απάντηση API μπορεί να έχει ένα σφάλμα που πρέπει να εμφανίζεται στον χρήστη κοντά στο αντίστοιχο πεδίο. 7. Βεβαιωθείτε ότι το συστατικό UserName εμφανίζει το νέο όνομα χρήστη μετά από επιτυχημένη υποβολή. 8. Υλοποιήστε το νέο συστατικό SignupSuccess. Θα πρέπει να εμφανίζεται αντί της φόρμας εγγραφής. 9. Υλοποιήστε την επικύρωση διακομιστή για τα κατάλληλα πεδία. --- Κώδικας από 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( `Το όνομα χρήστη "${userName}" είναι ήδη taken. Παρακαλώ δοκιμάστε ένα άλλο.` ) ); } }, 500); }); }, }; export default api; ```
Αυτή η εργασία έμεινε χωρίς σχέδιο ή αργότερα ήρθε ένας σχεδιαστής και τα ξαναέφτιαξε όλα;
Για μια έκφραση με τον τελεστή ||, καθορίστε το αποτέλεσμα. Πώς διαφέρει ο τελεστής || από τον τελεστή ?? και πότε ενεργοποιείται ο ??
Ποιες εργασίες σου άρεσε περισσότερο να εκτελείς;
Έχεις εμπειρία στην επίλυση προβλημάτων απόδοσης στο frontend; Για παράδειγμα, μια αναφορά σφάλματος σχετικά με καθυστερήσεις, ή έχεις παρατηρήσει εσύ ο ίδιος κάποιο πρόβλημα κατά τη διάρκεια της εργασίας. Μπορείς να δώσεις ένα συγκεκριμένο παράδειγμα πώς το διόρθωσες;
Εργασία: υλοποιήστε μια φόρμα σύνδεσης σε React. Απαιτήσεις: - δύο πεδία: email + κωδικός - ελεγχόμενες εισόδους - υποβολή φόρμας με preventDefault - βασική επικύρωση (το πεδίο δεν πρέπει να είναι κενό) - κατά την υποβολή, πραγματοποιήστε μια ασύγχρονη αίτηση (μπορεί να προσομοιωθεί με setTimeout) - εμφανίστε την κατάσταση φόρτωσης (κουμπί απενεργοποιημένο) - εμφανίστε σφάλμα σε περίπτωση αποτυχημένης σύνδεσης Πρόσθετα (προαιρετικά): - επικύρωση email
Πώς παρακολουθήσατε την τήρηση της αρχιτεκτονικής FSD στην ομάδα; Ελέγχθηκε αυτό κατά την ανασκόπηση κώδικα;
Πες μου ποια στατικά μέθοδοι υπάρχουν για την εργασία με υποσχέσεις. Εξήγησε τι κάνουν τα Promise.any και Promise.all.
Τι είναι σημαντικό για σένα να δεις σε έναν μελλοντικό εργοδότη, ποια είναι τα κριτήριά σου;
Αν η λειτουργία loadRolesData επιστρέφει μια υπόσχεση (Promise), ποια θα είναι η τιμή μετά την κλήση της; Είναι δυνατόν να αποθηκεύσουμε μια υπόσχεση σε μια κατάσταση που προορίζεται για δεδομένα, και πώς να το διορθώσουμε;
Έχετε χρησιμοποιήσει το Next.js; Για ποιο λόγο και ποιες λειτουργίες εφαρμόσατε (SSR, SSG);
Στη στιγμή της πρώτης απόδοσης της φόρμας, όταν το πεδίο είναι ήδη συμπληρωμένο με μια αρχική τιμή συμβολοσειράς (π.χ., 'A'), και ο validator καλείται με μια τιμή ίση με το 'A', που αντιστοιχεί σε μια ορισμένη συμβολοσειρά στον κώδικά σας — πρέπει σε αυτή την περίπτωση να υπάρχει σφάλμα ή όχι;
Εργασία με φόρμες: React Hook Form, επικύρωση μέσω Yup/Zod
Ποιοι βοηθητικοί τύποι στο TypeScript χρησιμοποιείτε πιο συχνά;