Inflearn brand logo image
Inflearn brand logo image

N

Inflearn brand logo image
Programming

/

Front-end

Phát triển Frontend với Kick, Web API (feat. React)

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.

(5.0) 2 đánh giá

113 học viên

  • vroomfan
이론 실습 모두
JavaScript
React
Web API

Dịch cái này sang tiếng Việt

  • 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!

Chuyển sang phát triển front-end, Web API

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ế.

Bạn đã từng gặp phải tình huống như thế này chưa? 🤔

  1. 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?

  2. Đồ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?


7 điểm cần tìm hiểu về Web API thông qua bài giảng ✅

  1. Hiểu cách API Web hoạt động thông qua mã Chromium

  2. Cách Timer hoạt động và phản hồi khi tab không hoạt động

  3. Giảm tải cho luồng chính bằng Worker

  4. Giảm tải máy chủ bằng cách giảm thiểu kết nối WebSocket

  5. Chuyển dữ liệu giữa các bối cảnh duyệt khác nhau

  6. Kiểm soát hoạt ảnh bằng js thay vì css

  7. API Web bổ sung cho Thực hành


Chương trình học tập 📚

Phần 1. Giới thiệu bài giảng

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.

Mục 2. Sử dụng chức năng hẹn giờ đúng cách

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.

Phần 3. API Web Workers

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.

Mục 4. API tin nhắn

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.

Mục 5. API hoạt ảnh web

Tìm hiểu cách kiểm soát hoạt ảnh bằng Web Animation API và requestAnimationFrame.

Mục 6. API Web Thưởng

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ỏi & Đáp 💭

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.


🚀 Để chào mừng lễ khai giảng khóa học, chúng tôi có chương trình giảm giá 50% trong tháng 6 !

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

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

Xin chào
Đây là

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 등을 다룹니다.

포트폴리오

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

Tất cả

25 bài giảng ∙ (2giờ 5phút)

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

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

2 đánh giá

5.0

