프론트엔드 빌드 시스템 완벽 가이드 - Part.1: 모듈 시스템

Name: 프론트엔드 빌드 시스템 완벽 가이드 - Part.1: 모듈 시스템
Price: 58300 KRW
Rating: 5 (20 reviews)

"JS 빌드 시스템, 아직도 헷갈리세요?" 들어도 와닿지 않았던 JS 빌드 시스템의 개념과 실습을 하나로!

(5.0) 수강평 20개

수강생 187명

실습 중심

핵심원리

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. 초보자도 들을 수 있나요?

네, 충분히 들을 수 있습니다.

이 강의는 “모듈 시스템이라는 단어가 생소한 분”도 이해할 수 있도록
자바스크립트 모듈의 개념 자체부터 차근히 설명합니다.

import, export, require 같은 문법을 한 번이라도 써보신 분이라면 OK
번들러(Webpack, Vite)를 써봤지만 왜 그렇게 설정하는지는 모르겠는 분이라면 더 좋습니다

오히려 모듈 시스템 개념을 처음 접하는 분일수록 “왜 이걸 써야 하는지” 명확하게 이해하실 수
있습니다

강의 중 개념이 나올 때마다 시각화된 흐름도, 예제 코드, 실습으로 반복 설명해드립니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

프론트엔드 개발 환경을 이해하고 고수가 되고 싶으신 분
CJS, AMD, UMD, ESM 말로만 들었지, 제대로 이해하지 못하는 주니어 개발자
빌드 도구가 어떻게 동작하는지 원리부터 실전까지 이해하고 싶으신 분
Webpack과 Babel 등 빌드 툴과 씨름하느라 시간을 많이 낭비하신 분
module not found, circular dependency 에러에 시달려본 분

선수 지식,
필요할까요?

JavaScript

안녕하세요
입니다.

187

명

수강생

개

수강평

개

답변

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분)

강의 게시일:

마지막 업데이트일:

수강평

전체

20개

5.0

20개의 수강평

oracion
수강평 5
∙
평균 평점 5.0
5
98% 수강 후 작성
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
수강평 1
∙
평균 평점 5.0
5
17% 수강 후 작성
seobm79968177
수강평 1
∙
평균 평점 5.0
수정됨
5
91% 수강 후 작성
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
수강평 1
∙
평균 평점 5.0
5
12% 수강 후 작성
chloe111
수강평 1
∙
평균 평점 5.0
5
35% 수강 후 작성
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 :)

₩58,300

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

Complete JavaScript in One Go: From Vanilla JavaScript to SPA Development

hyobin

While learning from basic grammar to advanced concepts, let's develop an SPA with Vanilla JavaScript🔥

초급

JavaScript, SPA, DOM

Complete JavaScript in One Go: From Vanilla JavaScript to SPA Development

hyobin

Learn React by Building It: Basics

jayjinjay

This is an introductory React course that will teach you React the easiest and fastest way. Learn concepts and practical skills while creating a toy project and complete the entire course in just 3 hours, including deployment! This is the first course in a series consisting of beginner, intermediate, and advanced levels :)

초급

React, JavaScript

Learn React by Building It: Basics

jayjinjay

Learning Web & Javascript While Building with Cursor AI

weekendcode

Recommended for those who want to acquire their own skills and learn web development step-by-step. We teach from the history of web browsers and languages.

입문

HTML/CSS, JavaScript, LLM

Learning Web & Javascript While Building with Cursor AI

weekendcode

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

tonextday

TypeScript A-Z: Learn by Following

John Ahn

In this course, you will learn about TypeScript.

초급

TypeScript, JavaScript

TypeScript A-Z: Learn by Following

John Ahn

Introduction to ES6+ Latest JavaScript for Beginners

gymcoding

I've seen a lot of people around me who are just starting out with coding. Those with experience say that JavaScript is easy, but those who are new to it can't help but find it difficult. That's why I've prepared easy and informative content for those who are just starting out with coding. 💪🙂

초급

JavaScript, ES6

Introduction to ES6+ Latest JavaScript for Beginners

gymcoding

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!

초급

Interactive Web, JavaScript, HTML/CSS

Learning interactive web while making web games! JAVASCRIPT

ggangcoding162118

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

zerocho

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]

John Ahn

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

kenuheo

Developing a chat application using Electron, NodeJS, and Socket.io

kishe561204

Based on the lecture content, you will learn how to write a basic chat application and the basic structure of Electron and NodeJS.

초급

Node.js, Electron, Socket.io

Developing a chat application using Electron, NodeJS, and Socket.io

kishe561204

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

donghunee

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

ref63184917

Complete with this one - Spring-based full-stack web development free course

greencoding1234

Full 40-hour Spring-based Full-stack Web Development Completely Free Course

입문

HTML/CSS, JavaScript, JSP

Complete with this one - Spring-based full-stack web development free course

greencoding1234

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!

tonextday

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

jeong4726

Working with Databases and Building Web Applications with Node.js

Egoing Lee

This article introduces the relationship between Nodejs, a server-side JavaScript language, and a database, and explains how to create web applications using Nodejs and a database.

초급

Node.js

Working with Databases and Building Web Applications with Node.js

Egoing Lee

Node and React series that you can learn by following - Creating a movie site

John Ahn

Through this course, you will learn not only concepts such as React and Node, but also how to practically create a website.

초급

React, Node.js, Web Application

Node and React series that you can learn by following - Creating a movie site

John Ahn

WEB5 - Express Passport.js

Egoing Lee

This course will teach you how to use Passport.js, an authentication middleware for Node.js Express.

중급이상

Node.js, Express

WEB5 - Express Passport.js

Egoing Lee

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

John Ahn

프론트엔드 빌드 시스템 완벽 가이드 - 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;}입니다.

커리큘럼

수강평

비슷한 강의

이런 분들께
추천드려요

안녕하세요
입니다.