React Fabric.js - 캔버스 전체 영역 이미지 저장 및 다운로드하기Fabric.js 캔버스 전체 영역 이미지 다운로드 (React.js)자꾸 보이는 영역만 썸네일 생성되고 이미지 다운로드돼서 작업하다 다른분들도 고생하실까싶어 작성해봄작업 기존방식최초엔 단순히 Fabric으로 생성된 canvas에 대해서 썸네일을 생성했었는데, 이걸 이용하다보니 현재 보이는 화면 기준으로만 썸네일이 뽑혀오는 현상이 발생했었습니다. (만약 현재 보이는 화면의 이미지만 캡쳐하고싶다면 아래 코드를 그대로 사용하셔도 됩니다)//예시. thumbnail 생성getThumbnailCanvas = () => { return canvas.toDataURL({ format: 'png' })} 전체영역으로 수정방식현재 보이는 화면..

객체 구조 분해 할당으로 파라미터 다루기 (JavaScript Destructuring Assignment) ({a, b, ...others})구조 분해 할당이란?JavaScript에서 함수를 호출할 때 객체를 파라미터로 넘기면, 특정 값만 따로 변수로 받고 나머지는 그대로 유지하는 방법이 있는데이런 기법을 객체 구조 분해 할당(Object Destructuring Assignment) 이라고 합니다. 함수를 호출할 때 { key: value } 형태의 객체를 넘겨줄 경우, 함수 내부에서 필요한 값만 골라서 사용할 수 있도록 해주는 문법인데이렇게 하면 불필요한 코드 작성을 줄이고 가독성을 높일 수 있어 사용합니다. 기본 사용법(1) - 각 객체 모두 등록다음처럼 함수를 정의할 때, 객체에서 특정 키만 추..

보안문제로 인하여 MDN에서 MediaDevices Function은 https 에서만 접근을 허용해줌. 이에 개발환경 등에서 작업시 http접근 허용이 가능하도록 세팅이 필요함. 1. chrome://flags/ 2. Search unsafely-treat-insecure-origin-as-secure 3. Enter the domain you want to allow access to in the input field and select "Enabled". - 하단 사진의 Input 영역에 도메인주소를 입력 후 Enabled 선택 4. Reboot the web after clicking "relaunch" - relaunch 클릭 후 웹 재부팅

React에서 클래스 변수와 state 변수의 차이점 선언 방법: 클래스 변수는 constructor() 안에서 this.변수명 = 초기값 형태로 선언하며, state 변수는 class 내부에서 state = { 변수명: 초기값 } 형태로 선언합니다. 업데이트 방법: 클래스 변수는 직접 값을 변경할 수 있지만, React에서는 setState() 함수를 통해 state 변수를 업데이트해야 합니다. 컴포넌트 렌더링 영향: 클래스 변수의 값이 변경되어도 컴포넌트가 다시 렌더링되지 않습니다. 반면에 state 변수의 값이 변경되면 컴포넌트가 다시 렌더링됩니다. 변경 가능성: 클래스 변수는 언제든지 값을 변경할 수 있지만, state 변수는 setState() 함수를 통해서만 값을 변경할 수 있습니다. 따라서,..

fakepath local image File path 로컬 이미지 미리보기오류로컬 img 이미지파일을 input 태그 type="file" 를 이용하여 업로드시킬 때 해당 경로가 fakePath 로 나와 url로 활용하기가 어려웠었습니다.이 경우 아래와 같이 이미지 썸네일을 받아오는 경우에도 문제가 발생하였습니다. 해결방법이때 input 태그의 onChange 함수에서 URL.createObjectURL 를 추가하여 간단하고 쉽게 처리가 가능합니다.아래 예제를 통해 확인해주세요.{ ... const [imageUrl, setImageUrl] = useState(); const loadImg = (event) => { let value = URL.createObjectU..

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/delete delete 연산자 - JavaScript | MDN delete 연산자는 객체의 속성을 제거합니다. 제거한 객체의 참조를 어디에서도 사용하지 않는다면 나중에 자원을 회수합니다. developer.mozilla.org 개발을 하다보면 parameter로 사용된 객체에서 더이상 사용되지않거나, 삭제하고 다른 용도로 사용하고 싶어 특정 key값만 삭제하려는 경우가 있다. 이때 해당 Key를 삭제하며 불변성을 유지하며 사용하는 법에 대하여 작성하였습니다. // (delete) 아래는 gaetaeng이라는 객체가 존재하고 어차피 없는 money 라는 key를 삭제하는 코..