객체지향 프로그래밍 실제 적용해서 만들어보기 part 1(스테픈 2km완료)
몇일전 코딩테스트에서 디자인만 깔짝이다가 와서 결국 중요한 스크립트를 하나도 못하고 왔는데요
그게 너무 아쉬워서.
어제 공부했던 객체지향 프로그래밍의 내용을 토대로
객체지향 프로그래밍 방식대로 투두리스트를 코딩을 해보려고 합니다.
html + scss + typescript를 사용해서 투두리스트를 만들려고 하구요
일단 html 코드만 작성했을때는 이런 형태였습니다.
아직 디자인은 적용하지 않은 상태인데요
하..
차라리 테스트 받으러 가서도 디자인은 일단 나중에 하고
이렇게 코드 쳐두고 스크립트부터 짤걸 그랬네요 ;;;;
코딩테스트 자체가 처음이라.. 너무 실수를 많이 한것 같습니다 ㅠㅠ
일단은 여기에 투두리스트 기능을 추가하려고 합니다.
물론 거기 회사에서 테스트를 받을때는 자바스크립트로 만들라고 했지만
요즘 공부중인 타입스크립트를 연습하고 싶어서 일단 이거로 진행하려구요
일단 기본적으로 투두리스트의 데이터를 받고 처리할 class를 만들었습니다.
Todolist 클래스는 투두리스트를 관리하고, 추가하고, 삭제하고 , 업데이트 하기위해 만든 하나의 객체입니다
투두리스트를 관리하는 관련 데이터나 메서드를 전부 여기에 만드는거죠
투두 리스트는 대략이런 형태의 배열로 받으면 될것 같구요
어차피 내용 자체도 그냥 체크버튼 하나와 우측에 삭제버튼 하나만 있는 상황이라
내용 수정 기능은 따로 넣진 않아도 될것 같습니다.
투두리스트는 기본적으로 캡슐화를 해서 외부에서 해당 객체의 프로퍼티에 접근이 불가능하도록 하려고
private를 사용해서 오로지 내부 함수를 통해서만 작동하도록 설계를 했습니다.
이러한 방식이 바로 객체지향 프로그래밍의 핵심중 하나죠
어제 공부했던 객체지향 프로그래밍의 4가지 특징중 하나입니다.
그리고 함수들인데요
아직 어떻게 구동시킬지 정리된 상태는 아니라서 일단 이런 함수들로 내부의 데이터를 조작할 수 있도록 하려고
메서드 이름정도만 만들었습니다..
그리고 class 투두리스트는 위 함수를 구현하는 객체라고 타입을정의했습니다.
일일이 다 정의하면서 하려니 조금 번거롭긴 하네요
일단 해당 객체를 만들어서 동작에 문제가 없는지 테스트를 좀 해보면서 나머지 함수를 작성해야겠습니다.
컨스트럭터로 생성하는 이 3가지는 변수들에 대해서 설명하자면
제가 생각할때 add, update, delete 등의 함수들은
DOM에 있는 요소를 직접 조작하게 될건데
어디에 있는 요소를 타겟으로 할지 고민하다가
li 태그를 만들어서 append로 붙일거라 생각했습니다
li 태그를 만든다음에는 li의 부모태그는 (UL)태그이기 때문에 타겟을 ul 태그로 잡았습니다.
이 클래스를 가지고 객체를 만들때 해당 함수에서 생성하는 li 태그들을 본인의 타겟 태그 ul태그에 append 하기 쉽게 하려고 합니다.
요즘 제가 react 같은 라이브러리만 사용해서.. 가상dom에서만 작업을 하다가 오랜만에
dom을 직접 다루려니 맞게 진행하는건지 조금 해깔리긴 하네요
ul을 타겟으로 잡으려고 변수로 지정했습니다.
ul에서 오류가 발생하네요
html파일에서 타입스크립트를 읽을 수 없어서 발생하는 문제가 아닌가 하고 생각했습니다.
js파일로 컴파일을 시켜보고 동작이 잘 되는지 테스트 해보겠습니다.
터미널에서 tsc -w를 입력하면 자동으로 ts파일을 js파일로 변환해줍니다.
만약 변환이 안된다면
- 프로젝트 폴더 내 tsconfig.json 파일 생성 해서
수동으로 생성 혹은 터미널로 생성: $ tsc --init
생성 후 아래 내용 입력해 주면 됩니다.
일단 생성 완료되어 두 파일을 비교해 봤습니다.
그냥 타입 정의한 부분이 전부 빠진 상태로 나옵니다.
앞서 오류가 났던 ul.. 타입오류가 났다고 뜨네요
html 파일에서 타입스크립트를 읽을 수 없어 발생한 문제라고 생각했는데
그게 아니라 제가 타입지정을 잘못 한것 같네요.
타입지정을 변경하니 해결되었습니다.
HTMLElement 타입으로 하면 오류가 나서
Element로 지정했습니다.
해당 변수가 진짜 htmlelement가 100% 확실하다면 뒤에 as 를 붙여서 처리해도 오류가 뜨진 않습니다.
이상태로 라이브서버에서 실행시켜 보겠습니다.
콘솔에 원하는 내용이 잘 나오는군요
ul태그도 잘 나옵니다.
이제 함수를 사용해서 해당 클래스로 만든 객체에 모든 동작을 구현하기만 하면 됩니다.
테스트 받으러 가서 이 방식으로 전부 구현했었다면 어땠을까 싶네요
너무 아쉬운 마음이 듭니다.
일단 나머지 함수를 추가하려고 고민을 좀 하고있습니다.
기존에 만들던 절차지향적인 방식대로라면
그냥 배열을 하나 만들고 여기에 데이터를 추가하는 방식으로 만들면 됩니다.
이런식으로 변수와 함수등을 따로따로 만들어서 필요할때마다 사용하겠지요
이렇게 만들면 추후 유지보수를 하게되면
해당 기능의 함수가 어디에 있는지 , 혹은 어디를 수정해야할지 찾기가 너무 힘들어집니다.
클래스로 만들면 해당 클래스로 돌아가서 해당 함수만 찾으면 되니
가독성이 좋지요
일단 이대로 쭈욱 작업을 해보겠습니다.
스테픈 2km 완료
