Nắm vững hoàn hảo HTTP - cốt lõi của phát triển web!
jeonghwan
Tìm hiểu kiến thức mạng web developer cần biết: HTTP cơ bản, yêu cầu dữ liệu, giao tiếp real-time, bảo mật, tối ưu hiệu suất.
Basic
Ajax, https, cors
BEST
Tìm hiểu và thực hành về môi trường phát triển frontend (webpack, babel, eslint..)
Tôi có thể hiểu môi trường phát triển đã được thiết lập. Tôi có thể tự mình tạo môi trường phát triển từ đầu.
(4.9) 212 đánh giá
3,021 học viên
Độ khó Trung cấp trở lên
Thời gian Không giới hạn
Node.js
Node.js
Webpack
Webpack
Babel
Babel
ESLint
ESLint
Node.js
Node.js
Webpack
Webpack
Babel
Babel
ESLint
ESLint
Đá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.
Cách sử dụng hệ thống module và tự động hóa môi trường phát triển (Webpack)
Thiết lập môi trường sử dụng cú pháp Javascript mới nhất (Babel)
Tạo môi trường phát triển hợp tác với đồng nghiệp (ESLint, Prettier)
Hiểu và áp dụng các công nghệ front-end như Webpack, Babel và Lint vào công việc của bạn!
“Chỉ cần một người trong nhóm biết cách sử dụng Webpack thôi!?”
Nếu người đó rời khỏi nhóm thì sao? Có lẽ bạn nên là một trong số họ.
Nếu bạn là người duy nhất trong nhóm phát triển, việc cấu hình webpack là điều không thể tránh khỏi.
Sẽ thế nào nếu tôi có thể tự tay thiết lập môi trường phát triển?
Nếu bạn có thể đọc và hiểu được mã mà người khác đã tạo (chẳng hạn như mã được tạo bằng create-react-app hoặc vue-cli), bạn sẽ tự tin hơn nhiều vào công việc của mình.
Chúng tôi đã tạo ra một khóa học hướng dẫn bạn cách tự động hóa và cải thiện năng suất của môi trường phát triển front-end, bao gồm Webpack, Babel, Lint và Prettier.
Tôi hy vọng điều này sẽ giúp bạn làm việc hiệu quả hơn.
📝 Tôi sẽ học được gì?
# Node.js
Node.js là công nghệ cơ bản tạo thành nền tảng cho việc xây dựng môi trường phát triển front-end. Bởi vì hầu hết các công cụ đều dựa trên Node.js. Nó cũng đóng vai trò quan trọng trong việc tự động hóa một loạt các quy trình phát triển. Hiểu được vai trò của Node.js trong phát triển front-end.
# Gói Web
Webpack là công cụ cho phép phát triển dựa trên mô-đun. Mặc dù có những giải pháp thay thế có cùng mục đích, nhưng webpack vẫn là giải pháp được sử dụng rộng rãi nhất. Sau khi tìm hiểu và hiểu được nguyên lý hoạt động của webpack, bạn có thể học cách sử dụng nó thông qua việc thực hành thiết lập môi trường phát triển của riêng mình và tự triển khai trình tải .
# Babel + SASS
Babel rất cần thiết khi phát triển bằng các ngôn ngữ lập trình cấp cao như ECMAScript+, Typescript hoặc các framework như React.js, Vue.js. Tất nhiên bạn có thể phát triển mà không cần Babel, nhưng ai phát triển theo cách đó? Để phát triển năng suất, bạn chắc chắn phải có sự trợ giúp của Babel. Tìm hiểu cách tạo ra môi trường tối ưu cho dự án của bạn bằng cách tự mình hiểu và sử dụng các nguyên tắc của Babel.
# Đẹp hơn + ESLint
Tranh cãi về quy ước mã hóa thật là mệt mỏi, phải không? Với sự trợ giúp của các công cụ, bạn có thể điều chỉnh phong cách viết mã của mình dễ dàng hơn. Ngoài ra, việc thêm các công cụ tự động hóa vào quy trình phát triển sẽ giúp bạn duy trì mã nhất quán theo thời gian.
🧰 Vui lòng cài đặt trước
Tôi sử dụng VSCode , nhưng bạn có thể sử dụng trình soạn thảo hoặc IDE yêu thích của mình.
Vui lòng cài đặt Git để tiếp tục đào tạo. Vui lòng sử dụng phiên bản v2.3.0 trở lên vì một số lớp sử dụng git hook.
🙋🏻♂️ Những câu hỏi dự kiến liên quan đến bài giảng
H. Xin hãy cho chúng tôi biết lý do nào khiến bạn bắt đầu khóa học này.
A. Mặc dù công nghệ front-end được cho là rất nhanh, nhưng tôi vẫn muốn tổ chức nó một lần. Bắt đầu với Webpack, tôi đọc từng hướng dẫn sử dụng của các công cụ phát triển thường dùng và sắp xếp chúng thành một blog có tên là "Hiểu về môi trường phát triển Front-End (Tổng cộng 5 phần)" . Sau đó, vào năm ngoái năm 2019, tôi đã tổ chức một hội thảo về chủ đề này tại T Academy và thật ngạc nhiên, có rất nhiều người cần nó giống như tôi. Vì nhận được phản hồi tốt nên tôi đã bổ sung nội dung và mở một khóa học trực tuyến trên Inflearn.
H. Khóa học này có ưu điểm gì đặc biệt không?
A. Tôi nghĩ chủ đề về môi trường phát triển có thể hơi khó thực hành. Bởi vì tôi không biết nhiều về nó nếu tôi chỉ đọc hướng dẫn rồi tiếp tục. Vì vậy, tôi đã chuẩn bị một bài tập thực hành nhỏ cho mỗi lớp lý thuyết ( Kho lưu trữ thực hành: lecture-frontend-dev-env ). Dựa trên mã được trình bày trong bài giảng trước , " Tìm hiểu về phát triển JavaScript và VueJS thuần túy thông qua phát triển giao diện người dùng thực tế ", tôi đã chuẩn bị các bài tập thực hành từng bước để thiết lập môi trường phát triển tại đây. Nếu bạn tìm hiểu từng phần một, bạn sẽ sớm quen với việc thiết lập môi trường phát triển.
H. Tôi có thể làm gì với khóa học này?
A. Bạn sẽ có thể hiểu được môi trường phát triển của dự án mà bạn hiện đang phát triển. Nếu cần, bạn có thể tùy chỉnh để tăng năng suất. Bạn mới bắt đầu dự án của mình phải không? Sau đó, bạn có thể tùy chỉnh môi trường phát triển của riêng mình cho phù hợp với sở thích.
Xem các bài giảng khác
Xây dựng phần mềm JS mạnh mẽ
Phát triển theo hướng kiểm thử, Tìm hiểu các mẫu thiết kế JavaScript
Phát triển theo hướng kiểm thử, Tìm hiểu các mẫu thiết kế JavaScript
Học cách phát triển javascript và VueJS thuần túy thông qua phát triển UI thực hành
Cơ bản về Vue.JS, Kiến trúc MVC/MVVM, Phát triển thành phần
Cơ bản về Vue.JS, Kiến trúc MVC/MVVM, Phát triển thành phần
Máy chủ API NodeJS được xây dựng với Phát triển theo hướng kiểm thử (TDD)
Cơ bản về NodeJS, Cơ bản về ExpressJS, Phát triển máy chủ Rest API
Cơ bản về NodeJS, Cơ bản về ExpressJS, Phát triển máy chủ Rest API
Học tập thông qua phát triển Trello
Công nghệ thực hành Vuejs, Vuex, Vue-Router Frontend
Được tạo sau Trello
Học các kỹ năng thực tế của Vue.js, Vuex và Vue-Router
Công nghệ thực hành Vuejs, Vuex, Vue-Router Frontend
Được tạo sau Trello
Học các kỹ năng thực tế của Vue.js, Vuex và Vue-Router
Khuyến nghị cho
những người này
Khóa học này dành cho ai?
Tôi chỉ quen phát triển trên môi trường đã được thiết lập sẵn nên hoàn toàn không biết gì về cấu hình Webpack hay Babel cả.
Tôi đã dùng thử Webpack rồi, nhưng tôi muốn biết nó hoạt động như thế nào.
Chúng tôi muốn duy trì quy ước mã hóa nhất quán, nhưng thật khó vì chúng tôi làm việc theo nhóm.
Cần biết trước khi bắt đầu?
Cần có kinh nghiệm phát triển frontend cơ bản (JavaScript, HTML, CSS).
14,003
Học viên
884
Đánh giá
595
Trả lời
4.8
Xếp hạng
9
Các khóa học
수업 중 궁금한 사항은 질문 사항에 올려주세요.
매일 한 번씩 확인하고 답변 드리겠습니다.
Chương trình giảng dạy
Tất cả
39 bài giảng ∙ (5giờ 2phút)
8. người nạp đạn
05:55
12. phần bổ trợ
08:34
Ngày đăng:
Cập nhật lần cuối:
Đánh giá
Tất cả
212 đánh giá
4.9
212 đánh giá
- gbobey
Đánh giá 24
∙
Đánh giá trung bình 5.0
5
100% đã tham giaTôi nghĩ sẽ rất hữu ích nếu bạn xem bài giảng về webpack mã hóa hàng ngày như một hành động tốt. Về cơ bản, tôi nghĩ bài giảng sẽ diễn ra suôn sẻ nếu bạn biết JavaScript, npm và pack.json là gì. Ban đầu có thể không khó để làm theo nhưng nó có thể trở nên khó khăn hơn khi bạn tiến bộ. Có nhiều bài giảng đưa ra một số ví dụ về file cấu hình, bộ tải, plugin là gì, nhưng tôi không nghĩ có bài giảng nào đưa ra 1-10 về webpack như thế này. Ngày nay, người ta nói mô-đun-mô-đun, và đó là thời điểm tôi đã học được rất nhiều điều khi có thể hiểu chính xác khái niệm mô-đun là gì. Cảm ơn bạn vì bài giảng tuyệt vời.
youmeeeee1159Đánh giá 8
∙
Đánh giá trung bình 4.9
5
100% đã tham giaTôi đang sử dụng webpack rất mơ hồ, nhưng nó thực sự giúp tôi hiểu về webpack. Tôi đang sử dụng webpack, nhưng tôi vẫn không thể hiểu chuyện gì đang xảy ra. Tôi thực sự muốn giới thiệu nó 100 lần cho những người như tôi. Tôi thấy nó thú vị đến mức tôi đã xem nó đến tận đêm khuya. Tôi đã xem gói web chuyên sâu trước tiên và chưa thấy Babel hay Lint, nhưng tôi sẽ mong chờ các bài giảng còn lại! Cảm ơn bạn rất nhiều vì đã tạo ra một khóa học tuyệt vời. :D Tôi tin tưởng và xem các bài giảng của Kim Jeong-hwan...
- jeonghwanGiảng viên
Trong khi làm việc, tôi sử dụng webpack từng chút một, nhưng tôi không thể hiểu rõ lắm. Khi tôi nhìn vào tài liệu và sắp xếp từng tài liệu một, tôi cảm thấy mình ngày càng tự tin hơn. Tôi rất tự hào vì đã giúp được bạn trong hoàn cảnh tương tự.
- chataehyeon3874
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
18% đã tham giaNhững điều tôi mơ hồ biết đang được sắp xếp từng bước một. Tôi hạnh phúc quá!
- jeonghwanGiảng viên
Cảm ơn bạn đã nói điều đó. Tôi hy vọng rằng bạn sẽ tiếp tục tự mình tìm ra những gì bạn cần.
- gidgns19951552
Đánh giá 6
∙
Đánh giá trung bình 5.0
5
31% đã tham giaTôi là một nhà phát triển front-end. Tôi chỉ tham gia lớp học vì tôi muốn biết bộ đóng gói và bộ chuyển mã hoạt động như thế nào. Tôi rất ấn tượng khi Babel giải thích về plugin... Trong khi đó, tôi chưa bao giờ xem xét các plugin và chỉ sử dụng các cài đặt trước mà không hề suy nghĩ về nó, vì vậy sau khi xem bài giảng, tôi nghĩ, tại sao bạn lại thêm từng cái một vào? Nhưng tôi chỉ ngạc nhiên... Để giải thích nguyên tắc hoạt động cài sẵn, bạn đã giải thích chi tiết trước, điều này rất hữu ích trong việc hiểu tại sao cần cài đặt trước và cách hoạt động của thanh tạ!! Với những bạn có ước mơ phát triển front-end thì khi vào công ty nào cũng có hướng dẫn và bộ sưu tập code thường xuyên sử dụng cho từng công ty nên thực tế thì hiếm khi phát triển khi mới bắt đầu... Vì vậy hãy nhớ nghe bài giảng nhé~!! Rất khuyến khích. Có quá nhiều gói như webpack, vite, gulp, v.v., nhưng tôi nghĩ bạn thực sự giải thích lý do tại sao việc đóng gói thực sự đáng sợ và việc thiết lập quá trình phát triển là khó khăn và đáng sợ nhất, vì vậy tôi chỉ muốn làm tính năng. phát triển, nhưng bây giờ tôi không còn sợ hãi nữa~!! Tôi sẽ đánh giá cao nếu bạn có thể giảng cho chúng tôi nhiều bài giảng khác và cho chúng tôi biết những điều rất hữu ích trong thực tế~!! Ồ, và thưa giáo viên, sẽ rất thú vị nếu bạn có thể thêm một bài giảng để thiết lập mọi thứ giống như phần mở đầu cơ bản.
- jeonghwanGiảng viên
Tôi rất vui vì bạn thấy lớp học này hữu ích trong việc tìm hiểu môi trường phát triển. Cảm ơn bạn đã phản hồi tốt.
Ưu đãi có thời hạn, kết thúc sau 4 ngày ngày
48.510 ₫
30%
1.461.207 ₫
Khóa học khác của jeonghwan
Hãy khám phá các khóa học khác của giảng viên!
![[React Phần 2] Các chủ đề nâng cao và HookCourse Thumbnail](https://cdn.inflearn.com/public/courses/332123/cover/62407827-5375-47cf-91fa-4877bf72c139/332123-eng.png?f=avif&w=420)
![[React Phần 1] Học React thông qua việc tạo ra và so sánhCourse Thumbnail](https://cdn.inflearn.com/public/courses/326905/cover/739f7b4b-1a9f-478f-a6a8-1a13bf58cae3/326905-eng.png?f=avif&w=420)
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!
![[CodeCamp] Khóa học Front-end cô đặc được tạo ra từ BootcampCourse Thumbnail](https://cdn.inflearn.com/public/courses/329963/cover/26550c58-624a-41c8-86dc-fea75b6c3b22/thumbnail-frontnew.png?f=avif&w=420)
