Advanced
자바스크립트 이벤트 델리게이션 패턴
자바스크립트 이벤트 델리게이션 패턴
2020.11.12자바스크립트 이벤트 델리게이션 패턴 이벤트 델리게이션 패턴은 자바스크립트의 대표적인 디자인 패턴 중 하나입니다. 최근 HTML, CSS를 조작하는 웹에서 사용자의 '클릭', '호버' 등과 같은 동적인 이벤트를 관리하기 위해서 DOM에 이벤트를 작성하는 '이벤트 리스너(Event Listener)'가 있습니다. 이벤트 델리게이션 패턴은 이 이벤트 리스너를 보다 더 효율적으로 관리하기 위한 디자인 패턴입니다. 자바스크립트 이벤트 리스너 먼저, 자바스크립트의 이벤트 리스너에 대해 알아보겠습니다. 이벤트 리스너의 말 그대로 이벤트가 발생하기까지 대기하고 있습니다. 여기에서 이벤트란, 사용자가 브라우저에 하는 행동을 의미합니다. 이벤트 리스너가 엘리먼트에 추가되어 있다면 엘리먼트가 클릭되거나 마우스가 호버되고 더..
JavaScript 이벤트 전파 중단 방법 (IE 대응 추가)
JavaScript 이벤트 전파 중단 방법 (IE 대응 추가)
2020.11.10JavaScript 이벤트 전파 중단 방법 (IE 대응 추가) 자바스크립트에서 이벤트 처리를 할 때 계층적으로 이벤트가 실행되는 경우가 있습니다. 이를 이벤트 버블링이라 합니다. 또한, 이벤트 버블링으로 인해 예상하지 못한 결과를 겪을 때가 있습니다. 이에 따른 해결 방법은 다음과 같습니다. 이벤트 수행을 막는 방법 자바스크립트에서 이벤트 수행을 막기 위해서 제공하는 메소드가 몇 가지 있습니다. event.preventDefault() event.stopPropagation() event.stopImmediatePropagation() 각각 어느 상황에 사용되는지에 대해 알아보겠습니다. 부모에게 이벤트가 전파되는 것을 막기 클릭 $parentDiv = document.querySelector('#..
React Redux에서 ContextAPI performance issue를 해결한 방법
React Redux에서 ContextAPI performance issue를 해결한 방법
2020.11.07React Redux에서 ContextAPI performance issue를 해결한 방법 React의 ContextAPI는 퍼포먼스 이슈가 있어 복잡한 데이터를 다루기에 적합하지 않습니다. 퍼포먼스 이슈? 이 퍼포먼스 이슈를 간단히 요약하면 객체 {number: 0, text: "text"}를 contextAPI에서 관리할 때 A Comp에서는 context의 number 값만을, B Comp에서는 context의 text 값만을 사용한다고 가정하겠습니다. context의 number 값이 변경되면 A Comp만 리렌더링되는 것이 가장 이상적이겠지만, number 값을 사용하지 않는 B Comp 역시 리렌더링됩니다. 해결 방법..? 해결 방법으로는 위 링크에서 언급한 방법과 같이 context 분할, ..
styled-components v5 createGlobalStyle 이슈
styled-components v5 createGlobalStyle 이슈
2020.11.05styled-components v5 createGlobalStyle 이슈 로컬 환경에서는 스타일이 정상적으로 보이는데, production 환경에서 스타일이 정상적으로 보이지 않아서 이를 확인하던 중, styled-components 5 버전에서 cGS(createGlobalStyle)에 이슈가 있음을 확인했습니다. 해결 방법 createGlobalStyle 내에 @import 가 존재하면 스타일이 깨지는 것이며, styled-components 문서에서 역시 이에 대한 해결 방법으로 createGlobalStyle 내에 @import를 사용하지 않는 것을 제시하고 있습니다. import modernNormalize from "styled-modern-normalize"; import { createG..
자바스크립트 이벤트 버블링과 캡쳐
자바스크립트 이벤트 버블링과 캡쳐
2020.11.03자바스크립트 이벤트 버블링과 캡쳐 HTML DOM API에서 이벤트를 전파하는 방법에는 이벤트 캡쳐링과 이벤트 버블링이 있습니다. 이를 간단하게 소개해보겠습니다. 이벤트 캡쳐링 위 사진에서 Capture Phase (1)에 해당하는 부분이 이벤트 캡쳐링에 해당합니다. 이벤트가 가장 바깥쪽 요소부터 안쪽 요소로 즉, Target Phase (2)까지 전파가 됩니다. Click Me 위의 코드에서 'Click Me'를 감싸고 있는 DOM 엘리먼트를 클릭하면 'click parent div', 'click child div' 순서대로 2개의 Alert를 확인할 수 있습니다. addEventListener의 useCapture 인자 이는 addEventListener의 3번째 인자 useCapture를 true..
JavaScript child element mouseout 이슈
JavaScript child element mouseout 이슈
2020.10.29JavaScript child element mouseout 이슈 자바스크립트에서 mouseover 또는 mouseout을 지정할 때 이벤트가 지정된 엘리먼트가 child element를 포함하고 있다면 문제가 발생합니다. Text 위 코드에서 MyFuncOut 함수의 호출은 div#parent 엘리먼트를 벗어났을 때 되어야 합니다. 하지만, span 태그로 마우스를 이동하면 MyFuncOut 함수가 호출됩니다. 이는 마우스가 span 엘리먼트를 가르킴으로서 div 엘리먼트를 벗어났다고 인식해서 발생하는 것이지만, 대부분의 경우에는 MyFuncOut 함수가 호출되지 않는 것을 바랄 것입니다. 이를 해결할 수 있는 방법은 다음과 같습니다. 해결법 pointer-events: none Text 첫 번째 방법..
useEffect Dependency
useEffect Dependency
2020.10.21[React] useEffect Dependency 친구와 팀 프로젝트를 진행하던 중, Hook의 Dependency 배열에 대해 질문을 받아서 논의가 이루어져 이 내용을 정리합니다. 문제가 된 코드 - tokenRefreshCallback의 dependency const useTokenRefresher = (callback: (refresh: string) => void) => { React.useEffect(() => { try { const refreshCookie = Cookies.get('refresh'); if (!refreshCookie) { throw 'RefreshToken does not exist.'; } callback && callback(refreshCookie); } catch..
var, let, const 각각의 차이점
var, let, const 각각의 차이점
2020.10.18[JavaScript] var, let, const 각각의 차이점 자바스크립트에서 변수를 선언할 때 사용하는 var let const 각각의 차이점은 무엇일까요? 차이점 가장 큰 차이는 var의 경우 function-scoped let과 const는 block-scoped라는 것입니다. 스코프에 대해 설명하기 전, var가 갖고 있는 문제에 대해 먼저 알아보겠습니다. 변수 선언 방식 우선, var의 경우 변수 선언에 있어서 혼란을 야기할 수 있는 부분이 존재합니다. var age = 10; console.log(age); // 10 var age = 20; console.log(age); // 20위 코드에서 같은 이름의 변수를 한 번 더 선언했음에도 에러가 발생하지 않고 정상적으로 출력되는 것을 확인할..
Math.random()은 정말 랜덤일까?
Math.random()은 정말 랜덤일까?
2020.10.17[JavaScript] Math.random()은 정말 랜덤일까? TL; DR; 자바스크립트는 어떻게 Math.random 함수에서 난수를 생성하는가? JS는 아무것도 하지 않는다. 브라우저에 따라 달라진다. 현재 대부분의 브라우저는 xorshift128+ 라는 알고리즘을 사용한다. xorshift128+에 의해 생성된 숫자는 난수를 생성하는 것이 아닌, 특정 값에 공식을 대입한 수학식이다. Math.random() Math.random() 은 0 이상 1미만의 부동 소숫점 난수를 생성하는 함수이며, 이 점을 이용해 아래와 같이 사용해 랜덤한 값을 만들 수 있습니다. 0 Math.random() * (max - min) + min; 두 값 사이의 (정수)난수 생성 getRandom = (min, max)..
ContextAPI 렌더링 이슈
ContextAPI 렌더링 이슈
2020.10.17[React] ContextAPI 렌더링 이슈 ContextAPI는 규모가 작은 앱을 개발할 때 매우 편리합니다. 하지만, Context 값이 변경될 때, useContext가 렌더링을 유도하기 때문에 앱의 규모가 커진다면 일부 성능 문제가 발생할 수 있습니다. '아니 어떻게 React에서 제공하는 기본 기능에서 문제가 발생할 수 있냐??'라고 생각할 수도 있습니다. 지금부터 어떤 문제가 발생하는지와 함께 해당 문제를 해결하는 방법에 대해 알아봅시다. ContextAPI 앱 구성 및 문제 확인 문제를 확인할 수 있는 CodeSnadbox 간단한 객체 값을 갖고 있는 Context 구성입니다. useReducer를 이용해 Provider에 값을 전달하고 있으며, useContextr를 이용해..
[Tips] 프로그래밍과 관련된 글들 모음
[Tips] 프로그래밍과 관련된 글들 모음
2017.10.06프로그래밍과 관련된 글들 모음프로그래밍을 시작하기 전 읽어보면 좋은 글들이 카테고리에서는 사람들이 프로그래밍하는 것을 중요하다고 하는 이유에 대해서 생각하고 살펴볼 것이며, 몇 가지 기본적인 아이디어와 이상을 설명할 것입니다. 또한, 사람들이 프로그래밍과 프로그래머에 대해 흔히 잘못 생각하는 몇 가지를 정정하려고 합니다. 지금 당장 이 글을 읽어봐도 좋습니다. 나중에 프로그래밍 문제를 풀다가 코딩이 계속할 만한 가치가 있는 것인지에 대한 의문이 들 때, 이 글을 다시 읽어보시길 바랍니다.2017/04/01 - [Guid/Tips] - [Tips] 소프트웨어와 프로그래머 2017/04/02 - [Guid/Tips] - [Tips] 컴퓨터 과학과 프로그래밍 2017/04/02 - [Guid/Tips] - [..
[Tips] 하드웨어 관련 용어
[Tips] 하드웨어 관련 용어
2017.10.06하드웨어 관련 용어이 글과 이어진 글 보러 가기2017/10/05 - [Guid/Tips] - [Tips] 프로그래밍과 관련된 글들 모음 중앙 처리 장치(CPU)CPU(Central Processing Unit)는 고유한 기계어를 갖고 있으며, 그것을 해석할 수 있는 장치입니다. 일반적으로 개인 PC에는 인텔과 AMD에서 만든 CPU가 주로 장착되고 있으며, 모바일 기기에서는 ARM이라는 회사에서 만든 CPU와 호환되는 제품들이 주로 장착됩니다. 레지스터CPU 내에 존재하는 기억 장소입니다. 우리가 흔히 부르는 16비트, 32비트, 64비트 CPU라는 이름으로 한 개의 레지스터에 담을 수 있는 데이터의 크기를 쉽게 알 수 있습니다. 즉, 64비트 CPU는 레지스터 하나에 담을 수 있는 비트의 수가 64개..