SVG svg 파일을 에디터로 열어 보면 아래와 같이 version, xmlns, xmlns:xlink 속성이 붙어있다. <svg version="1.1" xmlns=http://www.w3.org/2000/svg xmlns:xlink="http://www.w3.org/1999/xlink" width="520" height="5...

Merge 했을 때 커밋 메시지가 생성되지 않는 경우 다른 브랜치를 머지했는데 git 로그에 merge 되었다는 커밋 메시지는 생성되지 않고, 다른 브랜치의 커밋 내역만 생성되었다. 하지만 커밋 내역들이 머지해서 가져온 것이라는 티를 내줘야 할 것 같아서, 머지 메시지 생성 옵션에 대해 알아보게 되었다. fast-forward 2개의 커밋 A와...

문제 타입스크립트 앱에서 상수를 선언할 때 아래처럼 type과 객체를 따로 선언했다가 바보같은 짓임을 깨달았다. export type Status = "default" | "active" | "disabled"; export const STATUS = { DEFAULT: "default", ACTIVE: "active", DISABLE...

만약 tsconfig에서 paths를 사용하지 않고 rootDir로 절대경로를 설정한 경우, .storybook 폴더에 webpack.config.js 파일을 만드는 방법으로 간단히 경로를 설정할 수 있다. 하지만 tsconfig에서 paths를 사용하는 경우는 라이브러리를 사용하여 tsconfig의 paths 값을 가져와야 한다. tsconf...

문제 앱을 빌드하여 .d.ts 파일을 생성할 때, rootDir로 설정한 절대경로가 변환되지 않고 그대로 생성되어 dist 폴더에서 경로를 찾지 못한다. import { ColorTheme } from "types"; // types가 아니라 ../../types로 바꿔야 경로를 찾아갈 수 있다. 해결 typescript-transform-p...

redux-saga의 이펙트 Saga는 명령을 만들어주기만 하고, 이 명령에 따른 직접적인 처리는 미들웨어가 한다. 이펙트는 Saga의 미들웨어가 실행할 수 있는 명령들이다. take take를 호출하면 해당 액션이 디스패치 될 때까지 기다렸다가, 디스패치되면 다음 코드를 실행한다. function* watchLogIn() { yield ...

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...