https://nomadhj.github.io/TypeScript_ToyProject/
- 내용 : TypeScript를 활용한 Trello 모티브 Drag & Drop 프로젝트 (개인 프로젝트)
- 사용 기술 스택 : TypeScript
-
프로젝트 및 아이템 생성/삭제 기능
- 프로젝트 입력란에 프로젝트 제목 입력 시 프로젝트 생성
- 프로젝트는 복수로 생성이 가능하며, 각각의 프로젝트 내부 입력창을 통해 아이템(카드) 생성 가능
- 각 카드는 생성 시 배경 색상이 랜덤으로 지정됨
- 프로젝트 제목 또는 아이템 이름 옆의 x버튼을 통해 프로젝트/아이템 삭제 가능
-
드래그 앤 드롭 기능
- 각 프로젝트는 드래그가 가능하며 프로젝트 간 위치를 변경 할 수 있음 (Node 배열에서 index를 비교하여 자리를 바꾸도록 구현함)
- 각 아이템 역시 드래그가 가능한데, 동일 프로젝트 내부에서 자리를 바꾸거나, 다른 프로젝트로의 이동이 가능함 (Trello 생각하면 쉬움)
- 각 아이템은 동일 프로젝트 내부에서는 프로젝트와 마찬가지로 index를 비교하여 자리를 바꾸도록 구현했지만, 서로 다른 프로젝트 일 경우 index를 비교할 필요가 없으므로, 드래그 위치에 따라 선택 된 아이템의 위 또는 아래에 드롭이 될 수 있도록 구현 함
1. TypeScript : 객체지향 프로그래밍 적용
- 프로젝트 생성을 위한 입력부, 개별 프로젝트, 프로젝트 내 카드 컴포넌트를 각각 클래스로 구현 후, 이를 바탕으로 인스턴스를 생성함으로써 레이아웃 구현
- 각 컴포넌트의 공통된 부분은 추상 클래스를 선언하고 상속을 통해 구현
- 추상 클래스 구현 시 제네릭 활용
2. HTML : template 태그 활용
- 필요한 레이아웃을 template 태그를 통해 미리 구현하여 인스턴스 생성 시 해당 태그의 내용을 import해서 사용 할 수 있게함
- 이를 통해 잦은 createElement() 및 appendChild() 호출을 줄이고 코드의 가독성 역시 높임
3. 그외 기타 : 이벤트 리스너 this 바인딩 문제 해결
- bind() 메서드를 활용, 이벤트 리스너의 this 바인딩 문제를 해결
(8/20) 서로 다른 프로젝트 아이템 간 드래그 앤 드롭 가능하도록 수정완료(8/20) 각 아이템 별 삭제 버튼 및 삭제 기능 추가완료- (8/21) 현재 하나의 파일에 구현되어있는데 기능별 디렉토리 분리
- 이벤트 리스너 this 바인딩 시 bind()함수 없이 오토 바인딩이 가능하도록 데코레이터 구현
- dragover 이벤트 시 수많은 이벤트 발생되는데 디바운싱이나 쓰로틀링으로 해결 가능한지 고민해볼 것