Thumbnail
BEST 개발 · 프로그래밍 웹 개발

하루만에 Cypress로 작성하는 자바스크립트 E2E 테스트 코드

(4.9)
38개의 수강평 ∙ 341명의 수강생

11,000원

지식공유자: 메이커준
총 11개 수업 ( 45분)
수강기한: 무제한
수료증: 발급
난이도:  입문-초급-중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유
초급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

프론트엔드는 사용자와의 접점이 이루어지는 곳이기 때문에 개발자의 입장이 아닌, 사용자의 입장에서의 테스트가 매우 중요합니다. E2E테스트를 통해 사용자 시나리오가 정상적으로 동작하는지 검증해보고 내 코드에 대해 두려움에서 자신감을 가지는 경험을 해보세요!

✍️
이런 걸
배워요!
Cypress
프론트엔드 E2E 테스트
프론트엔드의 테스트 종류

코드 작성의 두려움, E2E 테스트로 떨쳐내보세요!

자바스크립트 코드를 짜면서
이런 고민이 들진 않으세요?

😅 이 함수를 제거해도 괜찮을까?
🧐 반복되는 기능 테스트를 빠르게 할 순 없을까?
🤔 내 코드를 어떻게 검증할까?

개발자는 작성한 프로그램의 퀄리티에 대한 책임이 있습니다. 그래서 QA에 기능 테스트를 넘기기 전 기본 요구사항을 모두 만족하는지에 대한 검증은 개발자 스스로 할 수 있어야 합니다. 신뢰할 수 있는 자동화 테스트를 통해 자신의 코드에 자신감을 불어넣는 경험을 해보세요!


FE 테스트 입문자를 위한
Cypress E2E 테스트 강의. 💡 

용기는 두려움이 없는 상태가 아니다.
진정한 용기란 두려움에도 불구하고 행동하는 상태이다. 
- 괴테

프론트엔드 테스트코드를 짜야한다는 두려움을, 자신감으로 바꾸는 경험을 '함께' 만들어 나갑니다.


이런 분들에게
도움이 될 것 같아요! 
🙋🏻‍♂️

기본적인 자바스크립트 개념을 알고 있는 분

테스트 코드에 대한 갈증이 있는 분

처음 프론트엔드 학습을 하다 보면 화면 UI 기능 개발에 집중하느라, 테스트 코드에 대한 막연한 두려움이 있는 경우가 있습니다. 그러한 두려움을 작은 단위의 기능 구현부터, 상호 간의 피드백을 통해 이겨내는 과정을 거칩니다. 특히 E2E 테스트 도구를 이용하여 사용자 시나리오를 클라이언트에서 테스트하는 동작을 같이 연습할 예정입니다.

🔭 이 강의를 듣고 나면?

  • 테스트 코드 작성에 대한 두려움이 없어집니다.
  • 사용자 시나리오대로 내가 작성한 앱을 반복 가능하게 테스트할 수 있습니다.

이런 점이 달라요!

거꾸로
학습합니다.

우리가 이 강의를 듣는 이유는 바로 테스트 코드를 작성하고 앱의 기능을 검증하기 위해서입니다. 그래서 앱의 기능 검증을 먼저하고, 이론을 나중에 학습합니다.

테스트 코드 작성의
한 사이클을 경험합니다.

메서드나, 사용 방법에 대해 처음부터 자세히 설명하기 보다는 테스트 코드를 작성하는 전체 사이클을 먼저 경험합니다.

테스트 코드 자체에 
집중할 수 있도록.

기능이 이미 구현된 앱이 있습니다. 그래서 여러분은 처음에 테스트 코드 작성 자체에만 집중하시면 됩니다.


직접 만들어보세요! 📚

1. 카운터 앱

📔 저장소: https://github.com/blackcoffee-study/js-counter-test
💻 데모: https://blackcoffee-study.github.io/js-counter-test/

카운터 앱의 더하기, 빼기, 리셋 기능을 테스트 합니다. 기능을 직접 구현하셔도 괜찮고, 테스트 자체에 집중하고 싶다면 기능이 구현된 브랜치에서 테스트만 작성해보세요!

2. 계산기 앱

📔 저장소: https://github.com/blackcoffee-study/js-calculator-test/tree/main
💻 데모: https://blackcoffee-study.github.io/js-calculator-test/

사칙연산과 같은 기초적인 계산기 기능을 테스트 합니다.


질문이 있으신가요? 🙌

Q. 자바스크립트 초보자가 들어도 괜찮나요?

네 물론입니다. 정말 자바스크립트 초보자분들을 위한 간단한 앱을 준비했고, 기능 구현이 아닌 테스트 자체에 집중할 수 있는 브랜치를 따로 마련했으니 참고해주세요!

