객체지향_ 상속을 통해 새로운 기능 추가하기_마지막 (스테픈 2km완료)
지난 포스팅에서 Todolist를 완성키겼다
나는 객체지향 프로그래밍 방식으로 코드를 작성하고 구현을 했다고 생각했는데
곰곰히 생각해보니 캡슐화, 추상화까지만 작성이 되어있다.
그래서 어제 만든 프로젝트가 과연 객체지향 프로그래밍의 원칙을 지켜가며 만들었는가 하는 부분에 의문점이 생겼다.
기능을 좀더 추가하여 객체지향 프로그래밍의 원칙을 지켜 사용하는 방향으로 추가 작업을 하게 되었다.
HTML코드는 최대한 간단하게 작업했다.
html의 Detail태그를 활용해 접고 펴는것으로 화면에 보여지게 작성했다.
Details 태그는 태그로 아코디언 형식의 메뉴를 만들어준다.
이렇게 만든뒤
이제 상속을 통해 기능을 확장하는 부분까지 처리를 해보도록 하겠다.
구매리스트에는 기존에 없는 기능을 추가하고
기존에 있던 함수를 변경하여 적용하려고 한다.
이는 다형성과 상속을 전부 사용하기 위해서다.
updateTodo 메서드를 쇼핑리스트에서는
기존에 Todo리스트에 작성한 텍스트의 내용을 수정하는 기능을 추가 하려고 한다.
이는 객체지향 프로그래밍의 다형성
- 메서드 오버라이딩(Method Overriding) : 부모 클래스의 메서드를 자식 클래스에서 재정의하여 사용하는 것을 말한다.
해당 특징을 활용하는것이다.
또한 상속을 통해 만들게될 장바구니 클래스에서만 사용이 가능한 특별한 메서드를 추가하려고 한다.
바로 전체 삭제기능이다.
이제 코드로 구현해보자
현재 부모 클래스로부터 상속을 받게되면
모든 변수에서 오류가 발생한다
이는 부모의 클래스에서 private로 처리가 되어있어서 발생하는 문제이다.
자식 클래스에서 부모클래스의 요소를 전달 받으려면
protected를 사용해야 상속받은 클래스에서도 접근이 가능하게 된다.
기존의 private를 전부 변경시켰다.
그리고 getTodo() 메서드에 모든 로직을 전부 함수로 분리시켰다.
이렇게 분리시킨 이유는
새로운 리스트에는 html태그에 수정버튼을 추가하려고 하는데
getTodo에 기능이 전부 들어있어서
상속을 통해 구현할때마다
자식클래스에서 메서드 오버라이딩을 통해
getTodo 메서드를 전체수정해야하는 상황이 되기때문에
기능별로 전부 쪼개서 필요한 메서드만 부분적으로 수정해서 사용할 수 있도록 변경했다.
html태그를 가공하는 부분과 이벤트 등록하는 부분을 메서드 오버라이딩을 통해 다른 기능으로 동작하도록 하려고 한다.
update메서드는 기능의 추가를위해 인터페이스에 내용을 변경했다.
해당 액션을 넣어서 텍스트를 action이 있으면 텍스트를 변경시키려고 한다.
상속을 통해 새로운 클래스를 생성했다.
기존 투두리스트의 메서드를 기능별로 조금더 쪼개서 변경하게 되었는데
기능별로 메소드를 전부 분리시키고 거기에 맞게 인터페이스를 최신화 했다.
상속을 통해 새로운 기능을 더 추가하고 사용하려고 하니
기존의 구조에서 부족한 부분이 느껴져서 계속 수정하게 된다.
쇼핑 리스트는 해당 버튼을 추가해서
리스트 전체 삭제하는 기능을 추가했고
작성한 텍스트를 수정하는 기능도 추가했다.
gettodo에 있던 메서드를 분리시켜 만든 elementmaker메서드인데
여기에도 동그라미 친 부분이 메서드 오버라이딩을 사용해 추가한 내용들이다.
A태그를 하나 더 만들어서 수정버튼으로 변경시켰다.
allclear 메서드를 만들어 리스트를 전부 삭제시키는 기능을 넣었다.
사실 함수를 하나 더 만들어도 되지만
객체지향 프로그래밍의 원칙인 다형성을 지키기 위해
기존 함수를 수정해서 분기처리를 할 수 있도록 변경했다.
- 메서드 오버라이딩을 통해 기존의 Todolist 클래스에서의 메서드와는 전혀 다르게 동작한다.
완성된 코드이다
이대로 정상 동작하는지 테스트 해보겠다.
CSS 부분은 포스팅은 생략했다.
약간의 배치정도만 수정했다.
정상적으로 동작하는걸 볼 수 있다.
오늘은 저번글에서 자세하게 예를 들어 설명하지 않았던 다형성과 상속을 실제로 적용해봤다.
구조화 된 하나의 Todolist 클래스를 상속 받아서 다른 종류의 상품 구매목록앱을 제작해보며
구조를 어떻게 짜는게 재사용성에 좋은지를 다시금 생각하게 하는 시간이었다고 생각한다.
코드는 여기에서 자세하게 확인이 가능하다.
https://github.com/yonggyu01/todo_typescript
배포는 여기
https://yonggyu01.github.io/todo_typescript/
이렇게 완성된 투두리스트 앱의 구조를 다이어그램으로 정리해봤다.
이런 구조를 갖게되었다.
처음의 구조와는 완전 다른데
객체지향 프로그래밍의 원칙을 지키며 프로그래밍을 하려고 노력하다보니
조금더 나은 방식으로 구조가 변경된것 같다.
스테픈 2km완료
