프론트엔드는 사용자와의 접점이 이루어지는 곳이기 때문에 개발자의 입장이 아닌, 사용자의 입장에서의 테스트가 매우 중요합니다. E2E테스트를 통해 사용자 시나리오가 정상적으로 동작하는지 검증해보고 내 코드에 대해 두려움에서 자신감을 가지는 경험을 해보세요!
이런 걸
배워요!
Cypress
프론트엔드 E2E 테스트
프론트엔드의 테스트 종류
코드 작성의 두려움, E2E 테스트로 떨쳐내보세요!
😅 이 함수를 제거해도 괜찮을까?
🧐 반복되는 기능 테스트를 빠르게 할 순 없을까?
🤔 내 코드를 어떻게 검증할까?
개발자는 작성한 프로그램의 퀄리티에 대한 책임이 있습니다. 그래서 QA에 기능 테스트를 넘기기 전 기본 요구사항을 모두 만족하는지에 대한 검증은 개발자 스스로 할 수 있어야 합니다. 신뢰할 수 있는 자동화 테스트를 통해 자신의 코드에 자신감을 불어넣는 경험을 해보세요!
용기는 두려움이 없는 상태가 아니다.
진정한 용기란 두려움에도 불구하고 행동하는 상태이다.
- 괴테
프론트엔드 테스트코드를 짜야한다는 두려움을, 자신감으로 바꾸는 경험을 '함께' 만들어 나갑니다.
기본적인 자바스크립트 개념을 알고 있는 분
테스트 코드에 대한 갈증이 있는 분
처음 프론트엔드 학습을 하다 보면 화면 UI 기능 개발에 집중하느라, 테스트 코드에 대한 막연한 두려움이 있는 경우가 있습니다. 그러한 두려움을 작은 단위의 기능 구현부터, 상호 간의 피드백을 통해 이겨내는 과정을 거칩니다. 특히 E2E 테스트 도구를 이용하여 사용자 시나리오를 클라이언트에서 테스트하는 동작을 같이 연습할 예정입니다.
우리가 이 강의를 듣는 이유는 바로 테스트 코드를 작성하고 앱의 기능을 검증하기 위해서입니다. 그래서 앱의 기능 검증을 먼저하고, 이론을 나중에 학습합니다.
메서드나, 사용 방법에 대해 처음부터 자세히 설명하기 보다는 테스트 코드를 작성하는 전체 사이클을 먼저 경험합니다.
기능이 이미 구현된 앱이 있습니다. 그래서 여러분은 처음에 테스트 코드 작성 자체에만 집중하시면 됩니다.
📔 저장소: https://github.com/blackcoffee-study/js-counter-test
💻 데모: https://blackcoffee-study.github.io/js-counter-test/
카운터 앱의 더하기, 빼기, 리셋 기능을 테스트 합니다. 기능을 직접 구현하셔도 괜찮고, 테스트 자체에 집중하고 싶다면 기능이 구현된 브랜치에서 테스트만 작성해보세요!
📔 저장소: 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분)