Programming

Front-end

フロントエンドビルドシステム完璧ガイド - Part.1: モジュールシステム

Name: フロントエンド ビルド システム 完璧ガイド - Part.1: モジュール システム
Price: 43730 KRW

"JSビルドシステム、まだ混乱していますか？" 聞いてもピンとこなかったJSビルドシステムの概念と実践をひとつに！

（5.0）受講レビュー 14件

受講生 149名

실습 중심

핵심원리

JavaScript

Node.js

Webpack

vite

esm

学習した受講者のレビュー

こんなことが学べます

JSモジュールシステムの発展過程とCJS、AMD、ESM、UMDの深掘りした動作原理
require, import, define で混同していた全ての文法をシナリオ別実習で整理
Vite, SWC, TypeScript, Webpack など最新ツールにおけるモジュールシステム完全分析
循環参照、条件付きローディング、非同期モジュールまで、実際にぶつかる問題解決ノウハウ

JSモジュールシステムを理解したら、Webpack、Viteはもはや恐怖の対象ではありません！

実務では、バンドル、パッケージマネージャ、トランスファイラを100％活用するためには、モジュールシステムの原理を正確に理解しておく必要があります。
どんな新しいツールでも、モジュールシステムの概念が確実であれば、誰よりも速くツールを活用できます。
ライブラリを直接作成またはデプロイする場合でも、 CJS、ESM、UMDのビルド戦略を知っておくと、エラーのないライブラリを提供できます。

🚀受講後は

ES Module、CommonJS、AMDなど各方式の違いを確実に理解し、いつでもどこでも適切に選択・応用できるようになります。
Vite、Rollup、Webpack、Babelなどの主要ツールのモジュールシステム連動原理を貫いてみて、複雑な設定も恐れることなくカスタマイズできます。
JSビルドシステムを理解し、配布パイプラインで発生するモジュールエラーを迅速に診断・解決することができます。
モジュールシステムとツールチェーンの包括的な理解により、チームのアーキテクチャ決定に主導的に参加できます。

🤷‍♀ 「ライブラリを作って配布しようとしましたが、誰かとなり、誰かはできません。」
🤷‍♂ 「Webpack、Viteの設定をインターネットで見てみましたが、実はどういう意味なのかわかりません。」
🤷 「import/export、require/module.exportsが混乱しているプロジェクトをどのように整理しますか？」

9年以上フロントエンド開発とライブラリ設計、バンドル最適化をしてきて、
このような質問をチームから数え切れないほど受けてきました。

ほとんどの開発者はツールの使い方を知っていますが、なぜそのように動作するのかを深く理解せずに進むことは急速です。
そうするとエラーが発生したり、カスタムが必要な瞬間に崩れることになります。

私たちはこの苦しみを解決しようとするこの講義を作りました。

この講義は、単にモジュールを説明する講義ではありません。
実際に実務で「なぜこの設定をしなければならないのか」、「なぜこのような衝突が起きるのか」について
本当の理由と解決策を教えてくれる講義です。

ツールを自由に使いたい実務開発者にこれ以上必要な講義はないでしょう。

Q. 初心者も聞くことができますか？

はい、十分に聞くことができます。

この講義は「モジュールシステムという言葉が不慣れな方」も理解できるように
JavaScriptモジュールの概念自体から次第に説明します。

import、export、requireのような文法を一度でも書いてみた方ならOK
バンドラ（Webpack、Vite）を使ってみましたが、なぜそのように設定するのか分からない方ならもっと良いです

むしろ、モジュールシステムの概念に初めて触れる方ほど、「なぜこれを書くべきか」はっきり理解できます。
あります

講義中の概念が出るたびに、可視化されたフローチャート、サンプルコード、実習で繰り返し説明します。

こんな方に
おすすめです

学習対象は
誰でしょう？

