CRA에서 build를 진행하는데 .d.ts 파일이 생성되지 않았다. tsconfig.json에서 declaration, emitDeclarationOnly, outDir 설정해도 마찬가지.. tsconfig.json에 있는 baseUrl이나 include 다 잘 적용되는데.. build 할 때 tsconfig.json을 컴파일해주니 .d.ts ...

matchPath 정규식을 통해 url을 체크하듯이 현재 라우터의 path가 매치되는지 체크할 수 있다. import { matchPath } from 'react-router' const match = matchPath(window.location.pathname, { path: '/users/:id', exact: true, str...

문제 이미지의 해상도에 상관없이 부모 요소의 가로와 세로를 꽉 채우게 하려고 한다. .parent { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; } .child { min-width: 100%; min-h...

Global decorators storybook 템플릿에 직접 <Global /> 코드를 넣자 에러가 발생했다. Global Style을 적용하려면 Global decorators를 설정해야 한다. .storybook/preview.js 파일에 아래 코드를 추가한다. import { Global } from "@emotion/rea...

원인 storybook 실행 시 빌드 단계에서 컴포넌트의 절대경로를 찾지 못해 발생하는 에러 해결 .storybook 폴더에 webpack.config.js 파일을 만들고 아래 코드를 입력하여 절대경로를 잘 찾아가도록 설정한다. const path = require("path"); module.exports = ({ config }) =&gt...

npm install npm install의 동작은 크게 패키지 설치/의존성 설치로 나뉜다. npm install [package명] 패키지명을 명시해 특정 패키지를 설치 npm install package.json 파일의 의존성을 설치 패키지 설치 플래그 npm install 뒤에 -D와 같은 접미어(플래그)를 붙이면 프로젝트의 de...

onChange={throttle(handleKeyChange, 250)} 이런 식으로 컴포넌트에 리액트 이벤트를 등록하면 throttle이 적용되지 않는다. 하지만 handleKeyChange를 아래와 같이 수정하면 정상 동작한다. const handleKeyChange = throttle(() => {}, 250) 클로저가 생성되지...

CustomEvent() CustomEvent()를 사용하여 이벤트를 만들고, 임의로 발생시킬 수 있다. CustomEvent(typeArg) CustomEvent(typeArg, options) typeArg : 이벤트 이름 options : 이벤트 관련 정보를 나타내는 객체. {"detail": {[key]: value}} 구조 ...

Storybook 설치 npm i storybook@latest --save-dev init package.json에 아래와 같은 CLI가 생기며, .storybook 폴더가 생성된다. "scripts": { // ... "storybook": "storybook dev -p 6006", "build-storybook"...

create-react-app install npm install -g create-react-app Creating an App npx create-react-app my-app npm init react-app my-app yarn create react-app my-app Output my-app ├── README.md...