Chrome에서 getUserMedia() HTTP Permission Error 해결하기웹캠, 마이크, 화면 공유 등 브라우저에서 MediaDevices API를 사용하려면 보안 정책(HTTPS)이 필수입니다. 특히 getUserMedia()는 사용자의 민감한 장치에 접근하기 때문에 기본적으로 HTTP 환경에서는 권한 요청 자체가 차단됩니다.하지만 개발 환경(localhost 또는 내부망)에서 테스트할 때는 HTTPS 설정이 번거롭기 때문에, Chrome에서 제공하는 옵션을 사용해 특정 도메인에 한해 “HTTP를 HTTPS처럼 취급”하도록 설정할 수 있습니다.1. 왜 getUserMedia()는 HTTPS에서만 동작할까?MediaDevices 관련 기능은 사용자의 카메라·마이크 같은 민감한 정보에 접근..

어떻게 적어야 가독성이 좋아질까 고민하며 새로운 방식으로 써보기위해 말투와 양식을 바꾸어보고있습니다.읽기 불편하시거나 피드백사항이 있으시다면 댓글이나 메일로 주시면 정말 감사합니다!갑자기 react-query와 Hooks를 쓰라고요..?일단 훅부터 해볼게요.. Hooks가 뭔데?함수형 컴포넌트에서 React 기능(state, lifecycle 등)을 쓰게 해주는 함수들이야.원래는 클래스 컴포넌트(class App extends React.Component)에서만 상태 관리하고 생명주기 쓸 수 있었는데,함수형 컴포넌트에서도 편하게 하라고 나온 게 Hooks야. 가장 중요한 기본 Hooks 3개이름설명비고useState값을 저장하고 바꾼다this.state 알지?useEffect값이 바뀌거나 처음 렌더링될 ..

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) - 각 객체 모두 등록다음처럼 함수를 정의할 때, 객체에서 특정 키만 추..

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..