These are common questions that appear in frontend interviews.
They are not just for interview prep but represent core knowledge every frontend developer should understand.
Question 1. What is the relationship between SSR and Hydration?
SSR (Server-Side Rendering)
•
Server executes React components and sends fully rendered HTML.
•
HTML is static: no event handlers or state logic.
Hydration (Client-Side Work)
•
Browser downloads JS bundle.
•
React attaches event handlers and state to pre-rendered HTML.
•
Example: <button> rendered on server, but onClick only connects during hydration.
Why Hydration?
•
SSR provides visible page but only a static shell.
•
React must sync Virtual DOM with real DOM and attach logic → hydration.
Question 2. What is Tree Shaking, and what are its requirements?
Definition
•
Tree Shaking = remove unused (dead) code from final bundle.
•
Optimizes size and performance.
How it Works
•
Bundlers (Webpack, Rollup, Vite) analyze ES Modules (import/export).
•
Unused exports excluded.
Requirements
1.
Must use ESM, not CommonJS.
2.
Code must be side-effect free.
3.
Set "sideEffects": false in package.json.
4.
Use explicit imports instead of import *.
Example
ESM (works)
// math.js
export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }
// main.js
import { add } from "./math.js";
console.log(add(1, 2)); // `sub` removed
JavaScript
복사
CommonJS (fails)
const math = require("./math.js");
const op = process.env.OP;
console.log(math[op](1, 2)); // runtime decision → bundler keeps all
JavaScript
복사
Tree Shaking requires ESM + side-effect management.Question 3. What is a Closure, and when is it useful?
Definition
•
A closure is a function that “remembers” its lexical scope even after the outer function ends.
How it Works
•
JS uses lexical scoping.
•
Inner functions can access outer variables.
•
If referenced, those variables stay in memory.
Use Cases
1.
Data encapsulation
function counter() {
let count = 0;
return () => ++count;
}
const inc = counter();
inc(); // 1
inc(); // 2
JavaScript
복사
Protects state without globals.
2.
State persistence across calls.
3.
Callbacks / Event Handlers in async code.
Closures = data hiding + state persistence.Question 4. What do <script defer> and <script async> do? What’s the difference?
Default Behavior
•
<script> blocks HTML parsing to execute immediately.
defer
•
Download in parallel.
•
Execute after parsing, before DOMContentLoaded.
•
Preserves script order.
async
•
Download in parallel.
•
Execute immediately after download (may pause parsing).
•
Order not guaranteed, DOM may not be ready.
defer = predictable (after DOM ready). async = fastest, but unordered.Question 5. What’s the difference between DOMContentLoaded and load?
DOMContentLoaded
•
Fires when HTML parsed & DOM built.
•
Waits for CSS, not for images/media.
•
Best for JS init.
load
•
Fires after all resources (images, CSS, iframes) loaded.
•
Always later than DOMContentLoaded.
Event Order
HTML Parsing → DOM Creation → CSSOM Creation → DOMContentLoaded → load
Plain Text
복사
