Thumbnail
개발 · 프로그래밍 프론트엔드

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

(5)
7개의 수강평 ∙  136명의 수강생

59,400원

지식공유자: 강병진
총 23개 수업 (2시간 31분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[프론트엔드, Storybook] 강의입니다.

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

✍️
이런 걸
배워요!
스토리북을 활용한 컴포넌트 주도 개발(CDD)
GitHub Action, CI를 활용한 UI 테스트 자동화
npm 패키지 배포를 통한 디자인시스템 활용

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
스토리북을 활용해보고 싶은 개발자
컴포넌트 주도 개발을 해보고싶은 개발자
디자인시스템을 구축하고싶은 개발팀
📚
선수 지식,
필요할까요?
React
TypeScript
HTML
CSS

안녕하세요
강병진 입니다.
강병진의 썸네일
커리큘럼 총 23 개 ˙ 2시간 31분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 스토리북이란?
프로젝트 결과물로 보는 강의를 통해 배울 수 있는 것 (꼭 확인해주세요!) 미리보기 06:53 강의자료 및 수강신청 전 참고사항 미리보기
강의 전 프로젝트 환경설정 11:39
강의 수강평을 작성해주신 선착순 100분께 무료 멘토링을 진행합니다!
[업데이트] 스토리북 8.x로 마이그레이션 02:25
섹션 1. 컴포넌트 개발과 스토리 작성
Label 컴포넌트와 스토리의 metadata 소개 09:51
TextField의 atom, ErrorMessage 컴포넌트 미리보기 02:58 [업데이트] 스토리북 8.x 에서 이벤트 핸들링 방식 변경 미리보기 02:28
TextField의 IconButton 컴포넌트와 .svg 관리방법 05:42
atomic 컴포넌트들을 쌓아올린 TextField 컴포넌트 09:19
Cumulative Layout Shift (CLS)를 고려한 컴포넌트 개발 미리보기 05:45
NavigationBar 컴포넌트와 Story Decorator 11:02
다양한 스토리를 가진 PrimaryButton 컴포넌트 11:43
TagList의 atom, TagButton 컴포넌트 06:58
Generic Type과 Event Bubbling을 활용한 TagList 컴포넌트 08:30
섹션 2. UI 테스트
Chromatic을 활용한 Visual 테스트 04:54
GitHub Action을 활용한 CI/CD와 Visual 테스트 11:47
Test Runner를 활용한 Accessibility 테스트 12:07
[업데이트] 사용자와 브라우저의 상호작용을 확인하는 Interaction 테스트 11:40
공식문서에는 있지만 오류로 가득한 Test Coverage와 Snapshot 테스트 02:55
섹션 3. 디자인 시스템 배포와 활용
npm package로 배포하기 06:16
npm install로 디자인시스템 활용하기 02:41
[추가] 피그마 플러그인을 활용한 tailwind 개발 03:42
강의 게시일 : 2024년 02월 28일 (마지막 업데이트일 : 2024년 03월 31일)
수강평 총 7개
수강생분들이 직접 작성하신 수강평입니다.
5
7개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
원덕희 thumbnail
5
좋은 강의 감사합니다.
2024-03-22
지식공유자 강병진
감사합니다! 프론트엔드 개발에 많은 도움이 되었으면 좋겠습니다
2024-03-25
안수빈 thumbnail
5
최근 사내 디자인시스템 구축에 대한 욕구가 늘어나 강의를 수강하게 되었습니다. 강의를 듣다보면, 디자인 시스템에 대한 이해 뿐만 아니라, 강사님의 개발에 대한 전반적인 내공을 느낄 수 있어요!! 방향성을 잃은 요즘 강의 외에도 많은 것을 얻어갈 수 있어 좋았습니다.
2024-03-25
지식공유자 강병진
친절한 수강평 감사합니다 수빈님! 강의 들으면서 이해가 되지 않는 부분이나 궁금한 점이 있으시면 언제든 질문으로 올려주세요~ 그리고 멘토링 이벤트도 계속 진행중이니 커리어 전반적으로 궁금한 점이 있으시거나 상담이 필요하시면 만나서 이야기하지 않으셔도 되니 구글폼으로 질문을 보내주세요. 제가 도와드릴 수 있는 선에서 최대한 답변 드리도록 하겠습니다.
2024-03-25
백승민 thumbnail
5
초보 프론트엔드 개발자 분들은 분명 아시겠지만 스토리북에 관련된 한글판 설명이 없어서 대충 쓰고는있지만 이게 맞는지 아닌지 잘모르겠어서 긴가민가했었는데. 강의듣고나서 완벽하게 실무에 적용할수있게되어서 너무좋습니다. 이런강의 많이나왔으면좋겠어요
2024-04-15
지식공유자 강병진
감사합니다. 최대한 실무에 바로 적용할 수 있는 내용을 담으려고 노력했는데 강의에 잘 반영된 것 같네요. 화이팅입니다!
2024-05-06
눙엉 thumbnail
5
사내에 스토리북 도입을 위해 가이드라인이 필요하고, 혼자 시작하기에 막막했는데 좋은 강의 덕분에 방향성을 잡을 수 있을 것 같습니다. 감사합니다.
2024-04-01
지식공유자 강병진
사내에 도입하시면 디자인시스템 구축에 확실히 큰 도움이 될거라고 생각합니다. 작업하시다가 어려운 부분이 있으면 언제든 질문으로 올려주세요!
2024-05-06
neostgeart thumbnail
5
2024-04-22