Soumettre la recherche
Mettre en ligne
storybook
•
0 j'aime
•
52 vues
Wonjun Hwang
Suivre
Kitworks Team Study
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 20
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Component configurator
Component configurator
scor7910
SoftwareEngeneering3rd
SoftwareEngeneering3rd
영진 박
MVVM Pattern for Android
MVVM Pattern for Android
taeinkim6
Uml 세미나
Uml 세미나
Daniel Shin
Io t에서의 소프트웨어단위테스트_접근사례
Io t에서의 소프트웨어단위테스트_접근사례
SangIn Choung
Sql 중심 코드 탈피 발표자료
Sql 중심 코드 탈피 발표자료
ssuser776e2d
소프트웨어 아키텍처
소프트웨어 아키텍처
영기 김
Planning poker with jetpack
Planning poker with jetpack
SooHwan Ok
Recommandé
Component configurator
Component configurator
scor7910
SoftwareEngeneering3rd
SoftwareEngeneering3rd
영진 박
MVVM Pattern for Android
MVVM Pattern for Android
taeinkim6
Uml 세미나
Uml 세미나
Daniel Shin
Io t에서의 소프트웨어단위테스트_접근사례
Io t에서의 소프트웨어단위테스트_접근사례
SangIn Choung
Sql 중심 코드 탈피 발표자료
Sql 중심 코드 탈피 발표자료
ssuser776e2d
소프트웨어 아키텍처
소프트웨어 아키텍처
영기 김
Planning poker with jetpack
Planning poker with jetpack
SooHwan Ok
테스트 자동화의 원칙
테스트 자동화의 원칙
codevania
Sql 중심 코드 탈피
Sql 중심 코드 탈피
ssuser776e2d
C:\fakepath\whole part pattern
C:\fakepath\whole part pattern
lee
Whole part pattern
Whole part pattern
lee
C:\Fakepath\Whole Part Pattern
C:\Fakepath\Whole Part Pattern
lee
Whole part pattern
Whole part pattern
lee
Whole part pattern
Whole part pattern
lee
Whole part pattern
Whole part pattern
lee
보다 나은 웹 어플리케이션 설계
보다 나은 웹 어플리케이션 설계
Eb Styles
[2022]Flutter_IO_Extended_Korea_멀티모듈을활용한플러터클린아키텍처_...
[2022]Flutter_IO_Extended_Korea_멀티모듈을활용한플러터클린아키텍처_...
Taekyu Lim
Ceh
Ceh
민웅 이
Reactive programming vs reactive systems
Reactive programming vs reactive systems
Jinhyuck Kim
[강의] OOP 개요
[강의] OOP 개요
Nohyun Kee
Web Application Testing Patterns
Web Application Testing Patterns
June Kim
dbt 101
dbt 101
건 손
대규모 프로젝트 개발이야기 - 이승헌, 유나이트 코리아 2014
대규모 프로젝트 개발이야기 - 이승헌, 유나이트 코리아 2014
NDOORS
전달교육(분석설계모델링)
전달교육(분석설계모델링)
gimslide
[NDC12] 변화량 분석을 중심으로 한 저비용 고효율의 지속가능한 코드퀄리티 관리법 - 송창규
[NDC12] 변화량 분석을 중심으로 한 저비용 고효율의 지속가능한 코드퀄리티 관리법 - 송창규
ChangKyu Song
C++ 코딩의 정석.pptx
C++ 코딩의 정석.pptx
sung suk seo
Free rtos seminar
Free rtos seminar
Cho Daniel
Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)
Wonjun Hwang
Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)
Wonjun Hwang
Contenu connexe
Similaire à storybook
테스트 자동화의 원칙
테스트 자동화의 원칙
codevania
Sql 중심 코드 탈피
Sql 중심 코드 탈피
ssuser776e2d
C:\fakepath\whole part pattern
C:\fakepath\whole part pattern
lee
Whole part pattern
Whole part pattern
lee
C:\Fakepath\Whole Part Pattern
C:\Fakepath\Whole Part Pattern
lee
Whole part pattern
Whole part pattern
lee
Whole part pattern
Whole part pattern
lee
Whole part pattern
Whole part pattern
lee
보다 나은 웹 어플리케이션 설계
보다 나은 웹 어플리케이션 설계
Eb Styles
[2022]Flutter_IO_Extended_Korea_멀티모듈을활용한플러터클린아키텍처_...
[2022]Flutter_IO_Extended_Korea_멀티모듈을활용한플러터클린아키텍처_...
Taekyu Lim
Ceh
Ceh
민웅 이
Reactive programming vs reactive systems
Reactive programming vs reactive systems
Jinhyuck Kim
[강의] OOP 개요
[강의] OOP 개요
Nohyun Kee
Web Application Testing Patterns
Web Application Testing Patterns
June Kim
dbt 101
dbt 101
건 손
대규모 프로젝트 개발이야기 - 이승헌, 유나이트 코리아 2014
대규모 프로젝트 개발이야기 - 이승헌, 유나이트 코리아 2014
NDOORS
전달교육(분석설계모델링)
전달교육(분석설계모델링)
gimslide
[NDC12] 변화량 분석을 중심으로 한 저비용 고효율의 지속가능한 코드퀄리티 관리법 - 송창규
[NDC12] 변화량 분석을 중심으로 한 저비용 고효율의 지속가능한 코드퀄리티 관리법 - 송창규
ChangKyu Song
C++ 코딩의 정석.pptx
C++ 코딩의 정석.pptx
sung suk seo
Free rtos seminar
Free rtos seminar
Cho Daniel
Similaire à storybook
(20)
테스트 자동화의 원칙
테스트 자동화의 원칙
Sql 중심 코드 탈피
Sql 중심 코드 탈피
C:\fakepath\whole part pattern
C:\fakepath\whole part pattern
Whole part pattern
Whole part pattern
C:\Fakepath\Whole Part Pattern
C:\Fakepath\Whole Part Pattern
Whole part pattern
Whole part pattern
Whole part pattern
Whole part pattern
Whole part pattern
Whole part pattern
보다 나은 웹 어플리케이션 설계
보다 나은 웹 어플리케이션 설계
[2022]Flutter_IO_Extended_Korea_멀티모듈을활용한플러터클린아키텍처_...
[2022]Flutter_IO_Extended_Korea_멀티모듈을활용한플러터클린아키텍처_...
Ceh
Ceh
Reactive programming vs reactive systems
Reactive programming vs reactive systems
[강의] OOP 개요
[강의] OOP 개요
Web Application Testing Patterns
Web Application Testing Patterns
dbt 101
dbt 101
대규모 프로젝트 개발이야기 - 이승헌, 유나이트 코리아 2014
대규모 프로젝트 개발이야기 - 이승헌, 유나이트 코리아 2014
전달교육(분석설계모델링)
전달교육(분석설계모델링)
[NDC12] 변화량 분석을 중심으로 한 저비용 고효율의 지속가능한 코드퀄리티 관리법 - 송창규
[NDC12] 변화량 분석을 중심으로 한 저비용 고효율의 지속가능한 코드퀄리티 관리법 - 송창규
C++ 코딩의 정석.pptx
C++ 코딩의 정석.pptx
Free rtos seminar
Free rtos seminar
Plus de Wonjun Hwang
Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)
Wonjun Hwang
Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)
Wonjun Hwang
This (Kitworks Team Study 김한솔 발표자료 2024.4.22)
This (Kitworks Team Study 김한솔 발표자료 2024.4.22)
Wonjun Hwang
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Wonjun Hwang
스토리북(Storybook, Kitworks Team Study 우아라 발표)
스토리북(Storybook, Kitworks Team Study 우아라 발표)
Wonjun Hwang
mysql8 전환기 (Kitworks Team Study 김천규 발표자료)
mysql8 전환기 (Kitworks Team Study 김천규 발표자료)
Wonjun Hwang
Open AI SORA (키트웍스 팀스터디 발표자료 박준기 240315)
Open AI SORA (키트웍스 팀스터디 발표자료 박준기 240315)
Wonjun Hwang
Nest JS (Kitworks Team Study 이본훈 발표 240315)
Nest JS (Kitworks Team Study 이본훈 발표 240315)
Wonjun Hwang
JS Event Loop (Kitworks Team Study 김동현 발표)
JS Event Loop (Kitworks Team Study 김동현 발표)
Wonjun Hwang
Java Optional (Kitworks Team Study 김성호 발표)
Java Optional (Kitworks Team Study 김성호 발표)
Wonjun Hwang
XSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team Study
Wonjun Hwang
Flutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team Study
Wonjun Hwang
PWA
PWA
Wonjun Hwang
얕은복사,깊은복사
얕은복사,깊은복사
Wonjun Hwang
Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기
Wonjun Hwang
완전 유용한 CSS 모음
완전 유용한 CSS 모음
Wonjun Hwang
2024 개발 트렌드
2024 개발 트렌드
Wonjun Hwang
디바운싱과 쓰로틀링
디바운싱과 쓰로틀링
Wonjun Hwang
Passkey
Passkey
Wonjun Hwang
스마트한 팀 협업
스마트한 팀 협업
Wonjun Hwang
Plus de Wonjun Hwang
(20)
Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)
Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)
This (Kitworks Team Study 김한솔 발표자료 2024.4.22)
This (Kitworks Team Study 김한솔 발표자료 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
스토리북(Storybook, Kitworks Team Study 우아라 발표)
스토리북(Storybook, Kitworks Team Study 우아라 발표)
mysql8 전환기 (Kitworks Team Study 김천규 발표자료)
mysql8 전환기 (Kitworks Team Study 김천규 발표자료)
Open AI SORA (키트웍스 팀스터디 발표자료 박준기 240315)
Open AI SORA (키트웍스 팀스터디 발표자료 박준기 240315)
Nest JS (Kitworks Team Study 이본훈 발표 240315)
Nest JS (Kitworks Team Study 이본훈 발표 240315)
JS Event Loop (Kitworks Team Study 김동현 발표)
JS Event Loop (Kitworks Team Study 김동현 발표)
Java Optional (Kitworks Team Study 김성호 발표)
Java Optional (Kitworks Team Study 김성호 발표)
XSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team Study
Flutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team Study
PWA
PWA
얕은복사,깊은복사
얕은복사,깊은복사
Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기
완전 유용한 CSS 모음
완전 유용한 CSS 모음
2024 개발 트렌드
2024 개발 트렌드
디바운싱과 쓰로틀링
디바운싱과 쓰로틀링
Passkey
Passkey
스마트한 팀 협업
스마트한 팀 협업
storybook
1.
2.
UI 컴포넌트를 독립적으로
분리해 개별 관리, 테스트를 도와주는 도구
3.
4.
리액트 컴포넌트 트리
구조 - 리액트는 단방향(하향식)데이터 흐름을 가짐 - 상위 컴포넌트에서 하위 컴포넌트로 props를 전달 - 이로 인해 데이터의 흐름을 명확히 알 수 있고 예측 이 가능해짐
5.
Container Component Pattern
6.
리액트의 특성상 props로
연결된 컴포넌트는 키 커플링 이 되어있지만 그렇지 않은 컴포넌트들은 연결된 것이 아니기 때문에 하위 컴포넌트끼리의 데이터 전달이나 상태 변경은 굉장히 번거로움
7.
8.
Redux Pattern
9.
10.
11.
하나의 컴포넌트에서 너무
많은 일을 하는 경우 일일이 상태를 바꿔가며 테스트를 하기에는 많이 번거로움 Ex) 로그인 여부, 데이터 여부, 로딩 상태 등
12.
13.
디자이너 - 프로토타입 전달
후 매 번 앱을 실행시키지 않고 바로바로 피드백이 가능하다. - 사용자에게 일관된 경험을 제공할 수 있다. - 개발자와 소통이 쉬워진다.
14.
개발자 - 불필요한 작업을
줄여준다. - 안정적으로 검증된 코드를 사용할 수 있다. - 테스트가 쉬워진다.
15.
스토리북에서는 독립적으로 UI
구성 및 페이지를 빌드해서 실시간으로 테스트가 가 능합니다. Isolation
16.
17.
stories가 생성 되면
스토리북에 등록 할 Button story를 등록해줌 Ex) Button.stories.js
18.
스토리북에서 실시간으로 바뀔
UI의 상태를 타입으로 지정해놓음
19.
스토리북에서 UI 확인과
테스트를 마친 검증된 상태를 하위 컴포넌트에 props로 전달
20.
하위 컴포넌트에서 props로
전달받은 상태를 style에 적용시켜 사용자에게 일관된 UI를 제공
Télécharger maintenant