フロントエンド開発環境を理解し、達人になりたい方
CJS, AMD, UMD, ESM 聞いただけだが、理解不足なジュニア開発者
ビルドツールがどのように動作するのか、原理から実践まで理解したい方
WebpackやBabelなどのビルドツールと格闘するあまり、多くの時間を無駄にしてしまった方
module not found、circular dependency エラーに悩まされた方

前提知識、
必要でしょうか？

JavaScript

こんにちは
です。

149

受講生

受講レビュー

回答

5.0

講座評価

講座

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

(전) 버즈니

(현) 카카오모빌리티

共同知識共有者

カリキュラム

全体

43件 ∙ (5時間 12分)

講座資料（こうぎしりょう）:

授業資料

セクション 1．概要

4件 ∙ (8分)

セクション 2．Javascript モジュールシステム

9件 ∙ (45分)

5. 授業資料の受け取り
6. モジュールとは
03:45
7. Javascript モジュールシステムとその始まり
02:32
8. CJS 登場
06:13
9. Node.JS 登場
06:44
10. AMD 登場
06:23
11. UMD 登場
05:10
12. ESM 登場
05:11
13. ESM その後 + まとめ
09:26

セクション 3．CJSの根幹をなす構造と動作の原理

8件 ∙ (32分)

14. 授業資料取得 (CJS, AMD, UMD, ESM)
15. CJS - 概要、特徴、動作原理
09:46
16. 実習用 GitHub Repo 案内
17. CJS - 簡単なCJSモジュールの作成 (実習)
02:54
18. CJS - 条件付きモジュールローディング (実習)
01:57
19. CJS - 循環参照イシューの解決方法 (実習)
06:13
20. CJS - CommonJSで作成されたnpmパッケージの分析
06:45
21. CJS - BrowserifyでCJSの動作原理を理解する
04:57

セクション 4．AMD - 核心構造と動作原理

2件 ∙ (11分)

セクション 5．UMD - 主要構造と動作原理

2件 ∙ (10分)

セクション 6．ESM - コア構造と動作原理

3件 ∙ (26分)

セクション 7．ビルド環境別モジュールシステム設定

14件 ∙ (2時間 55分)

セクション 8．終わり

1件 ∙ (1分)

講座掲載日:

最終更新日:

受講レビュー

全体

14件

5.0

14件の受講レビュー

서정우
受講レビュー 5
∙
平均評価 5.0
5
98% 受講後に作成
번들러는 webpack, vite 정도의 얕은 깊이로만 알고 있었는데 강의 듣고 원리를 이해할 수 있게 되었습니다. 감사합니다
유동균
受講レビュー 1
∙
平均評価 5.0
5
17% 受講後に作成
Seo Tr
受講レビュー 1
∙
平均評価 5.0
修正済み
5
91% 受講後に作成
프론트엔드 개발에서 놓치기 쉬운 부분들을 명확하고 쉽게 설명을 해주시네요. 모듈시스템을 대충대충 알고 넘어가기 쉬운데 개념부터 자세히 나와있어서 해당부분에서 애매하게 알고있다면 강추입니다. 아는것과 모르는것은 큰 차이가 있는데 시간내서 미리 공부할걸 싶었네요
Rafael
受講レビュー 1
∙
平均評価 5.0
5
12% 受講後に作成
chaeyeon
受講レビュー 1
∙
平均評価 5.0
5
35% 受講後に作成
프론트엔드 개발하면서 늘 헷갈렸던 JS 모듈 시스템… 강의를 들으면서 정리되고 있는 거 같아요. CommonJS, AMD, ESM, UMD 개념은 물론, 왜 그런 구조가 생겨났는지 역사적인 맥락까지 설명해주셔서 머리에 체계가 잡혀가고 있는 중입니다. 특히 Webpack, Vite 같은 최신 도구에서 모듈 시스템이 어떻게 작동하는지도 실제 설정 파일을 뜯어보며 알려줘서, 도구에 끌려 다니던 제 자신을 성찰하고 갑니다 ㅎㅎ 남은 강의도 열심히 들으면서 무럭무럭 성장해보겠습니다. 좋은 강의 감사합니다 :)

