Programming

Front-end

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

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

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

（5.0）受講レビュー 2件

受講生 113名

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でこの値を使用してリストの状態を更新できますか？
  { 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（ウェブソケット）などのライブラリがpackage.jsonに含まれています。

💾受講前の注意

Web、Javascript、Reactの基礎知識が必要です。
クラスで使用される完全なソースコードを提供します。授業でコードを一行ずつ読むのではなく、授業の進行に必要な部分だけを読むので、コードを一緒に見ることをお勧めします。

👨‍🎓推奨学習方法

提供される授業資料コードと授業映像を一緒に見て授業を聞くとよいでしょう。
セクションの最後に出題されるミッションは自分で解放することをお勧めします。

こんな方に
おすすめです

学習対象は
誰でしょう？

実務で setTimeout、fetch Web APIのみを使用されている方
複雑な要件をWeb APIの概念で実現したい方

前提知識、
必要でしょうか？

React、JavaScript 基本文法
npm 使い方

こんにちは
です。

1,017

受講生

受講レビュー

回答

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分)

講座掲載日:

最終更新日:

受講レビュー

全体

2件

5.0

2件の受講レビュー

고슈
受講レビュー 4
∙
平均評価 5.0
5
100% 受講後に作成
자주 쓰이는 Web API를 둘러볼 수 있어서 좋았습니다. 엑기스만 모아뒀네여!! 부담없이 듣기 좋은 강의입니다. 최고 👍
Jang Jaehoon
受講レビュー 495
∙
平均評価 4.8
5
33% 受講後に作成
좋은 강의 감사합니다!

￥2,346

vroomfanの他の講座

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

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

박용주

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

초급

Next.js, SEO, vercel

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

박용주

似ている講座

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

이거 하나로 종결 - 32시간 고품질 스프링 풀스택 웹 개발

그린코딩

그냥 들어보세요. 강의력과 흡입력 그리고 강의의 질이 다릅니다.

입문

HTML/CSS, JavaScript, JSP

이거 하나로 종결 - 32시간 고품질 스프링 풀스택 웹 개발

그린코딩

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

얄팍한 코딩사전

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

초급

JavaScript, React, Node.js

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

얄팍한 코딩사전

근본있는 프론트엔드 유닛테스트

어쩔코딩

프론트앤드 유닛테스트의 모든것을 마스터하실수 있도록, 기본 개념부터 상황별 테스트 작성법 그리고 고급 테스트 지식까지 모두 모아 전달드립니다

초급

소프트웨어 테스트, TDD, Jest

근본있는 프론트엔드 유닛테스트

어쩔코딩

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

닭강정

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

초급

React, Electron, GUI

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

닭강정

멀티패러다임 프로그래밍 1편: 반복자 패턴 & LISP (with TypeScript, Clojure, Kotlin)

MDU 유인동

중고급 개발자로 성장하기 위한 고급 프로그래밍 언어 활용 능력과, 함수형, 객체 지향, LISP 패러다임이 결합된 소프트웨어 설계 및 구현 능력을 기릅니다.

중급이상

멀티 패러다임 프로그래밍, TypeScript, 함수형 프로그래밍

멀티패러다임 프로그래밍 1편: 반복자 패턴 & LISP (with TypeScript, Clojure, Kotlin)

MDU 유인동

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

도도(코딩루팡)

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

입문

nextjs, ChatGPT, React

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

도도(코딩루팡)

진짜! 자바스크립트(Javascript) - 기초부터 고급까지

코딩맥스 CodingMax

🌟 자바스크립트의 기초부터 고급까지, 진짜! 자바스크립트 강의에서 시작하세요! 🌟

입문

JavaScript, ES6, es5

진짜! 자바스크립트(Javascript) - 기초부터 고급까지

코딩맥스 CodingMax

찍어먹는 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

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

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

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

입문

HTML/CSS, JavaScript, openAI API

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

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

코어 자바스크립트

정재남

ES6 이전까지의 자바스크립트 전체를 관통하는 핵심 개념들에 대하여, 전반적인 흐름을 살펴보는 강의입니다.

초급

JavaScript

코어 자바스크립트

정재남

리액트로 나만의 블로그 만들기(MERN Stack)

싸플

