본문 바로가기
반응형

js11

Broadcast Channel API BroadcastChannel API는 동일한 출처의 다른 창,탭,iframe 간에 통신할 수 있는 API입니다. BroadcastChannel API로 브라우저의 다른 탭에서 현재 사이트를 열었는지 확인하거나, 사용자가 로그인하거나 로그아웃할때와 같이 동일한 출처 내의 다른 탭에서 사용자의 작업을 감지할 수 있습니다. Broadcast Channel API는 호스트가 다르면 작동하지 않습니다. https://www.abc.com/ https://abc.com/ 창 중 하나가 시크릿 모드이거나 여러 브라우저에서 (예: Firefox에서 Chrome으로)브로드캐스트 채널이 작동하지 않습니다. const bc = new BroadcastChannel('my-site'); bc.onmessage = (even.. 2022. 3. 3.
MutationObserver로 DOM 변화 감지 MutationObserver 는 DOM의 변화를 감시합니다. 특정 Node를 target으로 정해 observe 함수를 실행하여 감시하다가 해당 target에 변경이 일어나면 대상 node의 변화된 정보를 가져옵니다. // 대상 node 선택 const target = document.getElementById('id'); // 감시자 인스턴스 만들기 const observer = new MutationObserver(mutations => { mutations.forEach(m => { console.log(m); }); }); // 감시자 설정 const config = { attributes: true, childList: true, characterData: true } // 감시 시작 obse.. 2021. 12. 7.
옵셔널 체이닝(optional chaining) ?. 옵셔널 체이닝은 객체 프로퍼티에 에러없이 안전하게 접근하는 방법입니다. 만약 참초가 null이나 undefined라면 에러가 발생하는 대신 undefined를 리턴합니다. 중첩된 객체에서 옵셔널 체이닝 없이 하위 속성을 찾으려면 아래와 같이 해야합니다. first는 second에 접근하기 전에 Nullish가 아니라는 것을 검증하여 에러를 방지합니다. let nestedProp = obj.first && obj.first.second; 옵셔널 체이닝을 사용하면 아래와 같이 간결해집니다. let nestedProp = obj.first?.second; const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; console.log(adventurer.do.. 2020. 12. 8.
Array의 메서드 some, every some some 메서드는 배열 안의 어떤 요소가 하나라도 주어진 조건을 통과하는지 테스트합니다. 하나라도 true가 있으면 수행을 중단하고 true를 리턴하고, 전체를 돌아도 true가 없으면 false를 리턴합니다. const test1 = [2, 5, 8, 1, 4].some(elem => elem > 10); // false const test2 = [12, 5, 8, 1, 4].some(elem => elem > 10); // true ... const fruits = ['apple', 'banana', 'mango', 'guava']; function checkAvailability(arr, val) { return arr.some(arrVal => val === arrVal); } check.. 2020. 8. 24.
객체 복사 참조하지 않게 하기 var names = [ {"name": "사나"}, {"name": "슬기"}, {"name": "다현"} ]; var names2 = names; names2[0].name = '아이린' 위의 코드를 실행하면 names 와 names2의 0번째 값이 동일하게 변경이 된다. 객체를 = 로 복사할 때 값 자체를 복사하는게 아니라 메모리 주소 참조를 복사하기 때문이다. 해결방법은 JSON.stringify로 배열을 string화 한뒤에 다시 JSON.parse로 배열로 바꿔준다. var names = [ {"name": "사나"}, {"name": "슬기"}, {"name": "다현"} ]; var names2 = JSON.parse(JSON.stringify(names)); names2[0].name =.. 2020. 7. 23.
반응형