Code Spitz 세번째(1/3)

코드없는 요약으로 정리 (2시간 중 40분 분량)

복습만이 살 길…

시작하기 전에

저번시간에 이어서 루프 패턴으로 부터 시작합니다. 루프하면 그냥 for라고 생각하겠지만 알고보면 재귀함수도 루프입니다. 컴퓨터 과학에서는 루프를 다음 두가지로 이야기 시다.

동일구조의 반복(Iteration) : Iterator pattern (상태가 변하지 않음)

알고리즘 전개에 따른 반복(Recursion) : Composite, Visitor pattern (계산을 해야 다음을 알 수 있다.)

이번 시간에는 Composite, Visitor pattern을 한다. Composite는 트리구조나 그래프를 탐색하기 위해서 만든것이고 Visitor는 파일의 구분없이 돌아다니며 의도했던 일을 루프구조로 만들기 위해서 만든것입니다.

아래부터는 코딩하는 순서대로 의사코드 형식으로 TODO APP을 프로그래밍을 하는 어플리케이션 패턴으로 만들어 보는것으로 하겠습니다. 어플리케이션에는 두가지가 있는데 비지니스 모델이 있고, 이것을 응용하는 방식이 있습니다. 도메인 모델과 어플리케이션 레벨로 나누어 봅시다. UI와 데이터 베이스를 내버려두고 오직 “나의 메모리객체 상에서 어떤식으로 객체구조(자료구조)를 잡아낼 것인가를 생각하며 만들어 봅시다.”

우선 기본 HTML을 만들어 봅시다. 그 후 TODO LIST에 하나씩 무언가를 집어넣을 것이라고 생각하고 그것을 Task라고 불러봅시다. Task클래스를 만들어 봅시다. 그 후에 이 Task를 담을 TaskList를 만들어 봅시다. 이때 어느것 부터 만들어야 하는가 고민에 빠지는데 의외로 TaskList를 먼저 만드는것이 좋습니다. Task를 사용하는 게 TaskList이기 때문이죠 항상 사용하는 쪽 부터 만듭시다.

그 후 실행을 하는것을 만들어 봅시다. 그 후 추가될 기능들을 추가합시다. 예를들면 정렬하는 기능같은것을 만들어 봅시다. byRegister 같은것을 일단 만듭시다.

실행을 만들어 놨으니..TeskList에 constructor,add,byRegister,byTitle 을 넣어야 원하는것을 만들 수 있겠죠.. 이렇게 놓고보면 원하는것을 만들어 보면 어떤것이 들어갈 지 생각해 봅시다. (배열이나 title 같은…)

add 에 배열을 push 할 것을 넣으면 Task를 안에 넣을것을 알게되고 생각해보니 add가 있으면 remove도 있어야 할 것 같습니다. remove는 Task를 지우죠

지울때 ES6의 includes를 사용하고 splice를 사용해 지웁니다.

그 후 byRegister을 만들것인데 이것은 this._getList를 리턴할 것인데 왜냐하면 정렬된 것을 보내기 위해서입니다. 마찬가지로 byTitle도 채울 수 있죠.

여기서 왜 byRegister,byTitle과 같이 하나하나 인자를 받지 않는 함수를 만들었는가 하면 “세상에서 제일 좋은 함수는 인자를 받지 않는 함수이고 그 다음은 하나 받는 함수이다. 그 다음은 두개 받는함수이고 세개부터는 나쁜함수이다.”이기 때문입니다. 항상 인자를 줄이는데 노력을 해야 인자를 보내는데 예외사항을 줄일 수 있습니다.

이후 state인자를 여러 각 함수에 추가합니다. ES6의 기본값 정책을 사용하여state=false라는 기본값을 넣어주는데 벨리데이션 된 값을 외부의 공개된 함수가 처리되어 받을 수 있도록 하기 위함입니다. 그래서 인자가 안 왔을 때 false처리를 해 줍니다. 이것을 shield라 합니다. (내부함수는 벨리데이션 하지 않는다는 사실에 주의하며 사용합시다.)

이제까지는 뼈대는 다 만드는겁니다. (저는 앞으로 이걸 만드는데 집중해야 할듯 합니다. ㅠㅠ)

생각해보니 날짜 정렬도 써야 할 것 같습니다 . byDate도 하나 만듭니다. 마찬가지로 Task에도 Date를 추가합니다. 또 생각해보니 완료여부도 추가하지 않았습니다. this._isComplate = false 로 기본값으로 해 놓아봅니다.

그리고 외부에 _isComplate을 조심스레 반환해 봅시다. 그 후 외부에서 상태를 바꾸었을 때 다시 전환할 무언가가 없습니다. 그래서 Toggle를 만듭시다.

그럼 다시 getList로 돌아갑시다. 분기를 steate일 때와 아닐때 두가지를 둡니다. (진행중인것 과 완료인것 묶는경우와 안 묶는경우) 안묶는경우가 쉬우니까 이 때는 복사본을 만들어 넘겨주면 됩니다. ES6의 배열 펼침을 쓰면 됩니다. 그리고 정렬을 할 것인데 이것은 영향을 적게 주기위해 제3자가 가져야 합니다. (별도의객체)

그후 title,date,register를 넣을 TeskSort를 만들어 봅시다. 여기서 register는 원래 배열의 순서이기 때문에 null을 넣습니다. 그러면 이것만 가지고 이전에 만든 코드를 변경 시킬 수 있습니다. 이제는 Sort를 쓸 때 그냥 쓰지 않고 TeskSort를 사용해서 Sort를 써야 합니다. 이렇게 하면 자연스럽게 전략 패턴으로 됩니다. 이렇게 해 보니 인자를 객체로 바뀌어 버렸습니다. 인자를 못건드리게 하기 위해서 s함수를 추가합니다.

그 후 title함수로 가서 title에 들어오는 객체는 Task니까 위임해서 Sort해야합니다. (캡슐화를 해서 결과만 얻어오는 방법을 사용하는 것입니다.) 마찬가지로 date,register도 만들 수 있습니다.

그후 Task에 함수를 sortTitle와 같은 함수들을 만들 수 있습니다. 이것은 this._title 와 task_.title를 비교해서 반환할 책임을 가지고 있습니다. 이것이 가능한 것은 task가 그 과정들을 모두 알고 있기 때문입니다. 나머지도 같은 방식으로 만들어 줍니다. 그런데 생각해보니 register는 실제 등록은 TaskList만 알고 있는 행위인데 현재 Task는 그것을 알지 못하기 때문에 삭제 해야 한다. 따라서 TaskSort의 register는 null이 정상인 것입니다.

진행 해보니 역할모델에 의해서 전략패턴에 의해 잘 짜여진것 같습니다. 여기까지 분량이 37분 입니다. 아래의 영상에 서 풀 버전을 확인하실 수 있습니다.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade