개발 · 프로그래밍

프론트엔드

프론트엔드 개발의 Kick, Web API (feat. React)

Name: 프론트엔드 개발의 Kick, Web API (feat. React)
Price: 19800 KRW

실무에 적용할 수 있는 Web API를 다룹니다. 한 번쯤 꼭 마주치게 될 요구사항들을 풀어낼 무기를 얻어가시길 바랍니다.

(5.0) 수강평 2개

수강생 112명

박용주

이론 실습 모두

JavaScript React Web API

이런 걸 배울 수 있어요

브라우저에서 Web API가 작동하는 원리
Web Worker로 부하를 줄이는 방법
서로 다른 context(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 API는 쉽게 따라오실 수 있습니다. 수업자료에서 이해가 되지 않는 코드가 있다면 편하게 질문 남겨주시길 바랍니다.

Q. 수업은 어떤 방식으로 진행되나요?

섹션마다 새로운 문제 상황이 제시됩니다. 문제 상황을 기본적인 JS/CSS로 풀어내는 방법을 먼저 살펴보고, 해당 코드에서 발생할 수 있는 버그나 예외 상황을 알아봅니다. 그리고 문제를 더 꼼꼼하게 해결하기 위한 Web API를 소개해드리고 Web API로 원하는 기능을 구현합니다.

Q. 수업에서 사용하는 특별한 라이브러리가 있나요?

자바스크립트 Web API 강의이기 때문에 따로 라이브러리를 배울 필요는 없습니다. 다만 매끄러운 수업 진행을 위해 zod(TS validation), ws(웹소켓) 등의 라이브러리가 package.json에 포함되어 있습니다.

💾 수강 전 참고 사항

Web, Javascript, React에 대한 기초 지식을 필요로 합니다.
수업에 사용된 전체 소스 코드를 제공합니다. 수업에서 코드를 한 줄씩 읽지는 않고 수업 진행에 필요한 부분만 읽기 때문에 코드를 같이 보시는 것을 추천합니다.

👨‍🎓 권장 학습 방법

제공되는 수업자료 코드와 수업 영상을 함께 보며 수업을 들으시면 좋습니다.
섹션 마지막에 출제되는 미션은 스스로 풀어보시는 것을 권장합니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

실무에서 setTimeout, fetch Web API만 사용하고 계신 분
까다로운 요구사항을 Web API 개념으로 풀어내고 싶으신 분

선수 지식,
필요할까요?

React, Javascript 기본 문법
npm 사용법

안녕하세요
입니다.

1,015

명

수강생

개

수강평

개

답변

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

9. JS thread 혹은 웹 서버에 부하가 발생하는 상황
02:39
10. Worker를 이용한 풀이
05:13
11. SharedWorker를 이용한 풀이
07:08
SharedWorker의 ports 배열 관리하기

섹션 4. 서로 다른 context를 이어주는 Message API

5개 ∙ (32분)

섹션 5. JS로 애니메이션을 제어하는 Animation API

4개 ∙ (25분)

섹션 6. 보너스 Web API

3개 ∙ (22분)

강의 게시일:

마지막 업데이트일:

수강평

전체

2개

5.0

2개의 수강평

go5ue
수강평 4
∙
평균 평점 5.0
5
100% 수강 후 작성
よく使われるWeb APIを見て回ることができてよかったです。エッセンスだけが集められていますね！！気軽に聞ける良い講義です。最高 👍
jjhgwx
수강평 492
∙
평균 평점 4.8
5
33% 수강 후 작성
良い講義をありがとうございます！

₩19,800

박용주님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

Next.js はじめ方（feat. 地図サービス開発）

vroomfan

Next.jsの基本を扱う講座です。 Next.jsで地図サービスを最初から最後まで開発してみます。

초급

Next.js, SEO, vercel

Next.js はじめ方（feat. 地図サービス開発）

vroomfan

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

やるこの最も簡単なリアクト(React)

yalco

説明隊長ヤルコーの濃密な講座で、最も簡単に、最も早くReactを学びましょう！

초급

JavaScript, React, Node.js

やるこの最も簡単なリアクト(React)

yalco

2時間で終わるフロントエンドテスト基本機

jasonkang

テストコード！どこから始めなければならないのか、大変な方のために準備しました。テスト作成から、自動化による配布まで一度に！

초급

React, Cypress, Jest

2時間で終わるフロントエンドテスト基本機

jasonkang

HTML+CSS+JS ポートフォリオ実践公開(シーズン2)

codingworks

HTML+CSS+JS 実戦ポートフォリオ(シーズン2)は、中級パブリッシングで、さまざまな実戦例を学習することで、パブリッシングの中級スキルに必要な基本を習得します。特に、さまざまな実戦例と全体レスポンシブWebサイトの作成を通じて、中級パブリッシングに自信がつき、授業で作成した作品は、就職のための個人ポートフォリオとして貴重な資料になります。約38時間の十分な学習量と、実戦例を通じて中級パブリッシングのノウハウを習得するパブリッシングの授業です。

초급

HTML/CSS, jQuery, JavaScript

HTML+CSS+JS ポートフォリオ実践公開(シーズン2)

codingworks

モダンJavaScript（ES6+）の基本

tonextday

4つのコースで構成されたJavaScriptバイブルコースの3番目のコースです。 JavaScriptの仕様の95％以上をカバーしています。 ES6+環境で新しいパラダイムのプログラムを開発できます。

초급

JavaScript, ES6

モダンJavaScript（ES6+）の基本

tonextday

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

dakgangjung123

React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

초급

React, Electron, GUI

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

dakgangjung123

文法を勉強した後、JavaScriptプロジェクト101

erumcoding

🚀JavaScriptの文法を勉強したばかりのコリンズに適したミニプロジェクト実習講義です。

초급

JavaScript

文法を勉強した後、JavaScriptプロジェクト101

erumcoding

SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)

