BEST

Front-end

実務に直接適用するストーリーブックとUIテスト

Name: 実務に直接適用するストーリーブックとUIテスト
Price: 59400 KRW
Rating: 5 (42 reviews)

ストーリーブックの活用法A to Z.ストーリーブックのすべてを表示します

（5.0）受講レビュー 42件

受講生 548名

jasonkang

storybook

uitest

ui-testing

React

TypeScript

TailwindCSS

学習した受講者のレビュー

受講後に得られること

ストーリーブックを活用したコンポーネント主導開発（CDD）
GitHub Action、CIを活用したUIテストの自動化
npmパッケージ配布によるデザインシステムの活用

ストーリーブック、聞いたことがありますが、どのように使用できますか？ 🤔

ユーザーストーリーをベースにした企画が注目を集め始めながら、画面に描かれるUIコンポーネントの様々なストーリーもますます重要になっています。ストーリーブックが何なのか、どんな機能があるのか気になる方のために準備しました！

このレッスンでは、ストーリーブックのインストールから始めて、Reactプロジェクトに適用する方法、主な機能と活用方法などについて説明します。また、さまざまな例を使用して、実際の開発でどのように使用できるかについても説明します。ストーリーブックを初めて使用する方も簡単に理解できるように構成しており、講義に従いながら自然にストーリーブックを身につけることができます。

この講義の特徴

📌最も簡単なコンポーネントから、複数のコンポーネントを積み重ねた複雑なコンポーネントまで徐々に学びます

📌さまざまな例を使って、ビジネスでどのように開発するかを体験できます。

📌現業でストーリーブックを活用する様々な方法を経験から来るノウハウと一緒にお届けします

📌フロントエンドの開発で役に立つことができるTypeScriptとTailwindのさまざまな蜂蜜チップを提供します

受講後は

ストーリーブックの基本概念と使用方法を理解し、プロジェクトに適用することができます
Web Vitalを考慮してコンポーネントを開発できます。
ストーリーブックデコレータを活用してコンポーネントをより効率的に開発する
UIテストの自動化により、デザインシステムの一貫性を得ることができます
デザインシステムをnpmパッケージとして展開して再利用できます

こんな方に
おすすめです

学習対象は
誰でしょう？

ストーリーブックを活用したい開発者
コンポーネント主導開発をしてみたい開発者
デザインシステムを構築したい開発チーム

前提知識、
必要でしょうか？

React
TypeScript
HTML
CSS

こんにちは
です。

14,828

受講生

998

受講レビュー

453

回答

4.9

講座評価

講座

FAANG Senior Software Engineer
(전) GS 그룹 AI Agent 플랫폼 개발/운영
(전) GS 그룹 DX BootCamp 멘토/코칭
(전) 시리즈 C AI 스타트업 테크리드
Stanford University Code in Place Python Instructor
네이버 부스트캠프 웹/모바일 멘토
네이버 클라우드 YouTube Channel presenter
원티드 프리온보딩 프론트엔드/백엔드 챌린지 진행 (누적 6000+)
항해 AI 플러스코스 1기 코치

カリキュラム

全体

24件 ∙ (2時間 43分)

セクション 1．ストーリーブックとは？

4件 ∙ (20分)

セクション 2．コンポーネント開発とストーリー作成

10件 ∙ (1時間 14分)

5. Labelコンポーネントとストーリーのmetadataの紹介
09:51
6. TextField の atom, ErrorMessage コンポーネント
02:58
7. [アップデート] Storybook 8.x でのイベントハンドリング方式の変更
02:28
8. TextFieldのIconButtonコンポーネントと.svgの管理方法
05:42
9. Atomicコンポーネントを積み重ねて作ったTextFieldコンポーネント
09:19
10. Cumulative Layout Shift (CLS) を考慮したコンポーネント開発
05:45
11. NavigationBarコンポーネントとStory Decorator
11:02
12. 多様なストーリーを持つPrimaryButtonコンポーネント
11:43
13. TagList の atom、TagButton コンポーネント
06:58
14. ジェネリック型とイベントバブリングを活用した TagList コンポーネント
08:30

セクション 3．UIテスト

5件 ∙ (43分)

15. Chromatic を活用した Visual テスト
04:54
16. GitHub Actions を活用した CI/CD と Visual テスト
11:47
17. テストランナーを活用したアクセシビリティテスト
12:07
18. [アップデート] ユーザーとブラウザのインタラクションを確認するInteractionテスト
11:40
19. 公式ドキュメントにはあるけれど、エラーだらけのTest CoverageとSnapshotテスト
02:55

セクション 4．デザインシステムの配布と活用

3件 ∙ (16分)

セクション 5．[Legacy] バージョン問題でこれ以上使えない映像たち 😂

2件 ∙ (8分)

講座掲載日:

最終更新日:

受講レビュー

全体

42件

5.0

42件の受講レビュー

