log4me

고차 함수란 아래 조건 중 하나 이상을 만족하는 함수이다. 하나 이상의 함수를 인자로 받기 결과로 함수 반환하기 예제 1. 조건 1, 2를 만족하는 고차함수 예제이다. 고차함수 not은 인자로 전달받은 함수 f의 실행 결과값을 부정한다. function not(f) { return function(...args) { let result = f.apply(this, args); return !result; // f의 결과를 부정한다. } }숫자가 짝수인지 판별하는 함수 isEven을 고차함수 not의 파라미터로 전달한다면, 그 결과는 숫자가 홀수인지를 판별하는 것과 같을 것이다. const isEven = x => x % 2 === 0; const isOdd = not(isEven);따라서 배열의 요소는 ..

들어가기에 앞서 먼저 내가 테스트한 Monorepo의 구조이다. host/ src/index.tsx # Context.Provider 적용 remotes/ remote1/ remote2/ ... shared/ context/ # Context 로직 React Context와 관련된 로직은 shared 패키지에 있다. host 패키지에서 App 컴포넌트를 Context의 Provider로 감싸 전체 App이 Context를 구독하도록 한다. Context가 필요한 remotes 패키지에서 useContext()를 사용한다. React Context의 Instance가 생성되는 시점 테마를 적용하는 Context가 있다. 1️⃣ 에서 createContext()를 호출했고 그 결과 새로운 타입의 Contex..

SyntaxError: Cannot use import statement outside a module Monorepo 구조의 프로젝트에서 Jest를 도입하는 초기 과정에서 이런 에러가 났다. 이렇게 import 할 때부터 에러가 난다면 Babel이 트랜스파일링을 못하고 있는 것이다. 그런데 Webpack 서버를 실행하거나 빌드할 땐 문제가 없었는데 왜 Jest를 실행할 때 이런 에러가 나는 걸까? 먼저 Monorepo에서의 Babel 설정에 대해 이해할 필요가 있다. Monorepo에서 Babel 설정하기 Monorepo에서는 레파지토리의 루트에 babel.config.json 파일을 생성해서 핵심 설정을 지정해야 한다. .babelrc.json 파일을 통해 각 하위 패키지에서 개별 설정을 할 수도 있..

Y축에 콤마가 없을 때 옵션 노가다를 통해 이쁘게 멀티 차트를 만들었다. 짜잔✨ 이제 차트 옵션은 그만 건드리고 싶은데 자꾸만 내 발목을 잡는 Y축의 묘하게 휑~한 느낌. 데이터 라벨에도 툴팁에도(스크린샷에는 보이지 않지만) 동일하게 3자리 콤마를 찍어줬는데 Y축에만 없으니, 일관성이 떨어지면서 자꾸만 신경이 쓰이기 시작했다. 어쩌면 차트의 라벨에는 콤마를 찍어주지 않는 게 국룰일지도 모른다는 합리화를 하면서 며칠을 고민했는데... 결국은 바꾸기로 결정했다! language 옵션 설정하기 짧은 영어로 구글링을 해보면 역시나, 스택오버플로우에 이미 여러 사람들이 고민하던 흔적이 남아있다. 나는 이번에 세부 옵션을 설정할 수 있는 Highcharts.chart() 메소드와 글로벌 옵션을 설정할 수 있는 Hi..

프론트엔드 개발을 하다가 동적으로 HTML 요소의 스타일을 변경해줘야 하는 상황을 만났다. 나는 styled-component와 같은 CSS-in-JS 방식을 사용하지 않고 공통 스타일 값들을 CSS의 변수로 관리하고 있었기 때문에, 또 한 번 자바스크립트 상수를 선언해 중복해서 값을 관리하고 불러와 사용해야 하는 건지 고민이 생겼다. 하지만 다행히도 자바스크립트에는 CSS에 선언한 변수의 값에 접근하는 API가 존재했다! getComputedStyle() 과 getPropertyValue() getComputedStyle(): 인자로 전달받은 HTML 요소에 대한 모든 CSS 속성값을 담은 스타일 객체 반환 getPropertyValue(): 스타일 객체 중 인자로 전달받은 특정 속성에 대한 값을 문자..

폴리필 폴리필(Polyfill)이란 브라우저가 지원하지 않는 자바스크립트 코드를 지원 가능하도록 변환한 코드를 뜻한다. 하위 브라우저가 지원하는 자바스크립트 코드를 사용해 자바스크립트의 최신 기능을 똑같이 구현하는 방식이다. Babel과 core-js 폴리필을 위한 트랜스파일러에는 Babel이 있다. Babel 내부에는 core-js라는 라이브러리가 탑재되어 ES6 이후의 문법들을 폴리필 처리할 수 있다. 폴리필 따라해보기 ES6에서 추가된 배열의 내장 메서드 map()을 ES5로 구현해보자. mockMap()은 map()과 같이 배열 내의 모든 요소에 대해 주어진 콜백함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드이다. const nums = [1, 4, 9, 16]; const result ..

요구사항 동적으로 li 요소의 개수가 바뀌는 목록이 존재한다. 이 목록은 최대 4개의 li 요소를 가질 수 있다고 가정할 때, 아래의 예시 이미지처럼 li 가 4개일 때만 부모 요소에 꽉차게 스타일링 하려고 한다. 어떻게하면 JavaScript 코드 없이 CSS만으로 li가 4개일 때를 확인하고 다른 스타일링을 적용할 수 있을까? 기본 UI 코드 /* CSS */ html, body { height: 100%; } ul { margin: 0; padding: 0; list-style: none; } .list { display: flex; flex-direction: column; height: 30em; border: 5px solid; } .item { height: 20%; margin-bottom..

에러 리액트 공식 홈페이지에서 Invalid Hook Call Warning라는 타이틀로 이 이슈에 대한 정보를 아주 친절하게 제공하고 있다. Hooks can only be called inside the body of a function component. There are three common reasons you might be seeing it: 1. You might have mismatching versions of React and React DOM. 2. You might be breaking the Rules of Hooks. 3. You might have more than one copy of React in the same app.원인 옆에 계신 디블리셔분이 도움을 요청했던 에러..

리액트에서 성능을 최적화 할 수 있는 방법에는 여러 가지가 있다. 이번엔 그 중에서도 리액트 컴포넌트를 메모리에 저장하여(memoization) 불필요한 리렌더를 방지하는 방법에 대해 알아보겠다. Memoization이란 메모이제이션은 연산의 실행 결과를 캐시에 저장해두고 동일한 연산이 반복될 때, 입력값이 전과 같다면 캐시된 결과를 반환하고 다르다면 연산을 재수행하여 새로운 결과를 반환하는 최적화 기법이다. 리액트 컴포넌트의 Memoization 기본적으로 리액트는 내부 state나 전달받은 props가 변경될 때 부모 컴포넌트가 리렌더 될 때 shouldComponentUpdate() 메서드의 리턴값 혹은 React.memo 의 두번째 인자로 전달한 비교 함수(함수형 컴포넌트)의 리턴값이 true일 ..

현상 redux-saga의 call() 메서드를 사용하던 중 발생한 에러이다. Error: call: argument of type {context, fn} has undefined or null `fn` 원인 call() 메서드의 두 번째 파라미터로 전달해야하는 인자(action.payload)의 위치를 잘못 작성했던 것이 문제였다. function* addSaga(action) { try { const result = yield call(api.addParticle(action.payload)); } } 해결 공식 문서를 확인하니 바로 해결됐다. call() 메서드는 파라미터로 함수와 그 함수에 넣을 인자를 구분하여 받는다. call(fn, ...args) fn: 제네레이터 함수. 혹은 프로미스나 다..