셋업공유

스타일 설정

• index.css 수정

• public 헤더 수정

설정 변경

추가한 패키지

tsconfig.json

{
  "extends": "./tsconfig.paths.json", // 추가, 해당 파일에서 속성을 상속받는다.
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ],
  "exclude": [ // 추가, 내용 더 찾아보기
    "node_modules",
    "**/node_modules/*"
  ]
}

tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

craco.config.js

// eslint-disable-next-line
const CracoAlias = require('craco-alias'); // 추가

module.exports = {
  babel: {
    presets: ['@emotion/babel-preset-css-prop'],
  },
  plugins: [ // 추가, craco의 절대경로 별칭을 지정
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: './src',
        tsConfigPath: './tsconfig.paths.json',
      },
    },
  ],
};

스토리북 설정

• index.css 추가

• preview-head.html 추가

• mian.js 내용 변경
• 스토리북 alias 설정 (tsconfig-paths-webpack-plugin 패키지)

참고자료

Typescript로 만든 react 프로젝트에서 경로 별칭 사용하기..

[Typescript] storybook에서 절대 경로 설정하기