Hướng dẫn hoàn hảo về hệ thống build Frontend - Part.1: Hệ thống Module

Name: Hướng dẫn hoàn hảo về hệ thống build Frontend - Part.1: Hệ thống Module
Price: 58300 KRW
Rating: 5 (23 reviews)

Hệ thống Build JS, bạn vẫn còn bối rối? Hợp nhất khái niệm và thực hành của hệ thống Build JS, vốn nghe nhưng chưa thấm thía!

(5.0) 23 đánh giá

199 học viên

실습 중심

핵심원리

JavaScript

Node.js

Webpack

vite

esm

Đánh giá từ những học viên đầu tiên

Bạn sẽ nhận được điều này sau khi học.

Quá trình phát triển của hệ thống module JS và nguyên lý hoạt động chuyên sâu của CJS, AMD, ESM, UMD
Hệ thống hóa các ngữ pháp từng gây bối rối về require, import, define qua thực hành theo kịch bản.
Phân tích toàn diện hệ thống module trong các công cụ mới nhất như Vite, SWC, TypeScript, Webpack
Tham chiếu vòng lặp, tải theo điều kiện, đến mô-đun bất đồng bộ, bí quyết giải quyết vấn đề thực tế gặp phải.

Khi bạn đã hiểu hệ thống mô-đun JS, Webpack và Vite sẽ không còn đáng sợ nữa!

Để sử dụng đầy đủ các trình đóng gói, trình quản lý gói và trình biên dịch trong thực tế, bạn cần có hiểu biết vững chắc về các nguyên tắc của hệ thống mô-đun .
Bất kể công cụ mới nào ra đời, nếu bạn hiểu rõ về khái niệm hệ thống mô-đun, bạn sẽ có thể sử dụng công cụ đó nhanh hơn bất kỳ ai khác .
Ngay cả khi bạn tự xây dựng hoặc phân phối thư viện, bạn vẫn cần biết các chiến lược xây dựng CJS, ESM và UMD để cung cấp các thư viện không có lỗi .

🚀 Sau giờ học

Bạn sẽ hiểu rõ sự khác biệt giữa từng phương pháp, chẳng hạn như ES Module, CommonJS và AMD, và có thể lựa chọn và áp dụng chúng một cách phù hợp mọi lúc, mọi nơi.
Bạn sẽ học các nguyên tắc tích hợp hệ thống mô-đun của các công cụ chính như Vite, Rollup, Webpack và Babel , và bạn có thể tùy chỉnh các cài đặt phức tạp mà không cần lo lắng.
Hiểu hệ thống xây dựng JS và nhanh chóng chẩn đoán và giải quyết các lỗi mô-đun xảy ra trong quá trình triển khai .
Với sự hiểu biết toàn diện về hệ thống mô-đun và chuỗi công cụ, bạn có thể chủ động tham gia vào các quyết định về kiến trúc của nhóm mình .

CommonJS
→ Giới thiệu về thông số kỹ thuật của mô-đun và thông số kỹ thuật của gói

→ Tìm hiểu sâu về cách thức hoạt động của CJS
→ Mô tả toàn bộ quá trình từ Giải quyết đến Lưu trữ đệm
→ Thực hành CJS dựa trên các nguyên tắc hoạt động (tham chiếu vòng tròn, v.v.)
→ Phân tích các gói được tạo bằng CJS
AMD

→ define hàm, luồng tải mô-đun không đồng bộ
→ Thực hành AMD sử dụng RequireJS

🤷‍♀ "Tôi đã cố gắng tạo ra một thư viện và phân phối nó, nhưng một số người có thể sử dụng nó còn những người khác thì không."
🤷‍♂ "Tôi đã tra cứu cài đặt Webpack và Vite trên Internet, nhưng tôi không thực sự hiểu chúng có nghĩa là gì."
🤷 "Làm thế nào để tôi có thể tổ chức một dự án với sự kết hợp phức tạp giữa import/export, require/module.exports?"

Với hơn 9 năm kinh nghiệm trong phát triển front-end, thiết kế thư viện và tối ưu hóa bundler ,
Nhóm của tôi đã hỏi tôi câu hỏi này vô số lần.

Hầu hết các nhà phát triển đều biết cách sử dụng các công cụ, nhưng họ nhanh chóng chuyển sang công cụ khác mà không hiểu sâu sắc tại sao chúng lại hoạt động theo cách đó.
Sau đó, khi xảy ra lỗi hoặc cần tùy chỉnh, nó sẽ hỏng.

Chúng tôi tạo ra khóa học này để cố gắng giải quyết nỗi thất vọng này.

