본문 바로가기

Javascript40

파비콘 동적으로 변경하기 파비콘을 동적으로 바꿔보는 작업을 해보시죠 const faviconHref = emoji => `data:image/svg+xml,${emoji}` 위와 같이 faviconHref를 선언해서 emoji를 svg 형태의 data:image/svg+xml로 받을 수 있도록 선언해둡니다. const changeFavicon = emoji => { // browser환경이 아니면 return 합니다. if (typeof window === 'undefined') return; // rel*=icon으로 사용하고 있는 파비콘이 이미 있다면 해당 link를 선택하고, // 그렇지 않다면 link 태그를 생성합니다. const link = window.document.querySelector("link[rel*='i.. 2022. 9. 25.
[Javascript] Try/Catch, Error를 다루는 방법 버그는 프로그래밍 어디에나 존재하고, Unknown features(알려지지 않은 기능)이라고 까지 불리웁니다. 하지만, 버그는 언제나 우리에게 흥미로운 존재는 아닙니다. 자기 자신 스스로가 발견하는 버그보다, 클라이언트가 발견한 버그에 대해서 기분 좋게 받아들일 수만은 없을 것입니다. Try Catch의 사용법을 알아봅시다. Try Catch 블록은 무엇인가? try/catch 블록은 기본적으로 JavaScript에서 오류를 처리하는 데 사용됩니다. 스크립트의 오류로 인해 코드가 손상되는 것을 원하지 않을 때 이것을 사용합니다. if문으로도 할 수 있을 것 처럼 보이지만, try/catch는 if/else에 비해서 더 많은 기능들을 제공합니다. try { getData(); } catch(e){ ale.. 2022. 9. 12.
미디어쿼리를 자바스크립트에서 사용해야될 때 지금껏 미디어쿼리를 자바스크립트에서 구현하고 resize 이벤트에 따라서 무언가 UI에서 바뀌어야 할 때 사용하는 방식은 다음과 같습니다. function mediaResize() { if (window.innerWidth > 768) { console.log('resized window'); } } window.addEventListener('resize', mediaResize); matchMedia로 좀 더 간편하게 Resize를 다뤄보세요! 공식적으로는 Working Draft 상태인 CSS Object Model View Module 사양의 일부이지만, 이에 대한 브라우저 지원은 99.4%의 글로벌 적용 범위를 가진 Internet Explorer 10까지 지원됩니다. 사용방법은 다음과 같습니다.. 2021. 10. 5.
127가지 Javascript 유용한 스니펫 (1) 유용한 자바스크립트 스니펫들이 있어서 소개드립니다. 1. all // all - 모든 컬렉션에 대해서 true를 반환하면 true, 아니라면 false // 두번째 인수를 생략하면 기본 연산에 대한 boolean값을 리턴합니다. const all = (arr, fn = Boolean) => arr.every(fn); all([4, 2, 3], x => x > 1); // true all([1, 2, 3]); // true 2. allEqual // allEqual - 모든 배열 요소가 같은지 체크 const allEqual = arr => arr.every(val => val === arr[0]); allEqual([1, 2, 3, 4, 5, 6]); // false allEqual([1, 1, 1, 1.. 2021. 9. 12.

티스토리툴바