강의

N
챌린지

멘토링

N
클립

커뮤니티

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.

KakaoTalk_20260116_200748796

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

스크린샷 2025-08-09 오전 11.47.08

Part of the explanation about this

Programming Paradigms

  • Object-Oriented Programming

  • GoF Programming Design Patterns

  • Functional Programming

  • How to Use Generators

스크린샷 2025-08-09 오후 12.00.23

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

스크린샷 2025-08-09 오전 11.59.48

Memoization Lecture

State Management

  • Background of State Management

  • Redux State Management

  • Recoil State Management

  • Zustand State Management

  • Jotai State Management

  • Context API Usage Strategy

스크린샷 2025-08-09 오전 11.46.32

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

스크린샷 2025-08-09 오전 11.47.44

Some of React's development directions

Styling

  • Design system architecture

  • Tailwind

  • Emotion.js

  • CSS Modules

스크린샷 2025-08-09 오후 12.05.57

Styling

Form management

  • Form handling

  • Synchronous/Asynchronous Validation Strategies

  • Form user experience

스크린샷 2025-08-09 오후 12.07.25

Form management

Testing

  • Unit testing

  • Integration test strategy

  • E2E Testing Strategy

스크린샷 2025-08-09 오전 11.49.01

Testing

Animation

  • GSAP Usage

  • Motion Usage

  • How to use Anime.js

  • Animation UX Optimization

스크린샷 2025-08-09 오후 12.10.05

Thanos Snap

Authentication and Security

  • OAuth 2.0, NextAuth.js, OpenID Connect

  • Session and Token Management

  • Next.js Token Strategy

  • Two-way Encryption Payload

스크린샷 2025-08-09 오후 12.15.38

NextAuth.js

Performance Optimization

  • Core Web Vitals

  • Critical CSS

  • Code Splitting

  • Lazy Load

  • Image/Font/Bundle Optimization

스크린샷 2025-08-09 오후 12.12.22

Safari

Parallel Processing

  • Web Worker Usage

  • Browser parallel processing performance improvement

  • Browser Offline Strategies

스크린샷 2025-08-09 오후 12.14.43

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

스크린샷 2025-08-09 오후 12.13.28

Firefox Browser DevTools

Development Tools

  • How to use developer tools

  • How to use web analytics tools

  • Bundling evaluation tool usage

스크린샷 2025-08-09 오후 12.12.52

Layout changes

Comprehensive course materials

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

