BEST

Front-end

フォローして学ぶリアクトテスト [2023.11アップデート]

Name: フォローして学ぶリアクトテスト [2023.11アップデート]
Price: 49500 KRW
Rating: 4.7 (55 reviews)

このレッスンでは、リアクトアプリケーションをテストする方法を学びます。

（4.7）受講レビュー 55件

受講生 1,543名

John Ahn

React

React Context

Web Application

Jest

Software Test

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

受講後に得られること

リアクトテスト
リアクト Context
Jest
React Testing Library
Mock Service Worker

リアクトテストのためのA to Z！
ワンランク上のリアクト開発者として生まれ変わりましょう。

リアクトアプリケーションテスト、
なぜ学ぶべきですか？

リアクトアプリケーションテストが重要だとは言うのですが…一体なぜ重要なのでしょうか？

リアクトアプリケーションがますます多くの場所で使用されているため、より安定したリアクトアプリケーションを実装するための需要が高まっています。

この講義では？

テスト主導開発（TDD）を使用してリアクトアプリケーションを作成する
より信頼性の高いアプリケーションを実装できます。

このレッスンでは、リアクトテストを学びたいリアクトユーザーを対象にリアクトアプリケーションをテストする方法について説明します。

いつものようにリアクトアプリケーションテストを学びたいですか？

こんな方におすすめです！

✅リアクトテストを学びたい方
✅リアクトを使用するフロントエンド開発者

選手の知識を確認してください！

本講義はリアクトでアプリ開発を経験していただいた方、リアクトの基本的な文法を学んだ方に適した講義です。

この講義だけ
利点を確認してください。

_{構造的理解を助ける
図表中心
簡単で詳細な説明}

_{直接ソースコード
作成しながら
自然な繰り返し学習}

_{実際のアプリケーション
作ることができる
実習中心講義}

_{リアクトの基礎を離した
初心者の開発者なら
誰でもOK！}

1-2。図表による視覚的な説明+ダイレクトコード作成の2段階！

図表を通して視覚的に見たとき、ただ説明を聞くだけでより理解が良くなるからです。

3. フォローして学び、実習中心の講義。

テストに必要なモジュールやテスト主導開発の概念についても学びますが、実際のアプリケーションを作成しながらテストを並行するので、実習中心の講義でもあります。

4.リアクトの基礎を知っている学習者に適しています。

リアクトの基礎を知っていれば、この講義を聞くのに難なく聞くことができます。

次の内容
学習します。

この講義は合計7つのセクションで構成されており、次のスキルを重点的に学習します。

セクション1-2）リアクトテストに関する基本的な内容を説明し、テストに必要なモジュールを取り付けます。

セクション3）簡単なリアクトアプリケーションをテスト主導の開発方法で開発します。

セクション4）リアクトテストのためのより効率的な方法について説明します。

セクション5-7）より複雑なアプリケーションをテスト主導の開発方法で開発します。

知識共有者の
他の講義が気になったら？

累積受講生32,000+人、フォローして学ぶウェブ開発シリーズ📖

フォローして学習するノード、
リアクトシリーズ - 基本講義
簡単に学ぶフルスタック

フォローして学習するノード、
リアクトシリーズ -
YouTubeサイトを作成
サービス開発ノウハウ

フォローして学習するノード、
リアクトシリーズ -
映画サイトの作成
API連携まで習う

フォローして学習するノード、
リアクトシリーズ -
ショッピングモールサイトの作成
コア機能の実装

フォローして学ぶ
TDD開発
テスト主導の開発

フォローして学ぶ
NestJS
多目的オープンソース
Node.jsフレームワーク

こんな方に
おすすめです

学習対象は
誰でしょう？

リアクトテストを学びたい人
リアクトを使う人

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

リアクトでアプリ開発を経験した方
リアクトの基本的な文法を身につけた方

こんにちは
です。

84,864

受講生

2,742

受講レビュー

2,430

回答

4.8

講座評価

講座

안녕하세요.

즐겁게 개발하고 있는 개발자입니다.

앞으로 많은 도움을 드릴 수 있었으면 좋겠습니다.

