
Bắt đầu với Next.js (feat. phát triển dịch vụ bản đồ)
vroomfan
Đây là khóa học bao gồm các kiến thức cơ bản về Next.js. Chúng ta sẽ phát triển một dịch vụ bản đồ từ đầu đến cuối bằng Next.js.
초급
Next.js, SEO, vercel
Chúng tôi đề cập đến Web API có thể ứng dụng vào thực tế. Mong bạn sẽ có được vũ khí để giải quyết các yêu cầu mà chắc chắn bạn sẽ gặp phải ít nhất một lần.
Nguyên lý hoạt động của Web API trong trình duyệt
Cách giảm tải bằng Web Worker
Cách các ngữ cảnh khác nhau (window, tab, iframe, v.v.) giao tiếp
Cách sử dụng Timer, Animation chính xác hơn
API web dành cho các nhà phát triển FE tỉ mỉ
Hiểu dễ dàng và nhanh chóng thông qua nhiều ví dụ khác nhau!
Ngoài fetch và setTimeout mà bạn sẽ thường gặp khi phát triển FE, còn có các API mà bạn phải nghiên cứu riêng, chẳng hạn như Worker, MessageChannel và MutationObserver.
Ngoài việc triển khai các tính năng FE chung, Web API còn cần thiết cho việc phản hồi lỗi chi tiết và tối ưu hóa, chẳng hạn như xử lý tình huống tab không hoạt động, chuyển dữ liệu giữa các tab khác nhau và giảm các yêu cầu máy chủ trùng lặp.
Khi làm việc trên dự án này, tôi nhận ra rằng API Web có thể giải quyết nhiều vấn đề khác nhau, chẳng hạn như triển khai các yêu cầu khắt khe, ứng phó với các tình huống lỗi bất thường và tối ưu hóa hiệu suất.
Tôi hy vọng bạn sẽ học được cách triển khai các yêu cầu chi tiết vào Web API thông qua các ví dụ phản ánh các tình huống bạn có thể gặp phải trong thực tế.
Hiển thị chuyển động của người dùng trên bản đồ
Dựa trên dữ liệu tọa độ bao gồm thông tin thời gian, tôi cần hình dung đường di chuyển bằng cách vẽ các đường trên bản đồ tại mỗi thời điểm đã trôi qua. Dữ liệu như sau.
[{ lng: 127.10, lat: 37.50, time: 1000ms },
{ lng: 127.11, lat: 37.51, time: 1700ms },
{ lng: 127.12, lat: 37.52, time: 2100ms }, ...]
setTimeout(drawLine, 1000); setTimeout(drawLine, 1700 - 1000); setTimeout(drawLine, 2100 - 1700); ...
Tôi có thể gọi setTimeout liên tiếp như thế này cho mỗi time
không?
Có trường hợp nào setTimeout không hoạt động như mong đợi không? Nếu có, tôi nên xử lý như thế nào?
Đồng bộ hóa dữ liệu trên nhiều tab
Khi bạn tạo bài đăng mới trên trang tạo bài đăng trong tab A, bài đăng mới đó sẽ được hiển thị ngay lập tức trên trang danh sách bài đăng trong tab B.
Khi một bài đăng mới được tạo trong tab A, tôi có thể truyền thông tin về bài đăng đó cho tab B và để tab B sử dụng giá trị này để cập nhật trạng thái danh sách không?
{ type: 'newPost', title: 'title_1', author: 'author_1', ... }
Bạn nghĩ sao về việc gửi tín hiệu đến tab B rằng có bài đăng mới được tạo trong tab A, sau đó khi tab B nhận được thông tin này, hãy gọi lại API để lấy danh sách?
{ type: 'refetchPosts' }
Vậy làm thế nào để chúng ta truyền dữ liệu như thế này giữa các tab khác nhau?
Hiểu cách API Web hoạt động thông qua mã Chromium
Cách Timer hoạt động và phản hồi khi tab không hoạt động
Giảm tải cho luồng chính bằng Worker
Giảm tải máy chủ bằng cách giảm thiểu kết nối WebSocket
Chuyển dữ liệu giữa các bối cảnh duyệt khác nhau
Kiểm soát hoạt ảnh bằng js thay vì css
API Web bổ sung cho Thực hành
Tìm hiểu cách API Web mở rộng chức năng của JavaScript bằng cách kiểm tra mã nguồn trình duyệt và cách chúng được triển khai và hoạt động trong trình duyệt.
Xem cách setTimeout hoạt động khi tab không hoạt động và tìm hiểu cách triển khai bộ hẹn giờ chính xác.
Tìm hiểu cách sử dụng Workers để giải quyết các tình huống luồng chính hoặc máy chủ bị quá tải.
Tìm hiểu các API Web cho phép giao tiếp giữa các tình huống riêng biệt, chẳng hạn như nhiều cửa sổ, nhiều tab và Shadow DOM.
Tìm hiểu cách kiểm soát hoạt ảnh bằng Web Animation API và requestAnimationFrame.
Các lớp Web API bổ sung để sử dụng thực tế, chẳng hạn như MutationObserver và requestIdleCallback, sẽ được cập nhật.
H. Bài giảng khó đến mức nào?
Chúng tôi giả định rằng bạn đã nắm vững ngữ pháp React cơ bản, các khái niệm về vòng lặp sự kiện và kiến thức cơ bản về web. Nếu bạn có kiến thức cơ bản, bạn có thể dễ dàng làm quen với Web API mới. Nếu có bất kỳ đoạn mã nào trong tài liệu bài giảng mà bạn không hiểu, vui lòng để lại câu hỏi.
H. Các lớp học được tổ chức như thế nào?
Mỗi phần trình bày một tình huống vấn đề mới. Đầu tiên, chúng ta sẽ xem xét cách giải quyết vấn đề bằng JS/CSS cơ bản, sau đó tìm hiểu về các lỗi hoặc ngoại lệ có thể xảy ra trong mã. Tiếp theo, chúng ta sẽ giới thiệu Web API để giải quyết vấn đề một cách triệt để hơn và triển khai chức năng mong muốn bằng Web API.
H. Có thư viện đặc biệt nào được sử dụng trong lớp học không?
Vì đây là khóa học JavaScript Web API, bạn không cần phải học một thư viện riêng. Tuy nhiên, để đảm bảo khóa học diễn ra suôn sẻ, các thư viện như zod (xác thực TS) và ws (WebSocket) được bao gồm trong package.json.
💾 Những điều cần lưu ý trước khi tham gia lớp học
Cần có kiến thức cơ bản về Web, Javascript và React.
Tôi cung cấp toàn bộ mã nguồn được sử dụng trong lớp học. Tôi khuyên bạn nên cùng nhau xem mã, vì bạn sẽ không đọc từng dòng mã trong lớp học, mà chỉ đọc những phần cần thiết cho lớp học.
👨🎓 Phương pháp học tập được đề xuất
Sẽ là một ý tưởng hay nếu bạn tham gia lớp học trong khi xem mã tài liệu bài giảng được cung cấp và video bài giảng.
Chúng tôi khuyên bạn nên tự mình giải quyết các nhiệm vụ được giao ở cuối mỗi phần.
Khóa học này dành cho ai?
Người chỉ sử dụng setTimeout, fetch Web API trong thực tế
Người muốn giải quyết yêu cầu khắt khe bằng khái niệm Web API.
Cần biết trước khi bắt đầu?
React, Javascript cú pháp cơ bản
Cách dùng npm
1,017
Học viên
48
Đánh giá
87
Trả lời
4.5
Xếp hạng
2
Các khóa học
안녕하세요.
스타트업에서 4년동안 프론트엔드 개발자로 일하고 있습니다.
React, Next.js, 지도, 차트, UI library 등을 다룹니다.
Tất cả
25 bài giảng ∙ (2giờ 5phút)
Tài liệu khóa học:
Tất cả
2 đánh giá
5.0
2 đánh giá
417.884 ₫
Hãy khám phá các khóa học khác của giảng viên!
Khám phá các khóa học khác trong cùng lĩnh vực!