lallaheeee / error-note

Hi there 👋

error-note's Issues

205 Reset Content 와 axios

[string 형태의 html을 렌더링하기] 댓글이나 게시글에서 줄바꿈하기!

1. <br> ?

content.split(`\n`).map(line => <span> {line} <br/><span>)

https://velopert.com/1896

CRA + TypeScript + Storybook absolute Path 설정

CRA + TypeScript + Storybook 에서 alias 로 import 경로 설정하기

---

import Button '../../components/atoms/Button';

import Button '@atoms/Button';

프로젝트를 진행하면서 import 경로가 길어졌다.
소스 코드를 깔끔하게 유지하고 싶어 더 늦기 전에, alias 설정을 하기로 결심했다.
webpack이나 babel에서 설정을 할 수 있지만,
CRA에서는 webpack과 babel의 설정이 감춰져있다.
이를 위해선 eject를 하거나, CRA의 설정을 커스터마이징할 수 있는 craco 나 react-app-rewired 를 사용해야한다.

방법들

1) .env에 NODE_PATH=src/ 추가 타입스크립트 적용 안됨

NODE_PATH=src/

CRA에서 .env 파일에 위와 같이 NODE_PATH를 사용하여 import 경로를 줄일 수 있다.
이 방법은 따로 경로 이름을 정할 수 없어 마음에 들지 않았는데, 시도해보니 적용되지 않았다.
슬프게도 typescript에서는 이 방법을 사용할 수 없다.

2) eject 하기

$ yarn eject

eject는 cra로 구성한 프로젝트를 커스터마이징 할 수 있도록 숨겨져있는 설정을 밖으로 추출하는 명령이다.
eject 명령을 실행하면 Webpack, babel, ESlint 등의 설정이 보이기 때문에, alias 설정을 하면 된다.

하지만, 한 번 실행하면 되돌릴 수 없기 때문에 CRA 문서에서 앵간하면 원하는 기능을 포함한 모듈을 사용하라고 적혀있다. cra eject 를 구글에 검색했더니 대부분의 글들이 eject 하지 않고, eject 없이 XX 하기 였다. 흠..다음번에 꼭 eject해서 이것저것 해봐야지..ㅎ

+Eject시 문제점 찾아보기

3) craco

craco 는 Create React App Configuration Override의 약자이다. 말 그대로 CRA의 설정을 오버라이드할 수 있는 모듈이다. How to modify config of Create React App - without Ejecting! 이 글을 읽고 정상 작동이 됐으나, storybook에서 실행되지 않았다. storybook도 설정이 필요했다.
storybook/preset-create-react-app 을 사용 중이였고, 다음의 글들을 읽으며 시도했다.

dilanx/craco#43
https://storybook.js.org/docs/configurations/custom-webpack-config/#using-your-existing-config
storybookjs/presets#109

craco의 createWebpackDevConfig 을 이용하여, storybook의 custom webpack 설정을 하려했으나, 경로를 찾지 못하였다.

4) react-app-rewired + tsconfig

그렇게 react-app-rewired를 사용하게 되었다.
react-app-rewired를 이용하여 alias를 설정하는 방법은 구글링하면 나온다.

하지만 tsconfig과 webpack alias를 둘 다 지정해줘야 했고, 프로젝트와 스토리북 둘다 정상 작동이 되었지만
두번 적어야해서 찝찝함을 지울 수 없었다. (똑같은 내용이 중복되는 거 싫어하는 스타일)

tsconfig.paths.json에 path를 작성하고, 이를 tsconfig.json 에서 extends를 하고,
react-app-rewired에서 필요한 설정파일인 config-overrides.js에서 또한 tsconfig.paths.json을 읽어들어 웹팩 포맷에 맞게 바꿔 설정했다. 그리고 스토리북의 main.js에서 config-overrides.js 설정을 읽었다.

마음에 든다.

STEP 1

yarn add --dev react-app-rewired

STEP2

//tsconfig.paths.json
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "~/*": ["./src/*"],
            "@atoms/*": ["./src/components/atoms/*"],
            //기타 경로 설정
        }
    }
}

후 tsconfig.json에 다음과 같이 추가

//tsconfig.json
{
  "extends": "./tsconfig.paths.json",
  //...tsconfigs
}

STEP3

config-overrides.js 작성

const tsconfigPaths = require("./tsconfig.paths.json")["compilerOptions"][
    "paths"
];

const path = require("path");

const alias = {};
const resolve = (dir) => path.resolve(__dirname, dir);
const removeSlashStar = (arg) => arg.split("/*")[0];

Object.entries(tsconfigPaths).forEach(([key, [value]]) => {
    const name = removeSlashStar(key);
    const path = removeSlashStar(value);

    alias[name] = resolve(path);
});

module.exports = function (config, env) {
    config.resolve.alias = Object.assign(config.resolve.alias, alias);

    return config;
};

STEP5

package.json 수정

    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
··· 

STEP6

스토리북 설정

//.storybook/main.js
module.exports = {
    ...configs,
    webpackFinal: (config) => {
        return require("../config-overrides")(config);
    },
};

git commit --amend 되돌리기

STEP 1

git log --reflog

로 해당 커밋 해쉬값 보기

STEP 2

git reset --soft 이전커밋 해쉬값