期間限定セール、あと5日日で終了

￥43,730

24%

￥6,892

似ている講座

同じ分野の他の講座を見てみましょう！

프론트엔드 마스터클래스

한상훈

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

중급이상

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

프론트엔드 마스터클래스

한상훈

프론트엔드 개발 시 꼭 해봐야 하는 실무 예제 Part.2

유용한IT학습

더 이상 자바스크립트와 ES6을 따로 공부할 필요없습니다. 본 강의는 자바스크립트 프로그래밍 언어를 최신의 ES6 문법과 함께 학습하도록 기획된 과정입니다.

초급

JavaScript

프론트엔드 개발 시 꼭 해봐야 하는 실무 예제 Part.2

유용한IT학습

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

어쩔코딩

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

초급

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

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

어쩔코딩

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

Kenu 허광남

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

입문

Git, VSCode, Microsoft Windows

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

Kenu 허광남

이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

nhcodingstudio

이 강의는 단순한 DOM 조작을 넘어서, 실제 사용자와의 상호작용 속에서 웹 UI를 동적으로 구성하고 반응하는 방법을 깊이 있게 학습합니다. 이벤트 시스템의 본질, 버블링과 캡처링, 이벤트 위임, 실시간 UX 피드백, 그리고 throttle & debounce를 활용한 성능 최적화까지, 실무에서 자주 마주치는 문제들을 직접 구현하며 익힐 수 있도록 구성했습니다. DOM 트리의 구조 이해를 바탕으로, 이벤트 흐름과 상태 변경을 유연하게 연결하는 능력을 기르게 됩니다.

초급

HTML/CSS, JavaScript, React

이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

nhcodingstudio

실습으로 마스터하는 OAuth 2.0: 기본부터 보안 위험까지

한윤석

OAuth 2.0을 구글이나 깃헙같은 계정으로 간편 로그인을 사용해봐서 이미 친숙하게 느껴질지도 모릅니다. 소셜 로그인은 OAuth 2.0을 확장하여 만들어진 것으로 핵심 기술은 OAuth 2.0 인가 프레임워크에 있습니다. OAuth 2.0의 원리를 이해하면 그것을 바탕으로 필요에 맞게 적절히 구현하고 조정하는 능력을 기를 수 있습니다.

초급

OAuth, Next.js, JavaScript

실습으로 마스터하는 OAuth 2.0: 기본부터 보안 위험까지

한윤석

자바스크립트 중고급: 엔진 핵심

김영보

4개 강좌로 구성된 자바스크립트 바이블 강좌의 2번째 강좌입니다. 자바스크립트 엔진 이해를 통해 자바스크립트에 최적화된 프로그램을 개발할 수 있습니다. 자신 있게 시스템을 설계할 수 있습니다.

초급

JavaScript

자바스크립트 중고급: 엔진 핵심

김영보

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

코드팩토리

자바스크립트, 타입스크립트 다음은 백엔드 개발! NestJS를 이용한 REST API 백엔드 개발, Socket IO 개발 및 배포를 할 수 있게 됩니다.

초급

NestJS, REST API, backend

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

코드팩토리

코어 자바스크립트

정재남

ES6 이전까지의 자바스크립트 전체를 관통하는 핵심 개념들에 대하여, 전반적인 흐름을 살펴보는 강의입니다.

초급

JavaScript

코어 자바스크립트

정재남

아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지

이지웹

전세계 웹사이트에서 75%이상이 사용하고 있는 javascript 라이브러리 jQuery ! 화려한 효과보다는 원리를 이해하며 기본기를 다질수 있도록 구성했습니다. 제이쿼리 기초부터 활용까지 학습하여 여러분만의 포트폴리오를 완성하거나, 현업에서 바로 활용해보세요.

초급

HTML/CSS, JavaScript, jQuery

아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지

이지웹

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

김영보

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

중급이상

Tensorflow, JavaScript, 머신러닝

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

