개발쬬

onClick react에선 이벤트 함수들은 'on~'으로 시작한다. 때문에 click 이벤트를 발생시키려면 onClick 이벤트를 호출해야하는데 onClick을 사용할때 함수명을 clickHandler 또는 clickHandler() 로 선언하는것에 차이가 있다. 보통 react에선 ()를 통해 함수를 식별하기 때문에 ()괄호를 붙여서 함수를 이벤트에 넣은 경우 JSX가 읽혀질때 click이벤트로 같이 호출된다. 때문에 click 시에만 동작하게 하려면 괄호를 제거하고 사용해야한다. 👉 예시 import React from "react"; import Card from "../UI/Card"; import ExpenseDate from "./ExpenseDate"; import "./ExpenseIte..

엑셀 파일 다운로드 javascript 를 사용하여 a 태그에 받은데이터를 넣어서 동작 구현이 가능하다. api에 속성과 입력값에 따라 params 값을 설정해주고 responseType 을 설정해준다 axios({ url: "/report", methods: "GET", params: { year: this.year, month: this.month, xls: "Y", xlsLimit: "300" }, responseType: "blob" //responseType 설정 }).then(res => { const url = window.URL.createObjectURL(new Blob([res.data])); const link = document.createElement("a"); link.href ..

이슈 상황 이미지를 다른 객체들과 같이 post 요청을 보내려고 하는데 이미지 post 기능이 정상작동되지 않고 null 값을 찍힌다 1. header 에 Content-Type을 multipart/form-data 로 지정했는지 확인한다 //이미지를 넣는 axios 호출 부분 SetImg(params) { return axiosService.post("v1/files", params, { header: { "Content-Type": "multipart/form-data", }, }); }, 2. FormData로 요청하는지 확인한다. let fd = new FormData(); fd.append("key", img소스 ); //axios 호출 let val = await axiosService.Set..

get으로 받은 소스를 화면에 뿌리고> 그 이미지를 다운로드 받으려면 canvas를 활용해 가능하다. 👉 template (표현되어질 부분) 👉 template (다운로드 버튼) 다운받기mdi-arrow-down-bold-circle 👉 methods a 태그를 임의로 생성해 canvas 속성을 대입해 다운로드 기능을 동작하게 해준다 download() { var a = document.createElement("a"); // a.setAttribute("download", "파일이름" + ".png"); a.setAttribute( "href", document .getElementById("canvas") .toDataURL("image/png") .replace("image/png", "image/..

백에서 전달받는 데이터중에는 문단의 특성을 전달받지 못한 경우가 많다 그래서 replace로 /n 를 변환해준다 //cardData /n이 포함된 문자열을 포함한 배열 cardData.forEach((el, index) => { cardData[index].cont = el.contents.replace(/\n/g, " "); }); vue 환경이라 v-html를 활용했지만 p태그 안에 적용해줘도된다

사파리에선 승인을하지 않으면 팝업창이 띄어지지 않는다 이런오류를 해결하기 위해 window.open을 null 값으로 먼저 띄어놓고 async await 비동기 호출을 통해 axios 호출 이후 미리 띄어진 window창에 url을 넣어주는 방식을 사용했다. // 팝업선언 let popup = window.open( undefined, "payment_pop", "top=10,left=10,width=500,height=600,status=no,menubar=no,toolbar=no,resizable=no" //사이즈설정 ); // 비동기로 url 호출 const url = await axiosService .post("post_url", params) .then((res) => { let url = "..

유튜브 소스 자동재생 구현하려면 iframe을 사용해 autoplay를 설정해주는것이라고 알고 있을것이다. 사실 몰랐는데 최근 유튜브 영상 소스가 페이지 로드시 자동재생하는 기능을 구현하면서 현재(2022)는 autoplay가 web에서 지원되지 않는다는것을 알게되었다. 그것도 모르고 과거 블로그글들을 찾아보면서 계속 다른 부분에서 오점을 찾고 있었다. (이래서 공식 문서와 업데이트 사항을 명확하게 파악하는것이 중요하다) 결국 어느 블로그에서 autoplay 기능이 web에서만 제공되고 mobile 환경에서는 제공되지 않는다는 이야기를 듣고 여기저기 소스를 탐색해 본 끝에 youtube에서 지원해주는 iframe_api 소스를 활용해 모바일 환경에서도 자동재생 구현이 가능한 소스를 찾았다. 👉 html ..

window.addEventListener를 사용하면 매우 많은 이벤트 함수를 실행할 수 있다. 보통은 scroll, mouseWheel 이벤트를 사용해 휠스크린을 내릴시 간단하게 화면을 조작할 수 있다. 👉 mouse wheel 이벤트 보기 Element: wheel event - Web APIs | MDN The wheel event fires when the user rotates a wheel button on a pointing device (typically a mouse). developer.mozilla.org mouse wheel 이벤트를 사용할 경우의 문제점이 휠을 사용하지 않는 앱웹에선 작동하지 않는다는점이다. 이런경우 scroll 이벤트를 사용해 처리하는것이 좋다 👉 scroll 이..