강의

N
챌린지

멘토링

로드맵

Inflearn brand logo image
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) 14 reviews

163 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

163

Learners

14

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

14 reviews

5.0

14 reviews

  • oracion님의 프로필 이미지
    oracion

    Reviews 5

    ∙

    Average Rating 5.0

    5

    98% enrolled

    バンドラーはwebpackやvite程度の浅い知識しかなかったのですが、講義を聞いて原理を理解できるようになりました。ありがとうございます

    • hackurity01님의 프로필 이미지
      hackurity01

      Reviews 1

      ∙

      Average Rating 5.0

      5

      17% enrolled

      • seobm79968177님의 프로필 이미지
        seobm79968177

        Reviews 1

        ∙

        Average Rating 5.0

        Edited

        5

        91% enrolled

        フロントエンド開発で見落としがちな部分を、明確で分かりやすく説明してくださっていますね。 モジュールシステムをなんとなく知って通り過ぎてしまいがちなのですが、概念から詳しく説明されているので、その部分で曖昧な知識があるなら超おすすめです。知っていることと知らないことでは大きな違いがあるのに、時間を取って先に勉強しておけばよかったと思いました。

        • solidinfra님의 프로필 이미지
          solidinfra

          Reviews 1

          ∙

          Average Rating 5.0

          5

          12% enrolled

          • chloe111님의 프로필 이미지
            chloe111

            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!

            実務に直接適用するフロントエンドテスト - パート2。テスト深化：視覚的回帰・E2EテストCourse Thumbnail

            実務に直接適用するフロントエンドテスト - パート2。テスト深化：視覚的回帰・E2Eテスト

            hanjungv

            このレッスンでは、全体的なフロントエンドテストの種類を把握し、状況に応じた適切なテストを選択して信頼できるテストを作成する方法を学びます。

            Basic

            Basic

            Software Test, JavaScript, e2e

            実務に直接適用するフロントエンドテスト - パート2。テスト深化：視覚的回帰・E2EテストCourse Thumbnail

            実務に直接適用するフロントエンドテスト - パート2。テスト深化：視覚的回帰・E2Eテスト

            hanjungv

            @シコ - JavaScript最高手になる（概念と実務）Course Thumbnail

            @シコ - JavaScript最高手になる（概念と実務）

            seniorcoding

            掘り下げた授業で最高のWeb開発者になるためのJavaScript講座です。 全講義を修了した時、JavaScriptの本質を深く理解できるようになり、次に学ぶReactとNextのエキスパートになれます。

            Intermediate

            Intermediate

            JavaScript

            @シコ - JavaScript最高手になる（概念と実務）Course Thumbnail

            @シコ - JavaScript最高手になる（概念と実務）

            seniorcoding

            非専門家のための真の入門オールインワン開発ブートキャンプCourse Thumbnail

            非専門家のための真の入門オールインワン開発ブートキャンプ

            grab

            初心者でもできる、ウェブ、サーバー、モバイル アプリ、機械学習まで習得できるフルスタックの最終講義!! 開発をどこから始めたらよいかわからない場合は、この講義を強くお勧めします。Javascript 1 つで進めます!

            Beginner

            Beginner

            JavaScript, React, Node.js

            非専門家のための真の入門オールインワン開発ブートキャンプCourse Thumbnail

            非専門家のための真の入門オールインワン開発ブートキャンプ

            grab

            本格的に学ぶ JavaScript: オブジェクト指向プログラミング マスター & 戦略型AI 三目並べ 実践 Part2 [中級編]Course Thumbnail

            本格的に学ぶ JavaScript: オブジェクト指向プログラミング マスター & 戦略型AI 三目並べ 実践 Part2 [中級編]

            nhcodingstudio

            📌 この講義は、戦略型AI三目並べプロジェクトから始まり、オブジェクト指向プログラミングの核心概念まで実践例で完成させるカリキュラムです。 ゲーム実装でロジック設計とAI戦略思考を訓練し、続いて継承、コンポジション、委譲、カプセル化といったOOP設計技術を直接コードで経験します。 実際のプロジェクトで文法を超えて「設計する開発者」として成長したい方におすすめします。

            Basic

            Basic

            JavaScript, HTML/CSS, oop

            本格的に学ぶ JavaScript: オブジェクト指向プログラミング マスター & 戦略型AI 三目並べ 実践 Part2 [中級編]Course Thumbnail

            本格的に学ぶ JavaScript: オブジェクト指向プログラミング マスター & 戦略型AI 三目並べ 実践 Part2 [中級編]

            nhcodingstudio

            JavaScript 機械学習 TensorFlow.jsCourse Thumbnail

            JavaScript 機械学習 TensorFlow.js

            tonextday

            JavaScript 環境で機械学習の概念を扱います。 JavaScript と TensorFlow.js を使って機械学習を実装する形式とコードを扱います。

            Intermediate

            Intermediate

            Tensorflow, JavaScript, Machine Learning(ML)

            JavaScript 機械学習 TensorFlow.jsCourse Thumbnail

            JavaScript 機械学習 TensorFlow.js

            tonextday

            Amazing JavaScript - 入門Course Thumbnail

            Amazing JavaScript - 入門

            captain

            フロントエンド開発に必要なJavaScriptの基本知識。実務者として必ず知っておくべき必須知識を分かりやすく、素早く説明します。2024年の現代フロントエンド開発トレンドを反映した基本講義。

            Beginner

            Beginner

            JavaScript, ES6

            Amazing JavaScript - 入門Course Thumbnail

            Amazing JavaScript - 入門

            captain

            クリーンアップ JavaScript: ジャンプアップ!Course Thumbnail

            クリーンアップ JavaScript: ジャンプアップ!

            tonextday

            JavaScript 最終コース! ES2025基準の実行コンテキスト構造と方法、Event Loop、マルチスレッドを扱います。JavaScript言語に含まれる言語文化を扱います。

            Basic

            Basic

            JavaScript

            クリーンアップ JavaScript: ジャンプアップ!Course Thumbnail

            クリーンアップ JavaScript: ジャンプアップ!

            tonextday

            フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]Course Thumbnail

            フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]

            funcoding

            現場で実際のウェブサービスを開発した経験に基づき、初心者向けに実際の商用化も可能なレベルのウェブおよびアプリサービスを開発することを目標とするフルスタックシリーズ講座です。そのためのPart2講座として、多様な技術が存在するフロントエンド技術の中から、レスポンシブ、互換性まで考慮した最新のHTML5、CSS3、バニラJavaScript（Javascript）+ ES6をすべてしっかりと整理する講座です。

            Beginner

            Beginner

            HTML/CSS, JavaScript, ES6

            フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]Course Thumbnail

            フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]

            funcoding

            無駄な作業なしで簡単に従うWindows開発環境セットアップCourse Thumbnail

            無駄な作業なしで簡単に従うWindows開発環境セットアップ

            kenuheo

            2時間以内に git、VS Code、Node.js、Python、Java 開発環境を Windowsで スムーズに設定する方法です。

            Beginner

            Beginner

            Git, VSCode, Microsoft Windows

            無駄な作業なしで簡単に従うWindows開発環境セットアップCourse Thumbnail

            無駄な作業なしで簡単に従うWindows開発環境セットアップ

            kenuheo

            Electron、NodeJS、Socket.ioを使用したチャットアプリケーションの開発Course Thumbnail

            Electron、NodeJS、Socket.ioを使用したチャットアプリケーションの開発

            kishe561204

            講義の内容をもとに基本的なチャットアプリ作成と ElectronとNodeJSの基本的な構造について学びます。

            Basic

            Basic

            Node.js, Electron, Socket.io

            Electron、NodeJS、Socket.ioを使用したチャットアプリケーションの開発Course Thumbnail

            Electron、NodeJS、Socket.ioを使用したチャットアプリケーションの開発

            kishe561204

            Firebase シリーズ #2: AI 漢字推薦 & 筆記学習プラットフォームCourse Thumbnail

            Firebase シリーズ #2: AI 漢字推薦 & 筆記学習プラットフォーム

            dakgangjung123

            🔥 漢字学習のためのカスタムプラットフォーム構築！ Google Gemini AIとFirestoreを活用し、自分だけの漢字単語帳、画数アニメーション、手書き認識まで直接実装してみましょう！

            Basic

            Basic

            gemini, HTML/CSS, TailwindCSS

            Firebase シリーズ #2: AI 漢字推薦 & 筆記学習プラットフォームCourse Thumbnail

            Firebase シリーズ #2: AI 漢字推薦 & 筆記学習プラットフォーム

            dakgangjung123

            まだ生きている不死の jQuery - 基礎から実務までCourse Thumbnail

            まだ生きている不死の jQuery - 基礎から実務まで

            ezweb

            全世界のウェブサイトで75%以上が使用しているJavaScriptライブラリ、jQuery！華麗な効果よりも原理を理解し、基礎を固められるように構成しました。jQueryの基礎から活用まで学習し、あなただけのポートフォリオを完成させたり、現場で即活用してみてください。

            Basic

            Basic

            HTML/CSS, JavaScript, jQuery

            まだ生きている不死の jQuery - 基礎から実務までCourse Thumbnail

            まだ生きている不死の jQuery - 基礎から実務まで

            ezweb

            ライフコーディング - JavaScript ImmutabilityCourse Thumbnail

            ライフコーディング - JavaScript Immutability

            Egoing Lee

            ライフコーディングで提供するJavaScript関連講義で、JavaScriptでデータを不変に扱う方法についての授業です。

            Basic

            Basic

            JavaScript

            ライフコーディング - JavaScript ImmutabilityCourse Thumbnail

            ライフコーディング - JavaScript Immutability

            Egoing Lee

            NodeJs プログラミングの精髄：完全初心者が知るべき45のことCourse Thumbnail

            NodeJs プログラミングの精髄：完全初心者が知るべき45のこと

            blogttipstricks1942

            この講義は、プログラミングを初めて触れる方も安心して受講できるNodeJs入門講義です。 NodeJsは、元々Webブラウザ内でのみ実行されていたJavaScriptを、PCやサーバーでも利用できるようにした技術です。 現在は、Webサービスのバックエンド、自動化、ツール開発など、様々な分野で活用されています。 この講義では、NodeJsを学ぶ際に初心者がまず知っておくと良い45のことを、順番に分かりやすく解説します。 学習はスライドベースの講義形式で進められ、各ステップで実際のコード実行結果を確認することで理解を深めます。 「知識」と「動作」を繋ぐ構成となっているため、直接コーディングしなくても自然と「なるほど！」という気づきを得られます。 NodeJsの全体像を最初に把握しておくと、今後のプログラミング学習がはるかにスムーズになります。

            Beginner

            Beginner

            Node.js, nodejs-core, nodejs-liveserver

            NodeJs プログラミングの精髄：完全初心者が知るべき45のことCourse Thumbnail

            NodeJs プログラミングの精髄：完全初心者が知るべき45のこと

            blogttipstricks1942

            ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）Course Thumbnail

            ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）

            webstoryboy

            ウェブデザイン機能社出題基準 2023年バージョンに合わせて誰でも合格できるように製作しました。 5種類を学び、素早く合格しましょう！

            Basic

            Basic

            HTML/CSS, jQuery, JavaScript

            ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）Course Thumbnail

            ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）

            webstoryboy

            クリーンアップ JavaScript: ベース構築!Course Thumbnail

            クリーンアップ JavaScript: ベース構築!

            tonextday

            考え方を扱います。JavaScript の核心と本質を論理的に整理できます。JavaScript の経験を整理して、考え方を自分で整理できます。JavaScript の技術論理を確立できます。JavaScript 全体を見渡す視野を広げることができます。JavaScript の技術面接問題に対応できます。

            Basic

            Basic

            JavaScript, Interview, Tech Interview

            クリーンアップ JavaScript: ベース構築!Course Thumbnail

            クリーンアップ JavaScript: ベース構築!

            tonextday

            Node.jsでWebをクロールするCourse Thumbnail

            Node.jsでWebをクロールする

            zerocho

            ネイバー、アマゾン、Twitter、YouTube、Facebook、Instagram、unsplash.comなどのサイトをクロールして本番に適用します。

            Intermediate

            Intermediate

            JavaScript, Node.js, Web Crawling

            Node.jsでWebをクロールするCourse Thumbnail

            Node.jsでWebをクロールする

            zerocho

            Web パブリッシャーのための JavaScript & jQuery 核心理論実践例題 (教材、完成版)Course Thumbnail

            Web パブリッシャーのための JavaScript & jQuery 核心理論実践例題 (教材、完成版)

            codingworks

            ウェブ パブリッシャー向けの JS 核心理論および実践例教材および完成版は、PDF で作成された講義教材です。この教材は、ウェブ パブリッシャーが必ず知っておくべき JavaScript と jQuery の基本を忠実に習得できる役割を果たします。この教材の特徴は、理論に関連するスモール ミッション (Small Mission) を通じて、理論をさらに強化できることです。特に、学習したすべての理論を活用した実践例も、忠実に準備された教材です。この PDF の全ページは、純粋な JavaScript (Vanlila JavaScript) と jQuery ページの数が 320 ページ以上で、CodingWorks が簡単に理解できるように十分な説明が追加されています。特に、パブリッシャーがウェブサイト作成のために必要な jQuery 相互作用の実践例を学習できます。

            Basic

            Basic

            JavaScript, jQuery, HTML/CSS

            Web パブリッシャーのための JavaScript & jQuery 核心理論実践例題 (教材、完成版)Course Thumbnail

            Web パブリッシャーのための JavaScript & jQuery 核心理論実践例題 (教材、完成版)

            codingworks

            モバイル、タブレット、pcレスポンシブインスタグラムクローンコーディングCourse Thumbnail

            モバイル、タブレット、pcレスポンシブインスタグラムクローンコーディング

            jeong4726

            この講義を通じて、受講生はHTML、CSS、JSでインスタグラムに似たWebサービスを作成することができます。 （フロントのみ実装しました！バックエンドサーバー構築は今後講義撮影予定です。）

            Basic

            Basic

            HTML/CSS, JavaScript, Clone Coding

            モバイル、タブレット、pcレスポンシブインスタグラムクローンコーディングCourse Thumbnail

            モバイル、タブレット、pcレスポンシブインスタグラムクローンコーディング

            jeong4726

            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