강의

N
챌린지

멘토링

N
클립

로드맵

BEST
Programming

/

Front-end

Complete Guide to Frontend Build Systems - Part.1: Module System

"JS Build System, still confused?" The JS Build System's concepts and practices that never quite clicked, unified!

(4.9) 24 reviews

225 learners

Level Basic

Course period Unlimited

JavaScript
JavaScript
Node.js
Node.js
Webpack
Webpack
vite
vite
esm
esm
JavaScript
JavaScript
Node.js
Node.js
Webpack
Webpack
vite
vite
esm
esm

Reviews from Early Learners

4.9

5.0

서정우

98% enrolled

I only knew about bundlers like webpack and vite at a shallow level, but after taking the lecture, I was able to understand the principles. Thank you.

5.0

Seo Tr

91% enrolled

They clearly and easily explain the often-overlooked aspects of frontend development. It's easy to just gloss over module systems, but since it covers the concepts in detail from the fundamentals, it's highly recommended if you have a vague understanding of that area. There's a big difference between knowing and not knowing; I wish I had taken the time to study this earlier.

5.0

chaeyeon

35% enrolled

The JS module system, which I always found confusing while doing frontend development... seems to be getting sorted out as I listen to the lecture. Not only the concepts of CommonJS, AMD, ESM, UMD, but also the historical context of why such structures emerged has been explained, so a framework is being established in my mind. Especially, by showing how the module system works in modern tools like Webpack and Vite, by examining actual configuration files, I'm reflecting on myself who used to be at the mercy of tools. 😊😊 I will diligently listen to the remaining lectures and strive to grow significantly. Thank you for the great lecture :)

What you will gain after the course

  • Evolution of JS Module Systems and In-depth Operating Principles of CJS, AMD, ESM, UMD

  • Sorting out all the confusing grammar of require, import, define through scenario-based practice.

  • Full analysis of module systems in modern tools like Vite, SWC, TypeScript, Webpack

  • Circular references, conditional loading, even asynchronous modules, real-world problem-solving know-how

🛠 A modular system for front-end developers who aren't swayed by tools !

Once you understand the JS module system, Webpack and Vite are no longer scary!

  • To fully utilize bundlers, package managers, and transpilers in practice, you need to have a solid understanding of the principles of the module system .


  • No matter what new tool comes out, if you have a solid understanding of the module system concept, you will be able to utilize the tool faster than anyone else .


  • Even if you build or distribute the library yourself, you need to know CJS, ESM, and UMD build strategies to provide error-free libraries .

🙋‍♀ Recommended for these people!

noname2

A developer who wants to fully understand the front-end development environment from basics to practice and configure the environment as desired.

Screenshot 2025-05-20 10.54.05 PM

Junior developers who still don't understand what CJS, ESM, AMD, and UMD are

noname

Developers who want to understand the core concepts of build tools such as Webpack, Vite, Rollup, and Babel and utilize them 100% in practice


🚀 After class

  • You will clearly understand the differences between each method, such as ES Module, CommonJS, and AMD, and be able to select and apply them appropriately anytime, anywhere.

  • You will learn the module system integration principles of major tools such as Vite, Rollup, Webpack, and Babel , and you can customize complex settings without fear.

  • Understand the JS build system and quickly diagnose and resolve module errors that occur in the deployment pipeline .


  • With a comprehensive understanding of the module system and tool chain, you can proactively participate in your team's architectural decisions .


👨‍🏫 Learn these things

1. A lecture on the development of the JS module system

A chronological overview of the evolution of the JavaScript module system , from CJS to ESM.

  • Why did AMD split from CJS?

  • Why Node.js Adopted CommonJS

  • The problem UMD was trying to solve

  • Why Webpack and Babel came into being



2. Operational principles and practice of each module system

