Questions d’entretien développeur full stack junior : quoi préparer
Milad Bonakdar
Auteur
Préparez vos entretiens full stack junior avec des questions pratiques sur HTML, CSS, JavaScript, React, Node.js, les API, SQL, Git et le débogage.
Commencez par les bases full stack
Un entretien full stack junior vérifie surtout si vous pouvez expliquer le fonctionnement d’une application web simple du navigateur à la base de données : HTML et CSS structurent la page, JavaScript ajoute le comportement, React gère l’état de l’interface, Node.js traite la logique serveur, les API relient les couches, SQL stocke les données et Git rend le travail vérifiable.
Utilisez ce guide pour travailler d’abord des réponses courtes et claires. Reliez ensuite chaque réponse à un petit projet que vous avez construit. À un niveau junior, on attend rarement une architecture avancée, mais on attend des bases solides, de bons réflexes de débogage et des explications honnêtes des compromis.
Comment vous préparer
- Préparez l’explication d’un projet depuis un événement UI jusqu’à une requête API et une requête SQL.
- Parlez des bugs corrigés, pas seulement des fonctionnalités livrées.
- Restez concret : définissez le concept, donnez un petit exemple et citez une erreur fréquente.
HTML & CSS
1. Expliquez le modèle de boîte (Box Model) en CSS.
Réponse : Le modèle de boîte CSS est le fondement de la mise en page sur le web. Chaque élément est représenté comme une boîte rectangulaire.
- Contenu : Le texte ou l'image proprement dit.
- Padding (Marge intérieure) : Zone transparente autour du contenu (à l'intérieur de la bordure).
- Border (Bordure) : Une bordure qui entoure le padding et le contenu.
- Margin (Marge extérieure) : Zone transparente à l'extérieur de la bordure (crée un espace entre les éléments).
Rareté : Très courant Difficulté : Facile
2. Quelle est la différence entre display: block, inline et inline-block ?
Réponse :
- Block : Commence sur une nouvelle ligne et occupe toute la largeur disponible (par exemple,
<div>,<p>). - Inline : Ne commence pas sur une nouvelle ligne et n'occupe que la largeur nécessaire. Les propriétés
widthetheightn'ont aucun effet (par exemple,<span>,<a>). - Inline-block : Comme les éléments inline, mais vous pouvez définir
widthetheight. Utile pour les grilles ou les menus de navigation.
Rareté : Courant Difficulté : Facile
3. Qu'est-ce que le HTML Sémantique et pourquoi est-ce important ?
Réponse : Le HTML sémantique signifie utiliser des balises qui véhiculent le sens du contenu, et pas seulement son apparence.
- Exemples :
<header>,<nav>,<article>,<footer>au lieu de simples<div>s. - Importance :
- Accessibilité : Les lecteurs d'écran utilisent ces balises pour aider les utilisateurs malvoyants à naviguer.
- SEO : Les moteurs de recherche comprennent mieux la structure et l'importance du contenu.
- Lisibilité : Le code est plus facile à comprendre pour les développeurs.
Rareté : Courant Difficulté : Facile
4. Expliquez Flexbox vs. CSS Grid.
Réponse :
- Flexbox : Un modèle de mise en page unidimensionnel (ligne OU colonne). Idéal pour aligner des éléments dans un conteneur ou répartir l'espace (par exemple, une barre de navigation).
- CSS Grid : Un modèle de mise en page bidimensionnel (lignes ET colonnes). Idéal pour définir la mise en page globale d'une page (par exemple, en-tête, barre latérale, contenu principal, pied de page).
Rareté : Courant Difficulté : Moyen
JavaScript
5. Quelle est la différence entre var, let et const ?
Réponse :
var: Portée de fonction (ou portée globale). Peut être redéclarée et mise à jour. Hissée (hoisted) en haut de sa portée.let: Portée de bloc (n'existe qu'à l'intérieur de{}). Peut être mise à jour mais pas redéclarée dans la même portée.const: Portée de bloc. Ne peut pas être mise à jour ou redéclarée. Doit être initialisée lors de la déclaration. Utilisez ceci par défaut sauf si vous devez réassigner.
Rareté : Très courant Difficulté : Facile
6. Expliquez async et await.
Réponse :
async et await (introduits dans ES2017) rendent le code asynchrone plus semblable à du code synchrone en apparence et en comportement.
async: Placé avant une fonction, il garantit que la fonction renvoie une Promise.await: Utilisé à l'intérieur d'une fonctionasync, il suspend l'exécution jusqu'à ce que la Promise soit résolue.- Avantage : Plus propre et plus lisible que d'enchaîner
.then()et.catch().
Rareté : Courant Difficulté : Moyen
7. Qu'est-ce que le DOM ?
Réponse : Le DOM (Document Object Model) est une interface de programmation pour les documents web. Il représente la page de sorte que les programmes (JavaScript) peuvent modifier la structure, le style et le contenu du document. Le DOM représente le document sous forme de nœuds et d'objets.
Rareté : Courant Difficulté : Facile
8. Quelle est la différence entre == et === ?
Réponse :
==(Égalité lâche) : Compare les valeurs après avoir effectué une conversion de type (les convertissant en un type commun). Par exemple,5 == "5"esttrue.===(Égalité stricte) : Compare à la fois la valeur et le type. Aucune conversion de type. Par exemple,5 === "5"estfalse.- Bonne pratique : Utilisez toujours
===pour éviter les bugs inattendus.
Rareté : Courant Difficulté : Facile
React
9. Qu'est-ce que le DOM virtuel ?
Réponse : Le DOM virtuel est une copie allégée du DOM réel conservée en mémoire.
- Processus : Lorsque l'état change, React met d'abord à jour le DOM virtuel. Il compare ensuite le nouveau DOM virtuel avec le précédent (diffing) et calcule la manière la plus efficace de mettre à jour le DOM réel (réconciliation).
- Avantage : Minimise la manipulation directe du DOM réel, qui est lent, améliorant ainsi les performances.
Rareté : Courant Difficulté : Moyen
10. Que sont les Props et l'État (State) ?
Réponse :
- Props (Propriétés) : Données en lecture seule transmises d'un composant parent à un composant enfant. Elles permettent aux composants d'être réutilisables et dynamiques.
- State (État) : Données gérées à l'intérieur du composant. Il peut changer au fil du temps (par exemple, saisie de l'utilisateur, réponse de l'API). Lorsque l'état change, le composant est rendu à nouveau.
Rareté : Très courant Difficulté : Facile
11. Que sont les Hooks React ? Nommez-en quelques-uns courants.
Réponse: Les Hooks sont des fonctions qui permettent aux composants fonctionnels d’utiliser des fonctionnalités React comme le state, le context, les refs et les effects.
useState: Stocke l’état local du composant, par exemple la valeur d’un formulaire ou un onglet sélectionné.useEffect: Synchronise un composant avec quelque chose d’extérieur à React, comme un chargement de données ou un abonnement à un événement. Il ne doit pas servir à tous les calculs.useContext: Lit un context partagé sans passer manuellement des props à chaque niveau.- Conseil d’entretien : Mentionnez les Rules of Hooks : appeler les hooks au niveau supérieur d’un composant React ou d’un custom hook, pas dans des boucles ni des conditions.
Rareté : Courant Difficulté : Moyen
Node.js & Backend
12. Qu'est-ce que Node.js et pourquoi est-il monothread ?
Réponse: Node.js est un environnement d’exécution JavaScript construit sur le moteur V8. Il exécute JavaScript sur un thread principal, mais peut gérer beaucoup de tâches I/O grâce à l’event loop qui coordonne le travail asynchrone.
- Thread principal : Exécute vos callbacks JavaScript.
- I/O non bloquante : Les opérations fichier, réseau et base de données peuvent être déléguées au système d’exploitation ou à libuv, puis reprises quand le résultat est prêt.
- Limite importante : Du JavaScript très coûteux en CPU peut quand même bloquer l’event loop. Pour un travail lourd, utilisez un worker thread, une file de jobs ou sortez-le du chemin de requête.
- Bon exemple : Un serveur API qui attend de nombreux appels réseau ou base de données.
Rareté : Courant Difficulté : Moyen
13. Que sont NPM et package.json ?
Réponse :
- NPM (Node Package Manager) : Le gestionnaire de paquets par défaut pour Node.js. Il vous permet d'installer et de gérer des bibliothèques (dépendances).
package.json: Le fichier manifeste d'un projet Node.js. Il répertorie les métadonnées (nom, version) et les dépendances (bibliothèques nécessaires à l'exécution de l'application).
Rareté : Courant Difficulté : Facile
14. Expliquez la différence entre GET et POST.
Réponse:
- GET : Récupère une ressource. La méthode doit être safe, donc ne pas modifier volontairement l’état du serveur, et idempotente, c’est-à-dire qu’une répétition de la même requête a le même effet.
- POST : Envoie des données que le serveur doit traiter, souvent pour créer une ressource ou déclencher une action. Elle n’est pas garantie idempotente ; répéter un POST peut donc créer un doublon si l’API ne l’empêche pas.
- Exemple pratique : Utilisez GET pour charger une liste de produits ; utilisez POST pour envoyer une commande ou créer un commentaire.
Rareté : Courant Difficulté : Facile
Base de données (SQL)
15. Qu'est-ce qu'une clé primaire (Primary Key) et une clé étrangère (Foreign Key) ?
Réponse :
- Clé primaire (Primary Key) : Une colonne (ou un ensemble de colonnes) qui identifie de manière unique chaque ligne d'une table. Elle ne peut pas être
NULL. - Clé étrangère (Foreign Key) : Une colonne qui est liée à la clé primaire d'une autre table. Elle établit une relation entre deux tables.
Rareté : Courant Difficulté : Facile
16. Expliquez la différence entre INNER JOIN et LEFT JOIN.
Réponse :
- INNER JOIN : Renvoie les enregistrements qui ont des valeurs correspondantes dans les deux tables.
- LEFT JOIN (ou LEFT OUTER JOIN) : Renvoie tous les enregistrements de la table de gauche et les enregistrements correspondants de la table de droite. S'il n'y a pas de correspondance, le résultat est
NULLdu côté droit.
Rareté : Très courant Difficulté : Moyen
17. Qu'est-ce que la normalisation ?
Réponse : La normalisation est le processus d'organisation des données dans une base de données afin de réduire la redondance et d'améliorer l'intégrité des données.
- Objectif : Diviser les grandes tables en tables plus petites et les relier à l'aide de relations.
- Formes : 1NF, 2NF, 3NF (la troisième forme normale (3NF) est généralement suffisante pour la plupart des applications).
Rareté : Rare (pour les Juniors) Difficulté : Moyen
Général
18. Qu'est-ce que Git et pourquoi l'utilisons-nous ?
Réponse : Git est un système de contrôle de version distribué.
- Utilisation : Il suit les modifications du code source pendant le développement de logiciels.
- Avantages : Permet à plusieurs développeurs de travailler ensemble (collaboration), conserve un historique des modifications (versioning) et permet de revenir à des états précédents si quelque chose se casse.
Rareté : Courant Difficulté : Facile
19. Qu'est-ce qu'une API ?
Réponse : API signifie Application Programming Interface (Interface de programmation d'application). Il s'agit d'un ensemble de règles qui permettent à différentes applications logicielles de communiquer entre elles. Dans le développement web, il s'agit généralement d'une API REST où un frontend (Client) demande des données à un backend (Serveur).
Rareté : Courant Difficulté : Facile
20. Comment déboguez-vous une application web ?
Réponse: Commencez par reproduire le problème et déterminer où il se produit : navigateur, requête réseau, handler backend ou base de données.
- Frontend : Utilisez les DevTools du navigateur : Console pour les erreurs, Network pour les statuts et payloads d’API, Elements pour HTML/CSS et React DevTools si nécessaire.
- Backend : Vérifiez les logs structurés, les IDs de requête, les stack traces, les variables d’environnement et les requêtes SQL. Utilisez un débogueur si le flux n’est pas clair.
- Bonne réponse d’entretien : Expliquez un vrai bug corrigé, ce que vous avez vérifié en premier et comment vous avez confirmé la correction.
Rareté : Courant Difficulté : Facile
