Domande per il Colloquio da Sviluppatore Full Stack Junior: Guida Completa

Introduzione

Entrare nel settore tecnologico come Junior Full Stack Developer richiede una solida conoscenza sia delle tecnologie frontend che backend. I selezionatori cercano potenziale, capacità di problem-solving e una buona comprensione dei fondamenti.

Questa guida copre le domande essenziali per un colloquio full stack: HTML/CSS, JavaScript, React, Node.js e SQL. Padroneggiare questi concetti ti darà una solida base per i tuoi prossimi colloqui.

---

HTML & CSS

1. Spiega il Box Model in CSS.

Risposta: Il CSS Box Model è il fondamento del layout sul web. Ogni elemento è rappresentato come una scatola rettangolare.

• Content: Il testo o l'immagine effettiva.
• Padding: Area trasparente intorno al contenuto (all'interno del bordo).
• Border: Un bordo che circonda il padding e il contenuto.
• Margin: Area trasparente all'esterno del bordo (crea spazio tra gli elementi).

Rarità: Molto Comune Difficoltà: Facile

---

2. Qual è la differenza tra display: block, inline e inline-block?

Risposta:

• Block: Inizia su una nuova riga e occupa l'intera larghezza disponibile (ad esempio, <div>, <p>).
• Inline: Non inizia su una nuova riga e occupa solo la larghezza necessaria. Le proprietà width e height non hanno effetto (ad esempio, <span>, <a>).
• Inline-block: Come gli elementi inline, ma è possibile impostare width e height. Utile per griglie o menu di navigazione.

Rarità: Comune Difficoltà: Facile

---

3. Cos'è l'HTML semantico e perché è importante?

Risposta: HTML semantico significa utilizzare tag che trasmettono il significato del contenuto, non solo il suo aspetto.

• Esempi: <header>, <nav>, <article>, <footer> invece di soli <div>.
• Importanza:
  • Accessibilità: Gli screen reader utilizzano questi tag per aiutare gli utenti con problemi di vista a navigare.
  • SEO: I motori di ricerca comprendono meglio la struttura e l'importanza del contenuto.
  • Leggibilità: Il codice è più facile da capire per gli sviluppatori.

Rarità: Comune Difficoltà: Facile

---

4. Spiega Flexbox vs. CSS Grid.

Risposta:

• Flexbox: Un modello di layout unidimensionale (riga O colonna). Ideale per allineare elementi all'interno di un contenitore o distribuire lo spazio (ad esempio, una barra di navigazione).
• CSS Grid: Un modello di layout bidimensionale (righe E colonne). Ideale per definire il layout generale di una pagina (ad esempio, header, sidebar, contenuto principale, footer).

Rarità: Comune Difficoltà: Media

---

JavaScript

5. Qual è la differenza tra var, let e const?

Risposta:

• var: Ambito a livello di funzione (o globale). Può essere ridichiarato e aggiornato. Subisce l'hoisting all'inizio del suo scope.
• let: Ambito a livello di blocco (esiste solo all'interno di {}). Può essere aggiornato ma non ridichiarato nello stesso scope.
• const: Ambito a livello di blocco. Non può essere aggiornato o ridichiarato. Deve essere inizializzato durante la dichiarazione. Usalo per impostazione predefinita a meno che tu non abbia bisogno di riassegnare.

Rarità: Molto Comune Difficoltà: Facile

---

6. Spiega async e await.

Risposta: async e await (introdotti in ES2017) fanno sembrare e comportare il codice asincrono più come codice sincrono.

• async: Posto prima di una funzione, assicura che la funzione restituisca una Promise.
• await: Usato all'interno di una funzione async, mette in pausa l'esecuzione fino a quando la Promise non viene risolta.
• Vantaggio: Più pulito e leggibile rispetto all'incatenamento di .then() e .catch().

Rarità: Comune Difficoltà: Media

---

7. Cos'è il DOM?

Risposta: Il DOM (Document Object Model) è un'interfaccia di programmazione per documenti web. Rappresenta la pagina in modo che i programmi (JavaScript) possano modificare la struttura, lo stile e il contenuto del documento. Il DOM rappresenta il documento come nodi e oggetti.

Rarità: Comune Difficoltà: Facile

---

8. Qual è la differenza tra == e ===?

Risposta:

• == (Uguaglianza debole): Confronta i valori dopo aver eseguito la type coercion (convertendoli in un tipo comune). Ad esempio, 5 == "5" è true.
• === (Uguaglianza stretta): Confronta sia il valore che il tipo. Nessuna type coercion. Ad esempio, 5 === "5" è false.
• Best Practice: Usa sempre === per evitare bug inaspettati.

Rarità: Comune Difficoltà: Facile

---

React

9. Cos'è il Virtual DOM?

Risposta: Il Virtual DOM è una copia leggera del DOM reale mantenuta in memoria.

• Processo: Quando lo stato cambia, React aggiorna prima il Virtual DOM. Quindi confronta il nuovo Virtual DOM con quello precedente (diffing) e calcola il modo più efficiente per aggiornare il DOM reale (reconciliation).
• Vantaggio: Riduce al minimo la manipolazione diretta del lento DOM reale, migliorando le prestazioni.

Rarità: Comune Difficoltà: Media

---

10. Cosa sono Props e State?

Risposta:

• Props (Properties): Dati di sola lettura passati da un componente padre a un componente figlio. Consentono ai componenti di essere riutilizzabili e dinamici.
• State: Dati gestiti all'interno del componente. Può cambiare nel tempo (ad esempio, input dell'utente, risposta API). Quando lo stato cambia, il componente viene renderizzato di nuovo.

Rarità: Molto Comune Difficoltà: Facile

---

11. Cosa sono gli Hook di React? Nomina alcuni di quelli comuni.

Risposta: Gli Hook sono funzioni che ti permettono di "agganciarti" allo stato di React e alle funzionalità del ciclo di vita dai componenti funzionali.

• useState: Per gestire lo stato locale.
• useEffect: Per gestire gli effetti collaterali (data fetching, sottoscrizioni, aggiornamenti del DOM).
• useContext: Per sottoscriversi al React Context (stato globale).

Rarità: Comune Difficoltà: Media

---

Node.js & Backend

12. Cos'è Node.js e perché è single-threaded?

Risposta: Node.js è un runtime JavaScript costruito sul motore V8 di Chrome.

• Single-Threaded: Utilizza un singolo thread principale con un Event Loop per gestire le richieste.
• Non-Blocking I/O: Invece di creare un nuovo thread per ogni richiesta (come i server tradizionali), delega le operazioni di I/O (database, file system) al kernel del sistema. Quando l'operazione termina, un callback viene aggiunto alla coda.
• Vantaggio: Altamente scalabile per applicazioni I/O-bound (chat in tempo reale, API).

Rarità: Comune Difficoltà: Media

---

13. Cosa sono NPM e package.json?

Risposta:

• NPM (Node Package Manager): Il gestore di pacchetti predefinito per Node.js. Ti permette di installare e gestire librerie (dipendenze).
• package.json: Il file di manifesto per un progetto Node.js. Elenca i metadati (nome, versione) e le dipendenze (librerie necessarie per eseguire l'app).

Rarità: Comune Difficoltà: Facile

---

14. Spiega la differenza tra GET e POST.

Risposta:

• GET: Usato per recuperare dati da un server. I parametri vengono inviati nell'URL. Dovrebbe essere idempotente (sicuro da ripetere).
• POST: Usato per inviare dati a un server per creare/aggiornare una risorsa. I dati vengono inviati nel corpo della richiesta. Non idempotente.

Rarità: Comune Difficoltà: Facile

---

Database (SQL)

15. Cosa sono una Primary Key e una Foreign Key?

Risposta:

• Primary Key: Una colonna (o insieme di colonne) che identifica univocamente ogni riga in una tabella. Non può essere NULL.
• Foreign Key: Una colonna che si collega alla Primary Key di un'altra tabella. Stabilisce una relazione tra due tabelle.

Rarità: Comune Difficoltà: Facile

---

16. Spiega la differenza tra INNER JOIN e LEFT JOIN.

Risposta:

• INNER JOIN: Restituisce i record che hanno valori corrispondenti in entrambe le tabelle.
• LEFT JOIN (o LEFT OUTER JOIN): Restituisce tutti i record dalla tabella di sinistra e i record corrispondenti dalla tabella di destra. Se non c'è corrispondenza, il risultato è NULL sul lato destro.

Rarità: Molto Comune Difficoltà: Media

---

17. Cos'è la Normalizzazione?

Risposta: La normalizzazione è il processo di organizzazione dei dati in un database per ridurre la ridondanza e migliorare l'integrità dei dati.

• Obiettivo: Dividere le tabelle più grandi in tabelle più piccole e collegarle utilizzando le relazioni.
• Forme: 1NF, 2NF, 3NF (La terza forma normale è di solito sufficiente per la maggior parte delle applicazioni).

Rarità: Non Comune (per i Junior) Difficoltà: Media

---

Generale

18. Cos'è Git e perché lo usiamo?

Risposta: Git è un sistema di controllo della versione distribuito.

• Utilizzo: Traccia le modifiche nel codice sorgente durante lo sviluppo del software.
• Vantaggi: Consente a più sviluppatori di lavorare insieme (collaborazione), mantiene una cronologia delle modifiche (versioning) e consente di ripristinare gli stati precedenti se qualcosa si rompe.

Rarità: Comune Difficoltà: Facile

---

19. Cos'è un'API?

Risposta: API sta per Application Programming Interface. È un insieme di regole che consente a diverse applicazioni software di comunicare tra loro. Nello sviluppo web, di solito si riferisce a una REST API dove un frontend (Client) richiede dati da un backend (Server).

Rarità: Comune Difficoltà: Facile

---

20. Come fai il debug di un'applicazione web?

Risposta:

• Frontend: Utilizzando gli strumenti di sviluppo del browser (Console per gli errori, scheda Network per le chiamate API, scheda Elements per CSS/HTML).
• Backend: Utilizzando console.log (o un logger), strumenti di debug negli IDE (debugger di VS Code) e controllando i log del server.

Rarità: Comune Difficoltà: Facile