Vue.js 도입 중.

바닐라 JS는 정말로 좋다. 빡센 일정이었지만 JS로 코딩 하는 시간은 너무 즐겁고 행복한 시간들이었다.

하지만...

프로젝트가 거의 다 마무리가 되어가는 이 시점에서 내가 써놓은 코드들을 보고 있으니 한숨이 저절로 나온다.

내가 작성한 코드라 나야 잘 알지만, 다른 사람들이 이걸 보고 쉽게 이해할 수 있을까 생각하면 가슴이 턱턱 막혀온다.

그렇다고 지금 와서 거창한 프론트엔드 프레임워크를 적극적으로 도입할 수는 없는 노릇이다.

리액트? 그건 무거울 뿐만 아니라 코드의 구조 전부를 싹다 바꿔야 하기 때문에 사실상 불가능하다.

django 템플릿을 이용한다면? 그럴 수 있지만, 그러면 이미 분리된 Fast API 서버와의 코드가 중복되고, 애플리케이션 구분이 모호해진다. 그리고 django 템플릿을 이용하면 데이터가 정제되는 곳이 django 쪽으로 몰리게 되는데, 이것은 개발과 유지보수 과정에서 필연적으로 백엔드 서버의 업데이트를 위한 재실행이 수반되어야 하므로 유연성과 가용성을 떨어뜨리는 결함이 될 것이다.

그래서 선택은 Vue.js

이유는 간편한 도입이 가능하고 학습 난이도가 매우 낮다는 점이다.

특히 학습 난이도가 낮기 때문에 다른 개발자들이 빠르게 습득할 수 있다.

데이터 바인딩이나 MVVM과 같은 어려운 개념들이 필요하긴 하지만,

저수준의 소스코드만이라도 상당한 퍼포먼스를 발휘할 수 있을 듯 하다.

---------------------------------------

정해진 답이야 있겠냐만, 웹 개발을 하면서 프레젠테이션과 비즈니스 로직 분리를 위해 어떤 프레임워크를 쓰는 것이 가장 좋을까 정답을 찾고 있었다.
달리 표현하면 C#의 WPF에서처럼 MVVM을 지원하고 데이터바인딩이 강력한 프레임워크를 찾고 있었다고 할 수 있다.

JSP, PHP, React, Angular.js, Vanila.js 등등.. 안 써본게 없는 것 같다.

JSP, PHP는 그야말로 프로모션, 프로토타입 사이트 만드는 데에만 좋다.
이들은 인터페이스 간에 상호작용이 조금만 많아져도 뷰단의 소스코드가 복잡해진다.
그리고 템플릿 언어와 JS 간의 호환성이 매우 낮아 데이터 정제를 위한 모델 운용 난이도가 매우 높다. 다시 말해 확장이 어렵다.

리액트는 학습 곡선이 높을 뿐만 아니라, 이것 역시 컴포넌트가 많아지면 소스코드가 복잡해진다.
프레임워크의 가장 큰 단점 중에 하나는 '스펙'이 제한되어 종종 내가 원하는 기능이 지원이 안 되는 경우가 발생한다는 것인데, 그래서 '리액트스럽게' 바닐라 JS로 뷰를 만들기도 했다.
하지만 아무리 그렇게 해도 앞의 JSP, PHP처럼 상호작용이 조금만 많아져도 뷰가 복잡해졌다.
특히 바닐라 JS의 경우에는 비즈니스와 프레젠테이션 로직의 엉킴이 심각해서 왜 프레임워크를 쓰는지 절실히 느끼게 해줬다.


그런 와중에 Vue.js를 도입을 해보니 신대륙을 발견한 콜럼버스의 기분을 어렴풋이 느끼게 되었다.
일단 코드가 너무 깔끔하다. 프레젠테이션 로직의 많은 부분을 뷰단으로 내보낼 수 있게 되었다.
그리하여 비즈니스와 프레젠테이션 로직의 결합력이 약해지고 비즈니스 로직의 응집력이 높아졌다.
Vue.js가 뷰단에서 지원해주는 강력한 attribute 덕분에 복잡한 기능 구현이 아주 수월해졌다.
MVVM을 지향하므로 데이터바인딩도 지원해주는데 기가 막히게 사용과 응용이 쉽다.
복잡하게 짜였던 기능 관련 코드들이 간략해지고 그 과정에서 성능을 감소시키는 코드가 사라졌는지 속도도 좋아진 듯 하다.

학습 곡선이 정말 낮다.
지엽적이지만 Vue.js를 모르는 상태에서 바닐라 JS를 Vue.js로 교체하는데 고작 30분 걸렸다 

긍까.. Vue.js 쓰자.. 이건 물건이다.