BEST

프론트엔드

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

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

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

(4.9) 수강평 24개

수강생 220명

난이도 초급

수강기한 무제한

Rafael
,
유동균

실습 중심

핵심원리

실습 중심

핵심원리

티몬

임직원들도 이 강의를 듣고 있어요!

티몬

임직원들도 이 강의를 듣고 있어요!

먼저 경험한 수강생들의 후기

4.9

5.0

서정우

98% 수강 후 작성

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

5.0

Seo Tr

91% 수강 후 작성

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

5.0

chaeyeon

35% 수강 후 작성

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

수강 후 이런걸 얻을 수 있어요

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

안녕하세요
Rafael입니다.

220

명

수강생

개

수강평

개

답변

4.9

점

강의 평점

개

강의

(현) 카카오모빌리티

(전) 버즈니

(전) 롯데쇼핑 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분)

강의 게시일:

마지막 업데이트일:

수강평

전체

24개

4.9

24개의 수강평

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

비슷한 강의

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

프론트엔드 마스터클래스

한상훈

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

중급이상

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

프론트엔드 마스터클래스

한상훈

[웹 개발 풀스택 코스] 순수 자바스크립트 기초에서 실무까지

개발자의 품격

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈 중 자바스크립트에 대한 강의입니다. 이 강의는 지식공유자의 저서 <바닐라 자바스크립트>의 내용을 바탕으로 만들어진 강의입니다.

초급

JavaScript, vanilla-javascript

[웹 개발 풀스택 코스] 순수 자바스크립트 기초에서 실무까지

개발자의 품격

실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트

코드 조커, 오프

이 강의를 통해 전반적인 프런트엔드 테스트 종류를 파악하고, 상황에 맞는 적절한 테스트 선택을 통해 신뢰감 있는 테스트를 작성하는 방법을 배웁니다.

초급

소프트웨어 테스트, JavaScript, e2e

실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트

코드 조커, 오프

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

코드 조커, 오프

초급

소프트웨어 테스트, JavaScript, React

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

코드 조커, 오프

JavaScript 객체지향, 이론 말고 '만들면서' 배웁니다 (전략 AI 편)

nhcodingstudio

📌 이 강의는 전략형 AI 틱택토 프로젝트로 시작해, 객체지향 프로그래밍의 핵심 개념까지 실전 예제로 완성하는 커리큘럼입니다. 게임 구현으로 로직 설계와 AI 전략 사고를 훈련하고, 이어서 상속, 조합, 위임, 캡슐화 같은 OOP 설계 기술을 직접 코드로 경험합니다. 실제 프로젝트로 문법을 넘어서 ‘설계하는 개발자’로 성장하고 싶은 분께 추천드립니다.

초급

HTML/CSS, JavaScript, 객체지향

JavaScript 객체지향, 이론 말고 '만들면서' 배웁니다 (전략 AI 편)

nhcodingstudio

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

김영보

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

초급

JavaScript, 객체지향

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

김영보

코어 자바스크립트

정재남

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

초급

JavaScript

코어 자바스크립트

정재남

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

J.영

"2026년도 UIUX디자이너 |코딩하는 디자이너 에이전시 합격 포트폴리오 공개" 면접관의 눈길을 사로잡는 UIUX 웹 포트폴리오를 제작하는 실전 강의입니다. 단순한 포트폴리오 제작이 아닌, 인터랙션을 활용해 차별화된 결과물로 UIUX 디자이너로 취업 경쟁력을 높일 수 있도록 설계된 커리큘럼입니다.

초급

HTML/CSS, JavaScript, 웹앱

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

J.영

React 잘하는 개발자되기

성낙현(낙자쌤)

"리엑트 잘하는 개발자되기" 책이 출간되었습니다. 이 책은 리액트 학습 전에 필요한 웹의 기본 원리부터 최신 리액트 훅까지 체계적으로 안내하여 탄탄한 기초 지식을 제공합니다. 총 40개 이상의 다채로운 실전 프로젝트와 풍부한 실습 예제를 통해 이론을 실무에 바로 적용하며 문제 해결 능력을 키울 수 있습니다. 또한 리덕스 툴킷, 주스탠드, 파이어베이스 등 현대 웹 개발에 필수적인 기술들을 함께 익혀 완성도 높은 리액트 애플리케이션 개발자로 성장하도록 돕습니다.

초급

JavaScript, React, Firebase

React 잘하는 개발자되기

성낙현(낙자쌤)

JetBrains JavaScript Day 2025

JetBrains

JetBrains JavaScript Day 2025의 모든 세션을 한자리에! 전 세계 JavaScript 전문가들이 모여 노하우, 아이디어, 그리고 실무 경험에서 얻은 통찰을 공유합니다. 빠르게 변화하는 JavaScript 생태계 속에서 앞서 나갈 수 있는 최신 정보를 만나보세요.

