강의

멘토링

로드맵

BEST
개발 · 프로그래밍

/

프론트엔드

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

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

(5.0) 수강평 40개

수강생 531명

  • 강병진

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

이런 걸 배울 수 있어요

  • 스토리북을 활용한 컴포넌트 주도 개발(CDD)

  • GitHub Action, CI를 활용한 UI 테스트 자동화

  • npm 패키지 배포를 통한 디자인시스템 활용

스토리북, 들어는 봤는데 어떻게 사용할 수 있을까요? 🤔

유저 스토리를 기반으로한 기획이 주목을 받기 시작하면서, 화면에 그려지는 UI 컴포넌트의 다양한 스토리도 점점 중요해지고 있습니다. 스토리북이 무엇인지, 어떤 기능들이 있는지 궁금한 분들을 위해 준비했어요!

이 강의에서는 스토리북의 설치부터 시작하여, React 프로젝트에 적용하는 방법, 주요 기능과 활용 방법 등을 다룹니다. 또한, 다양한 예제를 통해 실제 개발에서 어떻게 사용할 수 있는지도 함께 살펴봅니다. 스토리북을 처음 사용하는 분들도 쉽게 이해할 수 있도록 구성하였으며, 강의를 따라가면서 자연스럽게 스토리북을 익힐 수 있습니다.

이 강의의 특징

📌 가장 간단한 컴포넌트부터, 여러개의 컴포넌트를 쌓아올린 복잡한 컴포넌트까지 점진적으로 배웁니다

📌 다양한 예제를 통해 현업에서 어떻게 개발하는지 경험할 수 있습니다

📌 현업에서 스토리북을 활용하는 다양한 방식을 경험에서 오는 노하우와 함께 전달합니다

📌 프론트엔드 개발에서 유용하게 쓸 수 있는 TypeScript와 Tailwind 각종 꿀팁을 제공합니다

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

이런 분들께 추천해요

스토리북은 무엇인가요
프론트엔드 프로젝트에서
스토리북을 어떻게 사용할지
막막한 개발자

디자인 시스템에 관심있어요.
사용자 경험과 개발자 경험
향상을 위해 디자인시트템을
구축하고 싶은 개발팀

UI 테스트가 궁금해요.
CI/CD 를 활용해서 UI 테스트를 자동화하고, 리뷰를 통한
컴포넌트 검증이 궁금한 개발자

수강 후에는

  • 스토리북의 기본 개념과 사용 방법을 이해하고, 프로젝트에 적용할 수 있습니다


  • Web Vital을 고려해서 컴포넌트를 개발할 수 있습니다.

  • 스토리북 decorator를 활용하여 컴포넌트를 더욱 효율적으로 개발할 수 있습니다

  • UI 테스트 자동화를 통해 디자인 시스템의 일관성을 가져갈 수 있습니다

  • 디자인 시스템을 npm 패키지로 배포해서 재사용할 수 있습니다

이런 내용을 배워요.

Chromatic 대시보드: UI Review

디자인시스템에 새로운 컴포넌트가 추가됐다면?
GitHub을 Chromatic과 연동해서 새로운 Pull
Request가 생성될 때마다 자동으로 UI Review를 생성합니다.

스토리북 : UI 컴포넌트 검증

스토리북에서 개발된 UI 컴포넌트를 확인하고
다양한 스토리에 따라 컴포넌트가 화면에 어떻게
그려지는지 확인할 수 있습니다

Interaction Test를 통한 스토리 검증

사용자가 서비스를 이용할 때 어떤식으로 우리가
개발한 컴포넌트를 사용하는지 보고 스토리를
검증할 수 있습니다

npm package를 활용한 디자인 시스템

새로운 프로젝트를 시작하려고 하시나요? 디자인
시스템을 npm 패키지로 배포하고 npm install을
통해 쉽게 컴포넌트를 재사용할 수 있습니다

이 강의를 만든 사람

수강 전 참고 사항

실습 환경

  • MacOS를 기준으로 설명하지만, 운영체제에 제한이 없습니다

  • React로 개발환경을 설정한 경험이 있다면 별도의 환경설정 없이 따라오실 수 있습니다

학습 자료

  • 노션 링크

  • GitHub 소스코드

선수 지식 및 유의사항

  • React로 컴포넌트를 한번이라도 만들어보신 분

  • 팀 프로젝트 경험이 없는 분들도 쉽게 따라오실 수 있습니다


이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 스토리북을 활용해보고 싶은 개발자

  • 컴포넌트 주도 개발을 해보고싶은 개발자

  • 디자인시스템을 구축하고싶은 개발팀

선수 지식,
필요할까요?

  • React

  • TypeScript

  • HTML

  • CSS

안녕하세요
입니다.

13,014

수강생

772

수강평

406

답변

4.9

강의 평점

9

강의

커리큘럼

전체

24개 ∙ (2시간 43분)

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

수강평

전체

40개

5.0

40개의 수강평

  • koreantie3931님의 프로필 이미지
    koreantie3931

    수강평 4

    평균 평점 5.0

    5

    18% 수강 후 작성

    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
      지식공유자

      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

    수강평 3

    평균 평점 5.0

    5

    33% 수강 후 작성

    • ybs6803181016님의 프로필 이미지
      ybs6803181016

      수강평 4

      평균 평점 5.0

      5

      92% 수강 후 작성

      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
        지식공유자

        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

      수강평 59

      평균 평점 5.0

      5

      32% 수강 후 작성

      • wonza43724985님의 프로필 이미지
        wonza43724985

        수강평 2

        평균 평점 5.0

        5

        20% 수강 후 작성

        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
          지식공유자

          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!

      ₩59,400

      강병진님의 다른 강의

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

      비슷한 강의

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