객체 구조 분해 할당으로 파라미터 다루기 (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 클릭 후 웹 재부팅

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를 삭제하는 코..

클로저를 활용한 static 변수 만들기자바스크립트에서는 C, JAVA와 같은 static 정적 변수가 존재하지않아 필요한 경우 사용에 조금 불편함이 있습니다.그래서 static 변수를 구현하여 유사하게 사용이 가능합니다. (전역변수는 간단하게 static처럼 사용이 가능하지만 어떤 언어든 전역변수는 좋지않다라는 생각을 하고있어 따로 설명하지 않았습니다.)  아래 코드를 참조하여 사용하시면 됩니다.let getStaticValue = ((value) => { let i = value; return function() { return ++i; }})(0); console.log(getStaticValue())//output : 1console.log(getStaticValue()..