Thumbnail
BEST
개발 · 프로그래밍 프론트엔드

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

(4.6)
48개의 수강평 ∙  1,474명의 수강생

49,500원

지식공유자: John Ahn
총 54개 수업 (6시간 49분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

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

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

✍️
이런 걸
배워요!
리액트 테스트
리액트 Context
Jest
React Testing Library
Mock Service Worker

리액트 테스팅을 위한 A to Z! 
한 단계 앞선 리액트 개발자로 거듭나세요.

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

리액트 애플리케이션 테스트가 중요하다고는 하는데... 도대체 왜 중요하다고 하는 걸까요?

John Ahn

리액트 애플리케이션이 점점 많은 곳에서 사용되면서, 더욱 안정적인 리액트 애플리케이션을 구현하기 위한 수요가 늘어나고 있습니다. 그래서 많은 리액트 포지션 모집 공고를 보면 리액트 애플리케이션 테스트를 할 수 있는지에 대한 내용을 많이 볼 수 있습니다.

이 강의에서는?

테스트 주도 개발(TDD)을 이용해 리액트 애플리케이션을 만들어서 
더욱 안정적인 애플리케이션을 구현할 수 있습니다. 

이 강의에서는 리액트 테스트를 배우고 싶은 리액트 사용자를 대상으로 리액트 애플리케이션을 테스트하는 법에 대해 다룹니다. 실제 리액트 애플리케이션을 만들면서 테스트를 진행하기 때문에 리액트와 리액트 테스트를 함께 배울 수 있도록 강의를 구성했습니다. 

평소에 리액트 애플리케이션 테스트를 배우고 싶으셨나요? 리액트 배우기에도 시간이 벅차서 리액트 테스팅 배우기를 미뤄오지는 않으셨나요? 프론트엔드 개발자, 리액트 개발자라면 이 강의가 많은 도움이 될 거라 생각합니다. 그럼 함께 도전해봅시다!

이런 분들께 추천합니다!

  • ✅ 리액트 테스트를 배우고 싶은 분
  • ✅ 리액트를 사용하는 프론트엔드 개발자

선수 지식을 확인해주세요! 

  • 본 강의는 리액트로 앱 개발을 경험해보신 분, 리액트의 기본적인 문법을 익히신 분들께 적합한 강의입니다. 수강에 참고해주시기 바랍니다.

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

구조적 이해를 돕는 
도표 중심의 
쉽고 자세한 설명 

직접 소스 코드를 
작성하면서 
자연스러운 반복 학습 

실제 애플리케이션을 
만들어볼 수 있는  
실습 중심 강의 

리액트 기초를 뗀 
초보 개발자라면 
누구나 OK! 

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

도표를 통해서 시각적으로 봤을 때 그냥 설명을 듣기만 했을 때보다 이해가 더 잘 되기 때문입니다. 또한 이렇게 도표를 통해서 학습한 후 소스 코드를 작성하므로 자연스럽게 복습하는 효과가 나타난다고 생각합니다.

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

테스트할 때 필요한 모듈이나 테스트 주도 개발에 대한 개념에 대해서도 배우지만 실제 애플리케이션을 만들면서 테스트를 병행하기 때문에 실습 위주의 강의이기도 합니다.

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

리액트의 기초를 알고 계시면 이 강의를 듣는데 어려움 없이 들으실 수 있습니다. 테스트 부분을 강의할 때뿐만 아니라 리액트 애플리케이션을 만드는 부분도 자세하게 설명을 하기 때문입니다.


다음 내용을 
학습합니다. 

이 강의는 총 7개의 섹션으로 구성되어 있으며, 다음 스킬을 중점적으로 학습합니다.

섹션 1-2) 리액트 테스트에 관한 기본적인 내용을 설명하며, 테스트에 필요한 모듈을 설치합니다.

섹션 3) 간단한 리액트 애플리케이션을 테스트 주도 개발 방식으로 개발합니다.

섹션 4) 리액트 테스트를 위한 더욱 효율적인 방법들을 설명합니다.

섹션 5-7) 좀 더 복잡한 애플리케이션을 테스트 주도 개발 방식으로 개발합니다.


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

누적 수강생 32,000+명, 따라하며 배우는 웹 개발 시리즈 📖

따라하며 배우는
TDD 개발

테스트 주도 개발

따라하며 배우는
NestJS

다목적 오픈소스 
Node.js 프레임워크

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
리액트 테스트를 배우고 싶은 사람
리액트를 사용하는 사람
📚
선수 지식,
필요할까요?
리액트로 앱개발을 경험해보신 분
리액트의 기본적인 문법을 익히신 분

안녕하세요
John Ahn 입니다.
John Ahn의 썸네일

안녕하세요. 

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

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


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

