Thumbnail
얼리버드 할인 중
NEW 개발 · 프로그래밍 웹 개발
따라하며 배우는 리액트 테스트
75명이 수강하고 있어요.

25%

16,500원

22,000원
지식공유자 : John Ahn
총 49개 수업˙총 6시간 20분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
폴더에 추가 73 공유
초급자를 위해 준비한
[웹 개발] 강의입니다.

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

✍️
이런 걸
배워요!
리액트 테스트
리액트 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의 썸네일

안녕하세요. 

현재 평범하게 직장 생활하며 

파이썬과 PHP, 그리고 Node 와   

프론트엔드 스택들 리액트, 리덕스 등을 사용하며  

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

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

커리큘럼 총 49 개 ˙ 6시간 20분의 수업
이 강의는 영상, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 자료
도표 자료
소스 코드
섹션 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. 리액트 테스트를 위한 모듈 설치 및 설정
ESLint Plugins 설치 및 설정 16:08
Prettier 설치 및 설정 04:18
섹션 3. 간단한 앱 만들며 테스트
테스트 주도 개발(Test Driven Development) 02:49
간단한 앱 소개 01:07
카운터 숫자 구현하기 07:28
플러스, 마이너스 버튼 생성 05:32
플러스, 마이너스 버튼 기능 넣기(fire event) 07:10
on/off 버튼 만들기(toHaveStyle) 04:03
on/off 버튼 클릭 시 버튼 disabled 07:01
섹션 4. 더 나은 리액트 테스트를 위해 참고할 것들
Query 사용 우선 순위 05:22
userEvent > fireEvent 03:36
섹션 5. 여행 상품 판매 앱 만들기
여행 상품 판매 앱 소개 02:38
새로운 프로젝트 Setup 05:33
전체적인 구조 만들기 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
섹션 6. 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
섹션 7. 주문 요약, 주문 완료 페이지 만들기
페이지마다 스텝 주기 11:27
주문 확인 페이지 (1) 10:04
주문 확인 페이지 (2) 15:10
주문 완료 페이지 (1) 09:39
주문 완료 페이지 (2) 12:26
not wrapped in act 경고 10:52
첫 페이지로 돌아갈 때 State Reset! 07:39
강의 게시일 : 2021년 10월 08일 (마지막 업데이트일 : 2021년 10월 09일)
수강평
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
얼리버드 할인 중

25%

16,500원

22,000원
폴더에 추가 73 공유
지식공유자 : John Ahn
총 49개 수업˙총 6시간 20분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스