- 따라하며 배우는 도커와 CI환경 저자
- 카카오 기업 신입 공채 FE 교수자
- 패스트캠퍼스, 구름 강사
- 현대자동차 개발 기업 교육
- 신한은행 메타버스, 코빗 타운 풀스택 개발
- 여러 공공기관 SNS 풀스택 개발

カリキュラム

全体

54件 ∙ (6時間 49分)

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

授業資料

セクション 1．講義資料

2件

1. 講義用図表資料
2. ソースコード(2023年11月アップデート)

セクション 2．React テストについて

9件 ∙ (44分)

3. 講座紹介
02:54
4. テストをする理由
01:57
5. React Testing Library について
05:09
6. Dom とは？
08:53
7. Create React App で始める React
02:40
8. Jestについて
02:29
9. Jest ファイル構造 & 使い方
04:23
10. React Testing Library 主要 API
08:15
11. クエリ関数について
08:05

セクション 3．簡単なアプリを作ってテスト

7件 ∙ (35分)

12. テスト駆動開発(Test Driven Development)
02:49
13. 簡単なアプリ紹介
01:07
14. カウンター数字の実装
07:36
15. プラス、マイナスボタン作成
05:32
16. プラス、マイナスボタン機能追加(fire event)
07:10
17. on/off ボタンを作る(toHaveStyle)
04:03
18. オン/オフボタンクリック時ボタン disabled
07:01

セクション 4．より良い React テストのために参考になること

2件 ∙ (8分)

セクション 5．旅行商品販売アプリ作り

13件 ∙ (1時間 56分)

セクション 6．React Context を利用した商品価格処理

9件 ∙ (1時間 32分)

セクション 7．注文概要、注文完了ページの作成

7件 ∙ (1時間 17分)

セクション 8．講座の最新バージョンソースコードへの変更 (CRA => Vite, msw 1 => msw 2 など)

5件 ∙ (34分)

セクション 9．.

0件

講座掲載日:

最終更新日:

受講レビュー

全体

55件

4.7

55件の受講レビュー

TaeHyun Lim
受講レビュー 19
∙
平均評価 5.0
5
100% 受講後に作成
항상 강의 잘 보고 있습니다. 감사합니다! 추후에 Cypress 같은 통합 테스트 강의도 있으면 좋을 것 같아요
sjpark960520
受講レビュー 3
∙
平均評価 4.7
4
100% 受講後に作成
참고 자료로 주신 React-Testing-Diagram 부분이 잘려져서 보이지 않습니다. 운영체제는 macOS를 사용하고 있습니다. msw와 만들어진 서버, 둘 중 하나만 사용을 하면 어떨까 하는 생각이 들었습니다. 둘 다 병행해서 사용되어서 그런지 에러가 났었던 부분들 중에서 msw와 만들어진 서버 사이의 문제가 많아서 헷갈렸었습니다. 마지막으로 강의에서 실수하신 부분이 있다면 해당 타임라인에 실수한 순간에 무엇을 실수하셨는지 명시하는 편이 훨씬 낫다는 생각이 들었습니다.
fongfing
受講レビュー 17
∙
平均評価 4.6
4
100% 受講後に作成
리액트와 tdd 조합이 어렵게만 느껴졌는데 쉽게 이해할 수 있도록 설명해주셔서 좋았습니다 :) 테스트 기능 중 일부를 다뤄본 느낌이라 더 많은 실전형 기능들을 tdd로 구현해나갈 수 있는 수업이 생기면 더 좋을 것 같아요 ! 강의 만드시느라 고생많으셨습니다. 감사합니다!
김태희
受講レビュー 10
∙
平均評価 5.0
5
100% 受講後に作成
왜 이렇게 코드를 작성해야하고, 왜 이렇게 동작하고, 왜 이런 오류가나는지를 모두 도표를 이용해서 너무 친절하게 설명해주십니다 정말 이번강의도 너무 감사드립니다 ㅠㅠ
hj rr
受講レビュー 17
∙
平均評価 4.9
5
100% 受講後に作成
jest를 사용한 리액트앱의 통합테스트가 주 컨텐츠인 강의입니다. 강의의 예제가 일 년 전에 vitest로 업데이트 되었으며, tdd를 위해 테스트 코드를 만들고 간단하게 리액트앱을 만드는 설명도 들어가 있기 때문에 초심자들에게 괜찮은 강의인것 같습니다.

