강의

멘토링

커뮤니티

Programming

/

Front-end

The Kick of Frontend Development, Web API (feat. React)

This course covers practical Web APIs. I hope you gain the tools to solve requirements you are bound to encounter at least once in the field.

(5.0) 4 reviews

136 learners

Level Basic

Course period Unlimited

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

Reviews from Early Learners

Reviews from Early Learners

5.0

5.0

고슈

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 👍

5.0

망고

100% enrolled

It was great to learn more about WEB API in detail. I think it would have been even better if you had shown more practical perspectives or example code.

5.0

Jang Jaehoon

33% enrolled

Thank you for the great lecture!

What you will gain after the course

  • How Web APIs work in the browser

  • How to reduce load with Web Workers

  • How to use Timers and Animations more precisely

Web API for Meticulous FE Developers
Quick and Easy Understanding Through Various Examples!

The Kick of Frontend Development, Web API

In addition to fetch and setTimeout, which you naturally encounter during front-end development, there are also APIs like Worker, MessageChannel, and MutationObserver that require separate study.

Beyond general FE feature implementation, Web APIs are essential for meticulous bug handling and optimization, such as handling tab inactivation, transferring data between different tabs, and reducing duplicate server requests.

Through my professional experience, I have realized that Web APIs can be used to solve various challenges, such as implementing complex requirements, handling unusual bug scenarios, and optimizing performance.

I hope you learn how to implement detailed requirements using Web APIs through examples that reflect real-world situations.

Have you ever encountered a situation like this? 🤔

  1. Visualizing user movement paths on a map


    Based on coordinate data that includes time information, you need to visualize the movement path by drawing lines on the map as time elapses. 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); ... Would it work to call setTimeout consecutively like this, according to each time?

    • Are there situations where setTimeout might not work as intended? If so, how should we handle them?

  2. Synchronizing data across multiple tabs
    When a new post is created on the post creation page in Tab A, the newly created post must be immediately visible on the post list page in Tab B.


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

    • Should I send a signal from Tab A to Tab B that a new post has been created, and then have Tab B re-call the API to fetch the list when it receives this information?


      { type: 'refetchPosts' }

    • Then, what is the method for exchanging such data between different tabs?


7 Web API Points to Learn Through the Lecture

  1. Understanding how Web APIs work through Chromium code

  2. Timer behavior and how to handle it when a tab is inactive

  3. Reducing main thread load with Workers

  4. Reducing 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 Practical Work


Learning Curriculum 📚

Section 1. Course Introduction

Learn how Web APIs extend JavaScript's functionality and how they are implemented and operate within the browser through browser source code.

Section 2. Using Timer Functions Accurately

Learn how setTimeout behaves when a tab is inactive and explore methods for implementing timers accurately.

Section 3. Web Workers API

Learn how to resolve main thread or server load issues using Workers.

Section 4. Message API

Learn about Web APIs that enable communication in isolated environments such as different windows, different tabs, and Shadow DOM.

Section 5. Web Animations API

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

Section 6. Bonus Web API

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

Q&A 💭

Q. What is the difficulty level of the course?

The course assumes you are familiar with basic React syntax, event loop concepts, and fundamental web knowledge. As long as you have these basics, you will find it easy to follow along with the new Web APIs. If there is any code in the course materials that you don't understand, please feel free to leave a question.

Q. How is the class conducted?

Each section presents a new problem scenario. We first look at how to solve the problem using basic JS/CSS and identify potential bugs or edge cases that may arise. Then, I will introduce Web APIs to solve the problem more thoroughly and implement the desired features using them.

Q. Are there any specific libraries used in the course?

Since this is a JavaScript Web API course, there is no need to learn separate libraries. However, for smooth class progression, libraries such as zod (TS validation) and ws (WebSocket) are included in the package.json.

💾 Things to note before taking the course

  • Requires basic knowledge of Web, Javascript, and React.

  • The full source code used in the class is provided. Since we won't be reading the code line by line and will only cover the parts necessary for the lesson, we recommend following along with the code.


👨‍🎓 Recommended Learning Method

  • It is recommended to follow the lessons while reviewing the provided course material code alongside the lecture videos.

  • We recommend that you try solving the missions at the end of the section on your own.


Recommended for
these people

Who is this course right for?

  • Those who only use setTimeout and fetch Web APIs in practice

  • For those who want to solve complex requirements using Web API concepts.

Need to know before starting?

  • How to use npm

Hello
This is

1,041

Learners

50

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

4 reviews

5.0

4 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 👍

    • fined0006806님의 프로필 이미지
      fined0006806

      Reviews 35

      Average Rating 4.7

      5

      100% enrolled

      It was great to learn more about WEB API in detail. I think it would have been even better if you had shown more practical perspectives or example code.

      • jjhgwx님의 프로필 이미지
        jjhgwx

        Reviews 641

        Average Rating 4.9

        5

        33% enrolled

        Thank you for the great lecture!

        • yoonc017672님의 프로필 이미지
          yoonc017672

          Reviews 7

          Average Rating 5.0

          5

          32% enrolled

          $15.40

          vroomfan's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!