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

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

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

(5.0) 수강평 14개

수강생 175명

실습 중심

핵심원리

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

안녕하세요
입니다.

175

명

수강생

개

수강평

개

답변

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 같은 최신 도구에서 모듈 시스템이 어떻게 작동하는지도 실제 설정 파일을 뜯어보며 알려줘서, 도구에 끌려 다니던 제 자신을 성찰하고 갑니다 ㅎㅎ 남은 강의도 열심히 들으면서 무럭무럭 성장해보겠습니다. 좋은 강의 감사합니다 :)

2025 추석맞이 감사할인 중 (8일 남음)

₩43,720

25%

₩58,300

비슷한 강의

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

Google Sheets로 만드는 마크다운 스티커 메모

제주코딩베이스캠프

간단한 마크다운 메모 웹 애플리케이션을 만들어봅니다. Notion처럼 마크다운을 사용할 수 있는 스티커 메모지에요!

초급

웹앱, JavaScript, ES6

Google Sheets로 만드는 마크다운 스티커 메모

제주코딩베이스캠프

구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]

nhcodingstudio

React, Next.js, Vue를 아무리 공부해도 코드가 추상적으로 느껴지고, 구조가 확실히 이해되지 않는다면, 그 근본 원인은 DOM에 대한 이해 부족일 수 있습니다. DOM은 모든 프론트엔드 프레임워크의 기반이며, 웹 페이지의 구조와 동작을 연결해주는 실체입니다. 이 강의는 단순한 선택자나 조작법을 넘어, HTML이 어떻게 DOM 객체로 바뀌고, 이 구조를 어떻게 선택하고 탐색하며, 조작할 수 있는지를 처음부터 차근차근 알려주는 DOM 완전 정복의 Part 1 입문 강의입니다. HTML 태그는 구조일 뿐이고, 자바스크립트는 행동일 뿐이지만, 그 둘을 연결하는 핵심이 DOM입니다. 이 연결고리를 명확히 이해하면, 어떤 프레임워크를 쓰든 그 안의 진짜 구조와 흐름을 정확히 꿰뚫어볼 수 있게 됩니다.

입문

HTML/CSS, JavaScript, React

구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]

nhcodingstudio

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

코드캠프

코딩과 사랑에 빠져버린 8년차 풀스택 개발자 Captain의 사심이 가득 담긴 커리큘럼이에요. 백엔드의 모든 것을 다 알려주고 싶은 Captain의 마음이 녹아있죠! 이 강의를 듣다보면 '이렇게까지 알려준다고?' 하는 생각을 떨칠 수 없을 거예요. 모두가 어려워하는 부분까지 꼭꼭 씹어 떠먹여주는 이 강의로 시작해 볼까요?

입문

NestJS, Node.js, JavaScript

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

코드캠프

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

짐코딩

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

초급

Webpack

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

짐코딩

TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기

제로초(조현영)

타입스크립트/자바스크립트로 그림판을 만들어보며 다양한 디자인 패턴의 쓰임과 장단점을 알아봅니다. canvas api를 배울 수 있는 것은 보너스!

중급이상

디자인 패턴, 객체지향, TypeScript

TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기

제로초(조현영)

따라하며 배우는 타입스크립트 A-Z

John Ahn

이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

초급

TypeScript, JavaScript

따라하며 배우는 타입스크립트 A-Z

John Ahn

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

입문

JavaScript, React, Node.js

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1

유용한IT학습

이론과 실습을 통해 자바스크립트를 익힐 수 있는 강의입니다. 코딩을 처음 접하시는 분들도 쉽게 이해할 수 있도록 차근차근 설명하고 있습니다. Part 1은 자바스크립트의 개요와 변수, 자료형, 연산자, 제어문과 jQuery의 기초를 다루고 있습니다.

입문

JavaScript, jQuery

자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1

유용한IT학습

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

김영보

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

초급

JavaScript

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

김영보

Next.js 15: Full-Stack Development

구멍가게코딩단

전통적인 React 개발 방식과 Next.js를 이용해서 개발하는 방식은 전혀 다릅니다. 이 강의는 최신 Next.js 15의 핵심을 꿰뚫고, '진짜' Next.js다운 개발 방식을 알려드립니다. 취업 포트폴리오부터 실무 프로젝트까지, 성능과 효율을 모두 잡는 방법을 경험하세요. Next.js 스럽게 개발 합시다! Next.js의 기능을 어떻게 적용해야하는지 실제 예제를 만들면서 몸으로 배울 수 있도록 구성되었습니다. 서버 컴포넌트를 중심으로 보고 서버 액션과 캐싱 전략등을 이론보다는 실제로 코드를 통해서 더 빠르게 학습합니다. 강의의 목표는 최대한 빨리 Next.js의 분위기를 따라가는 것이 때문에 강의 자체는 JavaScript를 이용해서 진행합니다. 하지만 각 강의의 예제는 Typescript로 제작된 것을 추가로 수업자료로 제공합니다.

초급

JavaScript, React, JPA

Next.js 15: Full-Stack Development

구멍가게코딩단

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.

초급

JavaScript, Node.js, Express

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

nhcodingstudio

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

SungYong Lee

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

초급

Python, Django, Bootstrap

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

SungYong Lee

이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의

그린코딩

꽉 찬 40시간 스프링 기반 풀스택 웹 개발 전면 무료 강의

입문

HTML/CSS, JavaScript, JSP

이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의

그린코딩

Node.js로 웹 크롤링하기

제로초(조현영)

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

중급이상

JavaScript, Node.js, 웹 크롤링

Node.js로 웹 크롤링하기

제로초(조현영)

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

이지웹

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

초급

HTML/CSS, JavaScript, jQuery

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

이지웹

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

더코딩클럽

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

초급

HTML/CSS, JavaScript, 클론코딩

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

더코딩클럽

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

Kenu 허광남

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

입문

Git, VSCode, Microsoft Windows

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

Kenu 허광남

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

개발 까마귀

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

입문

HTML/CSS, JavaScript, Next.js

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

개발 까마귀

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

김영보

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

초급

JavaScript, 면접, 기술면접

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

김영보

GraphQL: REST API를 대체할 기술

Burger

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

초급

GraphQL, Spring Boot, Node.js

GraphQL: REST API를 대체할 기술

Burger

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

커리큘럼

수강평

비슷한 강의

이런 분들께
추천드려요

안녕하세요
입니다.