Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Front-end

Frontend Development Kick, Web API (feat. React)

We cover Web APIs for practical application. We hope you gain the tools to resolve requirements you're bound to encounter.

(5.0) 2 reviews

113 learners

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

What you will learn!

  • How Web APIs work in browsers

  • How to reduce load with Web Worker

  • How different contexts (window, tab, iframe, etc.) communicate

  • How to use Timer, Animation more accurately

Web API for meticulous FE developers
Easy and quick understanding through various examples!

Kick to front-end development, Web API

In addition to fetch and setTimeout, which you will naturally encounter while developing FE, there are also APIs that you must study separately, such as Worker, MessageChannel, and MutationObserver.

Beyond implementing general FE features, Web API is essential for detailed bug response and optimization, such as handling tab inactivity situations, transferring data between different tabs, and reducing duplicate server requests.

As I worked on the project, I realized that Web APIs can solve a variety of problems, such as implementing demanding requirements, responding to unusual bug situations, and optimizing performance.

I hope you will learn how to implement detailed requirements into Web APIs through examples that reflect situations you may encounter in practice.

Have you ever encountered a situation like this? 🤔

  1. Visualizing user movement on a map


    Based on coordinate data that includes time information, I need to visualize the movement path by drawing lines on the map at each elapsed time. The data is as follows.


    [{ 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); ... Can I call setTimeout consecutively like this for each time ?

    • Are there situations where setTimeout does not work as intended? If so, how should I respond?

  2. Synchronizing data across multiple tabs
    When you create a new post on the post creation page in tab A, the new post should be immediately displayed on the post list page in tab B.


    • When a new post is created in tab A, can I pass information about that post to tab B and have tab B use this value to update the list state?
      { type: 'newPost', title: 'title_1', author: 'author_1', ... }

    • How about sending a signal to tab B that a new post has been created in tab A, and then when tab B receives this information, calling the API again to fetch the list?


      { type: 'refetchPosts' }

    • So how do we pass data like this between different tabs?


7 Points to Learn About Web API Through Lectures

  1. Understanding how Web APIs work through Chromium code

  2. How Timer behaves and responds when the tab is inactive

  3. Reducing the load on the main thread with Worker

  4. Reduce server load by minimizing WebSocket connections

  5. Transferring data between different browsing contexts

  6. Controlling animations with js instead of css

  7. Additional Web APIs for Practice


Learning Curriculum 📚

Section 1. Lecture Introduction

Learn how Web APIs extend the functionality of JavaScript by examining browser source code and how they are implemented and operated in the browser.

Section 2. Using the Timer Function Correctly

See how setTimeout behaves when the tab is inactive and learn how to implement the timer correctly.

Section 3. Web Workers API

Learn how to use Workers to resolve situations where the main thread or server is overloaded.

Section 4. Message API

Learn Web APIs that enable communication across isolated situations, such as different Windows, different Tabs, and Shadow DOM.

Section 5. Web Animations API

Learn how to control animations with the Web Animation API and requestAnimationFrame.

Section 6. Bonus Web API

Additional Web API classes for practical use, such as MutationObserver and requestIdleCallback, will be updated.

Q&A 💭

Q. How difficult is the lecture?

We assume that you know the basic React grammar, event loop concepts, and basic web-related knowledge. If you have the basic knowledge, you can easily follow the new Web API. If there is any code in the lecture materials that you do not understand, please feel free to leave a question.

Q. How are classes conducted?

Each section presents a new problem situation. We first look at how to solve the problem situation with basic JS/CSS, and then learn about bugs or exceptions that may occur in the code. Then, we introduce Web API to solve the problem more thoroughly and implement the desired function with Web API.

Q. Are there any special libraries you use in class?

Since this is a JavaScript Web API lecture, there is no need to learn a separate library. However, to ensure smooth progress of the lecture, libraries such as zod (TS validation) and ws (WebSocket) are included in package.json.

💾 Things to note before taking the class

  • Basic knowledge of Web, Javascript, and React is required.

  • I provide the full source code used in the class. I recommend looking at the code together, because you will not be reading the code line by line in class, but only reading the parts necessary for the class.


👨‍🎓 Recommended learning method

  • It would be a good idea to take the class while watching the provided lecture material code and lecture video together.

  • We recommend that you solve the missions given at the end of each section on your own.


🚀 To celebrate the opening of the course, there is a 50% discount for the month of June !

Recommended for
these people

Who is this course right for?

  • Those only using setTimeout, fetch Web APIs in practice

  • Want to solve complex requirements with Web API concepts?

Need to know before starting?

  • React, Javascript basic syntax

  • npm usage

Hello
This is

1,017

Learners

48

Reviews

87

Answers

4.5

Rating

2

Courses

안녕하세요.
스타트업에서 4년동안 프론트엔드 개발자로 일하고 있습니다.
React, Next.js, 지도, 차트, UI library 등을 다룹니다.

포트폴리오

Curriculum

All

25 lectures ∙ (2hr 5min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

2 reviews

5.0

2 reviews

  • go5ue님의 프로필 이미지
    go5ue

    Reviews 4

    Average Rating 5.0

    5

    100% enrolled

    It was great to be able to explore commonly used Web APIs. They've really gathered the key points!! It's a lecture that's easy to listen to without feeling burdened. Best 👍

    • jjhgwx님의 프로필 이미지
      jjhgwx

      Reviews 498

      Average Rating 4.8

      5

      33% enrolled

      Thank you for the great lecture!

      $15.40

      vroomfan's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!