ABC: 다시 생각하는 컴포넌트

ABC 변화량, 일관성, 재활용성을 갖춘 컴포넌트입니다.
컴포넌트는 무엇이고, 어떠한 설계 원칙과 조합 원리를 가져야 하는가에 대한 내용을 담았습니다.

Transcript

1. ab180 | airbridge.io | airbloc.org ABC: Airbridge Component. v1.0.0 Architecture
2. 이찬희 에이비일팔공 Front-end Software Engineer 미학이 있는 개발을 하고 싶어요 설리번교육연구소 연구원 (Way & Direction) hiddenest12@gmail.com facebook.com/hiddenest
3. 문제 정의 기존 작업의 문제 | 프론트엔드 개발은 행-복합니다 웹접근성 Caching TC39 웹표준 CSS Webpack Packages TDD HTTP/2 CORS 찬희님 이거 1px만 옮겨주세요 API 효율 상태 관리 Cross Browsing
4. 문제 정의 기존 작업의 문제 | 있는 컴포넌트는 사용법이 복잡하고 스타일 하나, 기능 하나 차이로 같은걸 또 개발 근데 있던거랑 비교하면 구조나 사용법이 아예 딴판 성능에 신경을 많이 못 써서 느림 이거 말고도 할일 많은 행-복 프론트엔드 월급루팡 하고 싶다
6. 컴포넌트 정의 기능과 화면 중심의 분리 | Visual Functional Button Card Badge Chip DataGrid Drawer Input Icon Modal List(Item) Image Snackbar Tooltip Toggle Scroll Animation EventAwayFrom Interface 함수, DOM ref 등 … …
7. 컴포넌트 정의 | Interface 함수, DOM ref 등 Functional Toggle Scroll Animation EventAwayFrom Visual Button Card Badge Chip DataGrid Drawer Input Icon Modal Image Snackbar Tooltip List(Item) … … 기능과 화면 중심의 분리
8. 컴포넌트 정의 레이아웃 및 스타일 | Style No Layout in ABC
9. 컴포넌트 정의 레이아웃 및 스타일 | Button Button Button Style Look & Feel을 위해 지속적으로 변화함 Component 미학적인 것으로 인해 기능과 사용법이 변하지는 않음 Button
10. 컴포넌트 정의 레이아웃 및 스타일 | Style Look & Feel을 위해 지속적으로 변화함 Component 미학적인 것으로 인해 기능과 사용법이 변하지는 않음 THIS IS ABC Button Button Button Button
11. 컴포넌트 정의 레이아웃 및 스타일 | 스타일이 컴포넌트에 종속되지 않게. 둘 다 <ul>, <li>를 사용하여 만드는데, 스타일 차이 하나로 컴포넌트가 분리됨. 기본 컴포넌트를 잘 세우고 스타일은 어디까지나 꾸밈의 도구로 남게. HorizonTab SideMenu
12. 변화량 일관성 재활용 얼마나 많은 복잡도와 변화를 담을 수 있는가? 컴포넌트의 사용이 코드 & 습관적으로 일관적인가? 한 컴포넌트가 어느 정도로 재사용 될 수 있는가? 설계 원칙 핵심 키워드 |
13. 설계 원칙 컴포넌트 레벨 디자인 | 복잡도 변화량 B | Basic 다른 컴포넌트의 토대가 되는 가장 기초적인 컴포넌트. Props, Children 등이 매우 동적으로 들어감. C | Composed Basic Component 들이 조합되어 만들어진 컴포넌트. 드롭다운, 탭 등 사용성 높은 것들이 대부분 여기에 속함. D | Deep Basic, Composed Component를
 HOC, Overriding 등으로 극도로 재활용한 컴포넌트.
14. B | Basic 다른 컴포넌트의 토대가 되는 가장 기초적인 컴포넌트. Props, Children 등이 매우 동적으로 들어감. C | Composed Basic Component 들이 조합되어 만들어진 컴포넌트. 드롭다운, 탭 등 사용성 높은 것들이 대부분 여기에 속함. D | Deep Basic, Composed Component를
 HOC, Overriding 등으로 극도로 재활용한 컴포넌트. Button Input Item Item Item List Toggle 설계 원칙 컴포넌트 레벨 디자인 |
15. Button nput tem tem tem List Toggle | Basic 른 컴포넌트의 토대가 되는 가장 기초적인 컴포넌트. ops, Children 등이 매우 동적으로 들어감. C | Composed Basic Component 들이 조합되어 만들어진 컴포넌트. 드롭다운, 탭 등 사용성 높은 것들이 대부분 여기에 속함. D | Deep Basic, Composed Component를
 HOC, Overriding 등으로 극도로 재활용한 컴포넌트. Select Fruit Apple Banana Cherry Dropdown The Magic Words are … Movie theater March comes like … DropdownSearch The 설계 원칙 컴포넌트 레벨 디자인 |
