이삼일 전인지 지난주부터인지 하고 있었는데 여러가지 난항이 많았다.
단순히 검색할 데이터를 담아서 호출을 할 화면을 만들거나 그에 맞춰서 백엔드 레스트컨트롤러나 MyBatis sql mapper 파일 수정하거나 그런 문제가 아니고...
(거기서도 문제는 있었지만)
근본적으로 vue 자체가 사람을 힘들게 한다... 처음 마주친 문제는 검색을 하고 나서 이 검색 데이터를 언제까지 유지할 것인지가 문제였는데... 목록 버튼이나 위의 게시판 버튼을 누르면 검색 조건이 없는 1페이지 화면을 보여주려고 했었다.
그런데 vue-router에서는 같은 주소에 대한 요청은 그냥 무시해버리는 것 같다. 그에 대해서는 vuejs의 vue router 깃허브 페이지에서도 여러 번 이슈가 오픈이 되었다가 닫힌 것 같은데, vue를 개발하는 쪽의 철학이 그런 경우를 배제하고 싶어하는 것 같다. 수 년 전부터 비슷한 요청이 있었고 router의 duplicateNavigationPolicy를 reload로 수정하거나 routes의 속성으로 force:true를 넣거나 하는 방식으로 구현이 가능했던 것 같다. 하지만 현재는 그런 방법은 (아마도 의도적으로) 지원하지 않고 있어서 여러 시행 착오 끝에 결국은 (비교적 처음부터 알았지만 별로 쓰고 싶지 않았던) click 이벤트에 $router.go()를 사용해서 강제로 이동하게 했다.
(열심히 찾아보다가 https://github.com/vuejs/vue-router/issues/974 에서 발견한 한 코멘트.)
근데 또 웃기는 건 특정 게시물 자체를 보여주는 페이지는 router가 params에 index를 가지게 구현해 놨는데... path를 지정해줘도 params는 유지가 되는지 해당 페이지를 다시 보여준다. 그래서 경우에 따라 일부는 push를 일부는 go를 하게 냅뒀다.
그리고 또 어차피 검색 조건 입력을 vuetify 커스텀 태그로 받은 김에 pagination이나 table 등도 뷰티파이에서 제공하는 커스텀 태그를 써서 해볼까 했는데... 분명 내가 개발새발로 한 거에 비하면 때깔이 이쁘고 디자인이 일관적으로 되는 부분들은 좋지만 가장 치명적인 문제는 최신 버전이 이곳 저곳 빈 곳이 많다는 것이다. 기능이 구현이 안 되어 있다는 게 아니라 공식 문서에서 예시로 올려둔 부분들이 정상 작동을 하지 않는다. v-pagination의 경우에는 페이지 넘버를 증감하는 아이콘(prev-icon과 next-icon이었나)이 mdi-icon으로 되어 있는데 아예 화면이 표시가 되지 않는다. 그렇다고 해서 다른 소스를 편하게 연결해서 쓸 수 있게 되어있는 것 같지도 않다. 특정 attribute나 api에 설명이 아예 존재하지 않는 경우도 제법 있다.
그 전에도 뷰에서 아이콘 쓰는 법을 찾아서 봤는데 mdi(https://pictogrammers.com/library/mdi/)에서 쓰는 걸 공식적으로 권장하는 듯한데 따 오는 법이 상당히 불편해서... 그냥 웹에 편하게 풀려있는 소스를 CDN 등으로 가져와서 어떻게 따 와서 쓰는 게 더 나을 것 같다.
이런 문제는 vue 관련 라이브러리 뿐만 아니라 그냥 vue 자체에 대해서 알아볼 때도 일어나는데 vue instance life cycle 에 대해서 알아볼 때에도 마찬가지인 것 같다.
Vue 라이프사이클 이해하기 - 지그재그의 개발 블로그
해당 포스팅은 나름 잘 읽었는데(특히 다이어그램은 너무 이쁘게 잘 되어있는 것 같다) 라이프사이클 훅이 아닌 라이프 사이클 자체에 대해서는 의문점이 있었다. 예를 들면 언제 created나 destroyed가 동작하는지 해당 포스트만 보고는 알기 어려웠다. spa이기 때문에 코드 스플리팅으로 레이지 로딩 해놓지 않으면 한번에 다 생성되는 건지? 그럼 destroyed는 언제? 생성하는 코드야 .vue 파일의 스크립트 단에 써놓았다 쳐도 파괴는 한 적이 없는데? 그래서 조금 더 세세한 부분들을 알고 싶어서 공식 문서에 가봤더니...
아예 라이프사이클 자체가 바뀌어있다? 라이프사이클에 대한 설명을 보면 보통 8개 단계가 있고 그 중에 4개 핵심을 생성->부착->갱신->소멸이라고 하던데 이젠 destroyed 대신 unmounted가 되었다. 그럼 이젠 한번 생성된 뷰 인스턴스는 소멸되지 않는건지? created 이후 불러올 수 있었던 필드나 메서드를 unmounted 되도 사용할 수 있는건지? 다시 mount 하면 어떻게 되는건지? 명확하지가 않다.
생태계가 성숙하지 않거나 표준 자체가 계속 바뀌어 나가는 게 장점일 수도 있고 단점일 수도 있는 것 같은데 나는 능력이 모자란건지 그냥 힘든 점 같다... 규모가 크고 오래된 회사들이 (자체적인 IT 역량이 뛰어나지 않다면) 어느 정도 성숙한 환경을 고수하는 이유가 있구나 하는 생각도 들긴 하다.