커리큘럼 총 54 개 ˙ 6시간 49분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 자료
강의 도표 자료
소스 코드(2023.11월 업데이트)
섹션 1. 리액트 테스트에 대해서
강의 소개 미리보기 02:54
테스트를 하는 이유 01:57
React Testing Library 에 대해서 05:09
Dom 이란? 08:53
Create React App으로 리액트 시작하기 02:40
Jest 에 대하여 02:29
Jest 파일 구조 & 사용법 미리보기 04:23
React Testing Library 주요 API 08:15
쿼리 함수에 대해서 미리보기 08:05
섹션 2. 간단한 앱 만들며 테스트
테스트 주도 개발(Test Driven Development) 02:49
간단한 앱 소개 01:07
카운터 숫자 구현하기 07:36
플러스, 마이너스 버튼 생성 05:32
플러스, 마이너스 버튼 기능 넣기(fire event) 07:10
on/off 버튼 만들기(toHaveStyle) 04:03
on/off 버튼 클릭 시 버튼 disabled 07:01
섹션 3. 더 나은 리액트 테스트를 위해 참고할 것들
Query 사용 우선 순위 05:22
userEvent > fireEvent 03:35
섹션 4. 여행 상품 판매 앱 만들기
여행 상품 판매 앱 소개 02:38
[중요] 쇼핑몰 프로젝트를 위한 시작 소스 코드
Eslint Plugins 설치 및 설정 16:08
Prettier 설치 및 설정 04:18
전체적인 구조 만들기 04:39
Summary 페이지 Form 구현 15:15
첫 번째 페이지 구현을 위해서 해야 할 일 01:51
Mock Service Worker 16:00
MSW를 이용한 테스트(상품이미지 가져오기) (1) 13:06
MSW를 이용한 테스트(상품이미지 가져오기) (2) 13:26
서버에서 데이터 가져올 때 에러 발생 시 처리 10:57
옵션 정보 가져오기 08:04
UI를 위한 작업 10:02
섹션 5. React Context를 이용한 상품 가격 처리
상품 가격을 위한 테스트 케이스 구현 09:16
컴포넌트 간 데이터 전달 02:14
context를 사용해서 컴포넌트에 데이터 제공하기 (1) 16:00
context를 사용해서 컴포넌트에 데이터 제공하기 (2) 14:38
context 를 사용해서 가격 계산하기 11:42
context wrapper 추가로 에러 제거하기 07:51
모든 테스트 케이스를 wrapper 로 감싸주기 07:57
옵션 가격을 위한 테스트 구현 09:16
상품 가격, 옵션 가격을 더한 총 가격 구하기 13:27
섹션 6. 주문 요약, 주문 완료 페이지 만들기
페이지마다 스텝 주기 11:27
주문 확인 페이지 (1) 10:04
주문 확인 페이지 (2) 15:10
주문 완료 페이지 (1) 09:39
주문 완료 페이지 (2) 12:26
not wrapped in act 경고 10:52
첫 페이지로 돌아갈 때 State Reset! 07:39
섹션 7. 강의 최신 버전 소스 코드로 변경하기(CRA => Vite , msw 1 => msw 2 등...)
Vite로 리액트 앱 생성하기 15:53
소스 코드 옮기기 04:22
user event 소스 코드 변경하기 (v14) 07:36
msw v1 에서 v2 로 변경하기 06:49
최신 버전 완성본 소스 코드
섹션 8. .
강의 게시일 : 2021년 10월 08일 (마지막 업데이트일 : 2023년 11월 20일)
수강평 총 48개
수강생분들이 직접 작성하신 수강평입니다.
4.6
48개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
TaeHyun Lim thumbnail
5
항상 강의 잘 보고 있습니다. 감사합니다! 추후에 Cypress 같은 통합 테스트 강의도 있으면 좋을 것 같아요
2021-10-10
sjpark960520 thumbnail
4
참고 자료로 주신 React-Testing-Diagram 부분이 잘려져서 보이지 않습니다. 운영체제는 macOS를 사용하고 있습니다. msw와 만들어진 서버, 둘 중 하나만 사용을 하면 어떨까 하는 생각이 들었습니다. 둘 다 병행해서 사용되어서 그런지 에러가 났었던 부분들 중에서 msw와 만들어진 서버 사이의 문제가 많아서 헷갈렸었습니다. 마지막으로 강의에서 실수하신 부분이 있다면 해당 타임라인에 실수한 순간에 무엇을 실수하셨는지 명시하는 편이 훨씬 낫다는 생각이 들었습니다.
2022-04-29
fongfing thumbnail
4
리액트와 tdd 조합이 어렵게만 느껴졌는데 쉽게 이해할 수 있도록 설명해주셔서 좋았습니다 :) 테스트 기능 중 일부를 다뤄본 느낌이라 더 많은 실전형 기능들을 tdd로 구현해나갈 수 있는 수업이 생기면 더 좋을 것 같아요 ! 강의 만드시느라 고생많으셨습니다. 감사합니다!
2022-01-05
김태희 thumbnail
5
왜 이렇게 코드를 작성해야하고, 왜 이렇게 동작하고, 왜 이런 오류가나는지를 모두 도표를 이용해서 너무 친절하게 설명해주십니다 정말 이번강의도 너무 감사드립니다 ㅠㅠ
2021-10-14
이호성 thumbnail
4
너무 좋았습니다.
2024-03-16
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!