강의

N
챌린지

멘토링

N
클립

커뮤니티

개발 · 프로그래밍

/

웹 개발

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

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

(5.0) 수강평 5개

수강생 35명

난이도 초급

수강기한 무제한

  • 심플코딩
실습 중심
실습 중심
초보
초보
알기쉬운설명
알기쉬운설명
Jest
Jest
playwright
playwright
react-testing-library
react-testing-library
unit-test
unit-test
e2e
e2e
실습 중심
실습 중심
초보
초보
알기쉬운설명
알기쉬운설명
Jest
Jest
playwright
playwright
react-testing-library
react-testing-library
unit-test
unit-test
e2e
e2e

먼저 경험한 수강생들의 후기

먼저 경험한 수강생들의 후기

5.0

5.0

yjcoyjco

32% 수강 후 작성

막막하기만 했던 테스트코드에 대해 처음부터 하나씩, 이해가 쏙쏙 되게 설명해주십니다! 공고 필수요건이나 우대사항에서 테스트코드가 심심치 않게 보이더라구요. 강의 보고 따라하면서 익숙해지게 만들고, 실사용까지 해보면 취업 경쟁력도 높아질 것 같습니다.

5.0

hg354323

100% 수강 후 작성

쉽게 이해할 수 있어서 좋았습니다. 강의 예제에서 React Query나 커스텀 훅을 함께 다뤄주셔서 도움이 됐고, 실제 프로젝트에도 바로 적용해볼 수 있을 것 같아요. 전반적으로 설명을 쉽게 해주셔서 끝까지 잘 따라갈 수 있었습니다. 좋은 강의 감사합니다!

5.0

fabiola

35% 수강 후 작성

테스트 코드의 중요성을 몰랐거든요. 실무에서 경험해보니 휴먼이슈가 생각보다 많습니다... 제가 놓치는 부분도 많았고... 그래서 테스트 코드의 중요성이 절실했는데 이 강의에서 쉽고 편하게 시도해볼 수 있을 것 같아 큰 도움됐습니다. 거두절미하고 바로 핵심과 본론만 알려주셔서 너무 좋았습니다 !

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

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

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


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

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



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

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

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

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


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

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

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

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


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

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



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

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

💡 왜 하는지부터 확실히!

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

스크린샷 2025-12-02 오전 10.30.52

테스트 소개 강의 예시

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

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

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


스크린샷 2025-12-02 오전 10.35.19

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

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

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

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

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

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

스크린샷 2025-12-02 오전 10.43.27

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

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

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

스크린샷 2025-12-02 오전 10.46.26

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

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

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

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


스크린샷 2025-12-02 오전 10.50.46

Playwright 맛보기 강의 예시

⚠️ 수강 전 참고 사항

실습 환경

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

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


선수 지식 및 유의사항

  • 기초 React 지식이 필요합니다. (state, 컴포넌트, context 등)

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


학습 자료

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

이런 분들께
추천드려요

학습 대상은
누구일까요?

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

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

선수 지식,
필요할까요?

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

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

안녕하세요
입니다.

2,611

명

수강생

175

개

수강평

1

개

답변

4.9

점

강의 평점

3

개

강의

커리큘럼

전체

31개 ∙ (6시간 52분)

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

수강평

전체

5개

5.0

