フロントエンド開発のKick、Web API (feat. React)

Name: フロントエンド開発のKick、Web API (feat. React)
Price: 19800 KRW
Rating: 5 (4 reviews)

実務に適用できるWeb APIを扱います。一度はきっと直面するであろう要件を解決する武器を手に入れてください。

（5.0）受講レビュー 4件

受講生 132名

vroomfan

이론 실습 모두

JavaScript

React

Web API

学習した受講者のレビュー

受講後に得られること

ブラウザでのWeb APIの動作原理
ウェブワーカーで負荷を減らす方法
異なるコンテキスト(window, tab, iframe など)が通信する方法
Timer, Animationをより正確に使う方法

フロントエンド開発のKick、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' }
- それでは、異なるタブ間で上記のようなデータをやり取りする方法は何でしょうか？

Q&A 💭

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

受講生

受講レビュー

回答

4.5

講座評価

講座

안녕하세요.
스타트업에서 4년동안 프론트엔드 개발자로 일하고 있습니다.
React, Next.js, 지도, 차트, UI library 등을 다룹니다.

포트폴리오

カリキュラム

全体

25件 ∙ (2時間 5分)

講座資料（こうぎしりょう）:

授業資料

ミッション

セクション 1．講座紹介

4件 ∙ (14分)

1. Web APIとは
03:05
2. Web APIは魔法ではない
09:15
3. 授業方式の紹介
01:52
4. 授業資料ダウンロード

セクション 2．タイマー関数（setInterval、setTimeout）を正確に使用する

5件 ∙ (15分)

5. タイマー関数を実行してブラウザが非アクティブになる状況
01:30
6. setIntervalを使用した解法
02:51
7. Page Visibilityを利用した解法
07:12
8. Web Workerを利用した解法
04:18
Page Visibility + setTimeout 使用時のバグ対応

セクション 3．負荷を軽減するWeb Workers API

4件 ∙ (15分)

セクション 4．異なるcontextを繋ぐMessage API

5件 ∙ (32分)

セクション 5．JSでアニメーションを制御するAnimation API

4件 ∙ (25分)

セクション 6．ボーナス Web API

3件 ∙ (22分)

講座掲載日:

最終更新日:

受講レビュー

全体

4件

5.0

4件の受講レビュー

고슈
受講レビュー 4
∙
平均評価 5.0
5
100% 受講後に作成
자주 쓰이는 Web API를 둘러볼 수 있어서 좋았습니다. 엑기스만 모아뒀네여!! 부담없이 듣기 좋은 강의입니다. 최고 👍
망고
受講レビュー 33
∙
平均評価 4.7
5
100% 受講後に作成
WEB API를 좀 더 자세히 알 수 있어서 좋았습니다. 좀 더 실무적인 관점이나 예시의 코드를 보여주셨으면 더 좋았을 것 같아요
Jang Jaehoon
受講レビュー 609
∙
平均評価 4.9
5
33% 受講後に作成
좋은 강의 감사합니다!
윤효준
受講レビュー 7
∙
平均評価 5.0
5
32% 受講後に作成

￥2,469

vroomfanの他の講座

知識共有者の他の講座を見てみましょう！

Next.js 시작하기(feat. 지도 서비스 개발)

박용주

Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다.

초급

Next.js, SEO, vercel

Next.js 시작하기(feat. 지도 서비스 개발)

박용주

似ている講座

同じ分野の他の講座を見てみましょう！