Let's see with our own eyes how require, define, and import actually work and practice them.

  • CommonJS
    → Introduction to module specifications and package specifications


    → Deep Dive into How CJS Works
    → Description of the entire process from Resolution to Caching
    → CJS practice based on operating principles (circular reference, etc.)
    → Analysis of packages created with CJS

  • AMD


    → define function, asynchronous module loading flow
    → AMD Practice Using RequireJS

  • ES Module


    → Introduction to .mjs , export types, dynamic import, etc.


    → Parsing~Evaluation Flow Deep Dive
    → ESM practice based on operating principles
    → Module graph visualization
    → Circular reference explanation and comparison with CJS

  • UMD
    → Introduction to UMD
    →

    Browser & Node.js compatible
    → General library practice



🧪 You will acquire practical knowledge , not abstract concepts, through hands-on practice along with the operating principles of each module system.


3. Practical training on module systems by development tool

We will look at the principles and process of building modules in environments such as Webpack, Vite, and Babel .

  • Package.json

  • Typescript (tsc)

  • Babel


  • Webpack

  • Rollup

  • Vite

  • ESLint

🔧 Instead of “memorizing” tool settings, you can “design” based on their internal workings .

Who created this course


Fluid bacteria

  • (Former) Line Financial Front-end Developer

  • Samsung SSAFY, Programmers, etc. Front-end development lectures

  • Web Performance Optimization Course Creation and Book Publishing

  • Contribution to Microsoft Software Issue 393 (JS Topic) and Issue 392 (Blockchain Topic)

Rafael

  • (Current) Kakao OO Front-end Developer


🤷‍♀ "I tried to create a library and distribute it, but some people can use it and others can't."
🤷‍♂ "I looked up Webpack and Vite settings on the Internet, but I don't really know what they mean."
🤷 "How do I organize a project with a tangled mix of import/export, require/module.exports?"

With over 9 years of experience in front-end development, library design, and bundler optimization ,
I've been asked this question countless times by my team.

Most developers know how to use tools, but they are quick to move on without deeply understanding why they work the way they do.
Then, when an error occurs or customization is needed, it falls apart.

We created this course to try to solve this frustration.

This lecture is not simply a lecture explaining the module.
In practice, there are questions such as "Why do I need to set this up?" and "Why does this conflict occur?"
This lecture will tell you the real reason and solution .

For working developers who want to use their tools freely, there is no course more necessary than this.

Do you have any questions?

Q. Why should I learn the module system?

In practice, if you mix require and import, there will inevitably be conflicts. You need to understand how each module system works to structure your project without errors.

Q. Can even beginners listen?

Yes, I can hear it well enough.

This lecture is designed to be understandable even to those who are unfamiliar with the term “modular system.”
Let's take a closer look at the concept of JavaScript modules.

If you have ever used syntax like import, export, and require, then OK.
This is better for those who have used bundlers (Webpack, Vite) but don't know why they are set up that way.

Rather, those who are new to the modular system concept will be able to clearly understand “why we should use this.”
there is

Each time a concept comes up during the lecture, we will explain it repeatedly with visualized flowcharts, example code, and practical exercises.

Q. What kind of practical training do you do?

In Chapter 2, when learning about each module system, you will create your own module and solve errors together through practice in an environment similar to actual work.

In Chapter 3, we will solve issues that can be encountered while directly implementing the module system in various front-end development environment tools.

Things to note before taking the class

Practice environment available

  • Operating System and Version (OS): Windows, macOS

  • Tools used: Code editor (VS Code, cursor, Webstorm, etc.)

    • The lecture is explained using VS Code.

Learning Materials

  • The portions presented in PPT during the lecture are provided in PDF format.

  • A practical example is available on github.

This lecture is the first in a series of lectures.

  • The series will be followed by lectures on package managers, bundlers, and transpilers !


Recommended for
these people

Who is this course right for?

  • To understand the frontend development environment and become an expert.

  • CJS, AMD, UMD, ESM: Only heard of, not properly understanding junior developer

  • For those who wish to understand how build tools operate, from theory to practice.

  • Those who wasted a lot of time struggling with build tools like Webpack and Babel

  • Someone troubled by module not found, circular dependency errors.