dodocoding

FirebaseのSQL版！Supabaseを通じてNext.jsのフルスタックの基礎をマスターできます！

초급

Next.js, supabase, React

SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)

dodocoding

入門者のための、ES6+の最新のJavaScript入門

gymcoding

周辺でコーディングを初めて始める方々をたくさん見ました。キャリアの方はJavaScriptが簡単だと言いますが、初めて接する方は難しく感じるしかありません。だから今回の講義はコーディングに入門される王初歩の方々のために簡単！ちょっと！内容を用意しました。 💪🙂

초급

JavaScript, ES6

入門者のための、ES6+の最新のJavaScript入門

gymcoding

モバイル、タブレット、pcレスポンシブインスタグラムクローンコーディング

jeong4726

この講義を通じて、受講生はHTML、CSS、JSでインスタグラムに似たWebサービスを作成することができます。（フロントのみ実装しました！バックエンドサーバー構築は今後講義撮影予定です。）

초급

HTML/CSS, JavaScript, Clone Coding

モバイル、タブレット、pcレスポンシブインスタグラムクローンコーディング

jeong4726

誰でも簡単に始めるウェブ開発基礎 (Basic Web Development Course)

pnuswedu

基本的なウェブサイト構築方法を習得し、公共データOpen APIを連携した実戦プロジェクトを通じて、Web開発の基礎から実務適用能力まで！

입문

HTML/CSS, JavaScript, openAI API

誰でも簡単に始めるウェブ開発基礎 (Basic Web Development Course)

pnuswedu

フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]

funcoding

現場で実際のウェブサービスを開発した経験に基づき、初心者向けに実際の商用化も可能なレベルのウェブおよびアプリサービスを開発することを目標とするフルスタックシリーズ講座です。そのためのPart2講座として、多様な技術が存在するフロントエンド技術の中から、レスポンシブ、互換性まで考慮した最新のHTML5、CSS3、バニラJavaScript（Javascript）+ ES6をすべてしっかりと整理する講座です。

입문

HTML/CSS, JavaScript, ES6

フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]

funcoding

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

誰よりも速く学べる Springboot + React RestAPI 掲示板構築

yeseong0412

誰よりも早く学べる Springboot + React RestAPI 掲示板作成 Springboot で CRUD サーバーを開発し、React で自分だけの掲示板を作ってみましょう！

초급

React, Kotlin, REST API

誰よりも速く学べる Springboot + React RestAPI 掲示板構築

yeseong0412

まだ生きている不死の jQuery - 基礎から実務まで

ezweb

