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일)
수강평
총 7개
수강생분들이 직접 작성하신 수강평입니다.
5
7개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
좋은 강의 감사합니다.
2024-03-22
최근 사내 디자인시스템 구축에 대한 욕구가 늘어나
강의를 수강하게 되었습니다.
강의를 듣다보면, 디자인 시스템에 대한 이해 뿐만 아니라,
강사님의 개발에 대한 전반적인 내공을 느낄 수 있어요!!
방향성을 잃은 요즘 강의 외에도 많은 것을 얻어갈 수 있어 좋았습니다.
2024-03-25
스토리북에 대해 전반적인 학습이 되었습니다.
스토리북 CI/CD 학습이되어 좋았습니다.
강의자료에 있는 피그마에서 강의 듣고계신분이랑 얘기해보는 경험이 새로웠음
2024-03-18
프론트엔드 공부중인 학부생 4학년입니다. 평소 프로젝트를 진행할 때에 있어서 컴포넌트를 제작하는 부분에 있어서 UI 및 intent 로직을 별도로 테스트하지 않고 상황에 맞게끔 그때 그때 prop만 변경하는식으로 진행을 했었는데, 그러다보니 점점 프로젝트가 무거워지면서 유지보수 관련해서 불필요하게 많이 만들어지거나 파일 관리를 하기가 힘들게 되더라구요....!
디자이너와 함께 작업하는 프로젝트의 경우에는 Figma 참고하는 데 별도의 컴포넌트를 컨펌받는 방식보다는 완성된 페이지 영상 시연하는 방향으로 가기 때문에 컨펌 싸이클 시간도 길어져 시간 조정이 힘들었던 기억이 있습니다.
스토리북을 접하게 된 건 이번 강의가 처음인데요! 아직은 완벽하게 다룰수 있지 않지만 적지않은 도움이 되는걸 느낍니다. 특히 컴포넌트를 개별적으로 테스팅이 스토리북으로도 가능하다는게 저한테는 괜찮은 자극을 줬던것 같아요! 지금 기존의 만들었던 프로젝트 다시 리팩토링 중인데 이해 안되는 부분들도 다시금 몇번씩 들으면서 제 것으로 만들고 싶습니다 !
2024-03-15
2024-04-22