Preguntas para Entrevistas de Desarrollador Full Stack Junior: Guía Completa
Milad Bonakdar
Autor
Supera tu entrevista de Desarrollador Full Stack Junior con esta guía completa que abarca los fundamentos de HTML, CSS, JavaScript, React, Node.js y SQL.
Introducción
Entrar en la industria tecnológica como Desarrollador Full Stack Junior requiere un sólido conocimiento de las tecnologías tanto de frontend como de backend. Los entrevistadores buscan potencial, habilidades para resolver problemas y una buena comprensión de los fundamentos.
Esta guía cubre preguntas esenciales de entrevistas en todo el stack: HTML/CSS, JavaScript, React, Node.js y SQL. Dominar estos conceptos te dará una base sólida para tus próximas entrevistas.
HTML y CSS
1. Explica el Modelo de Caja en CSS.
Respuesta: El Modelo de Caja de CSS es la base del diseño en la web. Cada elemento se representa como una caja rectangular.
- Contenido: El texto o la imagen real.
- Padding: Área transparente alrededor del contenido (dentro del borde).
- Border: Un borde que rodea el padding y el contenido.
- Margin: Área transparente fuera del borde (crea espacio entre los elementos).
Frecuencia: Muy Común Dificultad: Fácil
2. ¿Cuál es la diferencia entre display: block, inline e inline-block?
Respuesta:
- Block: Comienza en una nueva línea y ocupa todo el ancho disponible (por ejemplo,
<div>,<p>). - Inline: No comienza en una nueva línea y solo ocupa el ancho necesario. Las propiedades
widthyheightno tienen efecto (por ejemplo,<span>,<a>). - Inline-block: Como los elementos inline, pero puedes establecer
widthyheight. Útil para grids o menús de navegación.
Frecuencia: Común Dificultad: Fácil
3. ¿Qué es HTML Semántico y por qué es importante?
Respuesta: HTML Semántico significa usar etiquetas que transmiten el significado del contenido, no solo su apariencia.
- Ejemplos:
<header>,<nav>,<article>,<footer>en lugar de solo<div>s. - Importancia:
- Accesibilidad: Los lectores de pantalla usan estas etiquetas para ayudar a los usuarios con discapacidad visual a navegar.
- SEO: Los motores de búsqueda comprenden mejor la estructura y la importancia del contenido.
- Legibilidad: El código es más fácil de entender para los desarrolladores.
Frecuencia: Común Dificultad: Fácil
4. Explica Flexbox vs. CSS Grid.
Respuesta:
- Flexbox: Un modelo de diseño unidimensional (fila O columna). Lo mejor para alinear elementos dentro de un contenedor o distribuir el espacio (por ejemplo, una barra de navegación).
- CSS Grid: Un modelo de diseño bidimensional (filas Y columnas). Lo mejor para definir el diseño general de una página (por ejemplo, header, sidebar, contenido principal, footer).
Frecuencia: Común Dificultad: Media
JavaScript
5. ¿Cuál es la diferencia entre var, let y const?
Respuesta:
var: Ámbito de función (o ámbito global). Se puede redeclarar y actualizar. Se eleva a la parte superior de su ámbito (hoisting).let: Ámbito de bloque (solo existe dentro de{}). Se puede actualizar pero no redeclarar en el mismo ámbito.const: Ámbito de bloque. No se puede actualizar ni redeclarar. Debe inicializarse durante la declaración. Utiliza esto por defecto a menos que necesites reasignar.
Frecuencia: Muy Común Dificultad: Fácil
6. Explica async y await.
Respuesta:
async y await (introducidos en ES2017) hacen que el código asíncrono se vea y se comporte más como código síncrono.
async: Colocado antes de una función, asegura que la función devuelve una Promise.await: Utilizado dentro de una funciónasync, pausa la ejecución hasta que la Promise se resuelva.- Beneficio: Más limpio y legible que encadenar
.then()y.catch().
Frecuencia: Común Dificultad: Media
7. ¿Qué es el DOM?
Respuesta: El DOM (Document Object Model) es una interfaz de programación para documentos web. Representa la página para que los programas (JavaScript) puedan cambiar la estructura, el estilo y el contenido del documento. El DOM representa el documento como nodos y objetos.
Frecuencia: Común Dificultad: Fácil
8. ¿Cuál es la diferencia entre == y ===?
Respuesta:
==(Igualdad Débil): Compara valores después de realizar la coerción de tipo (convirtiéndolos a un tipo común). Por ejemplo,5 == "5"estrue.===(Igualdad Estricta): Compara tanto el valor como el tipo. No hay coerción de tipo. Por ejemplo,5 === "5"esfalse.- Buena Práctica: Siempre usa
===para evitar errores inesperados.
Frecuencia: Común Dificultad: Fácil
React
9. ¿Qué es el DOM Virtual?
Respuesta: El DOM Virtual es una copia ligera del DOM real que se mantiene en la memoria.
- Proceso: Cuando el estado cambia, React actualiza primero el DOM Virtual. Luego compara el nuevo DOM Virtual con el anterior (diffing) y calcula la forma más eficiente de actualizar el DOM real (reconciliación).
- Beneficio: Minimiza la manipulación directa del lento DOM real, mejorando el rendimiento.
Frecuencia: Común Dificultad: Media
10. ¿Qué son Props y State?
Respuesta:
- Props (Propiedades): Datos de solo lectura que se pasan de un componente padre a un componente hijo. Permiten que los componentes sean reutilizables y dinámicos.
- State (Estado): Datos gestionados dentro del componente. Puede cambiar con el tiempo (por ejemplo, la entrada del usuario, la respuesta de la API). Cuando el estado cambia, el componente se vuelve a renderizar.
Frecuencia: Muy Común Dificultad: Fácil
11. ¿Qué son los React Hooks? Nombra algunos comunes.
Respuesta: Los Hooks son funciones que te permiten "engancharte" al estado de React y a las características del ciclo de vida desde componentes funcionales.
useState: Para gestionar el estado local.useEffect: Para manejar efectos secundarios (obtención de datos, suscripciones, actualizaciones del DOM).useContext: Para suscribirse al Contexto de React (estado global).
Frecuencia: Común Dificultad: Media
Node.js y Backend
12. ¿Qué es Node.js y por qué es de un solo hilo?
Respuesta: Node.js es un entorno de ejecución de JavaScript construido sobre el motor V8 de Chrome.
- Un Solo Hilo: Utiliza un solo hilo principal con un Event Loop para manejar las solicitudes.
- I/O No Bloqueante: En lugar de crear un nuevo hilo para cada solicitud (como los servidores tradicionales), delega las operaciones de I/O (base de datos, sistema de archivos) al kernel del sistema. Cuando la operación termina, se añade una callback a la cola.
- Beneficio: Altamente escalable para aplicaciones con alta carga de I/O (chats en tiempo real, APIs).
Frecuencia: Común Dificultad: Media
13. ¿Qué es NPM y package.json?
Respuesta:
- NPM (Node Package Manager): El gestor de paquetes predeterminado para Node.js. Te permite instalar y gestionar bibliotecas (dependencias).
package.json: El archivo de manifiesto para un proyecto de Node.js. Lista metadatos (nombre, versión) y dependencias (bibliotecas necesarias para ejecutar la aplicación).
Frecuencia: Común Dificultad: Fácil
14. Explica la diferencia entre GET y POST.
Respuesta:
- GET: Se utiliza para recuperar datos de un servidor. Los parámetros se envían en la URL. Debe ser idempotente (seguro de repetir).
- POST: Se utiliza para enviar datos a un servidor para crear/actualizar un recurso. Los datos se envían en el cuerpo de la solicitud. No es idempotente.
Frecuencia: Común Dificultad: Fácil
Base de Datos (SQL)
15. ¿Qué es una Clave Primaria y una Clave Foránea?
Respuesta:
- Clave Primaria: Una columna (o conjunto de columnas) que identifica de forma única cada fila en una tabla. No puede ser
NULL. - Clave Foránea: Una columna que enlaza a la Clave Primaria de otra tabla. Establece una relación entre dos tablas.
Frecuencia: Común Dificultad: Fácil
16. Explica la diferencia entre INNER JOIN y LEFT JOIN.
Respuesta:
- INNER JOIN: Devuelve los registros que tienen valores coincidentes en ambas tablas.
- LEFT JOIN (o LEFT OUTER JOIN): Devuelve todos los registros de la tabla izquierda y los registros coincidentes de la tabla derecha. Si no hay coincidencia, el resultado es
NULLen el lado derecho.
Frecuencia: Muy Común Dificultad: Media
17. ¿Qué es la Normalización?
Respuesta: La normalización es el proceso de organizar los datos en una base de datos para reducir la redundancia y mejorar la integridad de los datos.
- Objetivo: Dividir las tablas más grandes en tablas más pequeñas y enlazarlas mediante relaciones.
- Formas: 1NF, 2NF, 3NF (La Tercera Forma Normal suele ser suficiente para la mayoría de las aplicaciones).
Frecuencia: Poco Común (para Juniors) Dificultad: Media
General
18. ¿Qué es Git y por qué lo usamos?
Respuesta: Git es un sistema de control de versiones distribuido.
- Uso: Realiza un seguimiento de los cambios en el código fuente durante el desarrollo de software.
- Beneficios: Permite que varios desarrolladores trabajen juntos (colaboración), mantiene un historial de cambios (versionado) y permite volver a estados anteriores si algo se rompe.
Frecuencia: Común Dificultad: Fácil
19. ¿Qué es una API?
Respuesta: API significa Application Programming Interface (Interfaz de Programación de Aplicaciones). Es un conjunto de reglas que permite que diferentes aplicaciones de software se comuniquen entre sí. En el desarrollo web, generalmente se refiere a una API REST donde un frontend (Cliente) solicita datos de un backend (Servidor).
Frecuencia: Común Dificultad: Fácil
20. ¿Cómo depuras una aplicación web?
Respuesta:
- Frontend: Utilizando las Herramientas para Desarrolladores del Navegador (Consola para errores, pestaña de Red para llamadas a la API, pestaña de Elementos para CSS/HTML).
- Backend: Utilizando
console.log(o un logger), herramientas de depuración en IDEs (depurador de VS Code) y revisando los logs del servidor.
Frecuencia: Común Dificultad: Fácil
