강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

Storybooks and UI tests that can be applied directly to practice

How to Use Storybooks A to Z. We show you everything about storybooks.

(5.0) 39 reviews

517 learners

  • jasonkang
storybook
uitest
ui-testing
React
TypeScript
TailwindCSS

Reviews from Early Learners

What you will learn!

  • Component-driven development (CDD) using storybooks

  • Automating UI testing using GitHub Actions and CI

  • Utilizing design systems through npm package distribution

I've heard of storybooks, but how do I use them? 🤔

As user story-based planning gains traction, the diverse stories behind the UI components depicted on screen are also becoming increasingly important. For those curious about what a storybook is and what its features are, here's what we've prepared!

This course covers Storybook installation, how to apply it to React projects, its key features, and how to utilize it. We'll also explore how it can be used in real-world development through various examples. The course is structured to be easily understandable even for first-time Storybook users, allowing you to naturally learn Storybook as you go.

Features of this course

📌 Learn progressively from the simplest components to complex components built from multiple components.

📌 You can experience how development is done in the field through various examples.

📌 We share various ways to utilize storybooks in the field with know-how gained from our experience.

📌 We provide various useful tips for TypeScript and Tailwind that can be used in front-end development.

Stories from those who took the class first 📝

I recommend this to these people

What is a storybook?
In the front-end project
How to use the storybook
A developer in a daze

I'm interested in design systems.
User Experience and Developer Experience
Design system for improvement
The development team I want to build

I'm curious about UI testing.
Automate UI testing using CI/CD and review
Developers curious about component validation

After class

  • Understand the basic concepts and usage of storybooks and apply them to your projects.


  • You can develop components with Web Vitals in mind.

  • You can develop components more efficiently by using the Storybook decorator.

  • UI test automation can help ensure consistency in your design system.

  • You can distribute the design system as an npm package for reuse.

Learn about these things.

Chromatic Dashboard: UI Review

What if a new component is added to the design system?
Integrate GitHub with Chromatic to create a new Pull
Automatically generates a UI Review whenever a Request is created.

Storybook: UI Component Validation

Check out the UI components developed in the storybook
How components appear on the screen according to different stories
You can check if it is drawn

Story verification through interaction testing

How do we help users use our services?
Report on the use of the developed components and tell the story
can be verified

Design system using npm package

Looking to start a new project? Design
Deploy the system as an npm package and npm install
You can easily reuse components through

Who created this course

Things to note before taking the course

Practice environment

  • This explanation is based on MacOS, but there are no operating system restrictions.

  • If you have experience setting up a development environment with React, you can follow along without any separate environment settings.

Learning Materials

  • Notion Link

  • GitHub source code

Player Knowledge and Precautions

  • Anyone who has ever created a component with React

  • Even those without team project experience can easily follow along.


Recommended for
these people

Who is this course right for?

  • Developers who want to use storybooks

  • Developers who want to try component-driven development

  • A development team that wants to build a design system

Need to know before starting?

  • React

  • TypeScript

  • HTML

  • CSS

Hello
This is

12,080

Learners

629

Reviews

348

Answers

4.9

Rating

9

Courses

Curriculum

All

24 lectures ∙ (2hr 43min)

Published: 
Last updated: 

Reviews

All

39 reviews

5.0

39 reviews

  • 안수빈님의 프로필 이미지
    안수빈

    Reviews 4

    Average Rating 5.0

    5

    18% enrolled

    최근 사내 디자인시스템 구축에 대한 욕구가 늘어나 강의를 수강하게 되었습니다. 강의를 듣다보면, 디자인 시스템에 대한 이해 뿐만 아니라, 강사님의 개발에 대한 전반적인 내공을 느낄 수 있어요!! 방향성을 잃은 요즘 강의 외에도 많은 것을 얻어갈 수 있어 좋았습니다.

    • 강병진
      Instructor

      친절한 수강평 감사합니다 수빈님! 강의 들으면서 이해가 되지 않는 부분이나 궁금한 점이 있으시면 언제든 질문으로 올려주세요~ 그리고 멘토링 이벤트도 계속 진행중이니 커리어 전반적으로 궁금한 점이 있으시거나 상담이 필요하시면 만나서 이야기하지 않으셔도 되니 구글폼으로 질문을 보내주세요. 제가 도와드릴 수 있는 선에서 최대한 답변 드리도록 하겠습니다.

  • 참참나무님의 프로필 이미지
    참참나무

    Reviews 2

    Average Rating 5.0

    5

    33% enrolled

    • 수병수병님의 프로필 이미지
      수병수병

      Reviews 4

      Average Rating 5.0

      5

      92% enrolled

      공식 문서를 보면서 스토리북을 공부했지만 너무 많은 정보와 종종 문서와 맞지 않아 에러가 나는 부분이 있어 정리된 강의를 찾게 되었습니다. 실무에서 꼭 필요할만한 내용으로 간결하게 정리해주셔서 보기 너무 편했습니다. 다음에도 좋은 강의 부탁드리겠습니다.

      • 강병진
        Instructor

        좋은 후기 정말 감사합니다! 😊 공식 문서만으로는 어려움을 느끼실 수 있는데, 강의가 도움이 되었다니 정말 기쁩니다. 실무에 바로 적용할 수 있는 내용으로 계속해서 유익한 강의 만들어가겠습니다!

    • 정호연님의 프로필 이미지
      정호연

      Reviews 56

      Average Rating 5.0

      5

      32% enrolled

      • 원일님의 프로필 이미지
        원일

        Reviews 2

        Average Rating 5.0

        5

        20% enrolled

        최근 요구역량에 storybook가 많이 보여서 수강했습니다. 디자인 시스템을 적용하는데 기본적인 지식을 알기쉽게 설명해줘서 좋아요:)

        • 강병진
          Instructor

          좋은 피드백 감사합니다! 얼마전에 진행했던 멘토링에서 신입 프론트엔드 개발자분을 만났는데 첫 회사 인터뷰 할 때 스토리북 경험을 좋게 봐주셨다고 하더라구요. 좋은 결과 있으셨으면 좋겠습니다!

      $46.20

      jasonkang's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!