김영보

Node.js로 웹 크롤링하기

제로초(조현영)

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

중급이상

JavaScript, Node.js, 웹 크롤링

Node.js로 웹 크롤링하기

제로초(조현영)

Do it! Node.js 프로그래밍 입문

이지스퍼블리싱

Node.js+자바스크립트+익스프레스+몽고DB로 서버의 핵심을 향해 한눈팔지 않고 달린다!

초급

Node.js, JavaScript, Express

Do it! Node.js 프로그래밍 입문

이지스퍼블리싱

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

깡코딩

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

초급

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

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

깡코딩

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

김영보

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

초급

JavaScript, 면접, 기술면접

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

김영보

Node.Js 활용하기

Egoing Lee

서버측 Javascript 인 NodeJS 를 이용해 쿠키, 로그인 기능을 구현해보고 앞선 nodeJS 강좌에서의 성과물과 합쳐 온전한 웹 애플리케이션을 만들어 보는 강좌입니다.

초급

JavaScript, Node.js

Node.Js 활용하기

Egoing Lee

생활코딩 - JavaScript Immutability

Egoing Lee

생활코딩에서 제공하는 자바스크립트 관련 강의로, 자바스크립트에서 데이터를 불변하게 다루는 방법에 대한 수업입니다.

초급

JavaScript

생활코딩 - JavaScript Immutability

Egoing Lee

Do It! 장고+부트스트랩: 파이썬 웹개발의 정석

SungYong Lee

만들면서 배우는 파이썬 웹개발 A to Z! 웹 기초부터 블로그 개발, 배포까지 한 번에 배워요.

초급

Python, Django, Bootstrap

Do It! 장고+부트스트랩: 파이썬 웹개발의 정석

SungYong Lee

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

닭강정

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

초급

gemini, HTML/CSS, TailwindCSS

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

닭강정

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

정현우

아이디어는 있는데 앱을 어떻게 개발해야할지 몰랐던 분들, 실전 프로젝트 4개를 만들어보면서 앱 개발을 마스터해봅시다!

입문

JavaScript, React, Node.js

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

정현우

フロントエンドビルドシステム完璧ガイド - Part.1: モジュールシステム

学習した受講者のレビュー

こんなことが学べます

🛠ツールに振り回されないフロントエンド開発者のためのモジュールシステム！

JSモジュールシステムを理解したら、Webpack、Viteはもはや恐怖の対象ではありません！

🙋‍♀こんな方におすすめです！

🚀受講後は

👨‍🏫このような内容を学びます

1. JSモジュールシステムの発展をした講義で

2. 各モジュールシステムの動作原理と実習

3. 開発ツール別モジュールシステムの実践実習

この講義を作った人

流動菌

Rafael

質問がありますか？

受講前の注意

実習可能な環境

学習資料

この講義はシリーズ講義の最初の講義です。

こんな方に
おすすめです

こんにちは
です。

カリキュラム

受講レビュー

似ている講座

フロントエンド ビルド システム 完璧ガイド - Part.1: モジュール システム

学習した受講者のレビュー

こんなことが学べます

🛠ツールに振り回されないフロントエンド開発者のためのモジュールシステム！

JSモジュールシステムを理解したら、Webpack、Viteはもはや恐怖の対象ではありません！

🙋‍♀こんな方におすすめです！

🚀受講後は

👨‍🏫このような内容を学びます

1. JSモジュールシステムの発展をした講義で

2. 各モジュールシステムの動作原理と実習

3. 開発ツール別モジュールシステムの実践実習

この講義を作った人

流動菌

Rafael

質問がありますか？

受講前の注意

実習可能な環境

学習資料

この講義はシリーズ講義の最初の講義です。

こんな方に おすすめです

こんにちは .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}です。

カリキュラム

受講レビュー

似ている講座

フロントエンドビルドシステム完璧ガイド - Part.1: モジュールシステム

こんな方に
おすすめです

こんにちは
です。