inflearn logo

Frontend Masterclass

This is an advanced frontend course designed for students and professionals with at least one year of web development experience. It is best suited for those with 2–3 years of industry experience who are facing a plateau in their skills or wish to learn about product architectures required by large-scale enterprises.

(4.7) 13 reviews

229 learners

Level Intermediate

Course period Unlimited

JavaScript
JavaScript
React
React
Functional Programming
Functional Programming
oop
oop
Next.js
Next.js
JavaScript
JavaScript
React
React
Functional Programming
Functional Programming
oop
oop
Next.js
Next.js

Reviews from Early Learners

Reviews from Early Learners

4.7

5.0

관태

33% enrolled

A lecture I selfishly want to keep to myself.. A lecture that can help you level up if you're aspiring to be a frontend developer and are at a junior level A lecture focused more on advanced topics rather than basics Recommended for those who want to broaden their perspective and write better code instead of just writing code that simply works!

5.0

mike1124

100% enrolled

I planned to complete the entire course during the holiday, but there's really a lot of content. It's literally like a comprehensive gift set that lets you see the entire frontend at a glance. I could grasp the overall flow, and the core and important content was explained through practical examples, so I was able to listen with such immersion that I thought "I need to try this at work right after the holiday ends." Having some backend experience helped me understand it better. The course materials were well-prepared, which was great even for the difficult parts. And overall, the conceptual explanations were provided together, so I felt it was a good course suitable for the AI era. After taking this course, I can see shortcomings that weren't visible before, and I also think about how this could be improved. The goal of this course is to have different eyes when looking at code compared to before, and I really became able to think about many things even when looking at a single piece of code. Thank you for the great course.

5.0

왕감자

100% enrolled

It feels like you're providing a comprehensive summary of advanced topics, including refactoring approaches you've been contemplating.

What you will gain after the course

  • Advanced Frontend Development Methodologies

  • GoF Object Structures and Practical Application Examples

Welcome to the Frontend Master Class

Many developers find themselves reaching a point where they feel they are no longer growing. They wonder what more they should study, what they are lacking, and what kind of considerations developers working at large corporations or companies providing entirely different services keep in mind while developing.


The Frontend Master Course combines everything from the basics to the modules and programming methodologies that form the core framework of modern frontend development. Through this course, starting from GoF methodologies, we cover modern code patterns and usage of React and Next.js, state management strategies, design patterns, code structure, animation libraries, and testing tools—providing content that helps you advance from a beginner to an intermediate and advanced developer. It covers JavaScript, React, functional programming, object-oriented programming, and Next.js in depth, while Vue.js and Svelte are hardly covered.

Selected as the 2025 Top Rookie, thank you to all the students.

Who is this course for?

1. Those with at least one year of experience in frontend study or professional work.

This is an advanced course for those who have a basic understanding of HTML, CSS, and JavaScript and have experience developing simple web applications. It is suitable for those who wish to build deeper frontend development capabilities based on the foundational knowledge they have already acquired.


2. Professionals who feel a lack of progress due to repetitive code patterns

Do you feel like your growth has stalled while writing similar code every day? This course presents various patterns and approaches to efficiently solve complex problems frequently encountered in the field. You can learn advanced techniques that improve code quality and enhance development productivity.


3. Those who need to learn about the deep specifications and development patterns of JavaScript

Do you want to go beyond simply using JavaScript and write more efficient code based on a deep understanding of the language? In this course, we cover advanced concepts such as JavaScript's internal workings, asynchronous programming, functional programming, and design patterns in detail with practical examples.

Detailed Curriculum

Advanced JavaScript

  • Runtime Structure

  • Callback functions and Promises

  • Web API

  • Map / WeakMap

  • Set / WeakSet

  • Closure and Memory Management

Part of the explanation regarding 'this'

Programming Paradigms

  • Object-Oriented Programming

  • GoF Programming Design Patterns

  • Functional Programming

  • How to Use Generators

Builder Pattern Lecture