안수빈
受講レビュー 4
∙
平均評価 5.0
5
18% 受講後に作成
최근 사내 디자인시스템 구축에 대한 욕구가 늘어나 강의를 수강하게 되었습니다. 강의를 듣다보면, 디자인 시스템에 대한 이해 뿐만 아니라, 강사님의 개발에 대한 전반적인 내공을 느낄 수 있어요!! 방향성을 잃은 요즘 강의 외에도 많은 것을 얻어갈 수 있어 좋았습니다.
- 제이쓴
  知識共有者
  친절한 수강평 감사합니다 수빈님! 강의 들으면서 이해가 되지 않는 부분이나 궁금한 점이 있으시면 언제든 질문으로 올려주세요~ 그리고 멘토링 이벤트도 계속 진행중이니 커리어 전반적으로 궁금한 점이 있으시거나 상담이 필요하시면 만나서 이야기하지 않으셔도 되니 구글폼으로 질문을 보내주세요. 제가 도와드릴 수 있는 선에서 최대한 답변 드리도록 하겠습니다.
dydgus0421
受講レビュー 2
∙
平均評価 5.0
5
100% 受講後に作成
생각만하고 어떻게 적용해볼지 엄두가 안났었는데 자세히 설명해주셔서 이젠 적용해볼 수 있을것 같습니다 감사합니다~!
참참나무
受講レビュー 3
∙
平均評価 5.0
5
33% 受講後に作成
수병수병
受講レビュー 4
∙
平均評価 5.0
5
92% 受講後に作成
공식 문서를 보면서 스토리북을 공부했지만 너무 많은 정보와 종종 문서와 맞지 않아 에러가 나는 부분이 있어 정리된 강의를 찾게 되었습니다. 실무에서 꼭 필요할만한 내용으로 간결하게 정리해주셔서 보기 너무 편했습니다. 다음에도 좋은 강의 부탁드리겠습니다.
- 제이쓴
  知識共有者
  좋은 후기 정말 감사합니다! 😊 공식 문서만으로는 어려움을 느끼실 수 있는데, 강의가 도움이 되었다니 정말 기쁩니다. 실무에 바로 적용할 수 있는 내용으로 계속해서 유익한 강의 만들어가겠습니다!
정호연
受講レビュー 66
∙
平均評価 5.0
5
32% 受講後に作成

￥7,412

jasonkangの他の講座

知識共有者の他の講座を見てみましょう！

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

제이쓴

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

초급

LLM, RAG, LangChain

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

제이쓴

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

제이쓴

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

초급

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

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

제이쓴

회사에서 바로 쓰는 업무자동화 AI 에이전트 (w. n8n, LangGraph)

제이쓴

인공지능, AI, 에이전트… 뭔가 대단해 보이지만, 막상 해보면 생각보다 별 거 아닙니다. 그래서 간단한 기능을 직접 구현해보는 것이 중요합니다. 회사에서 실제로 쓸 수 있는 실용적인 프로젝트를 통해, 다양한 유즈케이스를 직접 경험하고, AI 에이전트를 활용하고 응용하는 방법까지 배워봅니다.

초급

n8n, 인공지능(AI), LangChain

회사에서 바로 쓰는 업무자동화 AI 에이전트 (w. n8n, LangGraph)

제이쓴

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

제이쓴

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

입문

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

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

제이쓴

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

제이쓴

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

초급

Flutter, 챗봇, gemini

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

제이쓴

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

제이쓴

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

초급

AWS, Docker, aws-ecs

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

제이쓴

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

제이쓴

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

초급

React, Cypress, Jest

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

제이쓴

似ている講座

同じ分野の他の講座を見てみましょう！

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

코드 조커, 오프

이 강의를 통해 전반적인 프런트엔드 테스트 종류를 파악하고, 상황에 맞는 적절한 테스트 선택을 통해 신뢰감 있는 테스트를 작성하는 방법을 배웁니다.

초급

소프트웨어 테스트, JavaScript, React

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

코드 조커, 오프

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

John Ahn

이 강의를 통해 리액트 애플리케이션을 테스트하는 법을 배우게 됩니다.

초급

React, React Context, 웹앱

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

John Ahn

[Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)

닭강정

React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

초급

React, Electron, GUI

[Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)

닭강정

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

인프런

입문

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

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

인프런

하루만에 배우는 ChatGPT API

양동준

웹사이트를 ChatGPT와 함께 만들고, 배포까지 책임지는 강의! Fine-tuning까지 배워보세요.

초급

ChatGPT, React, netlify

하루만에 배우는 ChatGPT API

양동준

TDD 개발 방법론을 활용한 React Native 앱 개발

박동호

간단한 ReactNative 앱을 TDD 방법론을 통해 개발하면서 TDD 의 개념을 확실히 익히고, ReactNative 모바일 앱 개발에 적용할 수 있도록 연습합니다.

초급

JavaScript, React, React Native

TDD 개발 방법론을 활용한 React Native 앱 개발

박동호