초급

JavaScript

JetBrains JavaScript Day 2025

JetBrains

[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지

개발자의 품격

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈의 백엔드 부분에 대한 강의입니다. 이 강의는 강사의 저서 <Node.js 프로젝트 투입 일주일 전>의 내용을 바탕으로 만들어진 강의입니다.

초급

Node.js, MySQL, Express

[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지

개발자의 품격

코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)

이동훈

MERN stack (feat. TypeScript) 을 활용한 지도 서비스를 처음부터 끝까지 만들어보는 강의입니다. API 공식 문서를 보며 차근차근 하나씩 만들어 봅시다.

초급

MongoDB, Express, React

코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)

이동훈

제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트

nhcodingstudio

Express.js를 사용하는 수준을 넘어서, 실제로 그 내부 엔진을 처음부터 끝까지 직접 구현하며 진짜 서버의 동작 원리를 몸으로 체득하는 강의입니다. 라우터, 미들웨어, 요청-응답 객체, 정적 파일 처리, 템플릿 렌더링 등 Express의 모든 구성요소를 처음부터 직접 만들어보며 서버 개발자로 성장하는 경험을 제공합니다.

초급

JavaScript, Node.js, Express

제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트

nhcodingstudio

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

개발 까마귀

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

입문

HTML/CSS, JavaScript, Next.js

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

개발 까마귀

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

Kenu 허광남

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

입문

Git, VSCode, Microsoft Windows

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

Kenu 허광남

"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part 2 - 스트림 아키텍처와 하드웨어 통제기

nhcodingstudio

10GB의 방대한 데이터도 단 50MB의 메모리로 제어하는 '스트림(Stream) 아키텍처'를 깊이 있게 파헤쳐 물리적인 리소스 관리의 본질을 꿰뚫습니다. 이를 바탕으로 운영체제(OS)와 V8 엔진을 직접 통제하는 데이터 파이프라인을 설계하며, AI가 결코 대체할 수 없는 상위 1%의 하이엔드 엔지니어로 거듭나시길 바랍니다.

초급

JavaScript, Node.js, 컴퓨터 구조

"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part 2 - 스트림 아키텍처와 하드웨어 통제기

nhcodingstudio

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

깡코딩

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

초급

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

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

깡코딩

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

김영보

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

중급이상

Tensorflow, JavaScript, 머신러닝

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

김영보

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

webstoryboy

웹디자인기능사 출제기준 2023년 버전에 맞추어 누구나 합격할 수 있도록 제작하였습니다. 5가지 유형을 배우고 빠르게 합격합시다!

초급

HTML/CSS, jQuery, JavaScript

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

webstoryboy

Node.js로 웹 크롤링하기

제로초(조현영)

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

중급이상

JavaScript, Node.js, 웹 크롤링

Node.js로 웹 크롤링하기

제로초(조현영)

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

4.9

수강 후 이런걸 얻을 수 있어요

🛠 툴에 휘둘리지 않는 프론트엔드 개발자를 위한 모듈 시스템!

JS 모듈 시스템을 이해하고나면, Webpack, Vite 는 더 이상 두려움의 대상이 아닙니다!

🙋‍♀ 이런 분들께 추천해요!

🚀 수강 후에는

👨‍🏫 이런 내용을 배워요

1. JS 모듈시스템의 발전을 한 강의로

2. 각 모듈 시스템의 동작 원리와 실습

3. 개발 도구 별 모듈 시스템 실전 실습

이 강의를 만든 사람

유동균

Rafael

궁금한 점이 있나요?

수강 전 참고 사항

실습 가능 환경

학습 자료

이 강의는 시리즈 강의의 첫 번째 강의입니다.

이런 분들께
추천드려요

안녕하세요
Rafael입니다.

커리큘럼

수강평

비슷한 강의

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

4.9

수강 후 이런걸 얻을 수 있어요

🛠 툴에 휘둘리지 않는 프론트엔드 개발자를 위한 모듈 시스템!

JS 모듈 시스템을 이해하고나면, Webpack, Vite 는 더 이상 두려움의 대상이 아닙니다!

🙋‍♀ 이런 분들께 추천해요!

🚀 수강 후에는

👨‍🏫 이런 내용을 배워요

1. JS 모듈시스템의 발전을 한 강의로

2. 각 모듈 시스템의 동작 원리와 실습

3. 개발 도구 별 모듈 시스템 실전 실습

이 강의를 만든 사람

유동균

Rafael

궁금한 점이 있나요?

수강 전 참고 사항

실습 가능 환경

학습 자료

이 강의는 시리즈 강의의 첫 번째 강의입니다.

이런 분들께 추천드려요

안녕하세요 Rafael입니다.

커리큘럼

수강평

비슷한 강의

이런 분들께
추천드려요

안녕하세요
Rafael입니다.