
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 Fast Understanding Through Various Examples!
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.
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?
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?
Understanding How Web APIs Work Through Chromium Code
Timer behavior and response methods when tabs are deactivated
Reducing Main Thread Load with Workers
Minimizing WebSocket connections to reduce server load
Transferring data between different browsing contexts
Controlling animations with JS instead of CSS
Additional Web APIs for Practical Use
Learn how Web APIs extend JavaScript functionality through browser source code and how they are implemented and operate within browsers.
Learn how setTimeout behaves when tabs are inactive and study methods to implement timers accurately.
Learn how to solve situations where load occurs on the main thread or server by using Workers.
Learn about Web APIs that enable communication in isolated situations such as different Windows, different Tabs, and Shadow DOM.
Learn how to control animations using the Web Animation API and requestAnimationFrame.
MutationObserver, requestIdleCallback and other additional Web API lessons for practical work will be updated.
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.
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,037
Learners
50
Reviews
87
Answers
4.5
Rating
2
Courses
안녕하세요.
스타트업에서 4년동안 프론트엔드 개발자로 일하고 있습니다.
React, Next.js, 지도, 차트, UI library 등을 다룹니다.
All
25 lectures ∙ (2hr 5min)
Course Materials:
All
4 reviews
5.0
4 reviews
Reviews 4
∙
Average Rating 5.0
Reviews 33
∙
Average Rating 4.7
Reviews 609
∙
Average Rating 4.9
Reviews 7
∙
Average Rating 5.0
$15.40
Check out other courses by the instructor!
Explore other courses in the same field!