반응형 React,Node,JQuery,js54 [Javascript] cannot read properties of undefined (reading 'getUserMedia') 해결하기 cannot read properties of undefined (reading 'getUserMedia') WebRTC 로 클라이언트와 서버 간 영상 전송을 하고 있었습니다. 처음에는 같은 PC 에서 서버와 클라언트를 실행해서 잘 됐지만, 서버를 따로 두고 다른 클라이언트에서 접속했을 때 위와 같은 오류가 발생하는데요. 원인 우선 localhost 는 http 도 보안 출처로 간주합니다. 하지만 출처가 다른 곳에서 접속할때는 SSL/TLS 인증서가 필요합니다. 서버PC의 URL 로 접근을 했는데, 내 PC의 카메라/마이크에 접근을 하려고 합니다. 이때 이 서버에 인증서가 있는지 확인을 하게 됩니다. 이 서버의 URL이 https 가 아니면 이렇게 표시가 되고, Media 에 접근 할 수 없게됩니다. 해.. 2023. 2. 24. [Javascript] Json Copy. DeepCopy 아래와 같은 코드가 있을 때, 결과를 예상해 보세요. let myScore = { "Math": 50, "Eng": 40, "Kor": 45 } let yourScore = myScore yourScore.Eng = 90 console.log(yourScore.Eng) console.log(myScore.Eng) . . . . . 결과는 90 90 입니다. 자바스크립트에서 JSON 객체를 복사할 때, 깊은 복사와 얕은 복사라는 개념이 있습니다. (다른 언어에도 있습니다.) DeepCopy 깊은복사 깊은 복사란, JSON 객체를 복사할 때, 객체가 가리키고 있는 모든 객체를 새로운 객체로 복사하는 것을 말합니다. 이렇게 복사하면 원본 객체와 복사된 객체는 서로 완전히 독립적인 객체가 됩니다. const _.. 2023. 1. 28. [Javascript] JSON Object key, value 가져오기 JSON 의 모든 키와 값을 출력하는 방법 const json = { "name": "bryan", "age": 87, "city": "Suwon" }; console.log("방법 1"); for (var key in json) { console.log(key + " : " + json[key]); } console.log("방법 2"); Object.entries(json).forEach( ([key, value]) => console.log(`${key} : ${value}`) ); console.log("방법 3"); Object.keys(json).forEach(key => { console.log(`${key} : ${json[key]}`); }); 하지만, json 안에 또다른 json ob.. 2023. 1. 28. [Lottie] Javascript Animation 사용하기 : Lottie Lottie airbnb 에서 만든 Lottie 사용법입니다. Android 에서는 많이 써봤는데, 이번에는 Javascript 에서 사용방법을 남겨보려합니다. Lottie Github 링크 Lottie Document 링크 Lottie Files 링크 간단 사용법 : (feat: lottie-player.js) 단순 html 태그로 사용 가능합니다. 우선 LottieFiles 에서 원하는 Animation 을 찾습니다. 아이템을 클릭하면 아래와 같은 팝업이 뜹니다. 아래로 스크롤해서 버튼을 찾아 클릭합니다. 새로운 페이지가 뜹니다. 그 하단에 코드가 있습니다. 저걸 복사해서 html 코드에 집어 넣으면, 아래와 같이 나옵니다. 자동 재생 여부, 재생 속도, 크기, 반복여부, 컨트롤 표시 여부 등 tag.. 2022. 6. 29. [Lodash] 유용한 자바스크립트 라이브러리 : Javascript Library Lo | Lodash Javascript Library https://lodash.com/ Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences & pick one that’s right for you.InstallationIn lodash.com 1. 개요 Lodash 는 javascript 에서 필요한 유용한 함수들을 제공해 줍니다. 특히 array, number, object, string 등등. Ite.. 2022. 6. 27. virtual dom 이란? virtual dom 을 설명하는 가장 유명한 동영상. Virtual dom 이 왜 나왔을까? dom 의 동작 과정을 먼저 알아봐야겠네요. DOM의 동작 과정 (1) DOM Tree 생성 : 브라우저가 전달 받은 HTML DOM으로 변환 (2) Render Tree 생성 : css 등 스타일 요소 attach DOM Tree와 같게 Render Tree 생성 (3) Layout : 각 노드들이 어디에 나타야할지 스크린 좌표 계산 (4) Paint : 랜더링 된 요소에 색을 입히는 과정 DOM에 변화생기면, 렌더트리를 재생성하고 (그러면 모든 요소들의 스타일이 다시 계산됩니다) 레이아웃을 만들고 페인팅을 하는 과정이 다시 반복되는거죠. 복잡한 SPA(싱글 페이지 어플리케이션) 에서는 DOM 조작이 많이 발.. 2021. 6. 23. [Nodejs] session 사용하기 nodejs session session 에 값 설정하기 router.get('/login', (req, res) => { // 인증로직 성공 했다 치고 req.session.user = body req.session.user.expire = new Date() }) session 값 삭제하기 router.get('/logout', (req, res) => { req.session.destroy(function () { req.session }) }) 2021. 1. 15. [Bootstrap4] col-xs-* not working bootstrap 4 부터는 col-xs-12 이렇게 쓰던것을 col-12 로 사용하면 됩니다. grid 관련 공식 문서 xs-hidden 도 drop 됐습니다. 4 부터는 아래와 같이 사용합니다. 공식 문서 참고 html tag 의 class 에서 사용할 땐 . 빼야 되는거 아시쥬? 2021. 1. 11. [js] copy to clipboard javascript Copy To Clipboard 아래 function 을 이용하면 됩니다. function copyToClipBoard(msg){ const el = document.createElement('input') el.value = msg; document.body.appendChild(el); el.select(); document.execCommand("copy"); document.body.removeChild(el); } element 를 생성해서 value 로 복사할 값을 입력하고 선택해서 복사하고 element 삭제 2020. 12. 30. [javascript] 스크롤 이동 scroll to top 사용하기 scrollTo 사용 // window.scrollTo(x_pos, y_pos); window.scrollTo(0, 0); Animation 효과로 스크롤 하기 $("#top").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; }); scrollTop: y_pos "slow", "fase" 2020. 12. 28. 이전 1 2 3 4 ··· 6 다음 728x90 반응형