풀스택으로 나만의 블로그를 만들어 보아요~~!

중급이상

Express, MongoDB, React

리액트로 나만의 블로그 만들기(MERN Stack)

싸플

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

초급

인터랙티브 웹, JavaScript, HTML/CSS

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

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

코드캠프

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

초급

React, Next.js, expo

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

코드캠프

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

도도(코딩루팡)

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

초급

Next.js, supabase, React

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

도도(코딩루팡)

클린업 JavaScript: 베이스 빌드업!

김영보

생각을 다룹니다. 자바스크립트 핵심과 근본을 논리적으로 정리할 수 있습니다. 자바스크립트 경험, 생각을 스스로 정리할 수 있습니다. 자바스크립트 기술 논리를 정립할 수 있습니다. 자바스크립트 전체를 보는 시야를 넓힐 수 있습니다. 자바스크립트 기술 면접 문제에 대비할 수 있습니다.

초급

JavaScript, 면접, 기술면접

클린업 JavaScript: 베이스 빌드업!

김영보

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

제로초(조현영)

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

초급

React, React Native, 하이브리드 앱

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

제로초(조현영)

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

코드캠프

코딩과 사랑에 빠져버린 8년차 풀스택 개발자 Captain의 사심이 가득 담긴 커리큘럼이에요. 백엔드의 모든 것을 다 알려주고 싶은 Captain의 마음이 녹아있죠! 이 강의를 듣다보면 '이렇게까지 알려준다고?' 하는 생각을 떨칠 수 없을 거예요. 모두가 어려워하는 부분까지 꼭꼭 씹어 떠먹여주는 이 강의로 시작해 볼까요?

입문

NestJS, Node.js, JavaScript

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

코드캠프

모바일, 태블릿, pc 반응형 인스타그램 클론코딩

더코딩클럽

이 강의를 통해 수강생은 HTML, CSS, JS로 인스타그램과 비슷한 웹서비스를 만들 수있습니다. ( 프론트만 구현했습니다! 백엔드 서버 구축은 차후 강의 촬영 예정입니다.)

초급

HTML/CSS, JavaScript, 클론코딩

모바일, 태블릿, pc 반응형 인스타그램 클론코딩

더코딩클럽

자바스크립트 머신러닝 TensorFlow.js

김영보

자바스크립트 환경에서 머신러닝 개념을 다룹니다. 자바스크립트와 TensorFlow.js로 머신러닝을 구현하는 형태와 코드를 다룹니다.

중급이상

Tensorflow, JavaScript, 머신러닝

자바스크립트 머신러닝 TensorFlow.js

김영보

웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)

코딩웍스(Coding Works)

웹 퍼블리셔를 위한 JS 핵심이론 및 실전예제 교재 및 완성본은 PDF로 제작된 강의 교재입니다. 해당 교재는 웹 퍼블리셔가 꼭 알아야 하는 자바스크립트와 제이쿼리 기본기를 충실히 갖출 수 있는 역할을 합니다. 해당 교재 특징으로는 이론과 연결된 스몰미션(Small Mission)을 통해서 이론을 더욱 탄탄히 할 수 있습니다. 특히 배운 모든 이론을 활용한 실전 예제 역시 충실히 준비된 교재입니다. 해당 PDF 전체 페이지는 순수 자바스크립트(Vanlila JavaScript)와 제이쿼리(jQuery) 페이지 수는 320페이지 이상으로 코딩웍스가 쉽게 이해할 수 있도록 충분한 설명을 덧붙여 놓았습니다. 특히, 퍼블리셔가 웹사이트 제작을 위해 필수적인 제이쿼리 상호작용 실전 예제를 학습하실 수 있습니다.

초급

JavaScript, jQuery, HTML/CSS

웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)

코딩웍스(Coding Works)

フロントエンド開発の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 💭

🚀講義オープン記念で6月1ヶ月間で50％割引中です！

こんな方に
おすすめです

こんにちは
です。

カリキュラム

受講レビュー

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 💭

🚀講義オープン記念で6月1ヶ月間で50％割引中です！

こんな方に おすすめです

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

カリキュラム

受講レビュー

vroomfanの他の講座

似ている講座

こんな方に
おすすめです

こんにちは
です。