59,400원
초급자를 위해 준비한
[프론트엔드, Storybook] 강의입니다.
스토리북 활용법 A to Z. 스토리북의 모든것을 보여드립니다
✍️
이런 걸
배워요!
이런 걸
배워요!
스토리북을 활용한 컴포넌트 주도 개발(CDD)
GitHub Action, CI를 활용한 UI 테스트 자동화
npm 패키지 배포를 통한 디자인시스템 활용
이런 분들께 추천드려요!
🎓
학습 대상은
누구일까요?
학습 대상은
누구일까요?
스토리북을 활용해보고 싶은 개발자
컴포넌트 주도 개발을 해보고싶은 개발자
디자인시스템을 구축하고싶은 개발팀
📚
선수 지식,
필요할까요?
선수 지식,
필요할까요?
React
TypeScript
HTML
CSS
안녕하세요
강병진 입니다.
강병진 입니다.
(현) GS 그룹 DX BootCamp 교육 담당
(전) 시리즈 C 인공지능 스타트업 테크리드
원티드 프리온보딩 프론트엔드 챌린지 진행 (누적 6000+)
네이버 부스트캠프 웹/모바일 멘토
네이버 클라우드 YouTube Channel presenter
커리큘럼
총 23 개
˙ 2시간 31분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 스토리북이란?
5 강
∙ 20분
프로젝트 결과물로 보는 강의를 통해 배울 수 있는 것 (꼭 확인해주세요!)
미리보기
06:53
강의자료 및 수강신청 전 참고사항
미리보기
강의 전 프로젝트 환경설정
11:39
강의 수강평을 작성해주신 선착순 100분께 무료 멘토링을 진행합니다!
[업데이트] 스토리북 8.x로 마이그레이션
02:25
섹션 1. 컴포넌트 개발과 스토리 작성
10 강
∙ 1시간 14분
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 테스트
5 강
∙ 43분
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. 디자인 시스템 배포와 활용
3 강
∙ 12분
npm package로 배포하기
06:16
npm install로 디자인시스템 활용하기
02:41
[추가] 피그마 플러그인을 활용한 tailwind 개발
03:42
강의 게시일 : 2024년 02월 28일
(마지막 업데이트일 : 2024년 03월 31일)
수강평
총 10개
수강생분들이 직접 작성하신 수강평입니다.
5
10개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
초보 프론트엔드 개발자 분들은 분명 아시겠지만 스토리북에 관련된 한글판 설명이 없어서 대충 쓰고는있지만 이게 맞는지 아닌지 잘모르겠어서 긴가민가했었는데. 강의듣고나서 완벽하게 실무에 적용할수있게되어서 너무좋습니다. 이런강의 많이나왔으면좋겠어요
2024-04-15