Bài giảng này không chỉ đơn thuần là bài giảng giải thích về mô-đun.
Trong thực tế, có những câu hỏi như "Tại sao tôi cần phải thiết lập điều này?" và "Tại sao xung đột này lại xảy ra?"
Bài giảng này sẽ cho bạn biết lý do thực sự và giải pháp .

Đối với các nhà phát triển muốn sử dụng công cụ của mình một cách thoải mái thì không có khóa học nào cần thiết hơn khóa học này.

H. Người mới bắt đầu có thể nghe được không?

Vâng, tôi có thể nghe rõ.

Bài giảng này được thiết kế để dễ hiểu ngay cả với những người không quen với thuật ngữ “hệ thống mô-đun”.
Chúng ta hãy cùng xem xét kỹ hơn khái niệm mô-đun JavaScript.

Nếu bạn đã từng sử dụng cú pháp như import, export và require thì OK.
Điều này tốt hơn cho những người đã sử dụng bundler (Webpack, Vite) nhưng không biết tại sao chúng lại được thiết lập theo cách đó.

Thay vào đó, những người mới làm quen với khái niệm hệ thống mô-đun sẽ có thể hiểu rõ “tại sao chúng ta nên sử dụng hệ thống này”.
có

Mỗi khi một khái niệm xuất hiện trong bài giảng, chúng tôi sẽ giải thích nhiều lần bằng sơ đồ trực quan, mã ví dụ và các bài tập thực hành.

H. Bạn thực hiện loại hình đào tạo thực tế nào?

Trong Chương 2, khi tìm hiểu về từng hệ thống mô-đun, bạn sẽ tự tạo mô-đun của riêng mình và cùng nhau giải quyết lỗi thông qua thực hành trong môi trường tương tự như công việc thực tế.

Trong Chương 3, chúng ta sẽ giải quyết các vấn đề có thể gặp phải khi triển khai trực tiếp hệ thống mô-đun trong nhiều công cụ môi trường phát triển front-end khác nhau.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

Những ai muốn hiểu về môi trường phát triển frontend và trở thành cao thủ.
Lập trình viên junior chỉ nghe nói CJS, AMD, UMD, ESM chứ chưa hiểu rõ.
Hiểu cách công cụ build hoạt động, từ nguyên lý đến thực tiễn.
Ai từng tốn nhiều thời gian vật lộn với các công cụ build như Webpack và Babel.
Ai đã từng đau đầu vì lỗi module not found, circular dependency?

Cần biết trước khi bắt đầu?

JavaScript

Xin chào
Đây là

199

Học viên

Đánh giá

Trả lời

5.0

Xếp hạng

Khóa học

(현) 카카오모빌리티

(전) 버즈니

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

Đồng giảng viên

Chương trình giảng dạy

Tất cả

43 bài giảng ∙ (5giờ 12phút)

Tài liệu khóa học:

Tài liệu bài giảng

Phần 1. Tổng quan

4 bài giảng ∙ (8phút)

Phần 2. Hệ thống mô-đun Javascript

9 bài giảng ∙ (45phút)

5. Nhận tài liệu lớp
6. Mô-đun là gì?
03:45
7. Hệ thống module Javascript và sự khởi đầu của nó
02:32
8. CJS xuất hiện
06:13
9. Node.JS ra đời
06:44
10. AMD xuất hiện
06:23
11. UMD xuất hiện
05:10
12. ESM ra mắt
05:11
13. ESM sau đó + tổng hợp
09:26

Phần 3. CJS - Cấu trúc cốt lõi và Nguyên lý hoạt động

8 bài giảng ∙ (32phút)

14. Tải tài liệu học (CJS, AMD, UMD, ESM)
15. CJS - Tổng quan, Đặc điểm, Nguyên lý hoạt động
09:46
16. Hướng dẫn GitHub Repo thực hành
17. CJS - Tạo mô-đun CJS đơn giản (Thực hành)
02:54
18. CJS - Tải mô-đun có điều kiện (Thực hành)
01:57
19. CJS - Khắc phục vấn đề tham chiếu vòng lặp (Thực hành)
06:13
20. CJS - Phân tích gói npm được tạo bằng CommonJS
06:45
21. CJS - Hiểu cách CJS hoạt động với Browserify
04:57

Phần 4. AMD - Cấu trúc cốt lõi và nguyên lý hoạt động

2 bài giảng ∙ (11phút)

Phần 5. UMD - Cấu trúc cốt lõi và nguyên lý hoạt động

2 bài giảng ∙ (10phút)

Phần 6. ESM - Cấu trúc cốt lõi và nguyên lý hoạt động

3 bài giảng ∙ (26phút)

Phần 7. Cấu hình hệ thống module theo môi trường build

14 bài giảng ∙ (2giờ 55phút)

Phần 8. Kết thúc

1 bài giảng ∙ (1phút)

Ngày đăng:

Cập nhật lần cuối:

Đánh giá

Tất cả

23 đánh giá

5.0

23 đánh giá

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

1.221.993 ₫

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!

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

코드 조커, 오프

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

초급

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

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

코드 조커, 오프

입문자를 위한, ES6+ 최신 자바스크립트 입문

짐코딩

주변에서 코딩을 처음 시작하시는 분들을 많이 봤어요. 경력자 분들은 자바스크립트가 쉽다고 하지만 처음 접하시는 분들은 어렵게 느낄 수 밖에 없습니다. 그래서 이번 강의는 코딩에 입문하시는 왕초보 분들을 위해 쉽고! 알찬! 내용을 준비했습니다. 💪🙂

초급

JavaScript, ES6

입문자를 위한, ES6+ 최신 자바스크립트 입문

짐코딩

얄코의 반응형 프로그래밍 - 자바스크립트로 쉽게 배우는 ReactiveX

얄팍한 코딩사전

⚡ 짧고 굵은 전체 160분 강좌! 웹사이트에서 웹사이트로 코드를 복붙하며, ReactiveX를 통한 반응형 프로그래밍을 익히세요 😎

초급

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

얄코의 반응형 프로그래밍 - 자바스크립트로 쉽게 배우는 ReactiveX

얄팍한 코딩사전

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

제로초(조현영)

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

중급이상

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

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

제로초(조현영)

따라하며 만드는 심리테스트 with HTML/CSS/JS

은옥

직접 나만의 MBTI 기반 심리테스트 사이트를 만들며 HTML, CSS, JS의 기초 흐름을 이해할 수 있는 강의입니다.

입문

HTML/CSS, JavaScript, vanilla-javascript

따라하며 만드는 심리테스트 with HTML/CSS/JS

은옥

자바스크립트로 알아보는 함수형 프로그래밍 (ES5)

MDU 유인동

마플(http://www.marpple.com)의 CTO 유인동님이 알려주는 함수형 프로그래밍에 대한 강좌 입니다. 함수형 프로그래밍으로 라이브러리를 직접 만들어가며 함수형 프로그래밍의 패러다임과 코딩의 즐거움을 느낄 수 있습니다.

초급

JavaScript, 함수형 프로그래밍

자바스크립트로 알아보는 함수형 프로그래밍 (ES5)

MDU 유인동

자바스크립트 Class로 떠나는 여행

The Oreum

자바스크립트는 Class를 왜 사용할까? Class가 등장하기 이전에는 어떻게 객체지향프로그래밍을 구현했을까? 자바스크립트를 공부하다보면 한번쯤 가져볼만한 문제에 대한 해답을 찾아 가벼운 여행을 떠나봅니다.

초급

JavaScript, 객체지향, frontend

자바스크립트 Class로 떠나는 여행

The Oreum

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

코드팩토리

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

초급

NestJS, REST API, backend

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

코드팩토리

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

김영보

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

중급이상

Tensorflow, JavaScript, 머신러닝

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

김영보

자바스크립트 ES6+ 기초 핵심 문법

이룸코딩

자바스크립트에 처음 입문하시는 분들이 모던 자바스크립트에 대해 알아야 하는 핵심 문법을 짧고 굵게 정리했습니다. 문법 공부는 한 번에 확실하게 그리고 짧게 끝내고, 소중한 시간은 무언가 만드는데 투자하세요!

초급

JavaScript, ES6

자바스크립트 ES6+ 기초 핵심 문법

이룸코딩

Node.js로 웹 크롤링하기

제로초(조현영)

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

중급이상

JavaScript, Node.js, 웹 크롤링

Node.js로 웹 크롤링하기

제로초(조현영)

피그마 가이드를 이용한 PWA 네이티브 앱 제작 - Figma + HTML + CSS + Progressive Web APP (활용)

유용한IT학습

앱은 우리 일상에서 중요한 역할을 합니다. 하지만 네이티브 앱을 개발하고 유지·보수하는 과정은 길고 복잡하며, 많은 비용이 들기도 합니다. 본 강의에서는 2024년 9월 현재 주목받고 있는 대안인 프로그레시브 웹 앱(Progressive Web App, PWA)을 소개합니다. PWA는 웹 기술과 네이티브 앱의 장점을 결합한 방식으로, 더 빠르고 효율적인 앱 개발과 유지 관리를 가능하게 합니다. 실습과 함께 PWA의 개념, 장점, 구현 방법을 단계별로 학습하며, 실무에 바로 적용할 수 있는 역량을 갖추게 됩니다.

입문

HTML/CSS, JavaScript

피그마 가이드를 이용한 PWA 네이티브 앱 제작 - Figma + HTML + CSS + Progressive Web APP (활용)

유용한IT학습

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React

판다코딩

MERN Stack을 활용하여 커뮤니티 어플리케이션을 제작하고, 배포합니다. (MongoDB, Express, React, Node + Firebase)

초급

MongoDB, Express, React

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React

판다코딩

코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)

