자바스크립트
[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('#..
NestJS 공식 문서 번역 모아보기
NestJS 공식 문서 번역 모아보기
2020.11.09NestJS 공식 문서 번역 모아보기 NestJS에 대해 관심이 생겨서 공신 문서를 시간이 될 때 번역하고 있습니다. [Prolog] INTRODUCTION 2020/10/24 - [Node/NestJS] - NestJS 소개 [OVERVIEW] NestJS 개요 2020/10/25 - [Node/NestJS] - NestJS 개요-첫 걸음 2020/11/08 - [Node/NestJS] - NestJS 개요-컨트롤러.라우팅 2020/11/09 - [Node/NestJS] - NestJS 개요-컨트롤러.Request 객체
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 첫 번째 방법..
NestJS 개요-첫 걸음
NestJS 개요-첫 걸음
2020.10.25NestJS 개요-첫 걸음 첫 걸음 이 문서에서는 Nest의 핵심 기본 사항에 대해 알아봅니다. Nest 애플리케이션의 필수 구성 요소에 익숙해지기 위해서 입문 수준의 많은 기능을 다루는CRUD 애플리케이션을 작성할 것입니다. 언어 우리는 TypeScript를 좋아하며, Node.js 역시 좋아합니다. Nest는 TypeScript와 순수 JavaScript와도 호환됩니다. Nest는 최신 언어 기능을 활용하고 있어 바닐라 JavaScript와 함께 사용하기 위해서는 Babel 컴파일러가 필요합니다. 전제 조건 운영체제에 Node.js (>= 10.13.0)가 설치되어 있는지 확인해주세요. 설정 새 프로젝트를 설정하는 것은 Nest CLI를 사용해서 매우 간단히 작업할 수 있습니다. 터미널에서 다음 명령..
NestJS 소개
NestJS 소개
2020.10.24NestJS 소개 소개 NestJS는 효율적이고 확장 가능한 Node.js 서버 애플리케이션을 구축하기 위한 프레임워크입니다. 프로그래시브 JavaScript를 사용하며, TypeScript를 기반으로 구축되어 있습니다. 순수 JavaScript를 사용해 코딩할 수도 있습니다. OOP(Object Oriented Programming), FP(Functional Programming), FRP(Functional Reactive Programming) 요소를 결합합니다. NestJS는 Express 프레임워크 위에서 동작하며, Fastify를 사용하도록 구성할 수도 있습니다. Express / Fastify보다 높은 수준의 추상화를 제공하지만, 해당 프레임워크의 API를 개발자에게 직접 노출합니다. 이를..
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..