Need to know before starting?

  • JavaScript

Hello
This is Rafael

225

Learners

24

Reviews

1

Answers

4.9

Rating

1

Course

(Current) Kakao Mobility

(Former) Buzzvil

(Former) Lotte Shopping e-Commerce Division

(Current) Kakao Mobility (Former) Buzzni (Former) Lotte Shopping e-Commerce Division

More

Co-instructor

Curriculum

All

43 lectures ∙ (5hr 12min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

24 reviews

4.9

24 reviews

  • chloe111님의 프로필 이미지
    chloe111

    Reviews 1

    ∙

    Average Rating 5.0

    5

    35% enrolled

    The JS module system, which I always found confusing while doing frontend development... seems to be getting sorted out as I listen to the lecture. Not only the concepts of CommonJS, AMD, ESM, UMD, but also the historical context of why such structures emerged has been explained, so a framework is being established in my mind. Especially, by showing how the module system works in modern tools like Webpack and Vite, by examining actual configuration files, I'm reflecting on myself who used to be at the mercy of tools. 😊😊 I will diligently listen to the remaining lectures and strive to grow significantly. Thank you for the great lecture :)

    • oracion님의 프로필 이미지
      oracion

      Reviews 5

      ∙

      Average Rating 5.0

      5

      98% enrolled

      I only knew about bundlers like webpack and vite at a shallow level, but after taking the lecture, I was able to understand the principles. Thank you.

      • seobm79968177님의 프로필 이미지
        seobm79968177

        Reviews 1

        ∙

        Average Rating 5.0

        Edited

        5

        91% enrolled

        They clearly and easily explain the often-overlooked aspects of frontend development. It's easy to just gloss over module systems, but since it covers the concepts in detail from the fundamentals, it's highly recommended if you have a vague understanding of that area. There's a big difference between knowing and not knowing; I wish I had taken the time to study this earlier.

        • solidinfra님의 프로필 이미지
          solidinfra

          Reviews 1

          ∙

          Average Rating 5.0

          5

          12% enrolled

          • hackurity01님의 프로필 이미지
            hackurity01

            Reviews 1

            ∙

            Average Rating 5.0

            5

            17% enrolled

            Similar courses

            Explore other courses in the same field!

            Frontend MasterclassCourse Thumbnail

            Frontend Masterclass

            hoonyhan

            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.

            Intermediate

            Intermediate

            JavaScript, React, Functional Programming

            Frontend MasterclassCourse Thumbnail

            Frontend Masterclass

            hoonyhan

            Bootstrap 5 - Creating a Web Project from ScratchCourse Thumbnail

            Bootstrap 5 - Creating a Web Project from Scratch

            Self-coding

            We will understand the concepts of classes and components in Bootstrap5, apply them, modify them, and create three projects through practice.

            Basic

            Basic

            Bootstrap, HTML/CSS, JavaScript

            Bootstrap 5 - Creating a Web Project from ScratchCourse Thumbnail

            Bootstrap 5 - Creating a Web Project from Scratch

            Self-coding

            Webpack for Frontend DevelopersCourse Thumbnail

            Webpack for Frontend Developers

            captain

            The webpack course chosen by 1,000 people! This is a renewed course updated for the new webpack version. Learn webpack more easily through hands-on practice :)

            Basic

            Basic

            Webpack

            Webpack for Frontend DevelopersCourse Thumbnail

            Webpack for Frontend Developers

            captain

            Easy Windows Development Environment Setup Without Any HassleCourse Thumbnail

            Easy Windows Development Environment Setup Without Any Hassle

            kenuheo

            How to easily set up git, VS Code, Node.js, Python, Java dev environments on Windows within 2 hours without struggling.

            Beginner

            Beginner

            Git, VSCode, Microsoft Windows

            Easy Windows Development Environment Setup Without Any HassleCourse Thumbnail

            Easy Windows Development Environment Setup Without Any Hassle

            kenuheo

            First Steps in JavaScript for Web Frontend

            hyobin

            Do you want to become a web frontend developer? Take your first step with a fun JavaScript course✨

            Beginner

            Beginner

            JavaScript, DOM, Web Application

            First Steps in JavaScript for Web Frontend

            hyobin

            TypeScript A-Z: Learn by FollowingCourse Thumbnail

            TypeScript A-Z: Learn by Following

            John Ahn

            In this course, you will learn about TypeScript.

            Basic

            Basic

            TypeScript, JavaScript

            TypeScript A-Z: Learn by FollowingCourse Thumbnail

            TypeScript A-Z: Learn by Following

            John Ahn

            Web Crawling with Node.jsCourse Thumbnail

            Web Crawling with Node.js

            zerocho

            We will apply it in practice by crawling sites such as Naver, Amazon, Twitter, YouTube, Facebook, Instagram, and unsplash.com.

            Intermediate

            Intermediate

            JavaScript, Node.js, Web Crawling

            Web Crawling with Node.jsCourse Thumbnail

            Web Crawling with Node.js

            zerocho

            Cleanup JavaScript: Base Build-up!Course Thumbnail

            Cleanup JavaScript: Base Build-up!

            tonextday

            We deal with ideas. You can logically organize the core and fundamentals of JavaScript. You can structure your own JavaScript experiences and thoughts. You can establish the technical logic of JavaScript. You can broaden your perspective to see the entirety of JavaScript. You can prepare for JavaScript technical interview questions.

            Basic

            Basic

            JavaScript, Interview, Tech Interview

            Cleanup JavaScript: Base Build-up!Course Thumbnail

            Cleanup JavaScript: Base Build-up!

            tonextday

            Learning interactive web while making web games! JAVASCRIPT

            ggangcoding162118

            A three-in-one class where you can create web games and learn front-end web development skills! This class has been created to teach you how to create games using JavaScript, CSS, and HTML with your own ideas!

            Basic

            Basic

            Interactive Web, JavaScript, HTML/CSS

            Learning interactive web while making web games! JAVASCRIPT

            ggangcoding162118

            JetBrains JavaScript Day 2025Course Thumbnail

            JetBrains JavaScript Day 2025

            JetBrains

            All sessions from JetBrains JavaScript Day 2025 in one place! JavaScript experts from around the world gather to share their know-how, ideas, and insights gained from practical experience. Discover the latest information that will help you stay ahead in the rapidly evolving JavaScript ecosystem.

            Basic

            Basic

            JavaScript

            JetBrains JavaScript Day 2025Course Thumbnail

            JetBrains JavaScript Day 2025

            JetBrains

            Core JavaScriptCourse Thumbnail

            Core JavaScript

            jaenam

            This lecture examines the overall flow of core concepts that run through all of JavaScript up to ES6.

            Basic

            Basic

            JavaScript

            Core JavaScriptCourse Thumbnail

            Core JavaScript

            jaenam

            Creating a Web Portfolio for UI/UX Designer Employment: Personal Branding StrategyCourse Thumbnail

            Creating a Web Portfolio for UI/UX Designer Employment: Personal Branding Strategy

            jyoung

            "2026 UIUX Designer | Coding Designer Agency Pass Portfolio Reveal" This is a practical lecture on creating a UIUX web portfolio that catches the interviewer's eye. The curriculum is designed not just for simple portfolio creation, but to enhance your competitiveness as a UIUX designer with differentiated results utilizing interactions.

            Basic

            Basic

            HTML/CSS, JavaScript, Web Application

            Creating a Web Portfolio for UI/UX Designer Employment: Personal Branding StrategyCourse Thumbnail

            Creating a Web Portfolio for UI/UX Designer Employment: Personal Branding Strategy

            jyoung

            Cleanup JavaScript: Jump Up!Course Thumbnail

            Cleanup JavaScript: Jump Up!

            tonextday

            The Ultimate JavaScript Course! It covers execution context structures and mechanisms based on ES2025, the Event Loop, and multi-threading. It also explores the language culture embedded within JavaScript.

            Basic

            Basic

            JavaScript

            Cleanup JavaScript: Jump Up!Course Thumbnail

            Cleanup JavaScript: Jump Up!

            tonextday

            [Web Development Full Stack Course] A week before starting a Node.js project - From basics to practiceCourse Thumbnail

            [Web Development Full Stack Course] A week before starting a Node.js project - From basics to practice

            realprogrammers

            This lecture is a lecture on the backend part of the [Web Development Full Stack Course] lecture series for training full-stack web developers. This lecture is based on the contents of the instructor's book <A Week Before Investing in a Node.js Project>.

            Basic

            Basic

            Node.js, MySQL, Express

            [Web Development Full Stack Course] A week before starting a Node.js project - From basics to practiceCourse Thumbnail

            [Web Development Full Stack Course] A week before starting a Node.js project - From basics to practice

            realprogrammers

            Creating a Map Service with the Corona Map Developer 1Course Thumbnail

            Creating a Map Service with the Corona Map Developer 1

            donghunee

            This is a lecture on creating map services, taught by the developer of Corona Map.

            Basic

            Basic

            Node.js, Web Application, Express

            Creating a Map Service with the Corona Map Developer 1Course Thumbnail

            Creating a Map Service with the Corona Map Developer 1

            donghunee

            The Undying jQuery Still Alive - From Basics to PracticeCourse Thumbnail

            The Undying jQuery Still Alive - From Basics to Practice

            ezweb

            jQuery, the JavaScript library used by over 75% of websites worldwide! This course is designed to help you build a solid foundation by understanding the principles rather than just flashy effects. Learn everything from jQuery basics to advanced applications to complete your own portfolio or apply it directly in the field.

            Basic

            Basic

            HTML/CSS, JavaScript, jQuery

            The Undying jQuery Still Alive - From Basics to PracticeCourse Thumbnail

            The Undying jQuery Still Alive - From Basics to Practice

            ezweb

            Becoming a Great React DeveloperCourse Thumbnail

            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.

            Basic

            Basic

            JavaScript, React, Firebase

            Becoming a Great React DeveloperCourse Thumbnail

            Becoming a Great React Developer

            nakjasabal0079

            Creating Web Services with Vibe Coding With Claude CodeCourse Thumbnail

            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.

            Beginner

            Beginner

            HTML/CSS, JavaScript, Next.js

            Creating Web Services with Vibe Coding With Claude CodeCourse Thumbnail

            Creating Web Services with Vibe Coding With Claude Code

            ref63184917

            Redis from a Kakao Interviewer Who Handles 500,000+ Traffic per SecondCourse Thumbnail

            Redis from a Kakao Interviewer Who Handles 500,000+ Traffic per Second

            Hong

            This is a Redis course created with a current Kakao interviewer. It covers everything from data structure practice (String to Sorted Set) to Sentinel and Cluster configurations, helping you build design rationales that work in both interviews and real-world practice.

            Beginner

            Beginner

            JavaScript, Docker, Redis

            Redis from a Kakao Interviewer Who Handles 500,000+ Traffic per SecondCourse Thumbnail

            Redis from a Kakao Interviewer Who Handles 500,000+ Traffic per Second

            Hong

            AI-Assisted Digital Content CreationCourse Thumbnail

            AI-Assisted Digital Content Creation

            dunopi

            Practical Web UI Development Using HTML & CSS-Based AI

            Basic

            Basic

            HTML/CSS, JavaScript, Web Design

            AI-Assisted Digital Content CreationCourse Thumbnail

            AI-Assisted Digital Content Creation

            dunopi