강의

멘토링

커뮤니티

BEST
개발 · 프로그래밍

/

프론트엔드

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

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

(5.0) 수강평 42개

수강생 546명

  • 강병진

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

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

  • 스토리북을 활용한 컴포넌트 주도 개발(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

안녕하세요
입니다.

14,663

수강생

975

수강평

452

답변

4.9

강의 평점

9

강의

커리큘럼

전체

24개 ∙ (2시간 43분)

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

수강평

전체

42개

5.0

42개의 수강평

  • koreantie3931님의 프로필 이미지
    koreantie3931

    수강평 4

    평균 평점 5.0

    5

    18% 수강 후 작성

    最近、社内デザインシステムの構築に対する欲求が高まっています。 講義を受講しました。 講義を聞くと、デザインシステムの理解だけでなく、 講師様の開発に対する全体的な内空を感じることができます! 方向性を失った最近の講義のほかにも多くのものを手に入れることができてよかったです。

    • jasonkang
      지식공유자

      親切な受講評 ありがとうございます スビン様!講義を聞きながら理解できない部分や気になる点がありましたら、いつでも質問で投稿してください〜そしてメンタリングイベントも継続中ですので、キャリア全体的に気になる点がありましたり、相談が必要な場合は会って話しませんので、Googleフォームで質問を送ってください。お手伝いできるラインでできるだけ回答させていただきます。

  • dydgus0421님의 프로필 이미지
    dydgus0421

    수강평 2

    평균 평점 5.0

    5

    100% 수강 후 작성

    考えるだけで、どうやって適用してみればいいのか見当がつかなかったのですが、詳しく説明していただいたおかげで、今度は適用してみることができそうです。ありがとうございます〜!

    • dudqja36748176님의 프로필 이미지
      dudqja36748176

      수강평 3

      평균 평점 5.0

      5

      33% 수강 후 작성

      • ybs6803181016님의 프로필 이미지
        ybs6803181016

        수강평 4

        평균 평점 5.0

        5

        92% 수강 후 작성

        公式ドキュメントを見ながらStorybookを勉強しましたが、あまりにも多くの情報と時々ドキュメントと合わずエラーが出る部分があって、整理された講義を探すことになりました。 実務で必ず必要そうな内容で簡潔にまとめてくださって、見るのがとても楽でした。次回も良い講義をお願いいたします。

        • jasonkang
          지식공유자

          良いレビュー、本当にありがとうございます!😊 公式ドキュメントだけでは難しさを感じられることもあるかと思いますが、講義がお役に立てたとのこと、本当に嬉しいです。 実務にすぐに適用できる内容で、これからも有益な講義を作ってまいります!

      • human2642622님의 프로필 이미지
        human2642622

        수강평 66

        평균 평점 5.0

        5

        32% 수강 후 작성

        ₩59,400

        강병진님의 다른 강의

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

        비슷한 강의

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