인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST
개발 · 프로그래밍

/

프론트엔드

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

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

(4.9) 수강평 40개

수강생 530명

ReactCypressJestChatGPTstorybook
Thumbnail

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

이런 걸 배울 수 있어요

  • jest, cypress를 활용한 테스트코드 작성법

  • 컴포넌트 개발에서 storybook 활용법

  • 테스트 자동화를 통한 배포

  • ChatGPT를 활용한 테스트코드 작성방법

테스트 코드를 작성하고 싶은 프론트엔드 개발자를 위한 강의!

채용공고에서 봤던 "테스트 코드 작성" 이제 여러분도 할 수 있습니다!

이런 분들께 추천해요 👍

테스트 경험이 없는 개발자

테스트를 작성하고 싶은데, 무엇을, 어떻게, 왜 테스트할지 궁금한 개발자들을 위해 준비했습니다

테스트를 잘 하고 있는지 궁금한 개발자

테스트를 작성하고 서비스를 운영 중인데, 시니어가 없어서 작성한 테스트가 충분히 효과적인지 불확실한 개발자들을 위해 준비했습니다

먼저 수강하신 분들의 이야기 📝

수강 후 여러분은? 😎

  • 프론트엔드에서 어떤 점을 중점적으로 테스트하는지 이해할 수 있습니다.

  • jest, cypress를 사용해서 테스트 코드를 작성할 수 있습니다.

  • 프론트엔드 개발에서 storybook을 활용하는 방법을 알 수 있습니다

  • 테스트 자동화 파이프라인을 구축할 수 있습니다

이런 내용을 배워요 🏫

jest, cypress 등 테스트 도구 활용방법

유닛테스트, 통합테스트, e2e테스트에 맞는 테스트 도구를 활용해서 테스트코드를 작성하는 방법을 배웁니다. GitHub repo로 제공하는 소스코드를 활용해서 강의를 따라하며 테스트코드를 작성할 수 있습니다

Screenshot 2023-11-27 at 4.11 1

cypress 코드작성

ChatGPT를 활용한 프론트엔드 개발

요즘 힙한 ChatGPT! 어떻게하면 인공지능을 활용해서 수월하게 프론트엔드 개발을 할 수 있을까요? ChatGPT를 활용할 수 있는 prompt를 작성하는 방법을 배웁니다

image 1

ChatGPT

테스트 자동화를 통한 CI/CD

테스트 자동화를 접목한 CI/CD를 활용한 배포 파이프라인을 통해 안정적으로 서비스를 운영할 수 있는 방법을 배웁니다

DALL·E 2023-11-27 16.16.39 - A detailed and informative diagram illustrating continuous integration and continuous delivery in computer programming 1

CI/CD

이 강의를 만든 사람 👨‍🦱

궁금한 점이 있나요?

Q. 테스트코드 작성 경험이 없는데 이 강의를 들어도 될까요?

  • 테스트 코드에 대한 기본적인 이해가 없는 분들도 충분히 따라올 수 있도록 설계되었습니다.

  • 강의 초반에는 테스트 코드의 기본 개념과 작성 방법에 대해 자세히 설명하며, 점차적으로 리액트에 특화된 테스트 방법론으로 나아갑니다.

  • 따라서 테스트 코드 작성 경험이 없더라도 문제없이 시작할 수 있습니다.

Q. 이 강의에서는 어떤 테스트 도구나 라이브러리를 사용하나요?

  • Jest와 Cypress를 사용합니다.

  • Jest는 자바스크립트 환경에서 가장 인기 있는 테스트 프레임워크 중 하나로, 유닛 테스트와 통합 테스트를 위해 사용됩니다.

  • 반면, Cypress는 e2e 테스트에 특화된 도구로, 사용자의 관점에서 웹 애플리케이션의 전체 흐름을 테스트하는 데 매우 유용합니다.

  • 이 두 도구를 활용함으로써, 다양한 유형의 테스트를 경험하고, 실제 프로젝트에서 테스트 전략을 구축하는 데 필요한 실질적인 지식과 기술을 습득할 수 있습니다.

Q. 강의는 어떤 형식으로 진행되나요? 실습 위주인가요, 아니면 이론 설명이 많나요?

  • 주로 실습 위주로 진행됩니다.

  • 테스트 코드에 관한 전반적인 이론은 강의 초반에 간략하게 설명하고, 이후에는 다양한 실습을 통해 직접 테스트 코드를 작성해보면서 학습합니다.

  • 실습 과정에서 필요한 보충 설명이 필요한 경우, 실제 코드를 작성하면서 이론을 더 상세하게 다룹니다.

수강 전 참고 사항 📢

학습 자료

  • 이론 설명을 담은 Notion 페이지

  • 소스코드 GitHub 레포

선수 지식 및 유의사항

  • React를 사용한 개발경험

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 테스트 작성 경험이 없는 신입/주니어 개발자

  • 테스트를 제대로 작성했는지 확인하고 싶은 주니어 개발자