(2025 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계

코딩알려주는누나

프론트엔드 개발자가 되고 싶은 분들에게 필수 과정인 리액트를 배우고 포트폴리오 프로젝트까지 만들 수 있어요.

초급

React, Redux, Web API

(2025 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계

코딩알려주는누나

얄코의 가장 쉬운 리액트(React)

얄팍한 코딩사전

설명대장 얄코의 녹진하고 꾸덕한 강좌로 가장 쉽게, 가장 빠르게 리액트를 배우세요!

초급

JavaScript, React, Node.js

얄코의 가장 쉬운 리액트(React)

얄팍한 코딩사전

[웹 개발 풀스택 코스] 순수 자바스크립트 기초에서 실무까지

개발자의 품격

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈 중 자바스크립트에 대한 강의입니다. 이 강의는 지식공유자의 저서 <바닐라 자바스크립트>의 내용을 바탕으로 만들어진 강의입니다.

초급

JavaScript, vanilla-javascript

[웹 개발 풀스택 코스] 순수 자바스크립트 기초에서 실무까지

개발자의 품격

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

이진석

파이썬/장고 웹서비스 개발의 기초를 탄탄히 다져보세요. 장고 학습에는 시간도 걸리지만, 반복되는 개발 속에 여러분의 생산성을 극대화하실 수 있습니다. 여러분의 상상을 현실로 만들어보세요.

초급

Python, Django, React

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

이진석

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt

중급이상

React, Next.js, cursor

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

초급

React Native, React, ES6

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

초급

React, Electron, GUI

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

ES6 문법과 함께하는 모던 Javascript(자바스크립트) 고급 Part.3

유용한IT학습

자바스크립트 프로그래밍 언어를 최신의 ES6 문법과 함께 학습하도록 기획된 과정입니다.

중급이상

JavaScript, ES6

ES6 문법과 함께하는 모던 Javascript(자바스크립트) 고급 Part.3

유용한IT학습

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

도도(코딩루팡)

Firebase의 SQL버전! Supabase를 통해 Next.js 풀 스택 기초를 마스터 할 수 있어요.!

초급

Next.js, supabase, React

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

도도(코딩루팡)

[리뉴얼] React로 NodeBird SNS 만들기

제로초(조현영)

리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

중급이상

React, Redux, Node.js

[리뉴얼] React로 NodeBird SNS 만들기

제로초(조현영)

따라하며 배우는 타입스크립트 A-Z

John Ahn

이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

초급

TypeScript, JavaScript

따라하며 배우는 타입스크립트 A-Z

John Ahn

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

도도(코딩루팡)

Next.js + Cursor IDE 로 챗 프로그램을 한시간만에 구현하는 능력을 가질 수 있어요.

입문

nextjs, ChatGPT, React

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

도도(코딩루팡)

C# Xamarin Forms 자마린 폼즈 API 강의 + 간단한 API 만들기

깊알못nodeep

자마린(Xamarin)에서 SQL의 데이터를 어떻게 접근해서 수정, 삭제, 추가, 조회할 수 있는지 설명하는 강의입니다. WEB API도 같이 만들면서 API를 어떻게 활용하는지 알수 있습니다.

초급

Web API, Xamarin

C# Xamarin Forms 자마린 폼즈 API 강의 + 간단한 API 만들기

깊알못nodeep

누구나 쉽게 시작하는 웹개발 기초 (Basic Web Development Course)

부산대학교 소프트웨어융합교육원

기본적인 웹사이트 구축 방법을 습득하고, 공공데이터 Open API를 연계한 실전 프로젝트를 통해 웹 개발의 기초부터 실무 적용 능력까지!

입문

HTML/CSS, JavaScript, openAI API

누구나 쉽게 시작하는 웹개발 기초 (Basic Web Development Course)

부산대학교 소프트웨어융합교육원

React Native with Expo: 제로초에게 제대로 배우기

제로초(조현영)

웹 개발자가(특히 React 개발자라면) 정말 손쉽게 앱을 출시할 수 있는 시대가 되었습니다. Expo와 함께라면 더더욱 빠르게 Android와 iOS 앱 모두를 출시할 수 있습니다. Expo를 통해 빠르게 앱까지 출시할 수 있는 개발자가 되어봅시다.

초급

React, React Native, 하이브리드 앱

React Native with Expo: 제로초에게 제대로 배우기

제로초(조현영)

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

초급

React, Next.js, expo

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

Node.js로 웹 크롤링하기

제로초(조현영)

네이버, 아마존, 트위터, 유튜브, 페이스북, 인스타그램, unsplash.com 등의 사이트를 크롤링하며 실전에 적용해봅니다.

중급이상

JavaScript, Node.js, 웹 크롤링

Node.js로 웹 크롤링하기

제로초(조현영)

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi

찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

중급이상

Next.js, React, GraphQL

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi

mongoDB 기초부터 실무까지(feat. Node.js)

김시훈 (도도소프트)

mongoDB, NoSQL 요즘 많이 들리지만 아직은 낯선 데이터베이스인가요? 관계형 데이터베이스(RDS/SQL)처럼 사용하고 계시지는 않으신가요? 아무리 좋은 기술도 올바르게 사용하지 않으면 역효과가 발생합니다. 그래서 몽고디비 사용 실패 사례도 종종 보이는데요. 이 강의는 mongoDB를 최대한 mongoDB스럽게 사용할 수 있도록 기본 개념부터 실무 노하우까지 가르쳐드려요.

초급

MongoDB, REST API, Node.js

mongoDB 기초부터 실무까지(feat. Node.js)

김시훈 (도도소프트)

아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지

이지웹

전세계 웹사이트에서 75%이상이 사용하고 있는 javascript 라이브러리 jQuery ! 화려한 효과보다는 원리를 이해하며 기본기를 다질수 있도록 구성했습니다. 제이쿼리 기초부터 활용까지 학습하여 여러분만의 포트폴리오를 완성하거나, 현업에서 바로 활용해보세요.

초급

HTML/CSS, JavaScript, jQuery

아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지

이지웹

フロントエンド開発のKick、Web API (feat. React)

学習した受講者のレビュー

受講後に得られること

フロントエンド開発のKick、Web API

次のような状況に直面したことはありませんか？🤔

講義を通じて学ぶWeb API 7つのポイント✅

学習カリキュラム📚

Section 1. 講義紹介

Section 2. タイマー関数を正確に使用する

Section 3. Web Workers API

Section 4. Message API

Section 5. Web Animations API

Section 6. ボーナス Web API

Q&A 💭

こんな方に
おすすめです

こんにちは
です。

カリキュラム

受講レビュー

vroomfanの他の講座

似ている講座

フロントエンド開発のKick、Web API (feat. React)

学習した受講者のレビュー

受講後に得られること

フロントエンド開発のKick、Web API

次のような状況に直面したことはありませんか？🤔

講義を通じて学ぶWeb API 7つのポイント✅

学習カリキュラム📚

Section 1. 講義紹介

Section 2. タイマー関数を正確に使用する

Section 3. Web Workers API

Section 4. Message API

Section 5. Web Animations API

Section 6. ボーナス Web API

Q&A 💭

こんな方に おすすめです

こんにちは .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}です。

カリキュラム

受講レビュー

vroomfanの他の講座

似ている講座

こんな方に
おすすめです

こんにちは
です。