https://www.v-wiki.net/scream-test-meaning/
오늘 "스크림 테스트"라는 용어를 배웠다.
기능을 제거할 때, 우선 원복 가능성을 고려해서 기능을 제거한다. 그리고 누군가 비명을 지르면 제거한 기능을 원복하는 방법이다.
내가 다니는 회사가 특히 이런 식의 방법이 필요할 것 같다. 내가 구축한 사내 시스템이 너무 많은 기능을 있다보니 나 조차도 알지 못하는 경우도 있다.
어째든 기능이 불필요해 보인다면 우선 UI 코드를 주석처리 하는 방식을 적용할 수 있을 것 같다. 누군가가 비명을 지른다면 다시 쉽게 원복할 수 있다. 그리고 비명지르는 사람이 2~3개월동안 없다면 해당소스와 관련된 서버 관련 코드도 제거해도 될 것이다. (내가 다니는 회사에서는 월 정산 때문에 월에 한번씩 사용하는 기능도 있다. 따라서 최소한 한달은 기다려 봐야 한다. )
요즘 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 가 사이드 언어인지라 변화를 바로바로 따라가지 못하다 보니 이런 문제가 있었다.