강의

N
챌린지

멘토링

N
클립

커뮤니티

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) 18 reviews

186 learners

  • Rafael
  • hackurity01
실습 중심
핵심원리
JavaScript
Node.js
Webpack
vite
esm

Reviews from Early Learners

What you will learn!

  • 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

186

Learners

18

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

18 reviews

5.0

18 reviews

  • 서정우님의 프로필 이미지
    서정우

    Reviews 5

    ∙

    Average Rating 5.0

    5

    98% enrolled

    번들러는 webpack, vite 정도의 얕은 깊이로만 알고 있었는데 강의 듣고 원리를 이해할 수 있게 되었습니다. 감사합니다

    • 유동균님의 프로필 이미지
      유동균

      Reviews 1

      ∙

      Average Rating 5.0

      5

      17% enrolled

      • Seo Tr님의 프로필 이미지
        Seo Tr

        Reviews 1

        ∙

        Average Rating 5.0

        Edited

        5

        91% enrolled

        프론트엔드 개발에서 놓치기 쉬운 부분들을 명확하고 쉽게 설명을 해주시네요. 모듈시스템을 대충대충 알고 넘어가기 쉬운데 개념부터 자세히 나와있어서 해당부분에서 애매하게 알고있다면 강추입니다. 아는것과 모르는것은 큰 차이가 있는데 시간내서 미리 공부할걸 싶었네요

        • Rafael님의 프로필 이미지
          Rafael

          Reviews 1

          ∙

          Average Rating 5.0

          5

          12% enrolled

          • chaeyeon님의 프로필 이미지
            chaeyeon

            Reviews 1

            ∙

            Average Rating 5.0

            5

            35% enrolled

            프론트엔드 개발하면서 늘 헷갈렸던 JS 모듈 시스템… 강의를 들으면서 정리되고 있는 거 같아요. CommonJS, AMD, ESM, UMD 개념은 물론, 왜 그런 구조가 생겨났는지 역사적인 맥락까지 설명해주셔서 머리에 체계가 잡혀가고 있는 중입니다. 특히 Webpack, Vite 같은 최신 도구에서 모듈 시스템이 어떻게 작동하는지도 실제 설정 파일을 뜯어보며 알려줘서, 도구에 끌려 다니던 제 자신을 성찰하고 갑니다 ㅎㅎ 남은 강의도 열심히 들으면서 무럭무럭 성장해보겠습니다. 좋은 강의 감사합니다 :)

            $45.10

            Similar courses

            Explore other courses in the same field!

            근본있는 프론트엔드 유닛테스트Course Thumbnail

            근본있는 프론트엔드 유닛테스트

            어쩔코딩

            프론트앤드 유닛테스트의 모든것을 마스터하실수 있도록, 기본 개념부터 상황별 테스트 작성법 그리고 고급 테스트 지식까지 모두 모아 전달드립니다

            Basic

            Basic

            소프트웨어 테스트, TDD, Jest

            근본있는 프론트엔드 유닛테스트Course Thumbnail

            근본있는 프론트엔드 유닛테스트

            어쩔코딩

            프론트엔드 마스터클래스Course Thumbnail

            프론트엔드 마스터클래스

            한상훈

            웹 개발 최소 1년 이상의 학생 및 실무자들을 위한 고급 프론트엔드 강좌입니다. 가장 좋은 대상은 현업에서 2~3년 이상의 경험을 하고, 실력의 정체기 또는 대형 기업에서 고려해야하는 제품 구조에 대해 배우고 싶은 분들을 위해 만들어졌습니다.

            Intermediate

            Intermediate

            JavaScript, React, 함수형 프로그래밍

            프론트엔드 마스터클래스Course Thumbnail

            프론트엔드 마스터클래스

            한상훈

            삽질없이 쉽게 따라하는 윈도우 개발 환경 셋업Course Thumbnail

            삽질없이 쉽게 따라하는 윈도우 개발 환경 셋업

            Kenu 허광남

            2시간 안에 git, VS Code, Node.js, Python, Java 개발 환경을 삽질없이 쉽게 윈도우에서 설정하는 방법입니다.

            Beginner

            Beginner

            Git, VSCode, Microsoft Windows

            삽질없이 쉽게 따라하는 윈도우 개발 환경 셋업Course Thumbnail

            삽질없이 쉽게 따라하는 윈도우 개발 환경 셋업

            Kenu 허광남

            자바스크립트 비기너: 튼튼한 기본 만들기Course Thumbnail

            자바스크립트 비기너: 튼튼한 기본 만들기

            김영보

            4개 강좌로 구성된 자바스크립트 바이블 강좌의 1번째 강좌입니다. 기본에 충실하였습니다. 자바스크립트의 근본을 이해하는데 중점을 두었습니다. 자바스크립트 스펙의 95% 이상을 다룹니다.

            Basic

            Basic

            JavaScript, 객체지향

            자바스크립트 비기너: 튼튼한 기본 만들기Course Thumbnail

            자바스크립트 비기너: 튼튼한 기본 만들기

            김영보

            NodeJs 프로그래밍의 정수: 완전 초보자가 알아야 할 45가지Course Thumbnail

            NodeJs 프로그래밍의 정수: 완전 초보자가 알아야 할 45가지

            Studio01 유한책임회사

            이 강의는 프로그래밍을 처음 접하는 분도 안심하고 수강할 수 있는 NodeJs 입문 강의입니다 NodeJs는 원래 웹 브라우저 안에서만 실행되던 JavaScript를, PC나 서버에서도 사용할 수 있도록 만든 기술입니다 지금은 웹 서비스의 백엔드, 자동화, 툴 개발 등 다양한 분야에서 활용되고 있습니다 이 강의에서는 NodeJs를 배울 때 초보자가 먼저 알아두면 좋은 45가지를 순서대로 쉽게 설명합니다 학습은 슬라이드 기반의 강의 형식으로 진행되며, 각 단계에서 실제 코드 실행 결과를 확인함으로써 이해를 심화합니다 ‘지식’과 ‘동작’을 연결하는 구성이라서, 직접 코딩하지 않아도 자연스럽게 “아하!” 하는 깨달음을 얻을 수 있습니다 NodeJs의 전체적인 그림을 처음에 파악해 두면, 이후의 프로그래밍 학습이 훨씬 수월해집니다

            Beginner

            Beginner

            Node.js, nodejs-core, nodejs-liveserver

            NodeJs 프로그래밍의 정수: 완전 초보자가 알아야 할 45가지Course Thumbnail

            NodeJs 프로그래밍의 정수: 완전 초보자가 알아야 할 45가지

            Studio01 유한책임회사

            인터랙티브 웹 개발 제대로 시작하기Course Thumbnail

            인터랙티브 웹 개발 제대로 시작하기

            1분코딩

            크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다.

            Basic

            Basic

            HTML/CSS, JavaScript, 인터랙티브 웹

            인터랙티브 웹 개발 제대로 시작하기Course Thumbnail

            인터랙티브 웹 개발 제대로 시작하기

            1분코딩

            Javascript ES6+ 제대로 알아보기 - 초급Course Thumbnail

            Javascript ES6+ 제대로 알아보기 - 초급

            정재남

            ES6+ 제대로 알아보기 강좌는 Javascirpt의 ES6 및 이후의 표준 ECMAScript 명세에 대하여 이론을 바탕으로 ES5와 달라진 점 및 개념과 동작 원리를 깊이 있게 알려드립니다.

            Basic

            Basic

            JavaScript, ES6

            Javascript ES6+ 제대로 알아보기 - 초급Course Thumbnail

            Javascript ES6+ 제대로 알아보기 - 초급

            정재남

            프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식Course Thumbnail

            프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식

            짐코딩

            이 강의를 통해 Webpack, NPM 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.

            Basic

            Basic

            Webpack

            프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식Course Thumbnail

            프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식

            짐코딩

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

            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.

            Basic

            Basic

            JavaScript, Node.js, Express

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

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

            nhcodingstudio

            누구보다 빠르게 해보는 ChatGPT 클론코딩Course Thumbnail

            누구보다 빠르게 해보는 ChatGPT 클론코딩

            Neo

            ChatGPT를 클론코딩하며 처음부터 끝까지 직접 구현해보는 풀스택 실습 강의입니다. Spring Boot 서버와 React 프론트엔드까지! 단순히 코드만 따라 치는 강의가 아니라, 실제 서비스 배포를 통해 완성도 높은 AI 챗봇 서비스를 구축할 수 있도록 안내합니다.

            Basic

            Basic

            JavaScript, React, Java

            누구보다 빠르게 해보는 ChatGPT 클론코딩Course Thumbnail

            누구보다 빠르게 해보는 ChatGPT 클론코딩

            Neo

            코로나맵 개발자와 함께하는 지도서비스 만들기 1Course Thumbnail

            코로나맵 개발자와 함께하는 지도서비스 만들기 1

            이동훈

            코로나맵 개발자가 알려주는 지도서비스 만들기 강의입니다.

            Basic

            Basic

            Node.js, 웹앱, Express

            코로나맵 개발자와 함께하는 지도서비스 만들기 1Course Thumbnail

            코로나맵 개발자와 함께하는 지도서비스 만들기 1

            이동훈

            Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼Course Thumbnail

            Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

            닭강정

            🔥 한자 학습을 위한 맞춤형 플랫폼 구축! Google Gemini AI와 Firestore를 활용해 나만의 한자 단어장, 획순 애니메이션, 필기 인식까지 직접 구현해보세요!

            Basic

            Basic

            gemini, HTML/CSS, TailwindCSS

            Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼Course Thumbnail

            Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

            닭강정

            Javascript ES6+ 제대로 알아보기 - 보너스Course Thumbnail

            Javascript ES6+ 제대로 알아보기 - 보너스

            정재남

            ES6+ 제대로 알아보기 강좌는 Javascirpt의 ES6 및 이후의 표준 ECMAScript 명세에 대하여 이론을 바탕으로 ES5와 달라진 점 및 개념과 동작 원리를 깊이 있게 알려드립니다.

            Basic

            Basic

            ES6, JavaScript

            Javascript ES6+ 제대로 알아보기 - 보너스Course Thumbnail

            Javascript ES6+ 제대로 알아보기 - 보너스

            정재남

            웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

            깡코딩

            웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

            Basic

            Basic

            인터랙티브 웹, JavaScript, HTML/CSS

            웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

            깡코딩

            GraphQL: REST API를 대체할 기술Course Thumbnail

            GraphQL: REST API를 대체할 기술

            Burger

            GraphQL의 프론트엔드와 백엔드를 한번에 배울 수 있는 기회

            Basic

            Basic

            GraphQL, Spring Boot, Node.js

            GraphQL: REST API를 대체할 기술Course Thumbnail

            GraphQL: REST API를 대체할 기술

            Burger

            클린업 JavaScript: 베이스 빌드업!Course Thumbnail

            클린업 JavaScript: 베이스 빌드업!

            김영보

            생각을 다룹니다. 자바스크립트 핵심과 근본을 논리적으로 정리할 수 있습니다. 자바스크립트 경험, 생각을 스스로 정리할 수 있습니다. 자바스크립트 기술 논리를 정립할 수 있습니다. 자바스크립트 전체를 보는 시야를 넓힐 수 있습니다. 자바스크립트 기술 면접 문제에 대비할 수 있습니다.

            Basic

            Basic

            JavaScript, 면접, 기술면접

            클린업 JavaScript: 베이스 빌드업!Course Thumbnail

            클린업 JavaScript: 베이스 빌드업!

            김영보

            자바스크립트 머신러닝 TensorFlow.jsCourse Thumbnail

            자바스크립트 머신러닝 TensorFlow.js

            김영보

            자바스크립트 환경에서 머신러닝 개념을 다룹니다. 자바스크립트와 TensorFlow.js로 머신러닝을 구현하는 형태와 코드를 다룹니다.

            Intermediate

            Intermediate

            Tensorflow, JavaScript, 머신러닝

            자바스크립트 머신러닝 TensorFlow.jsCourse Thumbnail

            자바스크립트 머신러닝 TensorFlow.js

            김영보

            Node.js로 웹 크롤링하기Course Thumbnail

            Node.js로 웹 크롤링하기

            제로초(조현영)

            네이버, 아마존, 트위터, 유튜브, 페이스북, 인스타그램, unsplash.com 등의 사이트를 크롤링하며 실전에 적용해봅니다.

            Intermediate

            Intermediate

            JavaScript, Node.js, 웹 크롤링

            Node.js로 웹 크롤링하기Course Thumbnail

            Node.js로 웹 크롤링하기

            제로초(조현영)

            모바일, 태블릿, pc 반응형 인스타그램 클론코딩Course Thumbnail

            모바일, 태블릿, pc 반응형 인스타그램 클론코딩

            더코딩클럽

            이 강의를 통해 수강생은 HTML, CSS, JS로 인스타그램과 비슷한 웹서비스를 만들 수있습니다. ( 프론트만 구현했습니다! 백엔드 서버 구축은 차후 강의 촬영 예정입니다.)

            Basic

            Basic

            HTML/CSS, JavaScript, 클론코딩

            모바일, 태블릿, pc 반응형 인스타그램 클론코딩Course Thumbnail

            모바일, 태블릿, pc 반응형 인스타그램 클론코딩

            더코딩클럽

            바이브 코딩 With Claude Code로 웹 서비스 만들기Course Thumbnail

            바이브 코딩 With Claude Code로 웹 서비스 만들기

            개발 까마귀

            현직 스타트업 CTO가 실제 서비스와 여러 외주를 통해서 얻은 바이브코딩 지식 전수해드립니다.

            Beginner

            Beginner

            HTML/CSS, JavaScript, Next.js

            바이브 코딩 With Claude Code로 웹 서비스 만들기Course Thumbnail

            바이브 코딩 With Claude Code로 웹 서비스 만들기

            개발 까마귀