강의

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!

(5.0) 23 reviews

210 learners

Level Basic

Course period Unlimited

  • Rafael
  • hackurity01
실습 중심
실습 중심
핵심원리
핵심원리
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

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

210

Learners

23

Reviews

1

Answers

5.0

Rating

1

Course

(현) 카카오모빌리티

(전) 버즈니

(전) 롯데쇼핑 e커머스사업본부

 

Co-instructor

Curriculum

All

43 lectures ∙ (5hr 12min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

23 reviews

5.0

23 reviews

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

    • hackurity01님의 프로필 이미지
      hackurity01

      Reviews 1

      ∙

      Average Rating 5.0

      5

      17% enrolled

      • 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

          • 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 :)

            $45.10

            Similar courses

            Explore other courses in the same field!

            Frontend Masterclass강의 썸네일

            Frontend Masterclass

            hoonyhan

            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.

            중급이상

            중급이상

            JavaScript, React, Functional Programming

            Frontend Masterclass강의 썸네일

            Frontend Masterclass

            hoonyhan

            Getting Started with Vue 3강의 썸네일

            Getting Started with Vue 3

            captain

            This is a course for those who are starting with the latest version of Vue.js, Vue 3. Learn the operating principles of Vue.js and the basic concepts you need to know when developing in practice.

            초급

            초급

            Vue.js, Vue 3, JavaScript

            Getting Started with Vue 3강의 썸네일

            Getting Started with Vue 3

            captain

            Spring Boot + React.js Login (+Social) Service Understanding강의 썸네일

            Spring Boot + React.js Login (+Social) Service Understanding

            neneee

            Understanding Spring Boot + React.js Login (+Social) Service is a course designed to help you deeply understand the authentication flow between frontend and backend, by directly implementing a practical login system that includes JWT-based authentication and social login (Kakao/Google). The frontend is built on React.js, and the backend on Spring Boot, enabling you to learn step by step the practices used in real service environments, such as the Access Token + Refresh Token approach, user state management using HttpOnly Cookie and Redux, Role-based authorization, and social login integration.

            초급

            초급

            React, Node.js, REST API

            Spring Boot + React.js Login (+Social) Service Understanding강의 썸네일

            Spring Boot + React.js Login (+Social) Service Understanding

            neneee

            TypeScript A-Z: Learn by Following강의 썸네일

            TypeScript A-Z: Learn by Following

            John Ahn

            In this course, you will learn about TypeScript.

            초급

            초급

            TypeScript, JavaScript

            TypeScript A-Z: Learn by Following강의 썸네일

            TypeScript A-Z: Learn by Following

            John Ahn

            Learn React JS by Building Real Projects: Netflix Clone, Dashboard & More강의 썸네일

            Learn React JS by Building Real Projects: Netflix Clone, Dashboard & More

            pythonmombo4497 [DEL] 251229222122

            This course is designed to teach React.js to web developers from the ground up—even if you have never written React code before. I guide students step by step, starting from the basics of JSX, components, props, state, and events, all the way to integrating API requests and building fully functional web applications. By following real-world projects like a Netflix Clone and an Admin Dashboard, you will not only understand React concepts but also learn how to solve real development problems efficiently. My approach ensures no student is left behind, providing clear examples, explanations, and practical applications of React in dynamic, responsive web interfaces.

            입문

            입문

            react.js, JavaScript, frontend

            Learn React JS by Building Real Projects: Netflix Clone, Dashboard & More강의 썸네일

            Learn React JS by Building Real Projects: Netflix Clone, Dashboard & More

            pythonmombo4497 [DEL] 251229222122

            JavaScript Beginner: Building a Strong Foundation강의 썸네일

            JavaScript Beginner: Building a Strong Foundation

            tonextday

            This is the first lecture of the JavaScript Bible course consisting of 4 lectures. It is faithful to the basics. It focuses on understanding the fundamentals of JavaScript. It covers more than 95% of the JavaScript specification.

            초급

            초급

            JavaScript, oop

            JavaScript Beginner: Building a Strong Foundation강의 썸네일

            JavaScript Beginner: Building a Strong Foundation

            tonextday

            Properly Learning JavaScript: Mastering Object-Oriented Programming & Applied Strategy AI Tic-Tac-Toe Part 2 [Intermediate]강의 썸네일

            Properly Learning JavaScript: Mastering Object-Oriented Programming & Applied Strategy AI Tic-Tac-Toe Part 2 [Intermediate]

            nhcodingstudio

            📌 This course starts with a strategic AI Tic-Tac-Toe project and is a curriculum that completes the core concepts of object-oriented programming through practical examples. Through game implementation, you will train logic design and AI strategic thinking, and then directly experience OOP design techniques such as inheritance, composition, delegation, and encapsulation through code. This is recommended for those who want to go beyond syntax and grow into a 'designing developer' through a real project.

            초급

            초급

            JavaScript, HTML/CSS, oop

            Properly Learning JavaScript: Mastering Object-Oriented Programming & Applied Strategy AI Tic-Tac-Toe Part 2 [Intermediate]강의 썸네일

            Properly Learning JavaScript: Mastering Object-Oriented Programming & Applied Strategy AI Tic-Tac-Toe Part 2 [Intermediate]

            nhcodingstudio

            Front-end Wings: Knowledge You Must Know Before Learning Vue and React강의 썸네일

            Front-end Wings: Knowledge You Must Know Before Learning Vue and React

            gymcoding

            Through this course, you can solidify the knowledge you need to know before becoming a front-end developer, such as Webpack and NPM.

            초급

            초급

            Webpack

            Front-end Wings: Knowledge You Must Know Before Learning Vue and React강의 썸네일

            Front-end Wings: Knowledge You Must Know Before Learning Vue and React

            gymcoding

            Applying TypeScript to Node.js (feat. NodeBird)강의 썸네일

            Applying TypeScript to Node.js (feat. NodeBird)

            zerocho

            Let's apply TypeScript to Node.js, add typings to existing npm packages, or create your own TypeScript library.

            중급이상

            중급이상

            Node.js, Web Application, TypeScript

            Applying TypeScript to Node.js (feat. NodeBird)강의 썸네일

            Applying TypeScript to Node.js (feat. NodeBird)

            zerocho

            MERN STACK Community: React from Start to Deployment강의 썸네일

            MERN STACK Community: React from Start to Deployment

            pandacoding

            Build and deploy community applications using the MERN Stack (MongoDB, Express, React, Node + Firebase)

            초급

            초급

            MongoDB, Express, React

            MERN STACK Community: React from Start to Deployment강의 썸네일

            MERN STACK Community: React from Start to Deployment

            pandacoding

            Creating a Map Service with Corona Map Developers 1강의 썸네일

            Creating a Map Service with Corona Map Developers 1

            donghunee

            This is a course on creating a map service taught by the developers of Corona Map.

            초급

            초급

            Node.js, Web Application, Express

            Creating a Map Service with Corona Map Developers 1강의 썸네일

            Creating a Map Service with Corona Map Developers 1

            donghunee

            TDD Development by Following [Updated in November 2023]강의 썸네일

            TDD Development by Following [Updated in November 2023]

            John Ahn

            In this course, you will create a Node.js application using test-driven development (TDD).

            초급

            초급

            TDD, Node.js, Express

            TDD Development by Following [Updated in November 2023]강의 썸네일

            TDD Development by Following [Updated in November 2023]

            John Ahn

            Create your own API server without coding with Strapi강의 썸네일

            Create your own API server without coding with Strapi

            teracokr

            This is a process of creating your own backend API server, using Node-based Strapi v4, without any additional coding, with just a few clicks, and deploying it to AWS EC2. Almost the same can be applied to Strapi v5. Please refer to the lecture A/S as well~

            중급이상

            중급이상

            strapi, Node.js, ec2

            Create your own API server without coding with Strapi강의 썸네일

            Create your own API server without coding with Strapi

            teracokr

            Mobile, tablet, pc responsive instagram clone coding강의 썸네일

            Mobile, tablet, pc responsive instagram clone coding

            jeong4726

            Through this lecture, students can create a web service similar to Instagram using HTML, CSS, and JS. (Only the front-end is implemented! The back-end server construction will be filmed in a later lecture.)

            초급

            초급

            HTML/CSS, JavaScript, Clone Coding

            Mobile, tablet, pc responsive instagram clone coding강의 썸네일

            Mobile, tablet, pc responsive instagram clone coding

            jeong4726

            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

            Clean up JavaScript: Base buildup!강의 썸네일

            Clean up JavaScript: Base buildup!

            tonextday

            It covers thinking. You can logically organize the core and fundamentals of JavaScript. You can organize your own JavaScript experience and thoughts. You can establish the logic of JavaScript technology. You can broaden your perspective on the entire JavaScript. You can prepare for JavaScript technical interview questions.

            초급

            초급

            JavaScript, Interview, Tech Interview

            Clean up JavaScript: Base buildup!강의 썸네일

            Clean up JavaScript: Base buildup!

            tonextday

            Easy Windows Development Environment Setup Without Any Hassle강의 썸네일

            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.

            입문

            입문

            Git, VSCode, Microsoft Windows

            Easy Windows Development Environment Setup Without Any Hassle강의 썸네일

            Easy Windows Development Environment Setup Without Any Hassle

            kenuheo

            Node and React series that you can learn by following - Basic lecture강의 썸네일

            Node and React series that you can learn by following - Basic lecture

            John Ahn

            In this course, you will learn the basics of how to use React and Node.

            초급

            초급

            React, Node.js

            Node and React series that you can learn by following - Basic lecture강의 썸네일

            Node and React series that you can learn by following - Basic lecture

            John Ahn

            Web Crawling with Node.js강의 썸네일

            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.

            중급이상

            중급이상

            JavaScript, Node.js, Web Crawling

            Web Crawling with Node.js강의 썸네일

            Web Crawling with Node.js

            zerocho

            Web Design Technician Certification Preparation (2023 Examination Standard Reflected Version)강의 썸네일

            Web Design Technician Certification Preparation (2023 Examination Standard Reflected Version)

            webstoryboy

            We have created this so that anyone can pass the 2023 version of the Web Design Function Exam Criteria. Let's learn the 5 types and pass quickly!

            초급

            초급

            HTML/CSS, jQuery, JavaScript

            Web Design Technician Certification Preparation (2023 Examination Standard Reflected Version)강의 썸네일

            Web Design Technician Certification Preparation (2023 Examination Standard Reflected Version)

            webstoryboy