
Next.js 시작하기(feat. 지도 서비스 개발)
박용주
Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다.
Basic
Next.js, SEO, vercel
実務に適用できるWeb APIを扱います。一度はきっと直面するであろう要件を解決する武器を手に入れてください。
ブラウザでのWeb APIの動作原理
ウェブワーカーで負荷を減らす方法
異なるコンテキスト(window, tab, iframe など)が通信する方法
Timer, Animationをより正確に使う方法
丁寧なFE開発者のためのWeb API
様々な例題を通じた簡単で素早い理解!
FE開発をしながら自然に触れることになるfetch、setTimeoutだけでなく、Worker、MessageChannel、MutationObserverなど別途勉強しなければならないAPIもあります。
一般的なFE機能実装を超えて、タブ非アクティブ状況対応/異なるタブ間のデータ送信/重複サーバーリクエスト削減など、きめ細かいバグ対応と最適化のためには、Web APIが必須です。
実務を進める中で、厳しい要件を実装したり、一般的でないバグ状況に対応したり、パフォーマンスを最適化するなど、様々な問題をWeb APIで解決できることを知りました。
実務で遭遇する可能性のある状況を反映した例題を通じて、詳細な要求事項をWeb APIで実装する方法を学んでいただければと思います。
地図上でユーザーの移動動線を可視化する
時間情報が含まれた座標データを基に、経過時間ごとに地図上に線を描いて移動経路を可視化する必要があります。データは以下の通りです。
[{ 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); ... このように各timeに合わせてsetTimeoutを連続で呼び出せばよいでしょうか?
setTimeoutが意図通りに動作しない状況もあるでしょうか?ある場合、どのように対応すべきでしょうか?
複数タブのデータ同期
タブAの投稿作成ページで新しい投稿を作成した時、タブBの投稿一覧ページでも作成した新しい投稿がすぐに表示される必要があります。
タブAで新しい投稿を作成した時、該当投稿に関する情報をタブBに渡し、タブBでこの値を利用してリスト状態(state)を更新すれば良いでしょうか?{ type: 'newPost', title: 'title_1', author: 'author_1', ... }
タブAで新しい投稿が作成されたという信号をタブBに送り、タブBでこの情報を受け取った時にリストを読み込むAPIを再度呼び出せばよいでしょうか?
{ type: 'refetchPosts' }
それでは、異なるタブ間で上記のようなデータをやり取りする方法は何でしょうか?
Chromiumコードを通じてWeb APIが動作する原理の理解
タブが非アクティブになった時のTimerの動作と対応方法
Workerでメインスレッドの負荷を軽減する
WebSocket接続を最小化してサーバー負荷を軽減する
異なるbrowsing context間でのデータ転送
アニメーションをcssではなくjsで制御する
実務のための追加的なWeb API
ブラウザのソースコードを通じてWeb APIがJavaScriptの機能をどのように拡張するか、ブラウザでどのように実装されて動作するのかを学習します。
タブが非アクティブになった時にsetTimeoutがどのように動作するかを確認し、タイマーを正確に実装するための方法を学習します。
メインスレッドやサーバーに負荷が発生する状況をWorkerを利用して解決する方法を学習します。
異なるWindow、異なるTab、Shadow DOMのような分離された状況での通信を可能にするWeb APIを学習します。
Web Animation APIとrequestAnimationFrameでアニメーションを制御する方法を学習します。
MutationObserver、requestIdleCallbackなど実務のための追加的なWeb API授業がアップデートされます。
Q. 講義の難易度はどの程度ですか?
基本的なReact文法、イベントループの概念、Web関連の基礎知識は知っているという前提で進められます。基礎知識さえあれば、新しいWeb APIは簡単についてこられます。授業資料で理解できないコードがあれば、お気軽に質問を残してください。
Q. 授業はどのような方式で進行されますか?
セクションごとに新しい問題状況が提示されます。問題状況を基本的なJS/CSSで解決する方法をまず見てみて、該当コードで発生する可能性のあるバグや例外状況を調べます。そして問題をより丁寧に解決するためのWeb APIを紹介し、Web APIで望む機能を実装します。
Q. 授業で使用する特別なライブラリはありますか?
JavaScript Web API講座のため、別途ライブラリを学ぶ必要はありません。ただし、スムーズな授業進行のため、zod(TS validation)、ws(WebSocket)などのライブラリがpackage.jsonに含まれています。
💾受講前の参考事項
Web、Javascript、Reactに関する基礎知識が必要です。
授業で使用された全体のソースコードを提供します。授業ではコードを一行ずつ読むことはなく、授業進行に必要な部分のみを読むため、コードを一緒に見ることをお勧めします。
👨🎓 推奨学習方法
提供される授業資料のコードと授業動画を一緒に見ながら授業を受講されることをお勧めします。
セクションの最後に出題されるミッションは、ご自身で解いてみることをお勧めします。
学習対象は
誰でしょう?
実務で setTimeout、fetch Web APIのみを使用されている方
複雑な要件をWeb APIの概念で実現したい方
前提知識、
必要でしょうか?
React、JavaScript 基本文法
npm 使い方
1,038
受講生
50
受講レビュー
87
回答
4.5
講座評価
2
講座
안녕하세요.
스타트업에서 4년동안 프론트엔드 개발자로 일하고 있습니다.
React, Next.js, 지도, 차트, UI library 등을 다룹니다.
全体
25件 ∙ (2時間 5分)
講座資料(こうぎしりょう):
1. Web APIとは
03:05
2. Web APIは魔法ではない
09:15
3. 授業方式の紹介
01:52
全体
4件
5.0
4件の受講レビュー
受講レビュー 4
∙
平均評価 5.0
受講レビュー 33
∙
平均評価 4.7
受講レビュー 609
∙
平均評価 4.9
受講レビュー 7
∙
平均評価 5.0
¥2,471
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!