프로그래밍
[React] 전역 상태 관리 라이브러리 제작기 (1)
[React] 전역 상태 관리 라이브러리 제작기 (1)
2020.11.29전역 상태 관리 라이브러리 제작기 (1) 이전부터 '전역 상태 관리 라이브러리를 만들어보고 싶다'라는 생각을 갖고 있었습니다. 최근 Context API와 Redux의 구조가 어떻게 이뤄져 있는지에 대해 알아본 뒤 전역 상태를 관리하는 흐름에 대해 대충 알게 되어서 이를 활용해 라이브러리를 제작해보려 합니다. 라이브러리 설계 Context API를 사용하지 않고 상태 관리를 하도록 작성할 예정입니다. 또한 store가 생성될 때 store에서 데이터를 갖고 있도록 하여 Provider 없이 사용 가능하도록 하려 합니다. Provider가 없는 상태 관리에 대해서는 zustand 상태 관리 라이브러리를 보고 아이디어를 얻었습니다. 필요한 요소 상태 관리 라이브러리를 만든다고 할 때, 제대로 동작하기 위해서..
[JavaScript] 가변 인자 함수
[JavaScript] 가변 인자 함수
2020.11.16가변 인자 함수 가변 인자 함수는 매개변수의 최대 갯수가 지정되지 않은 함수를 의미합니다. sum(10, 20, 30, ...); 가변 인자 함수를 이용해 위와 같이 인자의 갯수 제한이 없는 함수를 작성할 수 있습니다. arguments 객체 가변 인자 함수를 작성하는 가장 기본적인 방법은 arguments 객체를 사용하는 것입니다. function sum() { console.log('length: ', arguments.length); console.log('index 1: ', arguments[1]); } sum(10, 20); 위 코드의 실행 결과는 다음과 같습니다. length: 2 index 1: 20 arguments 객체에 대하여 arguments 객체는 function 함수에서 접근 가..
create-react-app을 사용하여 chrome extension 만들기
create-react-app을 사용하여 chrome extension 만들기
2020.11.15create-react-app을 사용하여 chrome extension 만들기 create-react-app(CRA)는 React 앱을 손쉽게 빌드 및 배포할 수 있는 환경을 제공합니다. 최근 Chrome 확장 프로그램 세팅을 진행하면서 CRA를 사용해 손쉽게 확장 프로그램을 제작하고 싶었지만, CRA는 기본적으로 SPA 만을 지원하여 추가적인 설정이 필요했습니다. 만들려 하는 크롬 익스텐션에서 팝업 환경과 옵션 페이지가 모두 필요하여 빌드 엔트리를 나눌 필요가 있었으나, options_page에 관련된 정보를 찾을 수 없었어서 직접 작업하면서 겪은 과정을 정리합니다. React App 만들기 우선, create-react-app을 사용하여 React 앱을 만들어 줍니다. 타입스크립트를 사용하기 위해 -..
자바스크립트 이벤트 델리게이션 패턴
자바스크립트 이벤트 델리게이션 패턴
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)..