Junior Full Stack Entwickler: Interviewfragen – Der komplette Leitfaden
Milad Bonakdar
Autor
Meistern Sie Ihr Junior Full Stack Entwickler Vorstellungsgespräch mit diesem umfassenden Leitfaden, der die Grundlagen von HTML, CSS, JavaScript, React, Node.js und SQL abdeckt.
Einführung
Der Einstieg in die Tech-Branche als Junior Full Stack Developer erfordert ein solides Verständnis sowohl der Frontend- als auch der Backend-Technologien. Interviewer suchen nach Potenzial, Problemlösungsfähigkeiten und einem guten Verständnis der Grundlagen.
Dieser Leitfaden behandelt wichtige Interviewfragen aus dem gesamten Full Stack-Bereich: HTML/CSS, JavaScript, React, Node.js und SQL. Das Beherrschen dieser Konzepte wird Ihnen eine starke Grundlage für Ihre bevorstehenden Vorstellungsgespräche geben.
HTML & CSS
1. Erkläre das Box Model in CSS.
Antwort: Das CSS Box Model ist die Grundlage für das Layout im Web. Jedes Element wird als rechteckige Box dargestellt.
- Content: Der eigentliche Text oder das Bild.
- Padding: Transparenter Bereich um den Inhalt (innerhalb des Rahmens).
- Border: Ein Rahmen, der um das Padding und den Inhalt verläuft.
- Margin: Transparenter Bereich außerhalb des Rahmens (schafft Platz zwischen Elementen).
Seltenheit: Sehr häufig Schwierigkeitsgrad: Leicht
2. Was ist der Unterschied zwischen display: block, inline und inline-block?
Antwort:
- Block: Beginnt in einer neuen Zeile und nimmt die gesamte verfügbare Breite ein (z. B.
<div>,<p>). - Inline: Beginnt nicht in einer neuen Zeile und nimmt nur so viel Breite ein, wie nötig ist.
width- undheight-Eigenschaften haben keine Auswirkung (z. B.<span>,<a>). - Inline-block: Wie Inline-Elemente, aber Sie können
widthundheightfestlegen. Nützlich für Raster oder Navigationsmenüs.
Seltenheit: Häufig Schwierigkeitsgrad: Leicht
3. Was ist Semantic HTML und warum ist es wichtig?
Antwort: Semantic HTML bedeutet, Tags zu verwenden, die die Bedeutung des Inhalts vermitteln, nicht nur sein Aussehen.
- Beispiele:
<header>,<nav>,<article>,<footer>anstelle von nur<div>s. - Bedeutung:
- Barrierefreiheit: Screenreader verwenden diese Tags, um sehbehinderten Benutzern die Navigation zu erleichtern.
- SEO: Suchmaschinen verstehen die Struktur und Bedeutung von Inhalten besser.
- Lesbarkeit: Code ist für Entwickler leichter verständlich.
Seltenheit: Häufig Schwierigkeitsgrad: Leicht
4. Erkläre Flexbox vs. CSS Grid.
Antwort:
- Flexbox: Ein eindimensionales Layoutmodell (Zeile ODER Spalte). Am besten geeignet, um Elemente innerhalb eines Containers auszurichten oder den Platz zu verteilen (z. B. eine Navigationsleiste).
- CSS Grid: Ein zweidimensionales Layoutmodell (Zeilen UND Spalten). Am besten geeignet, um das Gesamtlayout einer Seite zu definieren (z. B. Header, Seitenleiste, Hauptinhalt, Footer).
Seltenheit: Häufig Schwierigkeitsgrad: Mittel
JavaScript
5. Was ist der Unterschied zwischen var, let und const?
Antwort:
var: Funktionsbezogener Gültigkeitsbereich (oder globaler Gültigkeitsbereich). Kann neu deklariert und aktualisiert werden. Wird an den Anfang seines Gültigkeitsbereichs "gehoben" (Hoisting).let: Blockbezogener Gültigkeitsbereich (existiert nur innerhalb von{}). Kann aktualisiert, aber nicht im selben Gültigkeitsbereich neu deklariert werden.const: Blockbezogener Gültigkeitsbereich. Kann weder aktualisiert noch neu deklariert werden. Muss bei der Deklaration initialisiert werden. Verwenden Sie dies standardmäßig, es sei denn, Sie müssen es neu zuweisen.
Seltenheit: Sehr häufig Schwierigkeitsgrad: Leicht
6. Erkläre async und await.
Antwort:
async und await (eingeführt in ES2017) lassen asynchronen Code eher wie synchronen Code aussehen und sich auch so verhalten.
async: Vor eine Funktion gesetzt, stellt es sicher, dass die Funktion eine Promise zurückgibt.await: Wird innerhalb einerasync-Funktion verwendet und pausiert die Ausführung, bis die Promise aufgelöst ist.- Vorteil: Sauberer und besser lesbar als das Verketten von
.then()und.catch().
Seltenheit: Häufig Schwierigkeitsgrad: Mittel
7. Was ist das DOM?
Antwort: Das DOM (Document Object Model) ist eine Programmierschnittstelle für Webdokumente. Es repräsentiert die Seite, sodass Programme (JavaScript) die Dokumentstruktur, den Stil und den Inhalt ändern können. Das DOM repräsentiert das Dokument als Knoten und Objekte.
Seltenheit: Häufig Schwierigkeitsgrad: Leicht
8. Was ist der Unterschied zwischen == und ===?
Antwort:
==(Lockere Gleichheit): Vergleicht Werte nach Durchführung einer Typumwandlung (Konvertierung in einen gemeinsamen Typ). Z. B. ist5 == "5"true.===(Strikte Gleichheit): Vergleicht sowohl Wert als auch Typ. Keine Typumwandlung. Z. B. ist5 === "5"false.- Best Practice: Verwenden Sie immer
===, um unerwartete Fehler zu vermeiden.
Seltenheit: Häufig Schwierigkeitsgrad: Leicht
React
9. Was ist das Virtual DOM?
Antwort: Das Virtual DOM ist eine leichtgewichtige Kopie des realen DOM, die im Speicher gehalten wird.
- Prozess: Wenn sich der Zustand ändert, aktualisiert React zuerst das Virtual DOM. Anschließend vergleicht es das neue Virtual DOM mit dem vorherigen (Diffing) und berechnet die effizienteste Methode, um das reale DOM zu aktualisieren (Reconciliation).
- Vorteil: Minimiert die direkte Manipulation des langsamen realen DOM, was die Leistung verbessert.
Seltenheit: Häufig Schwierigkeitsgrad: Mittel
10. Was sind Props und State?
Antwort:
- Props (Properties): Nur-Lese-Daten, die von einer übergeordneten Komponente an eine untergeordnete Komponente übergeben werden. Sie ermöglichen es, Komponenten wiederverwendbar und dynamisch zu gestalten.
- State: Daten, die innerhalb der Komponente verwaltet werden. Sie können sich im Laufe der Zeit ändern (z. B. Benutzereingaben, API-Antwort). Wenn sich der Zustand ändert, wird die Komponente neu gerendert.
Seltenheit: Sehr häufig Schwierigkeitsgrad: Leicht
11. Was sind React Hooks? Nenne ein paar gängige.
Antwort: Hooks sind Funktionen, mit denen Sie "in" React-Zustands- und Lebenszyklusfunktionen von funktionalen Komponenten "einhaken" können.
useState: Zum Verwalten des lokalen Zustands.useEffect: Zum Behandeln von Nebenwirkungen (Datenabruf, Abonnements, DOM-Aktualisierungen).useContext: Zum Abonnieren von React Context (globaler Zustand).
Seltenheit: Häufig Schwierigkeitsgrad: Mittel
Node.js & Backend
12. Was ist Node.js und warum ist es Single-Threaded?
Antwort: Node.js ist eine JavaScript-Laufzeitumgebung, die auf der V8-Engine von Chrome basiert.
- Single-Threaded: Es verwendet einen einzigen Hauptthread mit einer Event Loop, um Anfragen zu bearbeiten.
- Non-Blocking I/O: Anstatt für jede Anfrage einen neuen Thread zu erstellen (wie bei herkömmlichen Servern), delegiert es I/O-Operationen (Datenbank, Dateisystem) an den Systemkernel. Wenn die Operation abgeschlossen ist, wird ein Callback zur Warteschlange hinzugefügt.
- Vorteil: Sehr gut skalierbar für I/O-gebundene Anwendungen (Echtzeit-Chats, APIs).
Seltenheit: Häufig Schwierigkeitsgrad: Mittel
13. Was ist NPM und package.json?
Antwort:
- NPM (Node Package Manager): Der Standard-Paketmanager für Node.js. Es ermöglicht Ihnen, Bibliotheken (Abhängigkeiten) zu installieren und zu verwalten.
package.json: Die Manifestdatei für ein Node.js-Projekt. Sie listet Metadaten (Name, Version) und Abhängigkeiten (Bibliotheken, die zum Ausführen der App erforderlich sind) auf.
Seltenheit: Häufig Schwierigkeitsgrad: Leicht
14. Erkläre den Unterschied zwischen GET und POST.
Antwort:
- GET: Wird verwendet, um Daten von einem Server abzurufen. Parameter werden in der URL gesendet. Sollte idempotent sein (sicher zu wiederholen).
- POST: Wird verwendet, um Daten an einen Server zu senden, um eine Ressource zu erstellen/aktualisieren. Daten werden im Anforderungstext gesendet. Nicht idempotent.
Seltenheit: Häufig Schwierigkeitsgrad: Leicht
Datenbank (SQL)
15. Was ist ein Primary Key und ein Foreign Key?
Antwort:
- Primary Key: Eine Spalte (oder eine Menge von Spalten), die jede Zeile in einer Tabelle eindeutig identifiziert. Sie darf nicht
NULLsein. - Foreign Key: Eine Spalte, die auf den Primary Key einer anderen Tabelle verweist. Sie stellt eine Beziehung zwischen zwei Tabellen her.
Seltenheit: Häufig Schwierigkeitsgrad: Leicht
16. Erkläre den Unterschied zwischen INNER JOIN und LEFT JOIN.
Antwort:
- INNER JOIN: Gibt Datensätze zurück, die in beiden Tabellen übereinstimmende Werte haben.
- LEFT JOIN (oder LEFT OUTER JOIN): Gibt alle Datensätze aus der linken Tabelle und die übereinstimmenden Datensätze aus der rechten Tabelle zurück. Wenn keine Übereinstimmung vorhanden ist, ist das Ergebnis auf der rechten Seite
NULL.
Seltenheit: Sehr häufig Schwierigkeitsgrad: Mittel
17. Was ist Normalisierung?
Antwort: Normalisierung ist der Prozess der Organisation von Daten in einer Datenbank, um Redundanz zu reduzieren und die Datenintegrität zu verbessern.
- Ziel: Größere Tabellen in kleinere Tabellen aufteilen und diese mithilfe von Beziehungen verknüpfen.
- Formen: 1NF, 2NF, 3NF (die dritte Normalform ist für die meisten Anwendungen in der Regel ausreichend).
Seltenheit: Ungewöhnlich (für Juniors) Schwierigkeitsgrad: Mittel
Allgemein
18. Was ist Git und warum verwenden wir es?
Antwort: Git ist ein verteiltes Versionskontrollsystem.
- Verwendung: Es verfolgt Änderungen im Quellcode während der Softwareentwicklung.
- Vorteile: Ermöglicht die Zusammenarbeit mehrerer Entwickler (Collaboration), speichert einen Verlauf der Änderungen (Versioning) und ermöglicht die Wiederherstellung früherer Zustände, wenn etwas kaputt geht.
Seltenheit: Häufig Schwierigkeitsgrad: Leicht
19. Was ist eine API?
Antwort: API steht für Application Programming Interface (Anwendungsprogrammierschnittstelle). Es handelt sich um eine Reihe von Regeln, die es verschiedenen Softwareanwendungen ermöglichen, miteinander zu kommunizieren. In der Webentwicklung bezieht es sich normalerweise auf eine REST-API, bei der ein Frontend (Client) Daten von einem Backend (Server) anfordert.
Seltenheit: Häufig Schwierigkeitsgrad: Leicht
20. Wie debuggt man eine Webanwendung?
Antwort:
- Frontend: Verwendung der Browser Developer Tools (Konsole für Fehler, Network-Tab für API-Aufrufe, Elements-Tab für CSS/HTML).
- Backend: Verwendung von
console.log(oder einem Logger), Debugging-Tools in IDEs (VS Code Debugger) und Überprüfung der Serverprotokolle.
Seltenheit: Häufig Schwierigkeitsgrad: Leicht
