강의

멘토링

커뮤니티

BEST
Programming

/

Web Development

Frontend Masterclass

This is an advanced frontend course for students and professionals with at least 1 year of web development experience. The ideal audience is those with 2-3+ years of industry experience who want to break through a skill plateau or learn about product architecture considerations for large enterprises.

(4.7) 13 reviews

215 learners

Level Intermediate

Course period Unlimited

  • hoonyhan
실습 중심
실습 중심
마스터과정
마스터과정
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 Methodology

  • GoF object structure and practical application examples

Welcome to the Frontend Master Class

Many developers find themselves unable to grow beyond a certain point. What more should they study, what are they lacking, and what considerations do developers at large companies or companies providing completely different services base their development on.


The Frontend Master Course combines everything from the basics to most of the core modules and programming methodologies that make up modern frontend development. Through this course, starting from GoF methodology to modern code patterns and usage of React and Next.js, state management strategies, design patterns, code structure, animation libraries, and testing tools, it contains content that will help you evolve from a beginner developer to an intermediate and advanced developer. We deeply cover JavaScript, React, functional programming, object-oriented programming, Next.js, etc., and rarely cover Vue.js and Svelte.

Thank you to all students for selecting this as the 2025 Best Rookie.

Who is this course for?

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

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 want to build deeper frontend development capabilities based on the foundational knowledge they have already learned.


2. Working professionals who feel stuck due to repetitive code patterns

Do you feel like your growth has stagnated while writing similar code every day? This course presents various patterns and approaches that can 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 JavaScript's deep specifications and development patterns

Do you want to move beyond simply using JavaScript to writing more efficient code based on a deep understanding of the language? This course covers 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

  • Closures and Memory Management

Part of the explanation about 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

  • Background of State Management

  • Redux State Management

  • Recoil State Management

  • Zustand State Management

  • Jotai State Management

  • Context API Usage Strategy

Part of the Jotai explanation

React/Next.js Ecosystem

  • React version-specific features

  • Next.js Version-Specific Features

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

  • CSR data fetching strategy

  • SSR data fetching strategy

  • ISR data fetching strategy

  • Next.js SEO

Some of React's development directions

Styling

  • Design system architecture

  • Tailwind

  • Emotion.js

  • CSS Modules

Styling

Form management

  • Form handling

  • Synchronous/Asynchronous Validation Strategies

  • Form user experience

Form management

Testing

  • Unit testing

  • Integration test strategy

  • E2E Testing Strategy

Testing

Animation

  • GSAP Usage

  • Motion Usage

  • 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

  • Web Worker Usage

  • Browser parallel processing performance improvement

  • Browser Offline Strategies

The worker is self

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 DevTools

Development Tools

  • How to use developer tools

  • How to use web analytics tools

  • Bundling evaluation tool usage

Layout changes

Comprehensive course materials

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

Part of the course materials

Notes Before Taking the Course

Practice Environment

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

  • Tools used: Cursor and internet browser

  • PC specifications: A basic PC with internet access

Learning Materials

  • Learning materials format provided: Miro, etc.

  • Amount and Capacity: Learning materials provided for each section

Prerequisites and Important Notes

  • The more experience you have thinking through and solving programming problems on your own, the more helpful it will be when taking this course.

  • If you have experience beyond frontend, including backend and DevOps, it will be even more helpful.

  • The copyright of this course belongs to the instructor, and unauthorized distribution and reproduction are prohibited. The learning materials are also copyrighted and may not be used for purposes other than personal learning.

To all students


Hello, I'm Han Sang-hoon.


I created my first product in 8th grade. I didn't know that the website I made back then would become a turning point in my life. Over a thousand people visited the website I created on the first day, and I received encouragement and praise from dozens of anonymous online users. Unable to forget that experience, I continued to make numerous attempts in the web field.


After tasting that sweet moment, I endlessly repeated challenges and failures. I've been developing in a small room for years to create the products I wanted, and through that process, I know better than anyone the pain and difficulty of developing alone. Because I know those feelings and loneliness so well, I've been consistently documenting and sharing the path I've walked for over 10 years. I wanted to deliver a message to those working in lonely environments like mine, in environments where there's no one to teach them. I wanted to tell them 'You are not alone'.


I run a development company in the field, and I've met with dozens of companies, conducted numerous transactions, and created many products. Through that process, I was able to see each company's development direction, philosophy, and what they value. I also saw people suffering from poor code patterns and development culture under a few small, authoritarian developers. Korea's development market appears to be doing the same development like this, but it's growing in completely different ways.


If you are leading a project at a small company or have doubts and anxiety about the way you've been developing so far, this course will be helpful. I don't insist only on the methods I've shared. I want to tell you the story of a developer who has experienced firsthand the records of learning about code, thinking about it, and contemplating better code throughout my life.


There is no code that is absolute truth. Developers must make countless trade-offs and find better choices depending on the situation. In this process, while a junior developer may make decisions seeing only a few options, as they become senior, they can interpret problems with deeper insight. Even if things appear to work the same way, writing them in different forms and in more readable forms comes through contemplation and experience.


Through this course, you'll be able to look at the code you've written in the past with different eyes. When you view code with different eyes, you'll have considerations you've never thought of before, and in the process of solving those considerations, you can create better code. This course contains the considerations and solutions that countless senior developers have walked through. I hope you gain your own insights by looking at the solutions of those who have thought ahead.

Recommended for
these people

Who is this course right for?

  • A frontend developer who has hit a skill plateau

  • Someone with at least 1 year of web development experience and career history

Need to know before starting?

  • Basic Programming Knowledge

  • At least 1 year of web development experience

  • Understanding of basic HTML and CSS syntax

  • Basic understanding of vanilla JavaScript

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

Hello
This is

215

Learners

13

Reviews

11

Answers

4.7

Rating

1

Course

풀스택 개발자 한상훈입니다.

유튜브: https://www.youtube.com/@hoony_han

Curriculum

All

434 lectures ∙ (56hr 10min)

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.

      • 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.

          • 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!

            $652.30

            Similar courses

            Explore other courses in the same field!