2 đánh giá

  • go5ue님의 프로필 이미지
    go5ue

    Đánh giá 4

    ∙

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    よく使われるWeb APIを見て回ることができてよかったです。エッセンスだけが集められていますね！！気軽に聞ける良い講義です。最高 👍

    • jjhgwx님의 프로필 이미지
      jjhgwx

      Đánh giá 498

      ∙

      Đánh giá trung bình 4.8

      5

      33% đã tham gia

      良い講義をありがとうございます！

      417.884 ₫

      Khóa học khác của vroomfan

      Hãy khám phá các khóa học khác của giảng viên!

      Next.js はじめ方（feat. 地図サービス開発）강의 썸네일

      Next.js はじめ方（feat. 地図サービス開発）

      vroomfan

      Next.jsの基本を扱う講座です。 Next.jsで地図サービスを最初から最後まで開発してみます。

      초급

      초급

      Next.js, SEO, vercel

      Next.js はじめ方（feat. 地図サービス開発）강의 썸네일

      Next.js はじめ方（feat. 地図サービス開発）

      vroomfan

      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!

      一口サイズに切って食べるReact(React.js)：基礎から実戦まで강의 썸네일

      一口サイズに切って食べるReact(React.js)：基礎から実戦まで

      winterlood

      概念からユニークなプロジェクトまでを一緒に扱いながら、JavaScriptとReactをこの講座で一度に習得しましょう。 学習は短く、応用は長く。17時間分のオールインワン講座！

      초급

      초급

      JavaScript, React, Node.js

      一口サイズに切って食べるReact(React.js)：基礎から実戦まで강의 썸네일

      一口サイズに切って食べるReact(React.js)：基礎から実戦まで

      winterlood

      フロントエンド開発者向け、実践的なWebパフォーマンス最適化(feat. React) - Part. 2강의 썸네일

      フロントエンド開発者向け、実践的なWebパフォーマンス最適化(feat. React) - Part. 2

      hackurity01

      React で作成された Web サービスのパフォーマンスを測定し、より高速で効率的に最適化する方法を学びます。

      중급이상

      중급이상

      React, Chrome DevTools

      フロントエンド開発者向け、実践的なWebパフォーマンス最適化(feat. React) - Part. 2강의 썸네일

      フロントエンド開発者向け、実践的なWebパフォーマンス最適化(feat. React) - Part. 2

      hackurity01

      JavaScriptの要点だけを厳選して学ぶ강의 썸네일

      JavaScriptの要点だけを厳選して学ぶ

      sucoding

      フロントエンド初心者が必ず習得すべきJavascript文法！基礎から始めて、高度な内容に至るまでJavaScript言語を徹底的に掘り下げていきます！

      입문

      입문

      JavaScript

      JavaScriptの要点だけを厳選して学ぶ강의 썸네일

      JavaScriptの要点だけを厳選して学ぶ

      sucoding

      Web 開発の基本강의 썸네일

      Web 開発の基本

      devinno

      実践を通じて、Web 開発に不可欠な基本概念と原理を学びます。

      초급

      초급

      Web Application, HTML/CSS, JavaScript

      Web 開発の基本강의 썸네일

      Web 開発の基本

      devinno

      これが本当のバイブコーディング - 開発者のためのバイブコーディング編강의 썸네일

      これが本当のバイブコーディング - 開発者のためのバイブコーディング編

      codecamp

      No Code, Only Prompt 10分でバイブコーディングで作れる単純なサービスはもう捨てましょう！ 企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作る 「本物の」実務適用バイブコーディングを学ぶことができます。

      입문

      입문

      React, Next.js, cursor

      これが本当のバイブコーディング - 開発者のためのバイブコーディング編강의 썸네일

      これが本当のバイブコーディング - 開発者のためのバイブコーディング編

      codecamp

      [JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)강의 썸네일

      [JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

      dakgangjung123

      React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。 慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

      초급

      초급

      React, Electron, GUI

      [JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)강의 썸네일

      [JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

      dakgangjung123

      クリーンアップ JavaScript: ベース構築!강의 썸네일

      クリーンアップ JavaScript: ベース構築!

      tonextday

      考え方を扱います。JavaScript の核心と本質を論理的に整理できます。JavaScript の経験を整理して、考え方を自分で整理できます。JavaScript の技術論理を確立できます。JavaScript 全体を見渡す視野を広げることができます。JavaScript の技術面接問題に対応できます。

      초급

      초급

      JavaScript, Interview, Tech Interview

      クリーンアップ JavaScript: ベース構築!강의 썸네일

      クリーンアップ JavaScript: ベース構築!

      tonextday

      Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク강의 썸네일

      Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

      codecamp

      Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。

      초급

      초급

      React, Next.js, expo

      Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク강의 썸네일

      Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

      codecamp

      誰でも簡単に始めるウェブ開発基礎 (Basic Web Development Course)강의 썸네일

      誰でも簡単に始めるウェブ開発基礎 (Basic Web Development Course)

      pnuswedu

      基本的なウェブサイト構築方法を習得し、公共データOpen APIを連携した実戦プロジェクトを通じて、Web開発の基礎から実務適用能力まで！

      입문

      입문

      HTML/CSS, JavaScript, openAI API

      誰でも簡単に始めるウェブ開発基礎 (Basic Web Development Course)강의 썸네일

      誰でも簡単に始めるウェブ開発基礎 (Basic Web Development Course)

      pnuswedu

      公式文書で学ぶ本番タイプスクリプト강의 썸네일

      公式文書で学ぶ本番タイプスクリプト

      sowhatcoding

      タイプスクリプトを正しく理解するには、公式文書を一度見てください。 文書の重要な部分だけがコックを拾い、分かりやすく伝えます。 実戦に必要な内容も一緒にお知らせする講義です！

      입문

      입문

      TypeScript, JavaScript, ES6

      公式文書で学ぶ本番タイプスクリプト강의 썸네일

      公式文書で学ぶ本番タイプスクリプト

      sowhatcoding

      mongoDB基礎から実務まで（feat. Node.js）강의 썸네일

      mongoDB基礎から実務まで（feat. Node.js）

      sihoon

      mongoDB、NoSQLは最近多く聞こえますが、まだ見知らぬデータベースですか？リレーショナルデータベース（RDS / SQL）のように使用していませんか？いくら良い技術も正しく使用しないと逆効果が発生します。だからモンゴディビの使用失敗事例もしばしば見えます。このレッスンでは、mongoDBをできるだけmongoDBで使用できるように、基本概念から実務ノウハウまで教えていきます。

      초급

      초급

      MongoDB, REST API, Node.js

      mongoDB基礎から実務まで（feat. Node.js）강의 썸네일

      mongoDB基礎から実務まで（feat. Node.js）

      sihoon

      C# Xamarin Forms ジャマリン フォームズ API 講義 + 簡単な API を作成する강의 썸네일

      C# Xamarin Forms ジャマリン フォームズ API 講義 + 簡単な API を作成する

      nodeep777

      ザマリン(Xamarin)でSQLのデータにどのようにアクセスして修正、削除、追加、照会できるかを説明する講義です。 WEB APIも一緒に作成しながら、APIをどのように活用するかを知ることができます。

      초급

      초급

      Web API, Xamarin

      C# Xamarin Forms ジャマリン フォームズ API 講義 + 簡単な API を作成する강의 썸네일

      C# Xamarin Forms ジャマリン フォームズ API 講義 + 簡単な API を作成する

      nodeep777

      [リニューアル] ReactでNodeBird SNSを作成する강의 썸네일

      [リニューアル] ReactでNodeBird SNSを作成する

      zerocho

      リアクト＆amp;ネクスト＆amp;リダックス＆amp;リダックスサーガ＆amp; ExpressスタックでTwitterに似たSNSサービスを作成します。 最後に、検索エンジンの最適化後にAWSにデプロイします。

      중급이상

      중급이상

      React, Redux, Node.js

      [リニューアル] ReactでNodeBird SNSを作成する강의 썸네일

      [リニューアル] ReactでNodeBird SNSを作成する

      zerocho

      まだ生きている不死の jQuery - 基礎から実務まで강의 썸네일

      まだ生きている不死の jQuery - 基礎から実務まで

      ezweb

      全世界のウェブサイトで75%以上が使用しているJavaScriptライブラリ、jQuery！華麗な効果よりも原理を理解し、基礎を固められるように構成しました。jQueryの基礎から活用まで学習し、あなただけのポートフォリオを完成させたり、現場で即活用してみてください。

      초급

      초급

      HTML/CSS, JavaScript, jQuery

      まだ生きている不死の jQuery - 基礎から実務まで강의 썸네일

      まだ生きている不死の jQuery - 基礎から実務まで

      ezweb

      誰よりも速く学べる Springboot + React RestAPI 掲示板構築강의 썸네일

      誰よりも速く学べる Springboot + React RestAPI 掲示板構築

      yeseong0412

      誰よりも早く学べる Springboot + React RestAPI 掲示板作成 Springboot で CRUD サーバーを開発し、React で自分だけの掲示板を作ってみましょう！

      초급

      초급

      React, Kotlin, REST API

      誰よりも速く学べる Springboot + React RestAPI 掲示板構築강의 썸네일

      誰よりも速く学べる Springboot + React RestAPI 掲示板構築

      yeseong0412

      Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

      ggangcoding162118

      Webゲームも作って、フロントエンドWeb開発スキルも学ぶ1席3組授業！

      초급

      초급

      Interactive Web, JavaScript, HTML/CSS

      Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

      ggangcoding162118

      フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）강의 썸네일

      フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

      johnahn

      このレッスンを通して、Reddit Webサイトを最初から1つ1つ作成することができます。

      초급

      초급

      Clone Coding, Node.js, React

      フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）강의 썸네일

      フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

      johnahn

      モバイル、タブレット、pcレスポンシブインスタグラムクローンコーディング강의 썸네일

      モバイル、タブレット、pcレスポンシブインスタグラムクローンコーディング

      jeong4726

      この講義を通じて、受講生はHTML、CSS、JSでインスタグラムに似たWebサービスを作成することができます。 （フロントのみ実装しました！バックエンドサーバー構築は今後講義撮影予定です。）

      초급

      초급

      HTML/CSS, JavaScript, Clone Coding

      モバイル、タブレット、pcレスポンシブインスタグラムクローンコーディング강의 썸네일

      モバイル、タブレット、pcレスポンシブインスタグラムクローンコーディング

      jeong4726

      [リニューアル]コーディング自律学習ゼロ秒のJavaScript入門강의 썸네일

      [リニューアル]コーディング自律学習ゼロ秒のJavaScript入門

      zerocho

      本講義ではJavaScriptを活用してプログラミング思考力を養う練習を行います。ウェブゲームである球球団をはじめとする、数字野球、反応速度テスト、チックタクト、宝くじ抽選機、はさみロック、カードマッチングゲーム、テキストRPG、地雷探し、2048ゲーム、ほくろ捕獲まで一緒に作ってみましょう。

      초급

      초급

      JavaScript

      [リニューアル]コーディング自律学習ゼロ秒のJavaScript入門강의 썸네일

      [リニューアル]コーディング自律学習ゼロ秒のJavaScript入門

      zerocho

      Web パブリッシャーのための JavaScript & jQuery 核心理論実践例題 (教材、完成版)강의 썸네일

      Web パブリッシャーのための JavaScript & jQuery 核心理論実践例題 (教材、完成版)

      codingworks

      ウェブ パブリッシャー向けの JS 核心理論および実践例教材および完成版は、PDF で作成された講義教材です。この教材は、ウェブ パブリッシャーが必ず知っておくべき JavaScript と jQuery の基本を忠実に習得できる役割を果たします。この教材の特徴は、理論に関連するスモール ミッション (Small Mission) を通じて、理論をさらに強化できることです。特に、学習したすべての理論を活用した実践例も、忠実に準備された教材です。この PDF の全ページは、純粋な JavaScript (Vanlila JavaScript) と jQuery ページの数が 320 ページ以上で、CodingWorks が簡単に理解できるように十分な説明が追加されています。特に、パブリッシャーがウェブサイト作成のために必要な jQuery 相互作用の実践例を学習できます。

      초급

      초급

      JavaScript, jQuery, HTML/CSS

      Web パブリッシャーのための JavaScript & jQuery 核心理論実践例題 (教材、完成版)강의 썸네일

      Web パブリッシャーのための JavaScript & jQuery 核心理論実践例題 (教材、完成版)

      codingworks