
Getting Started with Next.js (feat. Map Service Development)
vroomfan
A course on Next.js fundamentals. Develop a map service end-to-end with Next.js.
초급
Next.js, SEO, vercel
We cover Web APIs for practical application. We hope you gain the tools to resolve requirements you're bound to encounter.
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!
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.
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?
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?
Understanding how Web APIs work through Chromium code
How Timer behaves and responds when the tab is inactive
Reducing the load on the main thread with Worker
Reduce server load by minimizing WebSocket connections
Transferring data between different browsing contexts
Controlling animations with js instead of css
Additional Web APIs for Practice
Learn how Web APIs extend the functionality of JavaScript by examining browser source code and how they are implemented and operated in the browser.
See how setTimeout behaves when the tab is inactive and learn how to implement the timer correctly.
Learn how to use Workers to resolve situations where the main thread or server is overloaded.
Learn Web APIs that enable communication across isolated situations, such as different Windows, different Tabs, and Shadow DOM.
Learn how to control animations with the Web Animation API and requestAnimationFrame.
Additional Web API classes for practical use, such as MutationObserver and requestIdleCallback, will be updated.
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.
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
1,017
Learners
48
Reviews
87
Answers
4.5
Rating
2
Courses
안녕하세요.
스타트업에서 4년동안 프론트엔드 개발자로 일하고 있습니다.
React, Next.js, 지도, 차트, UI library 등을 다룹니다.
All
25 lectures ∙ (2hr 5min)
Course Materials:
All
2 reviews
5.0
2 reviews
$15.40
Check out other courses by the instructor!
Explore other courses in the same field!