강의

멘토링

커뮤니티

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) 4 reviews

132 learners

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

Reviews from Early Learners

What you will gain after the course

  • 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 Fast Understanding Through Various Examples!

The Kick of Frontend Development, Web API

While doing FE development, you'll naturally encounter fetch and setTimeout, but 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 responding to tab deactivation situations, transferring data between different tabs, and reducing duplicate server requests.

Through working on real projects, I discovered that various problems can be solved with Web APIs, such as implementing demanding requirements, handling unusual bug situations, and optimizing performance.

It would be great to learn how to implement detailed requirements as Web APIs through examples that reflect situations you might encounter in actual work.

Have you ever encountered a situation like this? 🤔

  1. Visualizing User Movement Paths on Maps


    Based on coordinate data that includes time information, you need to visualize the movement path by drawing lines on a map for each elapsed time period. 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, matching each time?

    • Are there situations where setTimeout doesn't 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 should be immediately visible on the post list page in Tab B.


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

    • Would it work to send a signal from Tab A to Tab B that a new post has been created, and when Tab B receives this information, call the API to reload the list again?


      { type: 'refetchPosts' }

    • So what would be the method to exchange data like the above between different tabs?


7 Key Points for Learning Web API Through Lectures

  1. Understanding How Web APIs Work Through Chromium Code

  2. Timer behavior and response methods when tabs are deactivated

  3. Reducing Main Thread Load with Workers

  4. Minimizing WebSocket connections to reduce server load

  5. Transferring data between different browsing contexts

  6. Controlling animations with JS instead of CSS

  7. Additional Web APIs for Practical Use


Learning Curriculum 📚

Section 1. Course Introduction

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

Section 2. Using Timer Functions Accurately

Learn how setTimeout behaves when tabs are inactive and study methods to implement timers accurately.

Section 3. Web Workers API

Learn how to solve situations where load occurs on the main thread or server by using Workers.

Section 4. Message API

Learn about Web APIs that enable communication in isolated situations 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

MutationObserver, requestIdleCallback and other additional Web API lessons for practical work will be updated.

Q&A 💭

Q. What is the difficulty level of the course?

This course assumes you have basic knowledge of React syntax, event loop concepts, and fundamental web-related knowledge. If you have this foundational knowledge, you'll be able to easily follow along with new Web APIs. If there's any code in the course materials that you don't understand, please feel free to ask questions.

Q. How are the classes conducted?

Each section presents a new problem scenario. We first examine how to solve the problem situation with basic JS/CSS, then identify bugs or exceptional situations that may occur in that code. Then we introduce Web APIs to solve the problem more thoroughly and implement the desired functionality using Web APIs.

Q. Are there any special libraries used in the class?

Since this is a JavaScript Web API course, there's 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.

💾Pre-Course Reference Information

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

  • We provide the complete source code used in the class. Since we don't read through the code line by line during the class and only cover the parts necessary for the lesson, we recommend viewing the code alongside the class.


👨‍🎓 Recommended Learning Method

  • It would be good to take the class while watching the provided class material code and class videos together.

  • I recommend that you try to solve the missions that appear at the end of each section on your own.


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,037

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 33

      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 609

        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!