BEST

개발 · 프로그래밍

프론트엔드

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

Name: 따라하며 배우는 리액트 테스트 [2023.11 업데이트]
Price: 49500 KRW

이 강의를 통해 리액트 애플리케이션을 테스트하는 법을 배우게 됩니다.

(4.7) 수강평 55개

수강생 1,531명

John Ahn

React React Context 웹앱 Jest 소프트웨어 테스트

초급자를 위해 준비한
[소프트웨어 테스트, React] 강의입니다.

이런 걸 배울 수 있어요

리액트 테스트
리액트 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+명, 따라하며 배우는 웹 개발 시리즈 📖

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

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

따라하며 배우는 노드,
리액트 시리즈 -
영화 사이트 만들기
API 연동까지 익히기

따라하며 배우는 노드,
리액트 시리즈 -
쇼핑몰 사이트 만들기
핵심 기능 구현

따라하며 배우는
TDD 개발
테스트 주도 개발

따라하며 배우는
NestJS
다목적 오픈소스
Node.js 프레임워크

이런 분들께
추천드려요!

학습 대상은
누구일까요?

리액트 테스트를 배우고 싶은 사람
리액트를 사용하는 사람

선수 지식,
필요할까요?

리액트로 앱개발을 경험해보신 분
리액트의 기본적인 문법을 익히신 분

안녕하세요
John Ahn입니다.

83,062

명

수강생

2,642

개

수강평

2,428

개

답변

4.8

점

강의 평점

개

강의

안녕하세요.

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

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

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

커리큘럼

전체

54개 ∙ (6시간 49분)

해당 강의에서 제공:

수업자료

섹션 1. 강의 자료

2개

1. 강의 도표 자료
2. 소스 코드(2023.11월 업데이트)

섹션 2. 리액트 테스트에 대해서

9개 ∙ (44분)

3. 강의 소개
02:54
4. 테스트를 하는 이유
01:57
5. React Testing Library 에 대해서
05:09
6. Dom 이란?
08:53
7. Create React App으로 리액트 시작하기
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. on/off 버튼 클릭 시 버튼 disabled
07:01

섹션 4. 더 나은 리액트 테스트를 위해 참고할 것들

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개

강의 게시일: 2021. 10. 07.

마지막 업데이트일: 2023. 11. 20.

수강평

전체

55개

4.7

55개의 수강평

sjpark960520
수강평 3
∙
평균 평점 4.7
2022. 04. 28.
4
100% 수강 후 작성
The React-Testing-Diagram part you provided as reference is cut off and cannot be seen. I am using macOS as my operating system. I was thinking about using only one of the two, msw and the created server. Since both were used in parallel, I was confused because there were many problems between msw and the created server among the parts where errors occurred. Lastly, if you made a mistake in the lecture, I think it would be much better to specify what you made a mistake at the time on the timeline.
김태희
수강평 10
∙
평균 평점 5.0
2021. 10. 13.
5
100% 수강 후 작성
Why do I have to write the code like this, why does it work like this, why does this error occur? You explain everything so kindly using diagrams. I'm really grateful for this lecture. ㅠㅠ
thsoon
수강평 19
∙
평균 평점 5.0
2021. 10. 09.
5
100% 수강 후 작성
I always enjoy your lectures. Thank you! I think it would be good to have a lecture on integrated testing like Cypress in the future.
hwfongfing2548
수강평 17
∙
평균 평점 4.6
2022. 01. 04.
4
100% 수강 후 작성
I felt like the combination of react and tdd was difficult, but I liked that you explained it in an easy-to-understand way :) I feel like I covered some of the test features, so I think it would be better if there was a class that could implement more practical features with tdd! Thank you for your hard work in making the lecture!
jdy8739
수강평 12
∙
평균 평점 5.0
2025. 03. 16.
5
100% 수강 후 작성
This lecture primarily covers integration testing of React apps using Jest. The lecture examples were updated to Vitest a year ago, and it seems like a decent lecture for beginners as it includes explanations on creating test codes for TDD and building simple React apps.

John Ahn님의 다른 강의

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

Learn JavaScript A-Z by Following Along

johnahn

You can learn JavaScript from basic to intermediate level, which is the foundation of web development.

입문

JavaScript