￥6,161

John Ahnの他の講座

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

따라하며 배우는 리액트 A-Z[19버전 반영]

John Ahn

이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.

초급

React, Next.js, TypeScript

따라하며 배우는 리액트 A-Z[19버전 반영]

John Ahn

따라하며 배우는 리액트 네이티브 기초

John Ahn

이 강의를 통해서 리액트 네이티브를 이용해서 애플리케이션 개발을 할 수 있습니다.

초급

React Native, React, expo

따라하며 배우는 리액트 네이티브 기초

John Ahn

따라하며 배우는 자바스크립트 A-Z

John Ahn

웹 개발의 기초가 되는 자바스크립트의 기초부터 중급까지 배울 수 있습니다.

입문

JavaScript

따라하며 배우는 자바스크립트 A-Z

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

John Ahn

이 강의를 통해서 Google에서 제공하는 API를 사용해서 챗봇을 만들어 볼 수 있습니다.

초급

React, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

John Ahn

이 강의를 통해 리액트와 노드등의 개념만이 아닌, 실질적으로 어떻게 웹 사이트를 만드는지를 배울 수 있습니다.

초급

React, Node.js, 웹앱

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

John Ahn

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

John Ahn

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

초급

TypeScript, JavaScript

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

John Ahn

따라하며 배우는 HTML, CSS

John Ahn

이 강의를 통해서 HTML, CSS 기본을 다질 수 있습니다.

입문

HTML/CSS

따라하며 배우는 HTML, CSS

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

John Ahn

이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

초급

클론코딩, Node.js, React

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

John Ahn

따라하며 배우는 웹 게임

John Ahn

이 강의를 통해서 웹 게임을 어떻게 개발해야 하는지 알 수 있습니다.

중급이상

React

따라하며 배우는 웹 게임

John Ahn

따라하며 배우는 NestJS

John Ahn

이 강의를 통해 NestJS에 대해서 배울 수 있습니다.

초급

NestJS, PostgreSQL, TypeORM

따라하며 배우는 NestJS

John Ahn

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

이 강의를 통해서 리액트와 파이어베이스를 이용해서 채팅 어플리케이션을 만들수 있습니다.

초급

React, Firebase, 웹앱

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

따라하며 배우는 TDD 개발 [2023.11 업데이트]

John Ahn

이 강의를 통해서 테스트 주도 개발(TDD)을 이용하여 Node.js 어플리케이션을 만들어 봅니다.

초급

TDD, Node.js, Express

따라하며 배우는 TDD 개발 [2023.11 업데이트]

John Ahn

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

John Ahn

이 강의를 통해 도커에 대해서 배울 수 있으며, CI 환경을 구성할 수 있습니다.

초급

GitHub, AWS, Docker

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

John Ahn

따라하며 배우는 데노(DENO) - 기본 강의

John Ahn

출시 전부터 많은 관심을 받았던 데노가 드디어 나왔습니다. 이 강의에서 데노가 노드와 어떻게 다르며 어떻게 데노를 다루는지를 배울 수 있습니다.

초급

Deno

따라하며 배우는 데노(DENO) - 기본 강의

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

John Ahn

이 강의를 통해서 쇼핑몰 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

중급이상

React, Redux, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

John Ahn

이 강의를 통해서 리액트와 노드를 어떻게 사용하는지 기본적인 내용들을 배울 수 있습니다.

초급

React, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

John Ahn

이 강의를 통해 리액트와 노드의 개념을 익히는 것뿐만이 아닌 실질적으로 어떻게 웹사이트를 만들 수 있는지를 배울 수 있습니다.

초급

React, Redux, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

John Ahn

似ている講座

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

따라하며 배우는 TDD 개발 [2023.11 업데이트]

John Ahn

이 강의를 통해서 테스트 주도 개발(TDD)을 이용하여 Node.js 어플리케이션을 만들어 봅니다.

초급

TDD, Node.js, Express

따라하며 배우는 TDD 개발 [2023.11 업데이트]

John Ahn

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

이 강의를 통해서 리액트와 파이어베이스를 이용해서 채팅 어플리케이션을 만들수 있습니다.

