This part covers CSS stacking contexts, controlled/uncontrolled components, Pure Components, positioning, HTTP protocols, and client-side storage options.
Question 1. What is z-index and what is a Stacking Context?
z-index
•
Determines the stacking order of elements along the z-axis.
•
Higher z-index values appear in front of lower values.
Stacking Context
•
A new stacking context is created under certain conditions:
◦
Root element (<html>)
◦
Elements with position: absolute | relative | fixed | sticky and z-index not auto
◦
Elements with opacity < 1
◦
Elements with a transform applied
Important Rules
•
z-index is only compared within the same stacking context.
•
A child cannot escape its parent’s stacking context.
Common Issue
•
Modals, dropdowns, tooltips appear “behind” other elements despite high z-index.
•
Cause: trapped in a parent stacking context.
Solutions
1.
Remove the parent’s stacking context (position, transform, etc.).
2.
Render modal/dropdown at the root (e.g., <body>).
React Portals
•
ReactDOM.createPortal renders components outside normal DOM hierarchy.
•
Useful for modals, dropdowns, and tooltips.
Question 2. What are Controlled vs Uncontrolled Components in React?
•
Controlled Components
◦
Form elements (input, textarea, etc.) where value is controlled by React state.
◦
Example:
const [value, setValue] = useState("");
<input value={value} onChange={(e) => setValue(e.target.value)} />;
JavaScript
복사
•
Uncontrolled Components
◦
Form elements that manage their own state in the DOM.
◦
Accessed via ref.
const ref = useRef();
<input ref={ref} />;
// later: ref.current.value
JavaScript
복사
Difference: state managed by React vs DOM.Question 3. What is a Pure Component?
•
A class component that implements shouldComponentUpdate with shallow prop/state comparison.
•
Prevents re-rendering when props/state haven’t changed.
class MyComponent extends React.PureComponent {
render() {
return <div>{this.props.value}</div>;
}
}
JavaScript
복사
•
Less relevant now: hooks optimize re-renders, and setState with the same value won’t trigger updates.
Question 4. Explain CSS position values.
1.
static → default, follows normal flow.
2.
relative → positioned relative to original position.
3.
absolute → positioned relative to nearest non-static ancestor.
4.
fixed → positioned relative to viewport, unaffected by scroll.
5.
sticky → acts like relative until scroll threshold, then fixed.
Question 5. Compare HTTP/1.1, HTTP/2, and HTTP/3.
HTTP/1.1
•
Separate TCP connection per request.
•
Keep-Alive allows reuse.
•
Suffers from Head-of-Line (HOL) blocking).
HTTP/2
•
Single TCP connection handles multiple requests (multiplexing).
•
Header compression (HPACK).
•
Faster but still limited by TCP.
HTTP/3
•
Uses QUIC (UDP-based).
•
Avoids TCP handshake delays.
•
Eliminates HOL blocking at transport layer.
•
Better resilience to packet loss.
Question 6. Compare Cookie, LocalStorage, SessionStorage, and IndexedDB.
Cookie
•
Key-value storage, sent with every HTTP request.
•
Used for authentication/session.
•
Size limit ~4KB.
LocalStorage
•
Key-value string storage.
•
5–10 MB limit.
•
Persistent across browser restarts.
•
Shared across tabs of same origin.
SessionStorage
•
Same API as LocalStorage.
•
Cleared when tab/window closes.
•
Isolated per tab.
IndexedDB
•
Asynchronous NoSQL database in the browser.
•
Stores structured data (objects, arrays, files).
•
Much larger capacity (hundreds of MB+).
•
Supports transactions, indexes, queries.
•
Ideal for PWAs, offline apps, large caches.
Summary:•
Cookie → small, server communication, auth/session.
•
LocalStorage → persistent, client-only small data.
•
SessionStorage → per-tab, short-lived.
•
IndexedDB → large-scale structured storage.
