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,037

명

수강생

2,638

개

수강평

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개의 수강평

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

John Ahn님의 다른 강의

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

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

John Ahn

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

초급

GitHub, AWS, Docker

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

John Ahn

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

중급이상

React, Redux, Node.js

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

John Ahn

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

입문

JavaScript

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

John Ahn

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

초급

React Native, React, expo

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

John Ahn

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

초급

TDD, Node.js, Express

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

John Ahn

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

초급

React, Node.js

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

John Ahn

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

초급

React, Redux, Node.js

따라하며 배우는 NestJS

John Ahn

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

초급

NestJS, PostgreSQL, TypeORM

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

John Ahn

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

초급

TypeScript, JavaScript

따라하며 배우는 HTML, CSS

John Ahn

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

입문

HTML/CSS

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

John Ahn

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

초급

클론코딩, Node.js, React

따라하며 배우는 웹 게임

John Ahn

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

중급이상

React

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

John Ahn

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

초급

React, Next.js, TypeScript

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

John Ahn

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

초급

React, Firebase, 웹앱

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

John Ahn

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

초급

Deno

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

John Ahn

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

초급

React, Node.js

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

John Ahn

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

초급

React, Node.js, 웹앱

비슷한 강의

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

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

John Ahn

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

초급

TDD, Node.js, Express

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

John Ahn

초급

React, Next.js, TypeScript

부트캠프에서 알려주지 않는 것들 (리액트) 1편

애프터캠프

커스텀 훅, TDD, 컨텍스트 API, 리팩토링, 복잡한 상태 관리 등 React 개발의 복잡한 부분을 마스터하세요.

중급이상

React, React Context, TDD

테스트 with Jest: 제로초에게 제대로 배우기

제로초(조현영)

본 강의에서는 테스트가 필요한 경우와 테스트를 할 때의 장점을 Jest 프레임워크를 통해 보여드립니다. 리액트, Express 등에 유닛테스트, 통합테스트를 적용해봅니다.

초급

소프트웨어 테스트, Jest, react-testing-library

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

John Ahn

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

초급

React, Firebase, 웹앱

따라하며 배우는 웹 게임

John Ahn

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

중급이상

React

쥬쥬와 함께 하루만에 끝내는 스프링 테스트

쥬쥬

테스트 코드 작성이 망설여지시나요? 이 강의를 통해 스프링 환경 테스트의 A to Z를 경험해보세요!

초급

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

소프트웨어 개발 7가지 기본 원칙: 최고의 프로그래머가 되는 방법

드라진

소프트웨어 품질은 습관입니다! 이 강의를 통해 기업이 원하는 최고의 프로그래머가 되는 방법을 배울 수 있을 것입니다.

초급

알고리즘, C, 소프트웨어 설계

SW 역량테스트 합격하기 A형 with C++ (Advanced Algorithm)

피로물든딸기

코드트리 기출문제와 기출문제를 풀기 위한 알고리즘과 팁을 알려드립니다. C++을 사용하지만 라이브러리를 사용하지 않기 때문에 다른 언어를 사용하는 분도 수강이 가능합니다. (Python 코드 제공)

입문

C++, 코딩 테스트, 알고리즘

더 자바, 애플리케이션을 테스트하는 다양한 방법

백기선

자바 프로그래밍 언어를 사용하고 있거나 공부하고 있는 학생 또는 개발자라면 반드시 알아야 하는 애플리케이션을 테스트하는 다양한 방법을 학습합니다.

초급

Java, JUnit, Testcontainers

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

박동호

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

초급

JavaScript, React, React Native

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

김정환

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

중급이상

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

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

박우빈

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

초급

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

부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

애프터캠프

React 렌더링 원리, 최적화를 마스터해서 실전 활용 및 면접 준비를 해보세요!

중급이상

React, react-usememo, 기술면접

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

edu

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

입문

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

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

John Ahn

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

중급이상

React, Redux, Node.js