[풀스택 입문] Firebase보다 10배 좋은 Supabase

로펀

풀스택 개발에 날개를 달아줄 Supabase! Firebase의 상위호환인 Supabase로 풀스택 개발을 2시간만에 완성합니다.

초급

PostgreSQL, Next.js, TailwindCSS

[풀스택 입문] Firebase보다 10배 좋은 Supabase

로펀

Flutter 테스트 기초

오준석

플러터에서의 유닛 테스트, UI 테스트, 통합 테스트 방법에 대해 공식 문서 내용에 기반하여 설명하는 강의입니다.

초급

Flutter, 소프트웨어 테스트, integration-tests

Flutter 테스트 기초

오준석

[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편

제로초(조현영)

타입스크립트 기본 문법을 배우고, 다른 사람이 작성한 타입을 분석하는 방법과, 내가 직접 타입을 작성하는 방법에 대해 알아봅니다.

초급

TypeScript

[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편

제로초(조현영)

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

이 강의를 통해서 리액트와 파이어베이스를 이용해서 채팅 어플리케이션을 만들수 있습니다.

초급

React, Firebase, 웹앱

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt

중급이상

React, Next.js, cursor

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

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

제로초(조현영)

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

중급이상

React, Redux, Node.js

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

제로초(조현영)

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

도도(코딩루팡)

Next.js + Cursor IDE 로 챗 프로그램을 한시간만에 구현하는 능력을 가질 수 있어요.

입문

nextjs, ChatGPT, React

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

도도(코딩루팡)

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지 (with 커서 AI)

짐코딩

탐색 → 계획 → 구현 → 커밋. 검증된 AI 개발 워크플로우를 클로드 코드로 마스터하세요. MCP, 서브에이전트, 프롬프트 엔지니어링까지 23개 미션으로 익히고, 3개 실전 프로젝트를 완성합니다.

입문

React, Next.js, cursor

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지 (with 커서 AI)

짐코딩

[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편

제로초(조현영)

타입스크립트 기본 문법을 배운 상태에서, 유명한 라이브러리들의 복잡한 타입을 분석하는 방법을 알아봅시다.

중급이상

TypeScript

[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편

제로초(조현영)

아바타 커뮤니티앱 만들기 (React Native Expo)

Kyo

리액트 네이티브로 아바타 기반 커뮤니티앱을 개발합니다. 글작성 뿐만아니라 댓글/대댓글, 좋아요, 투표, 아바타 생성 등 완성도 있는 커뮤니티앱을 만드는 과정을 배우게 됩니다.

초급

React Native, TypeScript, expo

아바타 커뮤니티앱 만들기 (React Native Expo)

Kyo

따라하며 배우는 타입스크립트 A-Z

John Ahn

이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

초급

TypeScript, JavaScript

따라하며 배우는 타입스크립트 A-Z

John Ahn

Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture

IT s Dev

A Complete End-to-End Developer Journey — Build Lightning-Fast APIs, Modern Frontend Interfaces, Real Projects, Authentication Systems, Dashboards & Full Deployments Using FastAPI, React, and Vibe Coding Techniques.

입문

React, React Native, react.js

Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture

IT s Dev

차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)

Indie Coder

빠른 속도를 자랑하는 Node.js 프레임워크 fastify 와 orm Prisma 그리고 Typescirpt를 활용한 최신 Node.js 백엔드 REST API를 학습하는 코스

초급

Node.js, TypeScript, Prisma

차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)

Indie Coder

Node.js에 TypeScript 적용하기(feat. NodeBird)

제로초(조현영)

Node.js에 타입스크립트를 적용해보고, 기존 npm 패키지에 타이핑을 추가하거나, 직접 타입스크립트 라이브러리를 만들어봅시다.

중급이상

Node.js, 웹앱, TypeScript

Node.js에 TypeScript 적용하기(feat. NodeBird)

제로초(조현영)

実務に直接適用するストーリーブックとUIテスト

学習した受講者のレビュー

受講後に得られること

ストーリーブック、聞いたことがありますが、どのように使用できますか？ 🤔

この講義の特徴

まず受講された方々の話📝

こんな方におすすめです

受講後は

このような内容を学びます。

この講義を作った人

受講前の注意

練習環境

学習資料

選手の知識と注意事項

こんな方に
おすすめです

こんにちは
です。

カリキュラム

受講レビュー

jasonkangの他の講座

似ている講座

実務に直接適用するストーリーブックとUIテスト

学習した受講者のレビュー

受講後に得られること

ストーリーブック、聞いたことがありますが、どのように使用できますか？ 🤔

この講義の特徴

まず受講された方々の話📝

こんな方におすすめです

受講後は

このような内容を学びます。

この講義を作った人

受講前の注意

練習環境

学習資料

選手の知識と注意事項

こんな方に おすすめです

こんにちは .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}です。

カリキュラム

受講レビュー

jasonkangの他の講座

似ている講座

こんな方に
おすすめです

こんにちは
です。