log4me

거슬리는 import 코드 그동안 나름대로의 규칙을 가지고 import 코드를 최대한 보기 좋게 정리하고 있었다. 하지만 한 파일에서 사용하는 모듈이 한 두개가 아니기 때문에 매번 이렇게 수작업으로 일일이 import 순서를 맞춰주는 게 여간 귀찮은 일이 아닐 수 없었다. 그리고 아무리 잘 한다고 해도 모든 파일에서 동일한 규칙을 따르기가 쉽지 않았다. 따라서 ESLint로 규칙을 정하고 강제화 하는 작업을 진행했다. ESLint의 eslint-plugin-import ESLint는 eslint-plugin-import를 통해 import/export 구문의 린트를 지원한다. 추가적으로 나는 Webpack과 TypeScript를 사용해서 절대 경로(alias)를 설정해놓고 사용하고 있기 때문에 프로젝트에..

이벤트 핸들러의 Event 객체 JavaScript에서는 addEventListener() 메서드를 통해 DOM 요소에 이벤트 핸들러를 등록할 수 있다. 등록된 이벤트 핸들러는 호출될 때 자동적으로 Event 객체를 첫 번째 인자로 전달받는다. 보통 임의로 e나 event로 이름지어 사용하는 파라미터가 여기에 해당된다. 이 이벤트 객체는 앞으로 다루게 될 target, currentTaget과 같은 프로퍼티와 stopPropagation()과 같은 메서드 등을 가지고 있다. const input = document.querySelector('.input'); // 파라미터명은 꼭 e가 아니어도 된다. const handleChange = (e) => { const { name, value } = e.ta..

고차 함수란 아래 조건 중 하나 이상을 만족하는 함수이다. 하나 이상의 함수를 인자로 받기 결과로 함수 반환하기 예제 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.원인 옆에 계신 디블리셔분이 도움을 요청했던 에러..