삽질블로그 삽질블로그

vue dom에 이벤트가 걸려있을 때, Default 로 보내주는 parameter가 있다. 예를 들어 @input="testmethod" 이벤트를 넣어놓으면 methods에 정의되어있는 testmethod 함수에서 console로 이벤트를 찍어보면 testmethod( e ) { console.log(e) } e는 해당 input dom 에 들어온 텍스트로 찍힌다. 그런데 여기서 해당 텍스트 이외에 다른 파라미터를 추가로 받아오고싶은 경우가 있다. 그럴때는 이런식으로 정의 하면 default로 가져오는 파라미터에 추가로 내가 넣은 파리터까지 받아올 수 있다. methods : { autoNext( e, count ) { console.log( "param ::: ", e, count );// `para..

단계별로 이미지를 찍어서 서버쪽으로 제출하는 프로그램을 작업하고 있는 중에 제출 이미지가 늘어나니 간헐적으로 서버에서 응답이 너무 늦게와 응답을 보냈음에도 불구하고 프론트에서 못받는 문제가 발생했다. aws lambda에서는 5mb로 파라미터 용량을 제한하기도 하고, 이런저런 문제를 생각했을 때 프론트쪽에서 api 호출 전에 이미지 사이즈를 줄여 보내는 것이 가장 좋은 방안 같았다. video 에서 캡처해온 이미지의 용량을 줄이는 방법과 file input 으로 가져온 이미지의 용량을 줄이는 방법을 기록할 예정이다. 보내는 파일 형식은 base64. canvas 를 이용해서 용량을 줄일 수 있다. 적용 후 400kb였던 파일이 72kb까지 용량이 줄었고 화질은 육안으로 큰 차이가 없었다. 1. video..

vue bootstrap 의 b-table 을 이용하여 다음과 같이 table 안에 inner table 구조를 만들 수 있다. 방법은 row-details slot을 사용하면 된다. https://bootstrap-vue.org/docs/components/table BootstrapVue Quickly integrate Bootstrap v4 components with Vue.js bootstrap-vue.org 아래에 써놓은 옵션 이외에 필요한 기본옵션 관련해서는 BootstrapVue 공식사이트를 이용하면 된다. 옵션설명 * sticky-header : 스크롤로 테이블의 크기를 한정짓고 싶을 때 사용 ( 필자는 docs에서 해당옵션을 못보고 지나가 css로 삽질을 했음 ) * items : 나타..