오늘은 형식 없이 회고를 해보려고 한다.
아직 코드 리뷰를 받지 못한 상태이고, 그래서 혼자 todo list를 만들어봤다. 예전에도 많이 만들어 본 것이지만 달라진 내 코드의 모습이 보고 싶었다.
이번 목표는 일단 동작하는 쓰레기 코드로 구현을 한 뒤에 리팩토링을 하는 것이었다.
index.js에 모든 쓰레기 코드를 모아놓고, 리팩토링을 하다보니 반복적으로 진행되어 디자인 패턴이라고 부를만한 것이 생겼다.
todo list
우선, todo list를 다음과 같이 구성했다.
- todoInput.js : todo에 대한 입력을 받는 곳
- todoList.js : todo의 목록을 화면에 표시하는 곳
- todoCount.js : todo의 총 수량과 전체보기 / 할 일 보기 / 한 일 보기로 나뉘는 곳
이렇게 구성을 하고 보니 각 파일에는 각각의 addEventListener가 들어가 있었다. eventListener는 handler를 실행하게 되고, handler에서는 todo의 데이터와 화면에 표시해야 할 정보를 가지고 있었다.
즉, 데이터와 화면 정보를 handler 하나에서 관리하고 있는 것을 볼 수 있었고, 그 둘을 떼어놓을 수 있을 것 같았다. handler 하나가 가지고 있는 책임이 너무 많게 느껴졌다.
그래서 handler가 가진 로직을 모두 가져갈 convey.js 파일을 만들었다. 이름은 handler로 부터 받은 todo 정보를 토대로 데이터를 처리해야 할 곳과, 화면 정보를 표시해야 할 곳에 넘겨준다고 생각해서 convey라고 지었다.
이제 todoInput.js, todoList.js, todoCount.js 파일에는 addEventListener과 handler만 남게 되었고, 다른 로직은 없다. 관리하기가 매우 쉬워졌다.
다시 convey.js로 돌아와서, handler로부터 todoList에 업데이트를 해야 할 데이터를 받아서 데이터를 최상위의 TodosApp.js로 전달해 업데이트를 하고, 업데이트된 정보를 받아와서 render.js로 전달해주었다. 이제, 명백하게 틀이 잡혔다.
todo list 파일 구성
- TodosApp.js : 실제 todoList에 대한 데이터가 들어있고, 데이터에 관한 비즈니스 로직을 처리하는 역할
- render.js : todo app의 화면을 랜더링하고, element의 클래스를 변경하는 역할
- convey.js : handler로부터 받은 유저가 입력한 정보를 바탕으로 TodosApp.js에 전달해 데이터를 업데이트하거나 가져와서 render.js로 전달하는 역할
- todoInput.js : 사용자로부터 input을 받아 그 정보를 convey.js로 전달해주는 역할
- todoList.js : 사용자로부터 받은 정보(토글, 삭제)를 convey.js로 전달해주는 역할
- todoCount.js : 사용자로부터 받은 정보(전체보기/할일보기/한일보기)를 convey.js로 전달해주는 역할
크게 이렇게 구성이 되어 있고, 그 밖으로는 todo가 들어올 때마다 화면을 구성할 element를 가진 template.js, 각종 element를 가진 element.js, 사용자의 input이 잘못되었는지 오류를 검사해주는 validator 폴더가 있다.
나중에는 constants.js, utils 폴더 등 계속해서 생길 것이다.
느낀 점
항상 MVC 패턴을 당연하게 사용해오다가 이렇게 처음에는 한 파일에 모든 코드를 몰아놓고, 하나씩 나누면서 정리를 하다보니 자연스럽게 MVC 패턴으로 변하는 것을 볼 수 있었다.
이 과정을 거치면서 MVC 패턴에 대해 더 자세히 알게 되었다.
그리고 클래스가 아닌 function으로 연습을 하면서 클래스가 필요한 상황이 아니라면 쓸 필요가 없다는 것을 알게 되었고, 이런 간단한 기능을 만들 땐 모델만 class면 되겠다는 생각을 했다.
모델은 class여야 상태 관리가 수월한데, 이유가 todoList를 가지고 있고, todoList를 지속적으로 업데이트하거나 가져와야 하기 때문이다. 그래서 결국 컨트롤러는 모델에다가 todoList를 업데이트해주세요!!!라고 요청만 할 수 있고, 업데이트를 수행하는 곳은 모델이다.
그래서 아직까지는 컨트롤러나 뷰를 class로 만들어야 하는 이유는 모르겠다. 언제쯤 컨트롤러나 뷰에서 상태를 관리하게 될까?
우선 오늘도 깨달음을 얻는 날이었고, 매일매일 발전하는 것 같아 기분이 좋다.😊👍
