Question 1. How do you implement responsive design?
•
Media Queries → Apply styles for different breakpoints.
•
Flexible Units → Use %, em, rem, vw/vh for scalable layouts.
•
Fluid Images → max-width: 100% to adapt images to container size.
•
Modern Layouts → CSS Grid/Flexbox for flexible structure.
Question 2. Difference between CSS variables and SCSS variables?
CSS Variables (-var)
•
Native to browsers, live at runtime.
•
Can be updated dynamically with JavaScript.
:root {
--main-color: blue;
}
.btn {
background: var(--main-color);
}
CSS
복사
SCSS Variables ($var)
•
Exist only at compile time (preprocessing).
•
Cannot be changed dynamically after build.
$main-color: blue;
.btn {
background: $main-color;
}
Scss
복사
CSS vars = runtime & dynamic, SCSS vars = build-time & static.Question 3. Difference between transitions and animations?
•
Transitions
◦
Define changes between two states.
◦
Triggered by user interaction (hover, click).
◦
Example: transition: all 0.3s ease;.
•
Animations
◦
Use keyframes for multiple intermediate states.
◦
Run automatically or loop infinitely.
◦
Example:
@keyframes fadeIn {
from { opacity: 0 }
to { opacity: 1 }
}
CSS
복사
For performance: prefer transform & opacity (GPU accelerated).Question 4. What are Promises and async/await? What’s their relationship?
Promise
•
Represents result of an async operation (pending → fulfilled/rejected).
•
Handled with .then(), .catch().
async/await
•
Syntactic sugar over Promises.
•
await pauses execution until Promise resolves.
•
Code looks synchronous → better readability.
Notes
•
Use Promise.all() for parallel tasks.
•
Wrap in try/catch for error handling.
•
Async functions always return a Promise.
Promise = async abstraction, async/await = cleaner syntax.Question 5. What is a RESTful API?
•
API design style based on REST principles:
◦
Resource-based: /users/1 = fetch user #1.
◦
Stateless: server doesn’t store session state.
◦
Cacheable: HTTP caching (Cache-Control, Expires).
◦
Client-Server Separation: frontend and backend independent.
•
Alternatives: gRPC, GraphQL.
Question 6. What are HTTP methods?
•
GET → Retrieve resource.
•
POST → Create resource.
•
PUT → Replace resource entirely.
•
PATCH → Update part of resource.
•
DELETE → Delete resource.
•
HEAD → Fetch headers only.
•
OPTIONS → Discover supported methods (CORS preflight).
Question 7. Explain HTTP status codes.
•
1xx: Informational.
•
2xx: Success (200 OK, 204 No Content).
•
3xx: Redirection.
•
4xx: Client error (400 Bad Request, 404 Not Found).
•
5xx: Server error (500 Internal Server Error).
Axios treats 200–299 as resolved, others as rejected.Question 8. Explain Debouncing vs Throttling.
•
Debouncing
◦
Groups many events into one.
◦
Runs only after a pause.
◦
Example: search suggestions after typing.
•
Throttling
◦
Ensures event fires at most once per interval.
◦
Example: scroll handler every 200ms.
Both reduce excessive function calls.Question 9. What is Micro-Frontend Architecture?
•
Applying microservices principles to frontend.
•
Splits large app into smaller, independently deployable frontends.
Evolution
•
Early: iframes (bad UX).
•
Modern: Webpack Module Federation → dynamically load components.
Benefits
•
Independent teams & deployments.
•
Mix of different frameworks possible.
Challenges
•
Shared state, data flow, UX consistency.
Question 10. What is JWT, and what are its pros/cons?
Structure
1.
Header → algorithm & type.
2.
Payload → claims (user data).
3.
Signature → ensures integrity.
Pros
•
Stateless: server doesn’t store session.
•
Works across domains.
Cons
•
Token is long (bandwidth overhead).
•
Payload is base64-encoded, not encrypted → don’t store sensitive info.
Question 11. Why is React called “React”?
•
Because it reacts to state changes.
•
UI is a function of state: state changes → React re-renders efficiently.
Question 12. What is Webpack, and why use it?
Definition
•
A module bundler for JS apps.
•
Collects and bundles JS, CSS, images into optimized files.
Features
•
Dependency graph creation.
•
Loaders for preprocessing.
•
Plugins for optimization.
•
Tree-shaking (remove unused code).
Without bundlers, large apps would need hundreds of <script> tags.Question 13. What is Webpack’s dependency graph?
•
A graph built by Webpack starting from entry point.
•
Traces all import/require dependencies.
•
Determines what to include in final bundle.
Question 14. What is CSS-in-JS, and what are its drawbacks?
What
•
Write CSS inside JS.
•
Enables dynamic styles (based on props/state).
How
•
Styles injected into DOM at runtime via JS.
Drawbacks
•
No static CSS file → harder caching.
•
Increases JS bundle size.
•
Debugging harder (auto-generated class names).
•
Possible layout shifts until JS runs.
Question 15. What is FCP (First Contentful Paint)? Causes of bad FCP and improvements?
Definition
•
Time from navigation until first piece of DOM content is rendered.
Causes of Poor FCP
•
Large JS bundle.
•
Heavy CSS blocking render.
•
Assets not cached/CDN optimized.
Improvements
1.
Use CDN & caching.
2.
Analyze bundle → remove unused JS.
3.
Code splitting & lazy loading.
4.
Preload critical resources.
5.
Optimize CSS (minify, inline critical CSS).
