BEST
개발 · 프로그래밍

/

프론트엔드

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

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

(5.0) 수강평 14개

수강생 231명

Thumbnail

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

이런 걸
배워요!

  • 프론트엔드 테스팅

  • 테스팅 이론

  • 테스트 코드 작성 방법

  • e2e 테스트

  • Cypress

  • 테스트 자동화

잘하는 프론트엔드 개발자의 역량은 무엇일까요? 🤔

기능을 빠르게 구현하는 역량 못지 않게 구현한 기능의 안정성과 완성도를 챙기는 것도 중요합니다. 내가 제작한 코드가 기존 기능에 영향을 미치지 않는지 매번 꼼꼼히 확인해야 하죠.

반복해서 기능 동작을 확인하는 일은 지난하고 번거롭습니다. 특히, 우리의 퇴근 시간을 늦추기 때문에 절대 손으로만 직접 테스트 해서는 안돼요.

우리의 소중한 시간을 더 가치 있는 곳에 쓸 수 있게 도와주는 것이 바로 테스트 코드와 테스트 자동화입니다. 이 강의로 테스트에 대한 이해도를 높여서 더 현명하게 일하고, 인정받는 프론트엔드 개발자가 되어봅시다!

이 강의의 특징

📌 테스트 코드만 6년. 수많은 QA(품질 관리자)와 티키타카하며 쌓은 깊은 내공을 고스란히 전달하는 강의

📌 테스팅의 기초 이론부터 미니 프로젝트 1개, 실전 프로젝트 1개로 배우는 실습 중심(90%)의 강의

📌 테스트는 왜 하는지 테스트 코드는 어떻게 작성해야 하는지 모르겠나요? 강의에서 명쾌하게 설명해요.

📌 실무에서 테스트 코드는 어떻게 생각할까? 어떻게 작성해야 효과적일지 모두 알려줍니다.

📌 테스트 시나리오를 사용자 관점에서 설계하는 방법을 소개합니다.

이런 분들께 추천해요

테스트에 관심이 있어요.

주변에서 테스트 코드가 중요하다고 하는데 어디서부터 시작해야 할지 모르겠어요.

프론트엔드 개발을 잘하고 싶어요
기능 구현은 곧잘 하는데
다음 레벨의 개발자가 되려면
어떻게 해야 하나요?

배포할 때마다 확인하기 귀찮아요
서비스 배포할 때마다 기능 동작을 일일이 확인하는게 너무 귀찮아요. 쉽게 하는 방법 없나요?

수강 후에는

  • 테스트 코드가 왜 필요한지 어떤 걸 테스트 해야 하는지 머리가 아닌 손이 알게 됩니다.

  • 테스트 코드를 간결하고 효과적으로 작성하는 방법을 알 수 있어요.

  • 손으로 일일이 반복해서 확인하던 습관을 버리고 기능 확인을 자동화할 수 있어요.

  • 웹 애플리케이션 코드 품질과 완성도를 한 단계 더 올릴 수 있게 됩니다.

  • Cypress 테스트 도구를 다루는 게 쉬워질 거예요.

이런 내용을 배워요.

테스트의 기본 개념과 전반적인 테스팅 이론

웹 개발자 관점에서 꼭 알아야 하는 전반적인 테스트의 이론과 기본 개념들을 교안으로 설명합니다.

테스팅 도구의 기본 사용법부터 에러 해석까지

테스팅 도구의 기본적인 사용 방법과 각 UI 별로 알아두면 좋은 특징까지 모두 알려줍니다. 특히, 라이브 코딩으로 같이 에러를 내보고 분석해 보고 고쳐볼 수 있어요.

테스트 시나리오 설계 방법과 점진적 리팩토링까지

다년간 테스트 시나리오를 작성한 노하우를 전달합니다. 학습하며 배운 코드를 체계적으로 구조화하고 리팩토링으로 테스트 코드의 품질을 개선해 봅니다.

미니 프로젝트로 입문하고 실전 프로젝트로 끝낸다.

간단한 카운터 앱과 기능이 제법 있는 쇼핑몰 사이트에 테스트 코드를 작성하면서 기본 개념과 심화 개념을 모두 학습합니다. 실무에서 쌓은 꿀팁 대방출

이 강의를 만든 사람 👨‍💻

장기효 (캡틴판교)

"인프런이 만난 사람" 인터뷰

수강 전 참고 사항

실습 환경

  • 운영 체제 및 버전(OS): 강의에서 Mac을 쓰지만 Windows 관련 단축키도 모두 설명합니다.

  • 사용 도구: VSCode

학습 자료

  • 깃헙으로 완성된 소스 코드가 제공됩니다.

  • 강의 영상 별로 추가로 학습할 수 있는 교육 자료와 교육 영상을 다수 제공합니다.

선수 지식 및 유의사항

  • JavaScript 및 프론트엔드 프레임워크(React 또는 Vue) 기본 개념

  • Next.js 시작하기 강의를 듣고 오시면 더 좋습니다 ^^ (안듣고 오셔도 들으실 수 있어요 )

도라 띠배너 모음 (3)
위즈 띠배너 모음

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 테스트에 관심 있는 프론트엔드 개발자

  • 주니어 프론트엔드 개발자

  • 프론트엔드 개발 입문자

  • 칼퇴하고 싶은 실무 웹 개발자

  • 배포할 때마다 기능 확인하기 귀찮은 웹 개발자

선수 지식,
필요할까요?

  • JavaScript

인프런에서 8년째 지식을 공유하고 있습니다. 🏠 기술블로그, 💻 깃헙

📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨‍💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각과 고민을 들을 수 있는 곳

커리큘럼

전체

36개 ∙ (3시간 32분)

강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!