Concepts Worth Reviewing Before a Frontend Interview

When you start applying for frontend roles, it's hard to know where to look first. The scope runs from the browser to JavaScript, React, and CSS, and that breadth makes it tough to pick a starting point.

So I went back to the notes I collected while preparing and reorganized them by concept. Concepts I had already written up are explained here. Topics I had only jotted down as keywords are left as a checklist you can quiz yourself with.

The Browser#

How the browser renders a page#

Browser rendering is the process of turning resources like HTML, CSS, and JavaScript into pixels on the screen. You can break it into five steps.

1. Build the DOM — The browser parses the HTML document, turns tags into nodes, and links them into a hierarchy to form the DOM tree.
2. Build the CSSOM — It parses the CSS, turns properties into nodes, and forms the CSSOM tree with the same kind of hierarchy.
3. Build the render tree — It combines the DOM tree and the CSSOM, keeping only the elements that will actually be displayed.
4. Layout — Using the render tree, it calculates the size and position of every element.
5. Paint — It draws each element's background, borders, text, and so on at the calculated positions.

More browser topics to review#

These are topics that existed only as keywords in my notes. Check whether you can explain each one in a single sentence.

• How the browser works
• What happens when you type a URL
• Encrypting data in transit
• Preventing XSS
• How to measure frontend performance in the browser, and what to look at when hunting for improvements

JavaScript#

Hoisting#

Hoisting is the behavior where variable and function declarations act as if they were lifted to the top of their scope. Because of this, using something before its declaration can produce unexpected errors.

The difference between == and ===#

== is the equality operator. It performs type coercion before comparing, so even values of different types get converted to a matching type first. That automatic conversion can produce results you didn't expect.

=== is the strict equality operator. It checks that both the type and the value match, with no coercion. That makes it safer and easier to predict.

Closures#

A closure is tied to the lexical environment that gets created automatically when a function is declared. That lexical environment forms a lexical scope containing every variable and function visible at declaration time, and those scopes chain together into the scope chain.

Thanks to this, an inner function can keep accessing variables from the outer function's scope even after the outer function has finished and returned. Closures are mostly used for information hiding.

Async functions and the event loop#

An async function is one whose result isn't returned immediately. It waits until some condition is met, and it usually returns a callback or a Promise.

• Callback — A function that gets called when the async work finishes.
• Promise — An object that represents whether the async work succeeded or failed.

Async functions improve application performance and keep the user interface responsive. To avoid problems like callback hell, though, you need proper error handling and a clean code structure.

When several async functions run, the event loop handles the calls and invokes each callback as its work completes. In other words, the event loop controls the order in which async functions finish.

More JavaScript topics to review#

• The difference between var, let, and const
• How the event loop works
• The most commonly used data structures and algorithms in JavaScript, and what each is for

Events#

Event bubbling#

Event bubbling is what happens when an event fires on an HTML element: after that element handles it, the event propagates up to its ancestors. The upside is that parent elements can detect the event while it propagates.

Event delegation#

By taking advantage of bubbling, you can register a single handler on a parent and handle every event that fires on its children. Binding events from many child elements to one handler like this is called event delegation.

If you want to stop bubbling or capturing, call stopPropagation() on the event object to halt propagation, or check which element triggered the event inside the handler and act accordingly.

More event topics to review#

• User interaction

CSS#

The difference between Flex and Grid#

Flex is mainly for laying things out along a single axis. Items can size themselves freely and adapt, which makes Flex a good fit for layouts that change fluidly.

Grid is for building a two-dimensional grid system. It aligns along both the horizontal and vertical axes, and because you define item sizes up front, each cell stays consistent. That makes it a better fit for layouts that don't change much.

More CSS topics to review#

• How a web page is structured
• CSS styling approaches, plus the syntax of a CSS declaration and what each part is called
• Key features of HTML5 and CSS3 and current trends

React and Architecture#

Class components vs. function components#

React gives you two ways to build components: class components and function components. Class components are defined with ES6 classes. Function components are defined as functions and are usually paired with the hook API.