Design Patterns

  • Atomic Design Pattern

  • Presentational & Container Pattern

  • FSD Pattern

  • Custom Hooks

  • Compound Components

  • Render Props Pattern

  • Higher-Order Components (HOCs)

  • Memoization

  • Virtualization

  • Props Collections & Getters

  • Slot

  • State Reducer

  • Lifted State

Memoization Lecture

State Management

  • The Background of State Management emergence

  • Redux State Management

  • Recoil State Management

  • Zustand State Management

  • Jotai State Management

  • Context API Usage Strategies

Part of the Jotai explanation

React/Next.js Ecosystem 

  • Features by React version

  • Next.js features by version

  • Fetching Strategies (React-query, SWR, Axios)

  • CSR data fetching strategies

  • SSR data fetching strategies

  • ISR data fetching strategy

  • SEO in Next.js

Some of the development directions of React

Styling

  • Design system construction methods

  • Tailwind

  • Emotion.js

  • CSS Modules

Styling

Form Management

  • Form Handling

  • Synchronous/Asynchronous Validation Strategies

  • Form User UX

Form Management

Testing

  • Unit Testing

  • Integration testing strategy

  • E2E Testing Strategy

Testing

Animation

  • How to use GSAP

  • How to use Framer Motion

  • How to use Anime.js

  • Animation UX Optimization

Thanos Snap

Authentication and Security

  • OAuth 2.0, NextAuth.js, OpenID Connect

  • Session and Token Management

  • Next.js Token Strategy

  • Two-way Encryption Payload

NextAuth.js

Performance Optimization

  • Core Web Vitals

  • Critical CSS

  • Code Splitting

  • Lazy Load

  • Image/Font/Bundle Optimization

Safari

Parallel processing

  • How to use Web Workers

  • Improving browser parallel processing performance

  • Browser Offline Strategy

Workers are self-contained

Accessibility and Internationalization

  • WCAG 2.1 Web Accessibility

  • ARIA Use Cases

  • Accessibility Testing Tools

  • i18n implementation and multilingual management

  • Formatting/RTL/Currency Handling

  • Localization Performance Strategy

Firefox Browser Developer Tools

Development Tools

  • How to use developer tools

  • How to use web analytics tools

  • How to use bundling evaluation tools

Layout Changes

Extensive lecture materials

The lecture materials consist of numerous code examples, explanations, and answers to anticipated questions.

Part of the lecture materials

Notes before taking the course

Practice Environment

  • Operating System and Version (OS): All OSs including Windows, macOS, and Linux are supported.

  • Tools used: Cursor and internet browser

  • PC Specifications: A basic specification PC with internet access

Learning Materials

  • Format of provided learning materials: Miro, etc.

  • Quantity and Capacity: Learning materials provided for each section

Prerequisite Knowledge and Precautions

  • The more experience you have struggling to solve programming problems on your own, the more helpful this lecture will be.

  • It will be even more helpful if you have experience in backend and DevOps beyond frontend.

  • The copyright of this lecture belongs to the instructor, and unauthorized distribution or reproduction is prohibited. The learning materials are also copyrighted and may not be used for any purpose other than personal study.

To all students


Hello, I'm Sanghoon Han.


I created my first product when I was in the second year of middle school. I didn't know then that the website I built would become a turning point in my life. More than a thousand people visited that first website on its very first day, and I received encouragement and praise from dozens of anonymous online users. Unable to forget that experience, I have continued to make numerous attempts in the web field.


Ever since tasting that sweet moment of success, I have faced endless cycles of challenge and failure. I spent years developing in a small room to create the products I envisioned, and through that process, I came to understand the pain and difficulty of developing alone better than anyone else. Because I know those emotions and that loneliness so well, I have consistently recorded and shared my journey with the world for over 10 years. I wanted to deliver a message to those working in lonely environments like mine, where there is no one to teach them. I wanted to tell them, "You are not alone."


In my professional career running a development agency, I have met with dozens of companies, conducted numerous transactions, and built many products. Through that process, I was able to observe the development directions, philosophies, and priorities of each company. I also saw people suffering from poor code patterns and toxic development cultures under a few authoritative developers in small environments. The Korean development market may appear to be doing the same kind of work, but it is growing in completely different ways.


