강의

멘토링

로드맵

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

528 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,738

Learners

694

Reviews

376

Answers

4.9

Rating

9

Courses

Curriculum

All

24 lectures ∙ (2hr 43min)

Published: 
Last updated: 

Reviews

All

39 reviews

5.0

39 reviews

  • koreantie3931님의 프로필 이미지
    koreantie3931

    Reviews 4

    Average Rating 5.0

    5

    18% enrolled

    Recently, the desire to build an in-house design system has increased, so I took the course. While listening to the course, I was able to feel not only the understanding of the design system, but also the instructor's overall development skills!! I was able to gain a lot of things in addition to the course, which I lost my direction for these days.

    • jasonkang
      Instructor

      Thank you for your kind review, Subin! If you have any questions or concerns while taking the class, please feel free to ask questions at any time. Also, the mentoring event is ongoing, so if you have any questions about your career in general or need advice, you don’t have to meet in person to talk, so please send me a question via Google Form. I will do my best to answer to the best of my ability.

  • dudqja36748176님의 프로필 이미지
    dudqja36748176

    Reviews 3

    Average Rating 5.0

    5

    33% enrolled

    • ybs6803181016님의 프로필 이미지
      ybs6803181016

      Reviews 4

      Average Rating 5.0

      5

      92% enrolled

      I studied Storybook by looking at the official documentation, but there was too much information and sometimes errors occurred due to parts that didn't match the documentation, so I ended up looking for an organized lecture. It was very convenient to view because you organized it concisely with content that would be essential for practical work. I would appreciate good lectures next time as well.

      • jasonkang
        Instructor

        Thank you so much for the great review! 😊 It's understandable to find official documentation challenging, so I'm truly glad the lecture was helpful. I will continue to create useful lectures with content that can be directly applied to practical work!

    • human2642622님의 프로필 이미지
      human2642622

      Reviews 58

      Average Rating 5.0

      5

      32% enrolled

      • wonza43724985님의 프로필 이미지
        wonza43724985

        Reviews 2

        Average Rating 5.0

        5

        20% enrolled

        I took the course because Storybook has been listed as a required skill often recently. It's good because it explained the basic knowledge needed to apply a design system in an easy-to-understand way :)

        • jasonkang
          Instructor

          Thank you for the great feedback! In a recent mentoring session, I met a new frontend developer who said their Storybook experience was viewed favorably in their first company interview. I hope you get a good result!

      Limited time deal

      $35.20

      23%

      $46.20

      jasonkang's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!