5개의 수강평

  • yjcoyjco님의 프로필 이미지
    yjcoyjco

    수강평 3

    ∙

    평균 평점 5.0

    5

    32% 수강 후 작성

    막막하기만 했던 테스트코드에 대해 처음부터 하나씩, 이해가 쏙쏙 되게 설명해주십니다! 공고 필수요건이나 우대사항에서 테스트코드가 심심치 않게 보이더라구요. 강의 보고 따라하면서 익숙해지게 만들고, 실사용까지 해보면 취업 경쟁력도 높아질 것 같습니다.

    • hg354323님의 프로필 이미지
      hg354323

      수강평 1

      ∙

      평균 평점 5.0

      수정됨

      5

      100% 수강 후 작성

      쉽게 이해할 수 있어서 좋았습니다. 강의 예제에서 React Query나 커스텀 훅을 함께 다뤄주셔서 도움이 됐고, 실제 프로젝트에도 바로 적용해볼 수 있을 것 같아요. 전반적으로 설명을 쉽게 해주셔서 끝까지 잘 따라갈 수 있었습니다. 좋은 강의 감사합니다!

      • minjun kim님의 프로필 이미지
        minjun kim

        수강평 1

        ∙

        평균 평점 5.0

        5

        32% 수강 후 작성

        • fabiola님의 프로필 이미지
          fabiola

          수강평 2

          ∙

          평균 평점 5.0

          5

          35% 수강 후 작성

          테스트 코드의 중요성을 몰랐거든요. 실무에서 경험해보니 휴먼이슈가 생각보다 많습니다... 제가 놓치는 부분도 많았고... 그래서 테스트 코드의 중요성이 절실했는데 이 강의에서 쉽고 편하게 시도해볼 수 있을 것 같아 큰 도움됐습니다. 거두절미하고 바로 핵심과 본론만 알려주셔서 너무 좋았습니다 !

          • suk3952111님의 프로필 이미지
            suk3952111

            수강평 2

            ∙

            평균 평점 5.0

            수정됨

            5

            100% 수강 후 작성

            테스트 코드 한 줄도 못 쓰던 상태였는데, 이제는 MSW랑 Playwright까지 다뤄보게 됐네요. 이론만 설명하지 않고 실전 예시로 바로 보여주니까 이해가 훨씬 빠르네요. 저 같은 주니어 개발자분들께 적극 추천합니다 !!

            ₩33,000

            심플코딩님의 다른 강의

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

            쉬운 용어로 배우는 Git & Github 첫걸음 - 협업까지 마스터하기강의 썸네일

            쉬운 용어로 배우는 Git & Github 첫걸음 - 협업까지 마스터하기

            심플코딩

            쉬운 용어와 자세한 그림으로 배우는 Git과 Github 강의입니다. 복잡한 개념을 쉬운 용어로 풀어내고, 실제 협업 프로젝트에 적용하는 방법까지 배워보세요.

            입문

            입문

            Git, GitHub

            쉬운 용어로 배우는 Git & Github 첫걸음 - 협업까지 마스터하기강의 썸네일

            쉬운 용어로 배우는 Git & Github 첫걸음 - 협업까지 마스터하기

            심플코딩

            떠먹여주는 리액트 기초 course1강의 썸네일

            떠먹여주는 리액트 기초 course1

            심플코딩

            그림으로 배우며 리액트의 기초 개념을 명확하게 이해할 수 있는 강의

            입문

            입문

            React, react.js, frontend

            떠먹여주는 리액트 기초 course1강의 썸네일

            떠먹여주는 리액트 기초 course1

            심플코딩

            비슷한 강의

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

            2시간으로 끝내는 프론트엔드 테스트 기본기강의 썸네일

            2시간으로 끝내는 프론트엔드 테스트 기본기

            제이쓴

            테스트코드! 어디서부터 시작해야할지 막막한 분들을 위해 준비했어요. 테스트 작성부터, 자동화를 통한 배포까지 한번에!

            초급

            초급

            React, Cypress, Jest

            2시간으로 끝내는 프론트엔드 테스트 기본기강의 썸네일

            2시간으로 끝내는 프론트엔드 테스트 기본기

            제이쓴

            실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트강의 썸네일

            실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트

            코드 조커, 오프

            이 강의를 통해 전반적인 프런트엔드 테스트 종류를 파악하고, 상황에 맞는 적절한 테스트 선택을 통해 신뢰감 있는 테스트를 작성하는 방법을 배웁니다.

            초급

            초급

            소프트웨어 테스트, JavaScript, e2e

            실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트강의 썸네일

            실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트

            코드 조커, 오프

            따라하며 배우는 리액트 테스트 [2023.11 업데이트]강의 썸네일

            따라하며 배우는 리액트 테스트 [2023.11 업데이트]

            John Ahn

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

            초급

            초급

            React, React Context, 웹앱

            따라하며 배우는 리액트 테스트 [2023.11 업데이트]강의 썸네일

            따라하며 배우는 리액트 테스트 [2023.11 업데이트]

            John Ahn

            따라하며 배우는 TDD 개발 [2023.11 업데이트]강의 썸네일

            따라하며 배우는 TDD 개발 [2023.11 업데이트]

            John Ahn

            이 강의를 통해서 테스트 주도 개발(TDD)을 이용하여 Node.js 어플리케이션을 만들어 봅니다.

            초급

            초급

            TDD, Node.js, Express

            따라하며 배우는 TDD 개발 [2023.11 업데이트]강의 썸네일

            따라하며 배우는 TDD 개발 [2023.11 업데이트]

            John Ahn

            테스트 with Jest: 제로초에게 제대로 배우기강의 썸네일

            테스트 with Jest: 제로초에게 제대로 배우기

            제로초(조현영)

            본 강의에서는 테스트가 필요한 경우와 테스트를 할 때의 장점을 Jest 프레임워크를 통해 보여드립니다. 리액트, Express 등에 유닛테스트, 통합테스트를 적용해봅니다.

            초급

            초급

            소프트웨어 테스트, Jest, react-testing-library

            테스트 with Jest: 제로초에게 제대로 배우기강의 썸네일

            테스트 with Jest: 제로초에게 제대로 배우기

            제로초(조현영)

            Playwright 기초 - 기초적인 활용법과 핵심 원리강의 썸네일

            Playwright 기초 - 기초적인 활용법과 핵심 원리

            duckyoung lee

            E2E테스트 프레임워크인 Playwright의 기초적인 활용법과 핵심 원리를 다룹니다.

            입문

            입문

            e2e, 소프트웨어 테스트, playwright

            Playwright 기초 - 기초적인 활용법과 핵심 원리강의 썸네일

            Playwright 기초 - 기초적인 활용법과 핵심 원리

            duckyoung lee