삽질블로그 삽질블로그

단계별로 이미지를 찍어서 서버쪽으로 제출하는 프로그램을 작업하고 있는 중에 제출 이미지가 늘어나니 간헐적으로 서버에서 응답이 너무 늦게와 응답을 보냈음에도 불구하고 프론트에서 못받는 문제가 발생했다. 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 : 나타..

현재 사용자 프로세스가 세로모드로만 가능하도록 하는 모바일웹을 만들고 있다. 라이브러리는 vue를 사용중이다. * 최종 소스 (모든 브라우저, 기종에 전부 지원되는 버전) timeout을 넣은 이유는 회전이 되기 전에 이벤트가 실행되어 가로모드, 세로모드를 반대로 읽어오는 경우가 있었음 window.addEventListener( "orientationchange", function() { setTimeout( function() { vueObj.currentOrientation(); }, 200 ) } ) function currentOrientation () { this.$store.state.isVertical = ( window.innerHeight > window.innerWidth ); } -..

typone.com/file/mars_pro_manual.pdf 키보드 불빛 설정방법 : fn + end 키, fn + 화살표키

처음에 span 태그에 있는 내용을 button 클릭 시 복사되도록 하려고 시도했는데 자꾸 실패했다. 실패한 코드 let obj = document.getElementById("kyb-link"); obj.select(); document.execCommand("copy"); obj.setSelectionRange( 0, 0 ); value를 넣을 수 있는 input text나 textarea로 해야한다고 한다. 그래서 요소 생성 후 삭제하는 방법으로 ! // 글을 쓸 수 있는 란을 만든다. var aux = document.createElement("input"); // 지정된 요소의 값을 할당 한다. aux.setAttribute("value", document.getElementById("kyb-l..

ctrl + R : replace all ctrl + F : find ctrl + Y : 한줄 삭제 ctrl + D : 해당줄 복사 shift+shift : 모든항목 검색상자 ctrl + shift + F : 선택한 폴더 내 검색 ctrl + R : replace, replace all

vue에서는 라우터를 이용하여 페이지 이동이 일어난다. 1. html 소스 내에서 페이지 이동 소스코드 2. html에서 goDetail을 호출하고, javascript에서 라우터에 파라미터까지 태워서 페이지 이동시키기 ( 리스트에서 상세페이지로 가는 경우 id를 파라미터로 들고가는 경우가 많음 ) export default { name: "SubmissionTable", methods: { goDetail( item ) { // 여기서 name은 라우터에 정의된 라우트명 //내 소스는 멀티페이지라서 페이지 단위가 컴포넌트임 this.$router.push({ name: 'submission-detail', params: {id: item.submission_id, email: item.email}});..

html2pdf 구현 중 많은 문제를 직면했다. 그 중 알고는 있지만 외면하고 있던 문제들을 결국 지적받았다 ㅎㅎ ※ 두가지 문제 1. pdf left에 margin이 생김 (사실 편법으로 right에도 margin을 주는 방법으로 처리를 해놨는데 이로 인해 2번 문제가 생김) 2. pdf 왼쪽 라인들이 흐릿하게 보임 ※ 원인 canvas로 변경 시 html의 Xscroll (가로 scoll)까지 인식하여 생기는 문제 ※ 해결 편법인지 모르겠지만 scroll을 hide 처리 한 다음 pdf 다운로드 후 다시 scroll을 보이게 처리 기존 html2pdf 옵션 - scroll로 인해 밀리는만큼 margin을 넣어줘 임의로 처리 let opt = { pagebreak: 'css', margin: [0,0,..