안녕하세요 이번 글에선 이벤트 버블링에 대해 알아보겠습니다. 이벤트버블링을 모를 경우 발생하는 예기치못한 이벤트를 살펴보고 어떻게 해결해야 하는지도 확인해보도록 하겠습니다. 이벤트 버블링이란 이벤트 버블링은 이벤트가 가장 안쪽의 대상 요소에서 먼저 트리거된 다음 가장 바깥쪽 DOM 요소 또는 문서 개체에 도달할 때까지 동일한 중첩 계층에서 대상 요소의 상위 요소에서 연속적으로 트리거되는 DOM 이벤트 전파 유형입니다. 이벤트가 브라우저에서 처리되는 한 가지 방법입니다. - 위키백과 - 즉, 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다. 이벤트 캡쳐란 이벤트 버블링과 반대되는 현상을 의미합니다. 즉, 브라우저로부터 이벤트가 발생한 요소까지..
우리는 라이브러리를 설치할 때 -D 또는 --dev를 붙여서 설치하는 경우가 있습니다. 예를들어 yarn add -D @types/styled-components 왜 -D를 붙여서 설치하라고 권장할까? 그전에 우리는 빌드라는 것에 대해 알아야합니다. 리액트를 cra로 설치한 후 yarn build 또는 npm run build 라는 명령어를 입력하게 되면 가장 상위에 build라는 폴더가 생기는 것을 확인할 수 있습니다. 하지만 이 build라는 폴더는 node_modules처럼 기본적으로 .gitignore에 등록되어 깃허브에 올리지 않는 폴더로 구분되며 필요없어 보입니다. 하지만 개발한 프로젝트를 배포할 때 이 build라는 폴더는 없으면 안되는 중요한 녀석이 됩니다. 그 이유는 react가 없는 환..
143:13 Error: Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations react/jsx-no-target-blank 포트폴리오 사이트를 제작하던 중 a태그와 관련된 에러를 만났습니다. a태그를 클릭하면 새창에서 해당 링크를 열리게하기 위해 적었던 target='+blank'가 문제였습니다. 구글링을 통해 알아본 결과 해당 이슈는 tabnabbing 피싱 공격에 위험할 수 있기 때문에 에러를 출력한다고 합니다. Tabnabbing..
자바스크립트 map에 대해 알아보고 간단한 예시를 살펴보자 자바스크립트는 ES6+ 문법에 적용된 map에 대해 알아보겠습니다. MDN에 적혀있는 map의 정의는 '배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.' blog.doyeonism.com 자바스크립트 reduce 또한 map과 마찬가지로 순서가 있는 배열에 사용되는 메소드입니다. 사용되는 방식은 아래와 같습니다. const array1 = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array1.reduce( (accumulator, currentValue) => accumulator + curre..
