Questions d'entretien pour développeur Full Stack junior : Guide complet
Milad Bonakdar
Auteur
Réussissez votre entretien de développeur Full Stack junior grâce à ce guide complet couvrant les bases de HTML, CSS, JavaScript, React, Node.js et SQL.
Introduction
Percer dans l'industrie technologique en tant que Développeur Full Stack Junior nécessite une solide compréhension des technologies frontend et backend. Les recruteurs recherchent du potentiel, des compétences en résolution de problèmes et une bonne compréhension des fondamentaux.
Ce guide couvre les questions d'entretien essentielles sur l'ensemble de la stack : HTML/CSS, JavaScript, React, Node.js et SQL. La maîtrise de ces concepts vous donnera une base solide pour vos prochains entretiens.
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 vous permettent de vous "accrocher" aux fonctionnalités d'état et de cycle de vie de React à partir de composants fonctionnels.
useState: Pour gérer l'état local.useEffect: Pour gérer les effets secondaires (récupération de données, abonnements, mises à jour du DOM).useContext: Pour s'abonner au Context React (état global).
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 de Chrome.
- Monothread : Il utilise un seul thread principal avec une boucle d'événements (Event Loop) pour gérer les requêtes.
- I/O non bloquant : Au lieu de créer un nouveau thread pour chaque requête (comme les serveurs traditionnels), il délègue les opérations d'E/S (base de données, système de fichiers) au noyau du système. Lorsque l'opération est terminée, un callback est ajouté à la file d'attente.
- Avantage : Très évolutif pour les applications liées aux E/S (chats en temps réel, API).
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 : Utilisé pour récupérer des données d'un serveur. Les paramètres sont envoyés dans l'URL. Doit être idempotent (sûr à répéter).
- POST : Utilisé pour envoyer des données à un serveur afin de créer/mettre à jour une ressource. Les données sont envoyées dans le corps de la requête. Non idempotent.
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 :
- Frontend : En utilisant les outils de développement du navigateur (Console pour les erreurs, onglet Réseau pour les appels API, onglet Éléments pour CSS/HTML).
- Backend : En utilisant
console.log(ou un logger), les outils de débogage dans les IDE (débogueur VS Code) et en vérifiant les journaux du serveur.
Rareté : Courant Difficulté : Facile