If you are leading a project in a small company, or if you are starting to have doubts and feel anxious about the way you have been developing so far, this lecture will be helpful. I do not insist only on the methods I have taught. I want to tell you the story of a developer who has experienced it first—sharing the records of how I have learned, thought about code, and contemplated better code throughout my life.


There is no such thing as "truth" when it comes to code. Developers must make countless trade-offs and find the better choice depending on the situation. In that process, while a junior developer might make a decision based on only a few options, a senior developer can interpret problems with deeper insight. Writing code in a different form even if it appears to function the same way, and writing it in a more readable form, is achieved through contemplation and experience.


Through this course, you will be able to look at the code you've written in the past with a different perspective. When you look at code with new eyes, you start to consider things you've never thought of before, and in the process of resolving those concerns, you can create better code. This course contains the challenges and solutions that countless senior developers have experienced. I hope you gain your own insights by observing the solutions of those who have grappled with these issues before you.

Recommended for
these people

Who is this course right for?

  • A frontend developer who has reached a plateau in their skills

  • Those with at least one year of experience in web development.

Need to know before starting?

  • Basic programming knowledge

  • At least 1 year of experience in web development

  • Understanding of basic HTML and CSS syntax

  • A basic understanding of vanilla JavaScript

  • At least 6 months of experience using React.js and Next.js

Hello
This is hoonyhan

229

Learners

13

Reviews

13

Answers

4.7

Rating

1

Course

I am Sanghoon Han, a full-stack developer.

YouTube: https://www.youtube.com/@hoony_han

Curriculum

All

436 lectures ∙ (56hr 33min)

Published: 
Last updated: 

Reviews

All

13 reviews

4.7

13 reviews

  • tkyoun12409907님의 프로필 이미지
    tkyoun12409907

    Reviews 5

    Average Rating 5.0

    Edited

    5

    33% enrolled

    A lecture I selfishly want to keep to myself.. A lecture that can help you level up if you're aspiring to be a frontend developer and are at a junior level A lecture focused more on advanced topics rather than basics Recommended for those who want to broaden their perspective and write better code instead of just writing code that simply works!

    • knoa0405님의 프로필 이미지
      knoa0405

      Reviews 3

      Average Rating 5.0

      5

      100% enrolled

      I planned to complete the entire course during the holiday, but there's really a lot of content. It's literally like a comprehensive gift set that lets you see the entire frontend at a glance. I could grasp the overall flow, and the core and important content was explained through practical examples, so I was able to listen with such immersion that I thought "I need to try this at work right after the holiday ends." Having some backend experience helped me understand it better. The course materials were well-prepared, which was great even for the difficult parts. And overall, the conceptual explanations were provided together, so I felt it was a good course suitable for the AI era. After taking this course, I can see shortcomings that weren't visible before, and I also think about how this could be improved. The goal of this course is to have different eyes when looking at code compared to before, and I really became able to think about many things even when looking at a single piece of code. Thank you for the great course.

      • wavyroom님의 프로필 이미지
        wavyroom

        Reviews 98

        Average Rating 5.0

        5

        88% enrolled

        I ran non-stop during the holidays. This is a lecture for those who want to see the flow of frontend at a glance!

        • jackson52723404님의 프로필 이미지
          jackson52723404

          Reviews 1

          Average Rating 5.0

          5

          100% enrolled

          It feels like you're providing a comprehensive summary of advanced topics, including refactoring approaches you've been contemplating.

          • y2jnwo20031님의 프로필 이미지
            y2jnwo20031

            Reviews 3

            Average Rating 5.0

            5

            8% enrolled

            I've only made it through about 1 chapter so far, so this isn't a comprehensive review, but it was good. There's a book called JavaScript Deep Dive that has a similar feel. That book also tends to be polarizing - it gets poor reviews from people who prefer project-based hands-on learning, and this course is similarly focused on theory and key examples.

            Similar courses

            Explore other courses in the same field!

            $652.30