django + vue + nuxt -> django + htmx으로 스택을 전환하려는 이유

4년 정도 django와 vue를 가지로 개발에 전념했다.

이전에도 개발한 경력이 있어서 그런지 django와 vue 자체에 익숙해지는데는 어려움이 없었다.

올해에는 SSR 적용 때문에 nuxt까지 도입해서 사용 중이나, 결국엔 드는 생각이

개발 스택의 복잡성의 증가는 장기적인 관점에서 프로덕트 생산성을 낮출 수 있다는 것이다.

 

개인적으로 vue의 강력함은 vdom을 통해서 reactivity를 구현해내고, jquery와 같은 라이브러리를 사용할 때에 귀찮았던 돔 업데이트를 자동으로 해준다는 점이 정말 매력적으로 느껴졌다.

 

이외에도 코드 구조화를 할 수 밖에 없도록 코딩 스타일을 제한함으로서 프로덕트 관리 측면에서도 유익을 주고, js진영의 다양한 에코시스템을 활용할 수 있어서 왠만한 것들은 다 만들어 낼 수 있다고 볼 수 있다.

 

다만 SPA의 단점으로 SEO 문제가 발생하고 그걸 해결하려면 여러 방법이 있으니 대체로 nuxt를 도입해서 SSR을 구현하는거다. 이때 nuxt라는 프레임워크가 생각보단 안정적이지 않았다는게 내 결론이다.

 

legacy nuxt2에서 3로 넘어오려는 사람들도 있으나 아주 쉬운 예로 nuxt3 생태계에서 사용하는 nuxt-auth가 안정적이지 않았다.. 그리고 django에 비하면 오래됀 프레임워크가 아니기 때문에 참고할 자료도 적었으며, 실제 기능적인 구현 자체는 nuxt+vue조합으로 구현하는 것이 django로 구현하는 것보다 프론트엔드 단은 빠르게 구현할 지 몰라도, 전체적인 관점에서 django와 vue를 통합하는 과정의 시간이 오래걸렸다.

 

구체적인 버그로

1. 내 경우 로그아웃을 했음에도 뒤로가기 버튼으로 이전 히스토리를 조회하는 경우 여전히 로그아웃 한 유저의 정보에 접근할 수 있는 버그가 있었고 (예상컨데, 브라우저에서 저장하고 있던 쿠키를 통해서 token을 가져오게 되어 생기는 버그 같았음)

 

2. token을 refresh할 때 새로고침을 계속해서 누르는 경우에 토큰 재발행과 토큰을 업데이트 하는 시간의 괴리로 인해서 로그아웃이 풀려버리는 버그도 발생 하였다. - 이건 이슈로 등록 되어있고 특정 nuxt버전에서는 해결되었다고 하는데 내 경우는 해당 버전 이상임에도 제대로 작동하지 않았다.

 

이 외에도 사실 다양한 문제 또는 구현의 어려움이 존재 했다.

 

결론

 

자 django라는 거대한 기술과 vue+nuxt라는 대세적인 기술의 통합은 생각보다 까다로울 수 있다는 것이다.

물론 특정 상황에서 전혀 문제 없게 사용하는 사람도 있겠지만, 특정 상황에서는 적용이 까다롭고 장기적으로 내가 예상할 수 없는 문제가 발생할 수 있다는 것은 고객에게 바로 전달되는 프로덕트에서는 사용하기가 모호할 수 있다는 것이다.

 

특히나 개발자가 많지 않은 스타트업의 경우에는 더더욱 그러하다.

자 한가지만 생각해보자,

 

서비스 개발과 전혀 관련 없는 내가 언급한 것과 비슷한 버그를 해결하려고 issue를 열고 그것이 해결되길 기다리거나 내가 해결하려는 시간을 허비한다는게 얼마나 무가치 할지.. 그리고 얼마나 걸릴지 모르는 그런 이슈가 터질 수 있다는 잠재적 폭탄을 안고 있는 프레임워크 여러가지를 가져갈 필요가 없는 것이다.

 

그래서 나는 hypermedia driven application이 가능하게 해주는 htmx를 도입 할 예정이다.

그에 htmx, _hyperscript 파운더가 작성한 책을 한 챕터씩 번역해볼까 하고,

기회가 되면 국내용 책으로도 번역해볼까 한다.

 

국내의 많은 개발자에게 도움되길 바란다.