16. Select Fruit Apple Banana Cherry Dropdown <Toggle> {{({ onToggle, isVisible }) => ( <Fragment> <Button onClick={onToggle} /> {isVisible && ( <List> <Item /> </List> )} </Fragment> )} </Toggle> * <Fragment> 는 React 16.2 이상에서 사용 가능
17. <Toggle> {({ onToggle, isVisible }) => ( <Fragment> <Input onBlur={async ({ target: { value } }) => { await searchFromList(value) onToggle(false) }} /> {isVisible && ( <List> <Item /> </List> )} </Fragment> )} </Toggle> The Magic Words are … Movie theater March comes like … DropdownSearch The * <Fragment> 는 React 16.2 이상에서 사용 가능
18. Button nput m List Toggle Basic 른 컴포넌트의 토대가 되는 가장 기초적인 컴포넌트. ops, Children 등이 매우 동적으로 들어감. D | Deep Basic, Composed Component를
 HOC, Overriding 등으로 극도로 재활용한 컴포넌트. Select Fruit Apple Banana Cherry Dropdown The Magic Words are … Movie theater March comes like … DropdownSearch The C | Composed Basic Component 들이 조합되어 만들어진 컴포넌트. 드롭다운, 탭 등 사용성 높은 것들이 대부분 여기에 속함. Higher Order Component + Toggle에 @animation 넣어 애니메이션 추가 Override + DropdownSearch의 searchFromList()를
 Override 하여 API 검색 기능 추가 + render()에 Loading Component 추가하기 EXPERIMENTAL 설계 원칙 컴포넌트 레벨 디자인 |
19. 컴포넌트 구성 개발 예정 컴포넌트 (임시) | B | Basic C | Composed Button Badge Card Chip Drawer DataGrid Icon Image ColumnGroup Column Pagination List Item Modal Backdrop Snackbar Spinner Select Checkbox Radio Animation Toggle DropDown ImageViewer Drag Accordion ProgressBar Tooltip Confirm Alert D | Deep DropDownSearch Input
20. Tab + Moving Indicator List Item div: indicator 컴포넌트 구성 컴포넌트 조합 예시 | Accordion Card Icon Toggle Animation Confirm Card Modal Button Toast ActionSheet ActionSheet
21. List Item div: indicator Card Icon Toggle Animation Card Modal Button Toast Card Icon ProgressBar Button Switch Button div: wrapper ActionSheet Drawer List Item 컴포넌트 구성 컴포넌트 조합 예시 |
22. 컴포넌트 구성 컴포넌트 조합 예시 | WHAT YOU THINK IS WHAT YOU MADE 조합은 자유롭되 쓰는 사람끼리 규칙을 정해 일관성 갖기
23. 기술적 사항 Universal Props | refer <Input refer={(c) => { this.node = c; }} /> component <List component={<AlphabetList />} /> refer는 컴포넌트 내에서 사용되는 태그 또는 다른 컴포넌트에
 특별히 이름을 붙여 지칭할 수 있습니다. React에서 기본적으로 제공하는 ref와 구분하면서,
 ‘지칭한다’는 의미를 살리기 위해 ‘refer’라고 명명합니다. component는 컴포넌트를 구성하는 태그(다른 컴포넌트)를
 다른 것으로 변경할 수 있게 도와줍니다. 이를 통해 다른 태그 등의 사용 때문에 비슷한 기능의 새로운 컴포넌트를 개발하는 경우를 최소화할 수 있습니다. <Dropdown componentToggle={<LaughBell />} /> <Tab referIndicator={(c) => { this.indicator = c; } />
24. 기술적 사항 Naming Convention | 길더라도 명확하게(Descriptive)하게 작성한다 {Do}{Action}{What}{to be} handle(on), set, update... Click, Change, Blur... Component Open, Close...
25. 기술적 사항 Naming Convention | Universal Props 해당 컴포넌트 내의 특별한 곳을 지칭 / 변경하는 경우, 뒷 부분에 어떠한 역할을 하는지 작성한다. ex) referInput, componentToggle Interface (Helper Function…) 컴포넌트 - 컨테이너에서 범용적으로 자주 사용하는 함수들은 가급적 helper~ 또는 ~able 꼴로 작성한다. ex) helperWebURLValidation, fadable Variable 모든 변수는 camelCase로 작성하며 boolean 타입의 변수는 가급적 is~ 꼴의 의문형으로 작성합니다. ex) isOpen, isAlreadyInList ClassName & camelCase className의 경우 불필요한 공백이 없도록 합니다. 케이스 준수를 원한다면 camelize()를 사용할 수 있습니다. ex) className='hello '(X) => className='hello' (O)
 camelize('abc-some_case-OfIt') => 'abcSomeCaseOfIt'
26. 기술적 사항 WAI-ARIA & A11Y | Web Accessibility Initiative Accessible Rich Internet Applications. 미비된 내역이 많았던 웹 접근성에 대한 내용은 W3C WAI-ARIA와 A11Y Project를 참고하여 ABC의 모든 컴포넌트 내에 적용할 예정입니다. ARIA Attribute Keeping Promises <div className='abc__toggle__container' aria-expanded={`${this.state.isOpen}`} onFocus={this.handleClickOpen} > {/* Implementation of Toggle */} {/* clarify => is Toggle Expanded? */} <button>Button</button> <a className='btn'>Button</a> <input type='button' value='Button'>
27. 기술적 사항 Component Overriding | class DropdownSearch extends Dropdown { Render 함수 또는 Render Tree의 재구축 가능 Data(state & props)의 추가 가능 컴포넌트간의 의존관계가 생기고, 불안정성이 높아질 수 있음
28. 기술적 사항 컴포넌트 테스트 프로세스 | Enzyme React 테스팅 유틸리티 Sinon 클릭, API 호출 등 이벤트 테스트 Jest JavaScript 테스팅 도구 1 2 3 자체 QA 코드 리뷰 및 수정 기도하기 Faith Test Logical Test Visual Test Try-Catch Human Errors Verify Happy Path Scenario Design(UI / UX) 해피패스 시나리오 검수
29. ab180 | airbridge.io | airbloc.org Chanhee Lee chanhee@ab180.co THX<3 from ab180 Front-End Part.