Learn React Native Basics by Following

johnahn

Through this course, you will be able to develop applications using React Native.

초급

React Native, React, expo

Node and React series that you can learn by following - Basic lecture

johnahn

In this course, you will learn the basics of how to use React and Node.

초급

React, Node.js

TypeScript A-Z: Learn by Following

johnahn

In this course, you will learn about TypeScript.

초급

TypeScript, JavaScript

Learn HTML and CSS by following along

johnahn

Through this course, you can learn the basics of HTML and CSS.

입문

HTML/CSS

Node and React series that you can learn by following - Creating a Reddit site (NextJS) (Pages Router)

johnahn

In this course, you will be able to create a Reddit website from scratch, step by step.

초급

Clone Coding, Node.js, React

Web game that lets you learn by following along

johnahn

This course will teach you how to develop web games.

중급이상

React

Learning React A-Z by Following Along [Version 19 반영]

johnahn

In this course, you will learn React from basic to intermediate level. This single course is designed to help you learn the concepts, practice them, and acquire most of the knowledge you need for React all at once.

초급

React, Next.js, TypeScript

Learn NestJS by following along

johnahn

In this course, you will learn about NestJS.

초급

NestJS, PostgreSQL, TypeORM

Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]

johnahn

In this course, you will learn how to create a chat application using React and Firebase.

초급

React, Firebase, Web Application

TDD Development by Following [Updated in November 2023]

johnahn

In this course, you will create a Node.js application using test-driven development (TDD).

초급

TDD, Node.js, Express

Learn Docker and CI environment by following [2023.11 update]

johnahn

Through this course, you can learn about Docker and set up a CI environment.

초급

GitHub, AWS, Docker

DENO - Learn by Following - Basic Course

johnahn

Deno, which has been receiving a lot of attention even before its release, has finally been released. In this lecture, you can learn how Deno is different from Node and how to handle Deno.

초급

Deno

Node and React series that you can learn by following - Creating a shopping mall site [Full renewal]

johnahn

Through this course, you can create a shopping mall website from scratch.

중급이상

React, Redux, Node.js

Node and React series that you can learn by following - Creating a chatbot site

johnahn

In this course, you will learn how to create a chatbot using the API provided by Google.

초급

React, Node.js

Node and React series that you can learn by following - Creating a movie site

johnahn

Through this course, you will learn not only concepts such as React and Node, but also how to practically create a website.

초급

React, Node.js, Web Application

Node and React series that you can learn by following - Creating a YouTube site

johnahn

In this course, you will not only learn the concepts of React and Node, but also learn how to practically create a website.

초급

React, Redux, Node.js

비슷한 강의

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

TDD Development by Following [Updated in November 2023]

johnahn

In this course, you will create a Node.js application using test-driven development (TDD).

초급

TDD, Node.js, Express

Learning React A-Z by Following Along [Version 19 반영]

johnahn

초급

React, Next.js, TypeScript

Things They Don't Teach You in Bootcamps (React) Part 1

aftercamp

Master the complexities of React development, including custom hooks, TDD, the context API, refactoring, and complex state management.

중급이상

React, React Context, TDD

Node and React series that you can learn by following - Creating a shopping mall site [Full renewal]

johnahn

Through this course, you can create a shopping mall website from scratch.

중급이상

React, Redux, Node.js

Flutter Testing Basics

survivalcoding

This lecture explains unit testing, UI testing, and integration testing methods in Flutter based on the official documentation.

초급

Flutter, Software Test, integration-tests

Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]

johnahn

In this course, you will learn how to create a chat application using React and Firebase.

초급

React, Firebase, Web Application

Full Stack React Toy Project - REST, GraphQL (for FE Developers)

jaenam

Practice REST API and GraphQL while creating a simple SNS service based on React. We introduce how to easily and simply create a backend environment for frontend development.

초급

REST API, GraphQL, React

Building Robust JS Software

jeonghwan

Even if you create the same function, the code of a junior developer who has just learned JavaScript syntax and that of an experienced senior developer will be quite different. Of course, even if the results are the same. The reason the latter's code is recognized is because of its well-designed structure and scalability to respond to changes. This lecture will learn about how to create such good code.

중급이상

Software Test, TDD, jasmine

