Javascript40 [JS] event.stopPropagation()의 위험성 이벤트 전파를 막기 위해서 event.stopPropagation()을 많이 사용하곤 합니다. 주로, 모달과 같은 대화 상자를 만들 때 dimmed 영역(흐린 배경 영역)을 클릭하여 해당 모달을 감추고 싶은데, 그 영역을 포함하고 있는 컨텐츠를 클릭했을 때 이벤트 전파를 통해서 의도치 않게 닫혀버릴 때 사용할 수 있습니다. document.querySelector('html').addEventListener('click', () => { // 모달을 닫기 }); document.querySelector('#someMenus')?.addEventListener('click', (event) => { event.stopPropagation(); // 해당 요소 내부에는 도달하지 않도록 합니다. }); 당장은.. 2022. 12. 25. ES12(ES2021)의 최고의 3가지 기능 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가 할당됩니다. 처음에는 이해.. 2022. 10. 10. Axios 인터셉터를 사용하는 4가지 방법 Axios란 무엇인가? Axios는 브라우저 및 node.js에서 Promise 기반의 HTTP 클라이언트 입니다. JSON 응답을 자동으로 감지하고 일반 텍스트 대신에 response.json()과 같은 구문 없이도 객체를 반환하고 응답 상태 코드가 400 보다 큰 경우 자동으로 오류를 발생시켜주는 등 다양한 기능들이 있습니다. Axios Interceptor란 무엇인가? Axios 인터셉터는 요청을 보내거나 받을 때마다 라이브러리가 호출하는 함수입니다. "then" 또는 "catch"로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다. // request interceptors 사용 axios.interceptors.request.use((config) => { // request를 보내기 전에 사.. 2022. 10. 10. 프록시란 무엇일까? Javascript에서 Proxy를 다루는 내용들이 있습니다. Proxy란 무엇이고 어떻게 사용해야 할까요? ECMAScript 6에서 정의되어진 Proxies에 대해서 알아보고 사용법을 익혀보는 시간을 가져 보시죠 : ) 프록시란 무엇일까 MDN의 문서의 내용과 같이 프록시 객체는 다른 객체에 대한 프록시를 만들고, 이 객체는 해당 객체에 대한 기본 작업을 가로채고 재정의할 수 있는 작업들을 할 수 있다는 것입니다. 다시말하면, 그 객체는 해당 객체를 래핑하고, 그 객체를 재정의하고 사용할 수 있는 것입니다. 일반적으로, 이러한 작업들을 우리는 객체를 가져와서 숨겨진 게이트웨이를 생성하고 원하는 객체에 대한 모든 액세스를 제어할 수 있도록 프록시로 포장한다는 것을 의미합니다. 프록시는 두개의 파라미터로.. 2022. 10. 3. 이전 1 2 3 4 ··· 10 다음
