객체지향 자바스크립트2
서론
일단 나름대로 지난번 코드에서 추상화 작업을 하긴 했는데, 의존성 주입이라는 개념을 적용해서 해보고자 꽤 노력했지만 생각보다 마음에 들지 않는 코드가 완성되었다. ^^
아직도 갈 길이 멀고, 사실은 영상에 나온 binder나 scanner를 그대로 따라 만들지 않고 나름대로 추상화 작업을 하다보니 역시나 더 꼬이고 이상하게 된 것도 있는 것 같다. 하지만 이렇게 만들다 보니 내 머리속에서 정립되지 않았던 부분들이 조금은 정립되었기에 그것을 까먹기 전에 한 번더 글로 정리해보려고 한다.
일단 나는 리액트 라이브러리를 활용해서 지금까지 프로젝트를 주로 진행해왔기 때문에 컴포넌트라는 것을 만들어 그 안에 우리가 익히 알고 있는 html 태그들의 묶음으로 하나의 사용자 정의 컴포넌트를 만들어 내는 것에 익숙하다. 코드스피츠의 객체지향 자바스크립트 강의는 mvvm 디자인 패턴을 기반으로 작업을 진행하는데 mvvm은 뷰모델이 있고 뷰와 뷰모델은 완전히 분리되어 있다. 하지만 나에게 익숙한 리액트 컴포넌트는 그런 모양이 아니다. 하나의 컴포넌트 안에 필요한 state들이 응집되어 있고 또 부모 컴포넌트로부터 필요한 데이터들을 props라는 이름으로 받고 있는 형태이다. 즉, 사용자 정의 컴포넌트라는 노드들로 이루어진 하나의 거대한 사용자 정의 컴포넌트 트리인 셈이다.
하지만 mvvm은 뷰와 뷰모델이 완전히 분리되어 있고 뷰모델은 순수한 데이터를 들고 있는 뷰를 그리기 위한 정보들을 담아놓은 순수한 상태의 모음일 뿐이고 태그가 그 안에 있는 게 아니다.
그렇기 떄문에 나는 내가 그나마 이해하고 있고 익숙한 형태의 컴포넌트 기반이 아닌 뷰와 데이터가 분리된 상태의 그 구조가 너무 헷갈렸던 것이다.
며칠 동안 곰곰이 생각을 해보니 그 점을 계속 헷갈렸기 때문에 최대한 추상화 하려고 노력했지만 코드가 일관되게 정리되지 않았던 것 같다. 뷰와 뷰모델을 분리하는 거 솔직히 너무 어렵다.
그럼 나는 어떤 게 더 좋을까라고 생각했을 때, 더 좋은 건 없고 개발자인 내가 일관되게 이해해서 코드를 작성할 수 있는 개념이 뭔가를 생각했을 때는 (지역)상태와 뷰가 하나의 컴포넌트 안에 모여 있는 그런 형태가 좀 더 이해하고 개발하기에 좋다고 생각했다. 하지만 뷰와 데이터를 완전히 분리해서 작업하는 것 역시 의존성을 느슨히 하기 때문에 좋다고 생각하지만 어떻게 그 많은 순수한 데이터를 따로 관리할 수 있을지 아직은 감이 잡히지 않는다. 부모의 데이터 변경이 자식까지 영향을 미칠수도 있는 부분인데 그렇다면 한 번의 액션으로 자동적으로 필요한 곳으로 props가 가는 형태가 아니라 따로 데이터를 관리하면서 바인딩 한다면 그것을 어떻게 자동적으로 데이터가 흘러가게 할 수 있을지 아직은 이해가 잘 되지 않기 때문이다.
vue.js가 mvvm 모델 기반이라고 하던데 vue에 대해 뜯어보면 그 점을 이해하는 순간이 오려나? 하는 생각이 들었다.
그리고 이건 객체지향과 관련된 이야기는 아니고 여담인데, 현재 나의 블로그는 깃헙 지킬로 만들어서 쉽게 시작했는데, 매번 포스팅 작성할 때마다 야믈 머릿말을 수동적으로 만들어주는 것도 너무 귀찮고 여러모로 블로그 쓸 때 잔디 심어지는 것 말고는 지킬로 블로그를 운영하는 게 별로 메리트가 없는 것 같아서 이참에 진짜로 내가 손수 한땀한땀 코리안 장인으로서 내 블로그를 만들어보려고 한다. 만들 때는 어렵더라도 다 만들고 내가 쓸 떄는 진짜 클릭 몇 번으로 쉽게 포스팅 하고 싶다.
일단 기술 스택은.. 리액트를 쓰면 쉽고 빠르겠지만 그냥 공부한다는 생각으로 프론트는 바닐라로 만들고 서버를 express vs nest.js를 고민해서
한 번 새롭게 db까지 구성해보는 작업을 하는 것도 나쁘진 않을 것 같다. db는 마리아 db 쓸지 몽구스를 쓸지는 모르겠지만, 일단은 쿼리를 날리는 게 sql이 좋기 때문에,
그리고 개인적으로 여행 블로그 하면서 nosql이 조인 쿼리가 잘 안 돼서 쉽지 않았던 기억이 있어서 어떻게 하면 더 쉽게 데이터를 조회할 수 있을지도
고민해보면서 내 블로그를 만들어 보려고 한다. (솔직히 진심 어려울 거 같아서 벌써 걱정된다. 그래도 재밌을 거 같다.)
그럼 이쯤에서 망한 코드를 기록삼아 공유하고 오늘은 이만 글을 줄여보고자 한다. 안녕~
oop예제 : 추상화 작업 후
oop 예제 동작화면
보면 알겠지만, 이제는 style이 바뀌는 부분만 다시 바뀌기 때문에 innerHTML로 전체 코드를 그리는 방식이 아니라 브라우저 성능상으로는 좀 더 개선된 것을 볼 수 있다. 하지만 아직도 유지보수 측면이나 추상화나, 가독성이나 이런 부분은 아직도 많이 부족한 것 같다.
더 연습해야겠다.
fin.