선수 지식,
필요할까요?

  • React

안녕하세요
강병진입니다.

4,804

명

수강생

306

개

수강평

254

개

답변

4.9

점

강의 평점

8

개

강의

더보기

커리큘럼

전체

37개 ∙ (1시간 48분)

해당 강의에서 제공:

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

수강평

전체

40개

4.9

40개의 수강평

  • 서랑님의 프로필 이미지
    서랑

    수강평 6

    ∙

    평균 평점 4.8

    수정됨

    4

    100% 수강 후 작성

    • 강병진
      지식공유자

      안녕하세요! 피드백 감사합니다. 혹시 보강 되었으면 좋겠다고 생각하셨던 부분이 있으실까요?

    • 서랑

      일단 짧은 시간 안에 프론트엔드 테스트 기술을 간단하게 학습해볼 수 있었던 좋은 강의였다고 생각합니다! 다만 아쉬운 점이 있었다면, 새로운 명령어가 사용될 때 해당 명령어에 대한 설명이 부족하다 느꼈던 적이 종종 있었던 것 같습니다. 실습 위주로 설명이 이루어지다 보니 어떤 상황에서 이 명령어를 사용하면 되는구나 까지는 이해가 되지만, 이 명령어가 어떤 일을 하는 명령어고 언제 사용해야 하는지, 왜 이 명령어를 사용하고 있는지에 대한 이해가 조금 부족한 채로 실습이 진행되었던 부분이 가끔 있었습니다. 또 그 안에 매개변수에는 어떤 다른 값이 들어갈 수 있는지 등에 대한 설명이 더 있었다면, 이후 실제 프로젝트에서 직접 테스트 코드를 작성해야 할 때 더 깊은 이해를 가지고 배운 점을 적용할 수 있을 것 같다는 생각이 들었던 것 같습니다. (예를 들면 cypress에서의 invoke나 should의 사용 등) 그래도 전반적인 프론트엔드 테스트의 개념과 그에 필요한 도구들의 사용을 빠르게 배워볼 수 있는 유용한 강의였습니다. 좋은 강의 감사합니다!

    • 강병진
      지식공유자

      바쁘신와중에 답변 감사합니다! 다음 강의에는 조금 더 세밀하게 신경써서 준비해보겠습니다 🙇‍♂️

  • ehdns1133님의 프로필 이미지
    ehdns1133

    수강평 5

    ∙

    평균 평점 3.6

    3

    62% 수강 후 작성

    • 노종열님의 프로필 이미지
      노종열

      수강평 2

      ∙

      평균 평점 5.0

      5

      24% 수강 후 작성

      1년차 프론트엔드 웹 개발자입니다. 사내 프로젝트 리뉴얼로 Testing Library에 신경 쓸 시간이 없어 따로 공부하지 못했는데, 마침 좋은 강의를 발견했습니다. 사전 지식이 없이도 알아 듣기 쉽게 설명해주시고 잘 정리된 문서까지 제공해주시는 점에서 해당 강의의 본질인 '테스트 기본기'를 확실히 알려주시는 거 같습니다.

      • 강병진
        지식공유자

        노종열님 감사합니다! 시작하시는 분들을 위해 기본적인 내용을 잘 녹여내려고 노력했습니다. 계속 공부하시다가 궁금한 점이 있으시면 질문에 올려주세요~

    • 채채님의 프로필 이미지
      채채

      수강평 6

      ∙

      평균 평점 5.0

      5

      62% 수강 후 작성

      • hwiyu25님의 프로필 이미지
        hwiyu25

        수강평 1

        ∙

        평균 평점 5.0

        5

        100% 수강 후 작성

        현업에 있으면서도 테스트를 하는 환경에 있지 않아서 굉장히 마음의 짐처럼 남아있는 주제였습니다. 실제로 잘 사용하는 것에는 또 많은 과제가 남아있겠지만 이 강의를 통해 알게된 지식들을 잘 활용할 수 있을 것 같습니다. 감사합니다:)

        • 강병진
          지식공유자

          강의로 기초를 잘 닦으셨으니 이제 계속 발전시켜 나가시면 좋은 테스트 커버리지를 달성하실 수 있을거라고 생각합니다. 응원합니다!

      강병진님의 다른 강의

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

      RAG를 활용한 LLM Application 개발 (feat. LangChain)강의 썸네일

      RAG를 활용한 LLM Application 개발 (feat. LangChain)

      강병진

      실리콘밸리 GenAI 해커톤 우승자에게 배우는 RAG. 현업 노하우를 가득 담았습니다

      초급

      초급

      LLM, RAG, LangChain

      LangGraph를 활용한 AI Agent 개발 (feat. MCP)강의 썸네일

      LangGraph를 활용한 AI Agent 개발 (feat. MCP)

      강병진

      대기업 AI Agent 담당자의 노하우를 가득 담은 LangGraph. 현업에서 얻어맞으면서 습득한 지식을 전달드립니다

      초급

      초급

      프롬프트엔지니어링, LLM, AI Agent

      한시간으로 끝내는 LangChain 기본기강의 썸네일

      한시간으로 끝내는 LangChain 기본기

      강병진

      커피 한잔 가격으로 즐기는(?) 공식문서에서 핵심만 뽑아온 LangChain 기본 강의입니다. 본격적인 개발에 들어가기 전 LangChain 문법과 친해지세요!

      입문

      입문

      LLM, LangChain, 프롬프트엔지니어링

      실무에 바로 적용하는 스토리북과 UI 테스트강의 썸네일

      실무에 바로 적용하는 스토리북과 UI 테스트

      강병진

      스토리북 활용법 A to Z. 스토리북의 모든것을 보여드립니다

      초급

      초급

      storybook, ui-testing, React

      실무에 바로 적용하는 AWS 배포강의 썸네일

      실무에 바로 적용하는 AWS 배포

      강병진

      AWS로 서비스를 배포/운영하고싶은 분들을 위해 준비했습니다. 도메인 설정부터 도커와 서버리스까지!

      초급

      초급

      AWS, Docker, aws-ecs

      Flutter로 만드는 LLM 챗봇 (feat. Gemini)강의 썸네일

      Flutter로 만드는 LLM 챗봇 (feat. Gemini)

      강병진

      Flutter가 처음이신가요? Flutter Contributor가 처음부터 하나씩 소개해드립니다! Gemini를 활용한 AI 프로젝트로 Flutter 개발을 시작해보세요

      초급

      초급

      Flutter, 챗봇, gemini

      비슷한 강의

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

      [코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스강의 썸네일

      [코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

      코드캠프

      1년간 300여명의 개발자를 배출한 ‘진짜’ 부트캠프의 고농축 커리큘럼 입니다. 이 강의 하나로 여러분은 현업 주니어 개발자 수준까지 성장 가능하며, 프론트엔드 기술스택의 활용 능력과 지식을 얻게 될거에요. 누구나 사회적, 경제적, 교육적 배경에 상관없이 커리어를 쌓을 수 있도록, [인프런X코드캠프]가 준비했습니다 :)

      입문

      입문

      React, Next.js, GraphQL

      실전 프론트엔드 테스트 시작하기강의 썸네일

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

      장기효(캡틴판교)

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

      초급

      초급

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

      [리뉴얼] React로 NodeBird SNS 만들기강의 썸네일

      [리뉴얼] React로 NodeBird SNS 만들기

      제로초(조현영)

      리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

      중급이상

      중급이상

      React, Redux, Node.js

      스토리북 & 자동화 테스트와 함께 하는 컴포넌트 주도 프론트엔드 개발강의 썸네일

      스토리북 & 자동화 테스트와 함께 하는 컴포넌트 주도 프론트엔드 개발

      인프런

      입문

      입문

      frontend, 소프트웨어 테스트, storybook

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

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

      John Ahn

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

      초급

      초급

      TDD, Node.js, Express

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

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

      제로초(조현영)

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

      초급

      초급

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

      코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)강의 썸네일

      코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)

      이동훈

      MERN stack (feat. TypeScript) 을 활용한 지도 서비스를 처음부터 끝까지 만들어보는 강의입니다. API 공식 문서를 보며 차근차근 하나씩 만들어 봅시다.

      초급

      초급

      MongoDB, Express, React

      [2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스강의 썸네일

      [2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

      정현우

      아이디어는 있는데 앱을 어떻게 개발해야할지 몰랐던 분들, 실전 프로젝트 4개를 만들어보면서 앱 개발을 마스터해봅시다!

      입문

      입문

      JavaScript, React, Node.js

      React Native with Expo: 제로초에게 제대로 배우기강의 썸네일

      React Native with Expo: 제로초에게 제대로 배우기

      제로초(조현영)

      웹 개발자가(특히 React 개발자라면) 정말 손쉽게 앱을 출시할 수 있는 시대가 되었습니다. Expo와 함께라면 더더욱 빠르게 Android와 iOS 앱 모두를 출시할 수 있습니다. Expo를 통해 빠르게 앱까지 출시할 수 있는 개발자가 되어봅시다.

      초급

      초급

      React, React Native, 하이브리드 앱

      찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)강의 썸네일

      찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

      ludgi

      찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

      중급이상

      중급이상

      Next.js, React, GraphQL

      웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

      웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

      코드캠프

      웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

      초급

      초급

      React, Next.js, expo

      따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기강의 썸네일

      따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

      John Ahn

      이 강의를 통해서 Google에서 제공하는 API를 사용해서 챗봇을 만들어 볼 수 있습니다.

      초급

      초급

      React, Node.js

      타입스크립트 코리아 : React with TypeScript 세미나강의 썸네일

      타입스크립트 코리아 : React with TypeScript 세미나

      이웅재

      타입스크립트와 리액트 관련 강좌입니다.

      중급이상

      중급이상

      React, TypeScript

      ₩33,000