全世界のウェブサイトで75%以上が使用しているJavaScriptライブラリ、jQuery！華麗な効果よりも原理を理解し、基礎を固められるように構成しました。jQueryの基礎から活用まで学習し、あなただけのポートフォリオを完成させたり、現場で即活用してみてください。

초급

HTML/CSS, JavaScript, jQuery

まだ生きている不死の jQuery - 基礎から実務まで

ezweb

mongoDB基礎から実務まで（feat. Node.js）

sihoon

mongoDB、NoSQLは最近多く聞こえますが、まだ見知らぬデータベースですか？リレーショナルデータベース（RDS / SQL）のように使用していませんか？いくら良い技術も正しく使用しないと逆効果が発生します。だからモンゴディビの使用失敗事例もしばしば見えます。このレッスンでは、mongoDBをできるだけmongoDBで使用できるように、基本概念から実務ノウハウまで教えていきます。

초급

MongoDB, REST API, Node.js

mongoDB基礎から実務まで（feat. Node.js）

sihoon

JavaScript 機械学習 TensorFlow.js

tonextday

JavaScript 環境で機械学習の概念を扱います。 JavaScript と TensorFlow.js を使って機械学習を実装する形式とコードを扱います。

중급이상

Tensorflow, JavaScript, Machine Learning(ML)

JavaScript 機械学習 TensorFlow.js

tonextday

Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

codecamp

Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。

초급

React, Next.js, expo

Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

codecamp

ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）

webstoryboy

ウェブデザイン機能社出題基準 2023年バージョンに合わせて誰でも合格できるように製作しました。 5種類を学び、素早く合格しましょう！

초급

HTML/CSS, jQuery, JavaScript

ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）

webstoryboy

Web パブリッシャーのための JavaScript & jQuery 核心理論実践例題 (教材、完成版)

codingworks

ウェブパブリッシャー向けの JS 核心理論および実践例教材および完成版は、PDF で作成された講義教材です。この教材は、ウェブパブリッシャーが必ず知っておくべき JavaScript と jQuery の基本を忠実に習得できる役割を果たします。この教材の特徴は、理論に関連するスモールミッション (Small Mission) を通じて、理論をさらに強化できることです。特に、学習したすべての理論を活用した実践例も、忠実に準備された教材です。この PDF の全ページは、純粋な JavaScript (Vanlila JavaScript) と jQuery ページの数が 320 ページ以上で、CodingWorks が簡単に理解できるように十分な説明が追加されています。特に、パブリッシャーがウェブサイト作成のために必要な jQuery 相互作用の実践例を学習できます。

초급

JavaScript, jQuery, HTML/CSS

Web パブリッシャーのための JavaScript & jQuery 核心理論実践例題 (教材、完成版)

codingworks

C# Xamarin Forms ジャマリンフォームズ API 講義 + 簡単な API を作成する

nodeep777

ザマリン(Xamarin)でSQLのデータにどのようにアクセスして修正、削除、追加、照会できるかを説明する講義です。 WEB APIも一緒に作成しながら、APIをどのように活用するかを知ることができます。

초급

Web API, Xamarin

C# Xamarin Forms ジャマリンフォームズ API 講義 + 簡単な API を作成する

nodeep777

프론트엔드 개발의 Kick, Web API (feat. React)

이런 걸 배울 수 있어요

프론트엔드 개발의 Kick, Web API

다음과 같은 상황을 마주한 적이 있으신가요? 🤔

강의를 통해 배우는 Web API 7가지 Point ✅

학습 커리큘럼 📚

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월 한 달간 50% 할인 중입니다!

이런 분들께
추천드려요

안녕하세요
입니다.

커리큘럼

수강평

박용주님의 다른 강의

비슷한 강의

프론트엔드 개발의 Kick, Web API (feat. React)

이런 걸 배울 수 있어요

프론트엔드 개발의 Kick, Web API

다음과 같은 상황을 마주한 적이 있으신가요? 🤔

강의를 통해 배우는 Web API 7가지 Point ✅

학습 커리큘럼 📚

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월 한 달간 50% 할인 중입니다!

이런 분들께 추천드려요

안녕하세요 .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}입니다.

커리큘럼

수강평

박용주님의 다른 강의

비슷한 강의

이런 분들께
추천드려요

안녕하세요
입니다.