The biggest difference is how they handle state and lifecycle.

• Class components — State lives in this.state, and you override lifecycle methods to do work. You reference state and methods through the this keyword.
• Function components — State is defined with the useState hook, and lifecycle is handled with useEffect. There's no this keyword involved.

Because of this, function components are more concise and readable. They're also easier to test and refactor.

MVVM vs. Flux#

MVVM uses data binding to keep a two-way data flow between the View and the ViewModel. The ViewModel sits between the View and the Model and mediates data between them. Frameworks like Angular and Vue.js use it.

Flux uses a one-way data flow in the direction of Action → Dispatcher → Store → View. The Store owns the application's data and business logic, and Actions are processed through the Dispatcher. It's mostly used with React.

They differ from a testing perspective too. Flux follows a one-way flow and the single responsibility principle, which makes it easier to write testable code. MVVM's two-way binding can make testing harder.

More React topics to review#

• How React works under the hood
• The React lifecycle
• State management approaches
• React's use-prefixed functions
• Micro frontends
• The pros and cons of major frameworks like React, Vue, and Angular, and how to choose between them

Talking About Your Projects#

Just as important as the concepts is being able to share your project experience concretely. You should be able to explain what problem you actually ran into, how you solved it, and why you made the technical decisions you did.

For example, when I built my personal blog with Next.js, it couldn't resolve local image paths. Since it was a personal blog, a static site was the cheaper option in terms of maintenance and cost.

So during the build, I located each image through the path referenced in the markdown, base64-encoded it, and embedded that data directly into the static HTML. It helps to prepare experiences you can narrate in a problem → constraint → decision → result flow like this.

On top of that, solving coding problems regularly on sites like LeetCode or HackerRank is worth doing in parallel.

Interview Questions to Answer Yourself#

These are questions I either received in real interviews or collected while preparing. Once you've reviewed the concepts above, try answering them out loud.

React and Next.js#

1. Explain the difference between functional components and class components.
2. How does React's Virtual DOM differ from the real DOM, and why does it matter?
3. What's the difference between Static Generation and Server-side Rendering in Next.js?
4. How do you use the useState and useEffect hooks for state management in React?
5. Explain the purpose of getStaticProps, getStaticPaths, and getServerSideProps in Next.js and how they differ.

SEO and performance#

6. What SEO benefits does Next.js pre-rendering provide?
7. What strategies can make dynamic content in a React application SEO-friendly?
8. How would you manage meta tags and Open Graph tags dynamically in a Next.js project?
9. How do you integrate structured data into a React or Next.js application, and why does it matter?
10. How do you optimize page load speed in a Next.js / React product, and how does that affect SEO?
11. What methods and tools do you use for web performance optimization?
12. Your website is loading slowly and user satisfaction is dropping. How would you approach it?

Security and collaboration#

13. What web security vulnerabilities and attack methods do you know, and what measures prevent them?
14. How would you implement user authentication and authorization in a web application?
15. How should you respond when a website is hacked? Describe concrete response steps and preventive measures.
16. In a frontend project with multiple developers, how do you handle version control and collaboration efficiently?

Experience#

17. Walk me through a recent frontend project. Cover the goal, the tech you used, the main challenges and how you solved them, and the outcome.
18. What do you consider when implementing responsive web design? Answer with examples from a real project.

Further Reading#

If you've built a website, run it through the Front-End Checklist to make sure nothing is missing. Here are the other resources I leaned on while preparing. Most of them are written in Korean.

• A repo organizing what I studied for job hunting
• Resumes of F-Lab graduates
• Free employment rules for an autonomous-work organization
• Everything about preparing for a backend developer job
• Frontend knowledge worth knowing as a job seeker
• Building a handbook for frontend technical interviews
• 20 entry-level frontend interview questions, curated by a working developer
• A collection of frontend interview questions actually asked
• One-line JavaScript utilities for useful features

Rather than trying to memorize everything at once, the best place to start is the concept on this checklist you can't yet explain in one sentence. Fill those in one at a time.

All men who have achieved great things have been great dreamers.

— Orison Marden