Passing the SW Competency Test A-Type with C++ (Advanced Algorithm)

bloodstrawberry

We provide CodeTree past questions, as well as algorithms and tips for solving them. We use C++, but since we don't use libraries, those who use other languages can also take the course. (Python code provided)

입문

C++, Coding Test, Algorithm

Test with Jest: Learn Properly from Zerocho

zerocho

In this lecture, we will show you when testing is necessary and the advantages of testing using the Jest framework. We will apply unit testing and integration testing to React, Express, etc.

초급

Software Test, Jest, react-testing-library

7 Basic Principles of Software Development: How to Become a Great Programmer

drajin

Software quality is a habit! This course will teach you how to become the best programmer that companies want.

초급

Algorithm, C, software-design

React + Firebase Full Stack Development - Firebase Firestore Data Modeling

brightcoding

Through this course, you will learn how to implement database relationships with Firebase. You can quickly become a React full-stack developer. In this era of unstable employment, you need to learn new skills and increase your value. And you need to create something. You need to be able to implement data "relationships" when implementing those side projects and ideas. This course will help you implement "relationships" with Firebase "Firestore."

초급

Firebase, React, firestore

Basics of Web Development

devinno

Learn the basic concepts and principles essential to web development through hands-on practice.

초급

Web Application, HTML/CSS, JavaScript

NodeJS API Server Built with Test-Driven Development (TDD)

jeonghwan

In this course, you will learn NodeJS, which allows you to develop backends using the Javascript language, and develop API servers using NodeJS using the test-driven development (TDD) method. You will also understand the basic principles of ExpressJS, a representative web framework for NodeJS, and learn how to develop REST APIs used in mobile and web services.

초급

TDD, Node.js, Express

Introduction to Software Testing - C++

drmoon

This course will help you gain more confidence in the code you develop by learning the basics of testing.

초급

Software Test, TDD, C++

Making [R shiny app] as told by Dad

jeehyoung

R shiny allows you to implement R's infinite functions on a web app in the simplest way possible, making it easy to learn and use.

초급

Web Application, R

[2025] React Native App Development Masterclass for Non-majors

junghw

For those who had ideas but didn't know how to develop an app, Let's master app development by creating 4 practical projects!

입문

JavaScript, React, Node.js

Getting started with easy mobile test automation: Appium Studio

qadaddy

This course is for anyone who is curious about developing test automation on Android and iOS devices. This course will enable you to perform automated testing on mobile devices.

입문

Appium Studio, Software Test, quality assurance

Developing React Native apps using the TDD development methodology

huedonghopark0024

By developing a simple ReactNative app using the TDD methodology, you will learn the concepts of TDD and practice applying them to ReactNative mobile app development.

초급

JavaScript, React, React Native

Java(javafx) practical desktop app project - YouTube management app

formygoddess10025500

Create a desktop app with minimal theory! Anyone can start creating an app even without programming experience!

입문

JavaFX, Java, Web Application

연관 로드맵

강의가 포함된 로드맵으로 학습해 보세요!

따라하며 배우는 풀스택 웹 개발 시리즈

John Ahn

₩49,500

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

초급자를 위해 준비한 [소프트웨어 테스트, React] 강의입니다.

이런 걸 배울 수 있어요

리액트 애플리케이션 테스트, 왜 배워야 할까요?

이 강의에서는?

이런 분들께 추천합니다!

이 강의만의 장점을 확인하세요.

1-2. 도표를 통한 시각적 설명 + 직접 코드 작성의 2단계!

3. 따라하며 배우세요, 실습 중심 강의.

4. 리액트 기초를 알고 있는 학습자에게 적합합니다.

다음 내용을 학습합니다.

지식공유자의 다른 강의가 궁금하다면?

이런 분들께 추천드려요!

안녕하세요 John Ahn입니다.

커리큘럼

수강평

John Ahn님의 다른 강의

비슷한 강의

연관 로드맵

초급자를 위해 준비한
[소프트웨어 테스트, React] 강의입니다.

리액트 애플리케이션 테스트,
왜 배워야 할까요?

이 강의만의
장점을 확인하세요.

다음 내용을
학습합니다.

지식공유자의
다른 강의가 궁금하다면?

이런 분들께
추천드려요!

안녕하세요
John Ahn입니다.