스크린샷 2025-08-09 오전 11.44.56

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!

            Next.js with Spring Boot강의 썸네일

            Next.js with Spring Boot

            zk202308a5410

            Traditional React development and Next.js development are completely different approaches. This course penetrates the core of the latest Next.js 16 and teaches you the 'real' Next.js way of development. Experience how to achieve both performance and efficiency, from job portfolio projects to real-world projects. Let's develop the Next.js way! The course is structured to help you learn by doing, creating actual examples to understand how to apply Next.js features. You'll learn faster through actual code rather than theory, focusing on Server Components and covering Server Actions and caching strategies. Since the goal of the course is to catch up with the Next.js vibe as quickly as possible, the lectures are conducted using JavaScript. However, each lecture's examples are additionally provided as course materials created in TypeScript. December 18, 2025 - Updated to Next.js 16

            중급이상

            중급이상

            JavaScript, React, Spring Boot

            Next.js with Spring Boot강의 썸네일

            Next.js with Spring Boot

            zk202308a5410

            The Kick of Frontend Development, Web API (feat. React)강의 썸네일

            The Kick of Frontend Development, Web API (feat. React)

            vroomfan

            This course covers practical Web APIs. I hope you gain the tools to solve requirements you are bound to encounter at least once in the field.

            초급

            초급

            JavaScript, React, Web API

            The Kick of Frontend Development, Web API (feat. React)강의 썸네일

            The Kick of Frontend Development, Web API (feat. React)

            vroomfan

            What if I had been on the Titanic?! Building an AI Web Service to Predict Survival Probability with PyTorch & Next.js강의 썸네일

            What if I had been on the Titanic?! Building an AI Web Service to Predict Survival Probability with PyTorch & Next.js

            dakgangjung123

            This course starts with the question "If I had been on the Titanic, could I have survived?" and completes a full-stack project that develops an AI model to predict survival probability based on actual data and serves it as a web service. You'll practice the entire process of AI and web development, from deep learning modeling using PyTorch, building a backend server with FastAPI, to implementing a user interface with Next.js.

            중급이상

            중급이상

            Python, Deep Learning(DL), PyTorch

            What if I had been on the Titanic?! Building an AI Web Service to Predict Survival Probability with PyTorch & Next.js강의 썸네일

            What if I had been on the Titanic?! Building an AI Web Service to Predict Survival Probability with PyTorch & Next.js

            dakgangjung123

            Mastering Web Publishing: Figma to Web with JavaScript강의 썸네일

            Mastering Web Publishing: Figma to Web with JavaScript

            ezweb

            This lecture provides a step-by-step explanation of the process of implementing a Figma design into a web page. It covers the entire web publishing practice, from saving images to writing HTML, CSS, and Javascript. It is systematically designed to be easy for beginners to follow. Through practice-oriented learning, you can learn how to efficiently convert web designs into code.

            초급

            초급

            HTML/CSS, JavaScript, Figma

            Mastering Web Publishing: Figma to Web with JavaScript강의 썸네일

            Mastering Web Publishing: Figma to Web with JavaScript

            ezweb

            A Beginner's Guide to JavaScript for Web Frontend강의 썸네일

            A Beginner's Guide to JavaScript for Web Frontend

            hyobin

            If you aspire to be a web frontend developer? Take your first step with fun JavaScript courses✨

            입문

            입문

            JavaScript, DOM

            A Beginner's Guide to JavaScript for Web Frontend강의 썸네일

            A Beginner's Guide to JavaScript for Web Frontend

            hyobin

            Creating Web Services with Vibe Coding With Claude Code강의 썸네일

            Creating Web Services with Vibe Coding With Claude Code

            ref63184917

            A current startup CTO will share vibe coding knowledge gained through actual services and various outsourcing projects.

            입문

            입문

            HTML/CSS, JavaScript, Next.js

            Creating Web Services with Vibe Coding With Claude Code강의 썸네일

            Creating Web Services with Vibe Coding With Claude Code

            ref63184917

            React start with Next.js강의 썸네일

            React start with Next.js

            zk202308a5410

            New to React? You need to think about how to learn React's fundamental concepts solidly yet quickly. Start with Next.js and JavaScript with minimal knowledge. Let's develop by selecting only the essential examples needed for real-world development. The Todo example is so important that you should develop it twice. Once focusing on components, and then focusing on routing that handles browser paths! Use Zustand for login! You can handle global state with a really small amount of code.

            입문

            입문

            JavaScript, React, Web Application

            React start with Next.js강의 썸네일

            React start with Next.js

            zk202308a5410

            [PROKIT] Frontend Project Kit: Building a Timer App강의 썸네일

            [PROKIT] Frontend Project Kit: Building a Timer App

            nybs

            This is a mission content for a frontend project. We provide a PRD planning document, Figma design, and API endpoints so you can practice the project by implementing a timer app called DevTime yourself. Make the knowledge you've learned so far completely your own by implementing a project at a level similar to an actual service 🚀

            입문

            입문

            React

            [PROKIT] Frontend Project Kit: Building a Timer App강의 썸네일

            [PROKIT] Frontend Project Kit: Building a Timer App

            nybs

            Hybrid App with Expo Framework to Increase Web Developer's Salary강의 썸네일

            Hybrid App with Expo Framework to Increase Web Developer's Salary

            codecamp

            This course will help you develop mobile apps that can be serviced on Android and iOS using web development.

            초급

            초급

            React, Next.js, expo

            Hybrid App with Expo Framework to Increase Web Developer's Salary강의 썸네일

            Hybrid App with Expo Framework to Increase Web Developer's Salary

            codecamp

            Create Your Own Visual Novel Game in Just One Day강의 썸네일

            Create Your Own Visual Novel Game in Just One Day

            Neo

            Create your own visual novel game using React, Javascript, SpringAI, and Springboot. Learn how to make a web-based visual novel game with SpringAI and React! Neo + Essential

            초급

            초급

            React, Spring Boot, AI

            Create Your Own Visual Novel Game in Just One Day강의 썸네일

            Create Your Own Visual Novel Game in Just One Day

            Neo

            Advanced Modern Javascript with ES6 Grammar Part 3강의 썸네일

            Advanced Modern Javascript with ES6 Grammar Part 3

            usefulit

            This course is designed to learn the JavaScript programming language along with the latest ES6 grammar.

            중급이상

            중급이상

            JavaScript, ES6

            Advanced Modern Javascript with ES6 Grammar Part 3강의 썸네일

            Advanced Modern Javascript with ES6 Grammar Part 3

            usefulit

            Intermediate-Advanced JavaScript: Engine Core강의 썸네일

            Intermediate-Advanced JavaScript: Engine Core

            tonextday

            This is the second course in the JavaScript Bible series, which consists of four courses. By understanding the JavaScript engine, you can develop programs optimized for JavaScript and design systems with confidence.

            초급

            초급

            JavaScript

            Intermediate-Advanced JavaScript: Engine Core강의 썸네일

            Intermediate-Advanced JavaScript: Engine Core

            tonextday

            JavaScript Machine Learning TensorFlow.js강의 썸네일

            JavaScript Machine Learning TensorFlow.js

            tonextday

            We will cover the concept of machine learning in a JavaScript environment. We will cover the form and code of implementing machine learning with JavaScript and TensorFlow.js.

            중급이상

            중급이상

            Tensorflow, JavaScript, Machine Learning(ML)

            JavaScript Machine Learning TensorFlow.js강의 썸네일

            JavaScript Machine Learning TensorFlow.js

            tonextday

            Design Patterns for Python

            haeyeomiso

            Want to take your code to the next level? 🚀 For beginner developers, I've prepared the 'Python Design Patterns' 📖 course. Complex design know-how is made easy to understand with practical examples. In this course, you'll learn these things: 💼 **Practical Example-centric**: Real-world examples you can apply immediately 📚 **Mastering Classic Patterns**: Master GoF's core patterns 🐍 **Pythonic Tips**: How to write more concise and efficient code It will boost your confidence in code design! ✨

            초급

            초급

            Python, Design Pattern, software-design

            Design Patterns for Python

            haeyeomiso

            Becoming a Great React Developer강의 썸네일

            Becoming a Great React Developer

            nakjasabal0079

            "Becoming a Developer Who Excels at React" has been published. This book provides a solid foundation by systematically guiding you from the basic principles of the web needed before learning React to the latest React hooks. Through over 40 diverse hands-on projects and abundant practical examples, you can apply theory directly to real-world situations and develop problem-solving skills. Additionally, it helps you grow into a developer capable of building high-quality React applications by learning essential modern web development technologies such as Redux Toolkit, Zustand, and Firebase.

            초급

            초급

            JavaScript, React, Firebase

            Becoming a Great React Developer강의 썸네일

            Becoming a Great React Developer

            nakjasabal0079

            Building Your Own Emotional Diary Service with SpringAI + React강의 썸네일

            Building Your Own Emotional Diary Service with SpringAI + React

            Neo

            Building Your Own Emotional Diary Service with SpringAI + React This is the 4th project time creating together with Neo + Essential!

            초급

            초급

            React, Kotlin, Spring Boot

            Building Your Own Emotional Diary Service with SpringAI + React강의 썸네일

            Building Your Own Emotional Diary Service with SpringAI + React

            Neo

            Building a Server Framework from Scratch: Cloning the Express.js Engine강의 썸네일

            Building a Server Framework from Scratch: Cloning the Express.js Engine

            nhcodingstudio

            This course goes beyond simply using Express.js. You will rebuild its internal engine from start to finish, gaining hands-on experience with the real principles of how a server works. By directly creating each component of Express—such as routing, middleware, request–response objects, static file handling, and template rendering—you will grow as a server developer and truly understand how a framework operates at its core.

            초급

            초급

            JavaScript, Node.js, Express

            Building a Server Framework from Scratch: Cloning the Express.js Engine강의 썸네일

            Building a Server Framework from Scratch: Cloning the Express.js Engine

            nhcodingstudio

            Creating a Monetized Service in 4 Weeks as a Non-Developer: AI Vibe Coding Web + App ALL IN ONE

            dingcodingco

            No coding knowledge needed! Turn your idea into real revenue in just 4 weeks. Using AI and the latest tools, create both a website and app simultaneously and connect them directly to services.

            입문

            입문

            Flutter, Next.js, cursor

            Creating a Monetized Service in 4 Weeks as a Non-Developer: AI Vibe Coding Web + App ALL IN ONE

            dingcodingco

            Creating Bots with Python by Dr. Nam with ChatGPT강의 썸네일

            Creating Bots with Python by Dr. Nam with ChatGPT

            nambaksa

            Learn to implement Telegram, Slack, KakaoTalk, and Discord bots with Python, exploring each service's features via various examples.

            초급

            초급

            Python, Chatbot, oop

            Creating Bots with Python by Dr. Nam with ChatGPT강의 썸네일

            Creating Bots with Python by Dr. Nam with ChatGPT

            nambaksa

            A Guide to Elm, a Purely Functional Front-End Language강의 썸네일

            A Guide to Elm, a Purely Functional Front-End Language

            hatemogi

            Study the Elm programming language guide to building front-end web apps with pure functional programming in just 3 hours.

            초급

            초급

            elm, Functional Programming, SPA

            A Guide to Elm, a Purely Functional Front-End Language강의 썸네일

            A Guide to Elm, a Purely Functional Front-End Language

            hatemogi