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

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

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

(5.0) 수강평 4개

수강생 132명

박용주

이론 실습 모두

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

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

강의 게시일:

마지막 업데이트일:

수강평

전체

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% 수강 후 작성

₩19,800

박용주님의 다른 강의

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

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

박용주

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

초급

Next.js, SEO, vercel

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

박용주

비슷한 강의

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

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

유동균

리액트로 만들어진 웹 서비스의 성능을 측정하고 더욱 빠르고 효율적으로 최적화 하는 방법을 배웁니다.

중급이상

React, Chrome DevTools

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

유동균

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)

인프런

처음으로 프로그래밍을 시작하는 분들을 위한 웹 개발 입문 강의입니다. HTML, CSS, Javascript를 배우고 인스타그램 포스팅 카드를 만들어봄으로써 웹페이지 제작에 꼭 필요한 기본적인 내용들을 학습합니다.

입문

HTML/CSS, JavaScript

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)

인프런

프론트엔드 마스터클래스

한상훈

웹 개발 최소 1년 이상의 학생 및 실무자들을 위한 고급 프론트엔드 강좌입니다. 가장 좋은 대상은 현업에서 2~3년 이상의 경험을 하고, 실력의 정체기 또는 대형 기업에서 고려해야하는 제품 구조에 대해 배우고 싶은 분들을 위해 만들어졌습니다.

중급이상

JavaScript, React, 함수형 프로그래밍

프론트엔드 마스터클래스

한상훈

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

이진석

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

초급

Python, Django, React

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

이진석

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

도도(코딩루팡)

1시간안에 끝내는 React기반의 GPT AI서비스 강의 수강 후 나만의 AI GPT SASS 솔루션을 만들어 보세요.

초급

React, ChatGPT, JavaScript

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

도도(코딩루팡)

[CSS&JS Master] - 트렌디한 감정기록 일기장 만들기

코드캠프

최신 CSS 프러퍼티와 실무적인 Javascript를 프로젝트를 진행하면서 재밌게 배울 수 있습니다.

입문

HTML/CSS, JavaScript, vanilla-javascript

[CSS&JS Master] - 트렌디한 감정기록 일기장 만들기

코드캠프

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

입문

JavaScript, React, Node.js

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

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

닭강정

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

초급

React, Electron, GUI

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

닭강정

웹 개발자의 연봉을 올려주는 하이브리드앱 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)

도도(코딩루팡)

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

코드캠프

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

중급이상

React, Next.js, cursor

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

코드캠프

Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture

IT s Dev

A Complete End-to-End Developer Journey — Build Lightning-Fast APIs, Modern Frontend Interfaces, Real Projects, Authentication Systems, Dashboards & Full Deployments Using FastAPI, React, and Vibe Coding Techniques.

입문

React, React Native, react.js

Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture

IT s Dev

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

코드캠프

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

입문

NestJS, Node.js, JavaScript

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

코드캠프

타입스크립트 입문 - 기초부터 실전까지

장기효(캡틴판교)

타입스크립트를 시작하는 분들을 위한 강의입니다. 최신 자바스크립트 문법을 모르는 분들도 쉽게 배울 수 있도록 교과 과정을 구성하였습니다. 어렵게만 느껴지는 타입스크립트를 입문자 관점에서 쉽고 재밌게 배워보겠습니다 😄

초급

TypeScript, ES6, JavaScript

타입스크립트 입문 - 기초부터 실전까지

장기효(캡틴판교)

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

[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문

제로초(조현영)

본 강의에서는 자바스크립트를 활용해 프로그래밍 사고력을 기르는 연습을 합니다. 웹 게임인 구구단을 시작으로 끝말잇기, 숫자 야구, 반응 속도 테스트, 틱택토, 로또 추첨기, 가위바위보, 카드 짝맞추기 게임, 텍스트 RPG, 지뢰 찾기, 2048게임, 두더지 잡기까지 함께 만들어봅시다.

초급

JavaScript

[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문

제로초(조현영)

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

깊알못nodeep

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

초급

Web API, Xamarin

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

깊알못nodeep

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

깡코딩

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

초급

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

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

깡코딩

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

더코딩클럽

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

초급

HTML/CSS, JavaScript, 클론코딩

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

더코딩클럽

윤재성의 처음시작하는 JavaScript Tutorials

소프트캠퍼스

JavaScript 언어에 대한 개요, 기초 문법, 제공 라이브러리까지 JavaScript에 대한 전반적인 내용을 학습할 수 있습니다.

입문

JavaScript

윤재성의 처음시작하는 JavaScript Tutorials

소프트캠퍼스

프론트엔드 개발의 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 💭

이런 분들께
추천드려요

안녕하세요
입니다.

커리큘럼

수강평

박용주님의 다른 강의

비슷한 강의

프론트엔드 개발의 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 💭

이런 분들께 추천드려요

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

커리큘럼

수강평

박용주님의 다른 강의

비슷한 강의

이런 분들께
추천드려요

안녕하세요
입니다.