개발 부산물/React & Javascript7 Chrome Javascript MediaDevices.getUserMedia() http Permission error 보안문제로 인하여 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 클릭 후 웹 재부팅 2023. 9. 22. React 클래스 변수와 State변수의 역할 및 차이 React에서 클래스 변수와 state 변수의 차이점 선언 방법: 클래스 변수는 constructor() 안에서 this.변수명 = 초기값 형태로 선언하며, state 변수는 class 내부에서 state = { 변수명: 초기값 } 형태로 선언합니다. 업데이트 방법: 클래스 변수는 직접 값을 변경할 수 있지만, React에서는 setState() 함수를 통해 state 변수를 업데이트해야 합니다. 컴포넌트 렌더링 영향: 클래스 변수의 값이 변경되어도 컴포넌트가 다시 렌더링되지 않습니다. 반면에 state 변수의 값이 변경되면 컴포넌트가 다시 렌더링됩니다. 변경 가능성: 클래스 변수는 언제든지 값을 변경할 수 있지만, state 변수는 setState() 함수를 통해서만 값을 변경할 수 있습니다. 따라서,.. 2023. 3. 14. [javascript] local image File path 로컬 이미지 미리보기 / fakepath 로컬 img 이미지파일을 input 태그 type="file" 를 이용하여 업로드시킬 때 fakePath 로 나와 url로 활용하기가 어려웠었습니다. 이때 input 태그의 onChange 함수에서 간단한 코드 추가로 쉽게 처리가 가능합니다. 아래 예제를 통해 확인해주세요. { ... const [imageUrl, setImageUrl] = useState(); const loadImg = (event) => { let value = URL.createObjectURL(event.target.files[0]); setImageUrl(value); } ... return ( ... 이미지를 선택하세요: loadImg(e)}/> ... ) 2023. 2. 20. [JavaScript] rest & delete 연산자 / 불변성을 유지하며 Object에서 내부 key 삭제하기 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를 삭제하는 코.. 2023. 2. 8. [javascript] 클로저를 활용한 static 변수 만들기 자바스크립트에서는 C, JAVA와 같은 static 정적 변수가 존재하지않아 필요한 경우 사용에 조금 불편함이 있습니다. 그래서 static 변수를 구현하여 유사하게 사용이 가능합니다. (전역변수는 간단하게 static처럼 사용이 가능하지만 어떤 언어든 전역변수는 좋지않다라는 생각을 하고있어 따로 설명하지 않았습니다.) 아래 코드를 참조하여 사용하시면 됩니다. let getStaticValue = ((value) => { let i = value; return function() { return ++i; } })(0); console.log(getStaticValue()) //output : 1 console.log(getStaticValue()) //output : 2 console.log(getSta.. 2023. 1. 27. [React js] UI Component wrapper / container 방식 children Array 중 일부만 노출 이슈 목적 : AComponent라는 컴포넌트에 className, css와 같은 퍼블리싱을 적용한 다음 내부에 A, B, C라는 리스트를 보여주는 컴포넌트를 작성하여 출력하려했음. 오류 : 이상하게 AView, AList, BView만 표시되고 그 이상은 표시되지 않음. (예시용코드입니다) 그냥 별 생각없이 아래와 같이 컴포넌트를 구성한 다음에 {/** A미리보기표시*/} {/** A리스트표시*/} {/** B미리보기표시*/} {/** B리스트표시*/} {/** C미리보기표시*/} {/** C리스트표시*/} 아래와같이 A컴포넌트를 구성하였고 실행하였다. const AComponent = ({children}) => { return {children[0]} {children[1]} {children[2]} {.. 2023. 1. 18. 이전 1 2 다음