초급

React, Firebase, 웹앱

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

따라하며 배우는 리액트 A-Z[19버전 반영]

John Ahn

초급

React, Next.js, TypeScript

따라하며 배우는 리액트 A-Z[19버전 반영]

John Ahn

실전 프론트엔드 테스트 시작하기

장기효(캡틴판교)

능력 있는 프론트엔드 개발 실무자가 되고 싶다면 꼭 들어야 할 테스트 강의. 테스팅 입문부터 실전까지 한방에 끝낸다 👊

초급

소프트웨어 테스트, Cypress, e2e

실전 프론트엔드 테스트 시작하기

장기효(캡틴판교)

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

코드캠프

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

중급이상

React, Next.js, cursor

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

코드캠프

ISTQB AI Testing - 베스트 프랙티스를 배우고 시험에 대비

edu

AI 기술의 현재와 미래를 이해하고, 머신러닝 등 AI 모델의 테스트 과정을 체험하며 테스터의 역할을 배우게 됩니다. AI 기반 시스템 테스트 전략 수립부터 테스트 케이스 설계 · 실행, 또 테스트 지원을 위한 AI 활용 방법까지 폭넓게 익힙니다. 본 과정을 ISTQB의 AI Testing 실러버스를 기반으로 진행되며, ISTQB AI Testing 자격시험을 완벽하게 준비할 수 있는 기회를 제공합니다.

입문

ISTQB, 소프트웨어 테스트, 인공지능(AI)

ISTQB AI Testing - 베스트 프랙티스를 배우고 시험에 대비

edu

Practical Testing: 실용적인 테스트 가이드

박우빈

이 강의를 통해 실무에서 개발하는 방식 그대로, 깔끔하고 명료한 테스트 코드를 작성할 수 있게 됩니다. 테스트 코드가 왜 필요한지, 좋은 테스트 코드란 무엇인지 궁금하신 모든 분을 위한 강의입니다.

초급

소프트웨어 테스트, junit5, Mockito

Practical Testing: 실용적인 테스트 가이드

박우빈

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

제로초(조현영)

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

중급이상

React, Redux, Node.js

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

제로초(조현영)

Java/Spring 테스트를 추가하고 싶은 개발자들의 오답노트

김우근

Spring에 테스트를 넣는 방법을 알려드립니다! 더 나아가 자연스러운 테스트를 할 수 있게 스프링 설계를 변경하는 방법을 배웁니다.

초급

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

Java/Spring 테스트를 추가하고 싶은 개발자들의 오답노트

김우근

바로 쓰는 핵심 프론트엔드 테스트

심플코딩

저는 항상 '도대체 왜 프론트엔드 테스트를 해야하지?'라는 의문을 가지고 있었습니다. 그리고 의문을 가지고 테스트를 기계적으로 작성했죠. 하지만 여러분들은 '왜 테스트를 작성하는지' 그리고 '상황에 따라 어떻게 작성해야 하는지'를 알게 될 겁니다.

초급

Jest, playwright, react-testing-library

바로 쓰는 핵심 프론트엔드 테스트

심플코딩

견고한 JS 소프트웨어 만들기

김정환

같은 기능을 만들더라도 자바스크립트 문법을 이제 막 뗀 주니어 개발자와 경험 많은 시니어 개발자의 코드는 상당히 다릅니다. 물론 결과물은 같더라도 말이죠. 후자의 코드가 인정받는 이유는 짜임새 있는 설계와 변화에 대응할수 있는 확장성 때문일거에요. 이 강의는 그런 좋은 코드를 만들어 내는 방법에 대해 알아봅니다.

중급이상

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

견고한 JS 소프트웨어 만들기

김정환

TDD 개발 방법론을 활용한 React Native 앱 개발

박동호

간단한 ReactNative 앱을 TDD 방법론을 통해 개발하면서 TDD 의 개념을 확실히 익히고, ReactNative 모바일 앱 개발에 적용할 수 있도록 연습합니다.

초급

JavaScript, React, React Native

TDD 개발 방법론을 활용한 React Native 앱 개발

박동호

[Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)

닭강정

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

초급

React, Electron, GUI

[Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)

닭강정