강의

멘토링

커뮤니티

NEW
개발 · 프로그래밍

/

웹 개발

바로 쓰는 핵심 프론트엔드 테스트

저는 항상 '도대체 왜 프론트엔드 테스트를 해야하지?'라는 의문을 가지고 있었습니다. 그리고 의문을 가지고 테스트를 기계적으로 작성했죠. 하지만 여러분들은 '왜 테스트를 작성하는지' 그리고 '상황에 따라 어떻게 작성해야 하는지'를 알게 될 겁니다.

3명 이 수강하고 있어요.

  • 심플코딩
실습 중심
초보
알기쉬운설명
Jestplaywrightreact-testing-libraryunit-teste2e

수강 후 이런걸 얻을 수 있어요

  • 막막했던 프론트엔드 테스트를 시작할 수 있게 됩니다.

  • 실전에서 테스트를 적용할 수 있게 됩니다.


[바로 쓰는 핵심 프론트엔드 테스트]

테스트...? 이걸 도대체 왜 하는거야...?



🤔 이런 고민을 해본 적 있으신가요?

이 강의를 통해 아래 모든 문제점을 해결하고, 테스트 코드를 자신 있게 작성할 수 있게 됩니다!

🤷‍♂️ "테스트... 이걸 왜 해야 하죠?"

코드가 잘 작동하는지 눈으로 확인하면 되지, 굳이 시간 들여 코드를 또 짜야 하는 이유를 모르겠어요.


😱 "테스트가 갑자기 복잡해졌어요!"

Context API, React Query 같은 상태 관리 라이브러리를 쓰니 테스트 환경 설정부터 막힙니다.

🤦‍♀️ "어디서부터 어떻게 시작해야 할지..."

테스트 코드 작성법을 아예 몰라서 한 줄도 시작하기 어렵습니다. ㅜ_ㅠ


😳 "AI가 짜준 테스트, 고칠 수가 없어요."

AI의 도움은 받았지만, 코드를 이해하지 못하니 수정이 불가능하고 결국 무용지물이 됩니다.



✅ 실무 핵심에 집중한 커리큘럼

이 강의는 단순히 문법만 나열하지 않습니다. "실제로 사용했던 것들 위주"로 구성된 커리큘럼을 통해 현업에서 바로 써먹을 수 있는 핵심 지식만을 배웁니다.

💡 왜 하는지부터 확실히!

컴포넌트 테스트가 프로젝트의 안정성개발 및 QA 속도에 어떻게 기여하는지 명확히 이해하고 시작합니다.

테스트 소개 강의 예시

🚀 어렵지 않은 기초 다지기 (Jest & React Testing Library)

  • Jest 프레임워크의 기초 문법을 아주 천천히 학습하여, 생각보다 테스트 코드가 어렵지 않다는 것을 느끼게 해 드립니다.

  • 가장 실용적인 React Testing Library (RTL) 기반으로 테스트 작성의 기본 원칙을 배웁니다.


테스트 기본 사용법 강의 예시

🛠️ 실전 핵심 예시 완벽 정복

다양한 실무 예시를 통해 바로 적용 가능한 테스트 작성법을 배웁니다

  • 인풋 컴포넌트의 사용자 상호작용 테스트

  • 로그인 컴포넌트의 로직 테스트

  • 커스텀 훅(Custom Hooks)의 비즈니스 로직 테스트

로그인 컴포넌트 테스트 강의 예시

🧩 복잡한 상황 대처 노하우 (Context, React Query 등)

Context APIReact Query와 같은 복잡한 환경에서 테스트 환경을 설정하고 코드를 작성하는 실전 노하우를 배웁니다. (Mocking, Provider 설정 등)

React Query가 포함된 컴포넌트 테스트 강의 예시

🌐 MSW와 Playwright로 완성하는 테스트 파이프라인

  • MSW로 실제 API 호출 없이 더 빠르고 편리하게 테스트 및 개발 환경 구축합니다.

  • Playwright로 사용자의 실제 사용 흐름을 따라 시나리오 전체를 자동 테스트하여 최종 안정성 확보합니다.


Playwright 맛보기 강의 예시

⚠️ 수강 전 참고 사항

실습 환경
  • Node.js 환경이 필요합니다.

  • 강의자의 운영체제는 MacOS 이며, Windows 사용자도 상관없습니다.


선수 지식 및 유의사항
  • 기초 React 지식이 필요합니다. (state, 컴포넌트, context 등)

  • Next.js의 App Router 버전의 기초 지식이 필요하나 파일 기반 라우팅 시스템 정도만 알아도 충분합니다.


학습 자료

  • 강의 자료는 두 번째 강의에서 Notion 링크로 제공합니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 테스트 코드를 시작조차 하지 못하는 주니어 개발자

  • 왜 테스트 코드를 짜야하는지 모르겠는 개발자

선수 지식,
필요할까요?

  • Javascript, Typescript, React, Next.js 의 기초 지식이 필요합니다.

  • Next.js는 파일 별로 라우팅이 된다는 점만 알고 계시면 됩니다.

안녕하세요
입니다.

2,427

수강생

154

수강평

1

답변

4.9

강의 평점

3

강의

커리큘럼

전체

31개 ∙ (6시간 51분)

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

수강평

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

얼리버드 할인 중

월 ₩101,554

5개월 할부 시

29%

₩33,000

₩507,768

심플코딩님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!