웹팩은 코드를 묶어서 임포트를 덜 할 수 있게 해준다. 최적화해서 적은 코드를 다운받게 해준다. 빌드 단계를 쉽게 추가할 수 있다. ts-loader, typescript, webpack, webpack-cli, webpack-dev-server 를 설치하자. webpack-cli 는 webpack 명령어를 사용하기 위해. webpack-dev-server는 개발 서버 내에서 빌드하기 위해, 변경사항이 있을 때 재컴파일한다. ts-loader은 webpack에게 어떻게 코드를 js로 변환할지 전달, tsconfig를 확인. tsconfig "rootDir" 설정이 이제 필요가 없다. 웹팩이 루트 파일 위치를 설정할 것이다. 웹팩에서는 .js 등 확장자가 필요가 없다, 설정에 따라 확장자를 찾을 것이기 때문. webpack.config.js webpack 명령어를 입력하면 dist 폴더에 bundle.js 파일이 빌드된 것을 확인할 수 있다.

tsconfig outFile 은 ts가 namespace 와 연결되도록 한다. module AMD로 수정한다. 클래스 이넘 인터페이스를 네임스페이스로 감싸고 export한다. import는 아래와 같이 한다. 하지만 es6 모듈 사용법을 권장한다.

프로젝트 목록을 드래그 앤 드롭을 적용해보자. 먼저 HTML에 원하는 태그에 draggable="true" 속성을 추가하자. 위 인터페이스를 사용할 것이다. 이것을 implements 해보자. 아이템에 dragstart, dragend를 적용했다. 드롭될 목록에 dragover, dragleave, drop 이벤트를 달았다. 드롭될 때 프로젝트 status를 바꾸고 리스너를 업데이트하자. 완성

프로젝트 인원이 1명일 때와 아닐 때 다르게 렌더링하기 위해서 게터를 사용해보자.

Component 클래스를 상속해서 목록을 렌더링 해보자.

추상 private 는 ts가 지원하지 않는다. public 메서드는 private 메서드 위에 작성하는 것이 좋다. 제네릭과 상속으로 코드 리팩토링을 해보자.

프로젝트를 만들 때 목록에 추가하고 리스너 함수를 추가할 수 있는 상태 관리를 해보자. 생성자를 private 으로 숨기고 getInstance 스태틱 메서드를 통해서 생성할 수 있도록 한다. 하나의 인스턴스만 사용한다. 이러한 방식이 싱글톤 방식이다. 프로젝트를 생성할 때 프로젝트 목록에 추가해보자. 프로젝트 목록 인스턴스를 생성할 때 리스너 함수를 추가해보자. 목록을 생성할 때 assignedProjects를 저장하고 이를 렌더링한다. 현재는 active와 finished에 모두 추가가 되고 목록이 중복이 되는 버그가 있다. 이는 다음에 해결해보자.

프로젝트 활성 상태에 따라 목록을 보여주는 앱을 만들어보자.

Title, Description, People 위 3개의 인풋을 받는 form 태그를 렌더링하고 서브밋을 할 수 있는 앱을 ts 객체지향으로 만들어보자. 이렇게 돔을 렌더링 할 수 있다. 이제 서브밋 이벤트를 달아보자. 서브밋을 하면 value를 찾을 수 없다는 에러가 발생한다. configure 함수를 위와 같이 수정하면 해결이 되지만 데코레이터를 이용해서 해결해보자. 다음은 사용자 입력을 가져오자. gatherUserInput 함수는 유효검 검사를 통과하면 사용자 인풋 값인 튜플을 반환하고 그렇지 않을 때에는 빈 값을 반환한다. 사용자 인풋 값이 튜플인지를 알기 위해서는 배열인지를 확인하는 것으로 대체했다. 서브밋했을 때 인풋을 비워주는 clearInput도 추가했다. 유효성 검사를 위한 함수를 만들자. minLength가 0이면 유효성 검사가 false가 되는 것을 막아보자. validate 함수에서 위는 =가 하나로