How-tos
이 페이지는 JavaScript Kanban을 시작하고, 설정하고, 조정하며, 관리하는 데 필요한 완벽한 참조 자료입니다.
기본 원칙
Kanban을 사용할 때 알아야 할 주요 사항은 다음과 같습니다.
| 주제 | 설명 |
|---|---|
| 초기화 | Kanban 설정 방법 (Example) |
| 구성 | Kanban 구성 방법 |
| 사용자 정의 | Kanban 커스터마이즈 단계 |
| 스타일링 | Kanban 스타일링 옵션 |
| 로컬라이제이션 | Kanban 로컬라이즈 방법 (Example) |
API 참조
아래는 Kanban 작업 시 참고할 수 있는 API 문서입니다.
| 주제 | 설명 |
|---|---|
| Kanban events | Kanban 이벤트 사용하기 |
| Kanban methods | Kanban 메서드 사용하기 |
| Kanban properties | Kanban 속성 접근하기 |
| Event Bus methods | Event Bus 메서드 |
| RestDataProvider methods | RestDataProvider 메서드 |
| State methods | State 메서드 |
| Toolbar methods | Toolbar 메서드 |
| Toolbar properties | Toolbar 속성 |
카드 작업 방법
이 섹션에서는 카드를 관리하고, 카드 데이터를 다루며, 카드를 원하는 대로 설정하는 방법을 안내합니다.
카드 작업 수행
| 주제 | 설명 |
|---|---|
| Adding new cards | 새 카드 추가 방법 (Example) |
| Deleting cards | 카드 삭제 방법 (Example) |
| Moving cards | 카드 이동 방법 (Example) |
| Scrolling to the desired cards | 특정 카드로 스크롤하는 방법 |
| Searching for cards | 카드 검색 방법 |
| Selecting cards | 카드 선택 방법 |
| Sorting cards | 카드 정렬 방법 |
| Unselecting cards | 카드 선택 해제 방법 |
| Adding links between cards | 카드 간 링크 추가 방법 (Example) |
카드 데이터 다루기
| 주제 | 설명 |
|---|---|
| Getting card data | 카드 데이터 가져오는 방법 |
| Getting cards state | 카드 상태 가져오는 방법 |
| Getting cards reactive state | 카드 반응형 상태 가져오기 |
| Loading card data | 초기 카드 데이터 로드 방법 |
| Parsing card data | 카드 데이터 파싱 방법 |
| Serializing card data | 카드 데이터 직렬화 방법 (Example) |
| Updating card data | 카드 데이터 업데이트 방법 |
카드 설정
| 주제 | 설명 |
|---|---|
| Adding new cards | 새 카드 추가 옵션 활성화/비활성화 |
| Binding cards into columns | 카드를 컬럼에 연결하는 방법 |
| Binding cards into rows | 카드를 행에 연결하는 방법 |
| Configuring a card appearance | 카드 모양 설정 방법 |
| Configuring a cards menu | 카드 컨텍스트 메뉴 설정 방법 (Example) |
| Customizing a card appearance | 템플릿을 활용해 카드 모양 커스터마이즈 하는 방법 (Example) |
| Dragging cards | 카드 드래그 앤 드롭 활성화/비활성화 |
| Editing cards | 카드 편집 활성화/비활성화 |
| Lazy rendering | 다수의 카드에 대해 lazy rendering 활성화/비활성화 (Example) |
| Limiting cards | 컬럼 및 스윔레인 제한 설정 (WIP validation) (Example) |
| Selecting cards | 카드 선택 활성화/비활성화 |
| Setting a fix height of cards | 카드에 고정 높이 설정 방법 |
| Updating card settings | 카드 설정 업데이트 방법 |
카드 에디터 사용 방법
카드 에디터 사용에 대한 자세한 내용은 아래를 확인하세요.
| 주제 | 설명 |
|---|---|
| Autosaving mode | 에디터 자동 저장 모드 활성화/비활성화 |
| Configuring editor fields | 에디터 필드 설정 방법 |
| Configuring the editor | 에디터 설정 방법 |
| Updating editor settings | 에디터 설정 업데이트 방법 |
컬럼 작업 방법
컬럼을 관리하고 컬럼 데이터를 다루는 방법입니다.
컬럼 작업 수행
| 주제 | 설명 |
|---|---|
| Adding new columns | 새 컬럼 추가 방법 (Example) |
| Configuring a columns menu | 컬럼 컨텍스트 메뉴 설정 방법 (Example) |
| Deleting columns | 컬럼 삭제 방법 |
| Moving columns | 컬럼 이동 방법 |
| Scrolling to the desired columns | 특정 컬럼으로 스크롤하는 방법 |
| Separate scrolling for columns | 각 컬럼에 개별 스크롤 적용 방법 (Example) |
컬럼 데이터 다루기
| 주제 | 설명 |
|---|---|
| Getting card data of the column | 컬럼의 카드 데이터 가져오는 방법 |
| Getting columns state | 컬럼 상태 가져오는 방법 |
| Getting columns reactive state | 컬럼 반응형 상태 가져오기 |
| Loading column data | 초기 컬럼 데이터 로드 방법 |
| Parsing column data | 컬럼 데이터 파싱 방법 |
| Serializing column data | 컬럼 데이터 직렬화 방법 |
| Updating column data | 컬럼 데이터 업데이트 방법 |
행(스윔레인) 작업 방법
이 섹션은 행(스윔레인) 관리 및 데이터 다루는 방법을 안내합니다.
행(스윔레인) 작업 수행
| 주제 | 설명 |
|---|---|
| Adding new rows | 새 행(스윔레인) 추가 방법 |
| Configuring a rows menu | 행(스윔레인) 컨텍스트 메뉴 설정 방법 (Example) |
| Deleting rows | 행(스윔레인) 삭제 방법 |
| Moving rows | 행(스윔레인) 이동 방법 |
| Scrolling to the desired row | 특정 행(스윔레인)으로 스크롤하는 방법 |
행(스윔레인) 데이터 다루기
| 주제 | 설명 |
|---|---|
| Getting card data of the column and row | 컬럼과 행의 카드 데이터 가져오는 방법 |
| Getting rows state | 행 상태 가져오는 방법 |
| Getting rows reactive state | 행 반응형 상태 가져오기 |
| Loading row data | 초기 행 데이터 로드 방법 |
| Parsing row data | 행 데이터 파싱 방법 |
| Serializing row data | 행 데이터 직렬화 방법 |
| Updating row data | 행 데이터 업데이트 방법 |
이벤트 작업 방법
| 주제 | 설명 |
|---|---|
| Executing events | 내부 이벤트 실행 방법 |
| Intercepting events | 내부 이벤트 가로채는 방법 |
| List of inner events | Kanban 내부 이벤트 목록 |
| Reordering events | 내부 이벤트의 Event Bus 순서 변경 방법 |
| Subscribing on events | 내부 이벤트 구독 방법 |
Kanban REST API 사용 방법
| 주제 | 설명 |
|---|---|
| Loading server data for cards | 서버에서 카드 데이터 로드 방법 |
| Loading server data for columns | 서버에서 컬럼 데이터 로드 방법 |
| Loading server data for rows | 서버에서 행 데이터 로드 방법 |
| Working with server | REST API를 통한 서버 연 동 (Example) |
Kanban 상태 관리 방법
| 주제 | 설명 |
|---|---|
| Getting StateStore and DataStore | StateStore와 DataStore 객체 가져오기 |
| Getting StateStore properties | StateStore 속성 객체 가져오기 |
| Getting StateStore reactive properties | StateStore 반응형 속성 객체 가져오기 |
Toolbar 작업 방법
| 주제 | 설명 |
|---|---|
| Configuring a searchbar on Toolbar | Toolbar에서 검색바 설정 방법 (Example) |
| Configuring a sort control on Toolbar | Toolbar에서 정렬 컨트롤 설정 방법 (Example) |
| Configuring Toolbar controls | Toolbar 컨트롤 설정, 커스터마이즈, 순서 변경 방법 (Example) |
| Including Kanban API in Toolbar | Toolbar에서 Kanban API 포함 및 사용 방법 |
| Localizing Toolbar | Toolbar 로컬라이즈 방법 |
TypeScript 사용 방법
| 주제 | 설명 |
|---|---|
| Working with TypeScript | Kanban에서 TypeScript 사용하는 방법 |
추가 문의 사항이 있으신가요?
정보
질문이 있으시면 아래 댓글로 남겨주세요!