Q. 참고할만한 테스트 코드가 있을까요?

메이커준의 모든 미션은 자체 스터디에서도 다루는데요. 스터디원 분들이 올리신 PR들을 통해서 다른 분들의 코드도 참고하실 수 있습니다.

Q. 이 강의는 TDD도 배우나요?

TDD(Test Driven Development)를 배우려면 TDD에 대한 철학 이해와, 기능 구현까지 더 많은 부분을 다뤄야 하는데요. 이번 강의는 테스트 코드에 '친숙'해지고, 테스트 코드를 '작성해보는 경험'을 위해 일부러 관련된 내용은 제외하였습니다. TDD와 더 내공있는 테스트 코드에 대한 이야기는 후속 강의에서 만날게요!


메이커준 소개 😆

밝은 에너지로 함께 성장하는 '환경'을 만드는 메이커준입니다.
메이커준에 대한 자세한 소개는 메이커준 프로필 페이지에서 자세히 보실 수 있어요!

🔗 관련 링크 


지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
반복해서 직접 클릭하면서 테스트 하시는 분
내가 만든 애플리케이션에서 어떤 기능들이 동작하는지 구체적인 수치로 표현하고 싶은 분
자바스크립트로 간단한 앱을 만드실 수 있는 분
📚
선수 지식,
필요한가요?
바닐라 자바스크립트

안녕하세요
메이커준 입니다.
메이커준의 썸네일

밝은 에너지로 
함께 성장하는 '환경'을 만듭니다.

 

커리큘럼 총 11 개 ˙ 45분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 오리엔테이션
섹션 1. 카운터 앱을 통해 처음 만들어보는 Cypress E2E 테스트코드
Cypress 설치 및 실행 미리보기 04:09 Counter 앱에서 초기화를 위한 첫번째 테스트 코드 작성하기 미리보기 06:51
카운터 + 기능, - 기능 테스트 코드 작성 05:51
예외 사항 테스트 코드 작성 02:12
reset 기능 테스트 코드 작성 01:12
섹션 2. 계산기로 만들어 보는 E2E 테스트
계산기 앱 테스트 코드 작성 07:49
섹션 3. 테스트에 대한 이해
이 코드는 어떤 동작을 할 수 있을까? 미리보기 01:57
테스트를 작성(해야)하는 이유 03:36
테스트의 종류 03:15
좋은 테스트에 대한 고민 06:12
강의 게시일 : 2021년 12월 03일 (마지막 업데이트일 : 2021년 12월 03일)
수강평 총 38개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.9
38개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
정훈 thumbnail
너므 좋은강의였습니다
2021-12-10
지식공유자메이커준
감사합니다 정훈님 :)
2021-12-13
인프런 라비 thumbnail
테스트 코드 입문자도 쉽고 재미있게 배우고 따라할 수 있으면서도 유익한 강의입니다:)
2021-12-05
지식공유자메이커준
우현님 친절한 리뷰 감사드립니다! 언제든 피드백 주시면 더 좋은 내용으로 업데이트할게요~!
2021-12-13
OKAYOON thumbnail
UI 테스트에 대해 간단히 훑으며 "어렵지 않은 걸?" 하는 자신감을 심어주는 강의인 것 같습니다. 하루만에 (하루도 아니라 1시간 안에 가능) 라는 주제로 진행하는 강의이다보니, 간단히 "이런게 있어~" 정도의 강의라는 것을 알고 들어야할 것 같아요 ㅎ '테스트가 뭐지? 테스트에 대한 두려움을 떨쳐볼까?'라고 생각한다면 도움이 많이 될 듯합니다! 내용이나 목소리, 강의 속도 등이 너무 깔끔해서 다음 강의가 많이 기대됩니다. 좀 더 깊이 있는 강의를 다룬다면 또 수강 할 것 같습니다^^
2022-04-03
정한영 thumbnail
UI테스트에 대해 궁금한 점이 많았는데 이 강의를 통해서 해소할 수 있었던 것 같습니다! 잘 들었습니다~
2021-12-06
지식공유자메이커준
한영님 감사합니다~! UI테스트에 대해 후속 강의에서 더 깊이있게 다룰 수 있도록 해볼게요!
2021-12-13
김동원 thumbnail
테스트 코드에 대해 막연한 두려움이 있었는데 실습을 통해 테스트 코드 작성을 경험할 수 있습니다. 또 테스트의 개념과 필요한 이유를 제대로 배울 수 있었어요. 다음 BDD나 TDD 강의가 얼른 나왔으면 좋겠습니다!
2021-12-12
지식공유자메이커준
열심히 다음 강의 준비하고 있으니, TDD로 프론트엔드 애플리케이션 만드는 경험 같이 진행해볼 수 있도록 할게요!
2021-12-13
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스