제주코딩베이스캠프

제주에서 진행하는 부트캠프를 온라인으로! 빠르게 자신만의 서비스를 만들어보세요! :)

입문

HTML/CSS, JavaScript, Python

코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)

제주코딩베이스캠프

Node.js로 데이터베이스 다루고 웹 애플리케이션 만들기

Egoing Lee

서버측 자바스크립트 언어인 Nodejs 와 데이터베이스의 관계를 소개하고 NodeJs 와 데이터베이스를 통해 웹어플리케이션을 제작하는 방법을 알려줍니다.

초급

Node.js

Node.js로 데이터베이스 다루고 웹 애플리케이션 만들기

Egoing Lee

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

Kenu 허광남

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

입문

Git, VSCode, Microsoft Windows

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

Kenu 허광남

Node.js를 이용해 웹 애플리케이션 만들기

Egoing Lee

JavaScript와 Nodejs를 이용해서 웹에플리케이션을 만드는 방법을 알려드립니다. 웹브라우저에서 동작하는 자바스크립트를 이용해서 PHP나 JSP의 역할을 대체할 수 있습니다. 하나의 언어로 웹에플리케이션 전체를 구현할 수 있게 됩니다.

초급

Node.js

Node.js를 이용해 웹 애플리케이션 만들기

Egoing Lee

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

개발 까마귀

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

입문

HTML/CSS, JavaScript, Next.js

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

개발 까마귀

Azure Native로 나만의 GPT 만들기

정동형

Azure의 여러 리소스들을 사용해서 여러분들만의 GPT를 만들고, 배포하는 강의입니다. 처음부터 끝까지! 아무것도 없는 백지에서 완전한 서비스를 배포해봅시다!

초급

Azure, FastAPI, MongoDB

Azure Native로 나만의 GPT 만들기

정동형

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

김영보

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

초급

JavaScript, 면접, 기술면접

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

김영보

Hướng dẫn hoàn hảo về hệ thống build Frontend - Part.1: Hệ thống Module

Đánh giá từ những học viên đầu tiên

Bạn sẽ nhận được điều này sau khi học.

🛠 Một hệ thống mô-đun dành cho các nhà phát triển front-end không bị ảnh hưởng bởi các công cụ !

Khi bạn đã hiểu hệ thống mô-đun JS, Webpack và Vite sẽ không còn đáng sợ nữa!

🙋‍♀ Đề xuất cho những người này!

🚀 Sau giờ học

👨‍🏫 Hãy học những điều này

1. Bài giảng về sự phát triển của hệ thống mô-đun JS

2. Nguyên lý hoạt động và thực hành của từng hệ thống module

3. Đào tạo thực hành về hệ thống module bằng công cụ phát triển

Ai đã tạo ra khóa học này

Vi khuẩn lỏng

Rafael

Bạn có thắc mắc nào không?

Những điều cần lưu ý trước khi tham gia lớp học

Môi trường thực hành có sẵn

Tài liệu học tập

Bài giảng này là bài đầu tiên trong một loạt bài giảng.

Khuyến nghị cho
những người này

Xin chào
Đây là

Chương trình giảng dạy

Đánh giá

Khóa học tương tự

Hướng dẫn hoàn hảo về hệ thống build Frontend - Part.1: Hệ thống Module

Đánh giá từ những học viên đầu tiên

Bạn sẽ nhận được điều này sau khi học.

🛠 Một hệ thống mô-đun dành cho các nhà phát triển front-end không bị ảnh hưởng bởi các công cụ !

Khi bạn đã hiểu hệ thống mô-đun JS, Webpack và Vite sẽ không còn đáng sợ nữa!

🙋‍♀ Đề xuất cho những người này!

🚀 Sau giờ học

👨‍🏫 Hãy học những điều này

1. Bài giảng về sự phát triển của hệ thống mô-đun JS

2. Nguyên lý hoạt động và thực hành của từng hệ thống module

3. Đào tạo thực hành về hệ thống module bằng công cụ phát triển

Ai đã tạo ra khóa học này

Vi khuẩn lỏng

Rafael

Bạn có thắc mắc nào không?

Những điều cần lưu ý trước khi tham gia lớp học

Môi trường thực hành có sẵn

Tài liệu học tập

Bài giảng này là bài đầu tiên trong một loạt bài giảng.

Khuyến nghị cho những người này

Xin chàoĐây là .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Chương trình giảng dạy

Đánh giá

Khóa học tương tự

Khuyến nghị cho
những người này

Xin chào
Đây là