Question 1. What is TCP Slow Start?
•
TCP doesn’t send data at full speed immediately.
•
At first, congestion window (~14KB) is very small.
•
With each ACK received, congestion window increases exponentially until a threshold, then grows linearly.
•
Purpose: probe network capacity safely, avoid overwhelming routers.
•
Implication: keep first HTML response <14KB (compressed) for best initial load speed.
Question 2. What are TypeScript Generics?
•
Generics = types as variables.
•
Accepting types as parameters like variables.
•
Allow functions, classes, and interfaces to be type-agnostic while preserving type safety.
function identity<T>(value: T): T {
return value;
}
identity<number>(10); // Explicit
identity("hi"); // Type inferred
TypeScript
복사
Benefits
•
Reusability
•
Type safety
•
Works with complex data structures (arrays, promises, etc.)
Question 3. Difference between null and undefined
•
undefined: variable declared but not assigned a value.
•
null: explicitly assigned “no value”.
let a; // undefined
let b = null; // null
JavaScript
복사
Question 4. How to show a modal on hover?
•
Purely visual: CSS :hover + visibility/opacity/transform.
•
With logic: JavaScript (React useState + onMouseEnter).
Question 5. How was state managed before React?
•
Manual DOM manipulation via vanilla JS or jQuery.
•
UI = imperative: directly updated DOM nodes.
•
Problem: state scattered across code → unmaintainable in large apps.
•
React introduced declarative state → UI model:
f(state) = UI
Question 6. Common causes of memory leaks in JS
•
Global variables not released.
•
Event listeners not removed.
•
Timers (setInterval, setTimeout) left running.
•
References to detached DOM nodes.
•
Objects strongly held in Map/Set.
Prevention
•
Always removeEventListener when elements are removed.
•
Clear timers (clearInterval, clearTimeout).
•
Minimize global state.
•
Prefer WeakMap / WeakSet for temporary associations.
let obj = { name: "hank" };
// Using Map (strong reference)
let map = new Map();
map.set(obj, "developer");
obj = null;
console.log(map.size); // 1 → object not GC’d
// Using WeakMap (weak reference)
let weakMap = new WeakMap();
let obj2 = { name: "hank" };
weakMap.set(obj2, "developer");
obj2 = null;
// eligible for GC, weakMap cleans up automatically
JavaScript
복사
Question 7. What is a Higher-Order Function (HOF)?
•
Function that takes a function as input or returns one.
•
Examples: map, filter, reduce.
const multiplier = (factor) => (n) => n * factor;
const double = multiplier(2);
double(5); // 10
JavaScript
복사
•
React hooks like useCallback, useMemo also follow HOF pattern.
Question 8. Key ES6 Features
1.
Destructuring
const { name, age } = { name: "Hank", age: 25 };
JavaScript
복사
2.
Optional Chaining (?.)
user?.profile?.email;
JavaScript
복사
3.
Nullish Coalescing (??)
let a = 0;
a ?? 10; // 0
a || 10; // 10
JavaScript
복사
4.
Spread Operator (...)
const arr2 = [...arr1];
const obj = { ...obj1, ...obj2 };
JavaScript
복사
Question 9. What are React Class Components?
•
Before React Hooks, components were ES6 classes with render() method.
class MyComponent extends React.Component {
render() {
return <h1>Hello</h1>;
}
}
JavaScript
복사
•
Today → functional components + hooks preferred.
Question 10. What are React Concurrent Features?
•
Introduced in React 18 for interruptible rendering.
•
startTransition → mark low-priority updates.
•
useDeferredValue → delay expensive computation until after urgent UI.
•
Makes UIs feel more responsive.
Question 11. What is React Fiber?
•
React’s new reconciliation engine (since v16).
•
Splits rendering work into chunks (units of work).
•
Can pause, resume, or discard work → enables concurrent rendering.
Before React 16
•
Rendered whole tree at once → browser freeze if too heavy.
With Fiber (v16+)
•
Breaks rendering into small units of work.
•
Can pause/resume/discard.
•
User input is never blocked → smoother UI.
Question 12. What is React Strict Mode?
•
Development-only wrapper to detect potential issues.
•
Runs some functions twice to detect side effects.
•
Detects unsafe lifecycles, legacy APIs, deprecated patterns.
•
No effect in production.
Question 13. What is useLayoutEffect?
•
Runs synchronously after DOM mutations, before paint.
•
Useful for measuring layout or applying sync updates.
•
Warning: blocks paint → use sparingly.
Question 14. Next.js Key Features
1.
Server vs Client Components (App Router)
2.
Hydration (client JS attaches to server-rendered HTML)
3.
SEO & Metadata APIs
4.
Image Optimization with <Image>
5.
Code Splitting & Lazy Loading
6.
Serverless API Routes (/api/*)
Question 15. What testing tools do you use?
•
Jest → unit tests, mocking.
•
React Testing Library (RTL) → user perspective.
•
Cypress / Playwright → end-to-end tests.
Question 16. How do you test async data fetching?
•
Use findBy... or waitFor.
•
Mock network requests with jest.mock.
•
Verify: loading → success → error states.
Question 17. How do you test forms & UI interactions?
•
Use userEvent.type, userEvent.click.
•
Assert validation messages, enabled/disabled states, submission handling.
Question 18. When to use E2E tests?
•
For critical user flows (login, checkout, dashboard).
•
Unit/integration cover most logic, E2E reserved for high-value scenarios.
Question 19. Live Coding Examples
// Remove duplicates
const arr = [1,2,3,5,2,3,5,6,7,5];
console.log([...new Set(arr)]);
// Debounce
function debounce(fn, delay) {
let t;
return (...args) => {
clearTimeout(t);
t = setTimeout(() => fn(...args), delay);
};
}
// Palindrome
const isPalindrome = (s) => s === s.split("").reverse().join("");
JavaScript
복사
/* CSS Grid */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
/* Hover transition */
.box {
transition: background 0.3s ease;
}
.box:hover {
background: red;
}
CSS
복사
