Front End Develop Front End Develop

이벤트 전파를 막기 위해서 event.stopPropagation()을 많이 사용하곤 합니다. 주로, 모달과 같은 대화 상자를 만들 때 dimmed 영역(흐린 배경 영역)을 클릭하여 해당 모달을 감추고 싶은데, 그 영역을 포함하고 있는 컨텐츠를 클릭했을 때 이벤트 전파를 통해서 의도치 않게 닫혀버릴 때 사용할 수 있습니다. document.querySelector('html').addEventListener('click', () => { // 모달을 닫기 }); document.querySelector('#someMenus')?.addEventListener('click', (event) => { event.stopPropagation(); // 해당 요소 내부에는 도달하지 않도록 합니다. }); 당장은..

ECMASCRIPT 2022가 나와있고, ES13에 대해서도 다루겠지만, 오늘은 ES12에서 잘 정착되어, 가장 유용하게 사용하고 있는 3가지 기능에 대해서 소개해보려고 합니다. 1. Logical Assignment Operator(논리 할당 연산자) 논리할당연산자는 논리 연산을 결합할 수 있습니다. // 컨벤션을 고수하는 방식 if (!a) { a = b; } // 또는 간략하게 a = a || b; a = a && b; a = a ?? b; // 새로운 방식 a ||= b; a &&= b; a ??= b; a &&=b 는 a가 참이면 b가 할당되고, a가 거짓이면 a가 할당됩니다. a ??= b 는 a가 null이거나 undefined 이면, b가 할당되고, 아니라면 a가 할당됩니다. 처음에는 이해..

Axios란 무엇인가? Axios는 브라우저 및 node.js에서 Promise 기반의 HTTP 클라이언트 입니다. JSON 응답을 자동으로 감지하고 일반 텍스트 대신에 response.json()과 같은 구문 없이도 객체를 반환하고 응답 상태 코드가 400 보다 큰 경우 자동으로 오류를 발생시켜주는 등 다양한 기능들이 있습니다. Axios Interceptor란 무엇인가? Axios 인터셉터는 요청을 보내거나 받을 때마다 라이브러리가 호출하는 함수입니다. "then" 또는 "catch"로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다. // request interceptors 사용 axios.interceptors.request.use((config) => { // request를 보내기 전에 사..

Javascript에서 Proxy를 다루는 내용들이 있습니다. Proxy란 무엇이고 어떻게 사용해야 할까요? ECMAScript 6에서 정의되어진 Proxies에 대해서 알아보고 사용법을 익혀보는 시간을 가져 보시죠 : ) 프록시란 무엇일까 MDN의 문서의 내용과 같이 프록시 객체는 다른 객체에 대한 프록시를 만들고, 이 객체는 해당 객체에 대한 기본 작업을 가로채고 재정의할 수 있는 작업들을 할 수 있다는 것입니다. 다시말하면, 그 객체는 해당 객체를 래핑하고, 그 객체를 재정의하고 사용할 수 있는 것입니다. 일반적으로, 이러한 작업들을 우리는 객체를 가져와서 숨겨진 게이트웨이를 생성하고 원하는 객체에 대한 모든 액세스를 제어할 수 있도록 프록시로 포장한다는 것을 의미합니다. 프록시는 두개의 파라미터로..

파비콘을 동적으로 바꿔보는 작업을 해보시죠 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..

버그는 프로그래밍 어디에나 존재하고, Unknown features(알려지지 않은 기능)이라고 까지 불리웁니다. 하지만, 버그는 언제나 우리에게 흥미로운 존재는 아닙니다. 자기 자신 스스로가 발견하는 버그보다, 클라이언트가 발견한 버그에 대해서 기분 좋게 받아들일 수만은 없을 것입니다. Try Catch의 사용법을 알아봅시다. Try Catch 블록은 무엇인가? try/catch 블록은 기본적으로 JavaScript에서 오류를 처리하는 데 사용됩니다. 스크립트의 오류로 인해 코드가 손상되는 것을 원하지 않을 때 이것을 사용합니다. if문으로도 할 수 있을 것 처럼 보이지만, try/catch는 if/else에 비해서 더 많은 기능들을 제공합니다. try { getData(); } catch(e){ ale..

지금껏 미디어쿼리를 자바스크립트에서 구현하고 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까지 지원됩니다. 사용방법은 다음과 같습니다..

유용한 자바스크립트 스니펫들이 있어서 소개드립니다. 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..