Postgresql 쿼리 최적화때 https://explain.dalibo.com/를 이용할 수 있다고 글을 적은 적 있다. ( https://yiunsr.tistory.com/855 )
몰랐는데 이 기능이 github 에 소스가 공개되어 있었다. ( https://github.com/dalibo/pev2 )
그리고 더 나가 파일을 다운받아서 로컬에서 실행할 수 있게 파일을 다운받을 수 있다. https://github.com/dalibo/pev2/releases 에서 index.html 파일을 다운받은 후 drag and drop 으로 웹브라우저에서 열면 실행이 가능하다.
저 사이트를 직접이용하면 최적화 결과가 저장되어서 부담스럽지만 이렇게 이용하면 최적화가 정보가 로컬의 indexDB로만 저장되기만 한다. 딱히 다른 곳으로 데이터를 보내는 것 같지는 않다.
요즘 vuetify2 로 된 UI를 vuetify3 로 변경하는 작업을 하고 있다. vuetify2는 vue2 로 된 UI 이고 vuetify3 는 vue3를 기반으로 하고 있다.
어째든 오늘 vue.draggable.next(https://github.com/SortableJS/vue.draggable.next) 라이브러리를 이용한 부분을 수정하고 있었는데
<draggable v-model="myArray" item-key="id">
<template #item="{element, index}">
<div> {{index}} - {{element.name}} </div>
</template>
</draggable>이 예제가 이해가 가지 않았다. #item 이 뭔지 이해하지 못했다. #을 사용하는 방식이 v-slot 의 단축형이라는 것을 처음 알았다. (참고 : https://v2.vuejs.org/v2/api/#v-slot )
이번 구현에는 이 draggable 안에 draggable 을 구현해야 하는데, 그러면 저 안의 index 가 중복될 텐데 어떻게 해야 하나 고민을 했다. 혹시 {element, index} 이게 dict 형이니까 {element:element1, index: index1} 으로 하면 element1, index1 으로 사용할 수 있나하는 추정을 해봤다. 그런데 그렇게 동작했다. 이 때 까지 이렇게 사용할 일이 없다보니 알지 못했다.
새로운 것을 배울 때는 단계를 거쳐서 배워야 하는데 바로 업무에 사용해야 하다보니 배움에 구멍이 많아 진 것 같다. 특히 나에게 front-end 쪽은 좀 구멍이 많은 것 같다.
여러 프로그래밍 언어를 하다보면 특정 언어의 고유한 성질을 모를 때가 있다.
오늘 javascript 에서 import 에 대해서 알게 되었다.
참고 ( https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import )
js 언어에서 모듈을 가져올 때 방법 1과 방법 2가 의미하는 것이 다르다.
// 방법 1, 기본값 가져오기
import defaultExport from "module-name";
// 방법 2, 특정 멤버만 가져오기
import { export1 } from "module-name";나는 방법 2가 콤마를 이용해서 여러가지를 가져오는 방법이라고 추측했는데 그게 아니었다.
이 문제는 모듈을 정의하는 곳에서 어떻게 되어 있느냐에 따라서 달라지는 문제 였다.
방법 1을 사용하려면 모듈을 정의하는 곳에서 "default export" 구문을 사용했어야 한다.
이 차이를 몰라서 오늘 반나절을 허비했다. vuetify3 에서 이 이슈 때문에 계속 오류를 발생시켰다. 나에거 js 가 사이드 언어인지라 변화를 바로바로 따라가지 못하다 보니 이런 문제가 있었다.