Craco

Create React App Configuration Override로
CRA를 쉽게 설정하기 위한 것이다.
ex) 상대경로 지옥 해결

상대경로 해결하기

craco.config.js에 alias에 경로를 설정한다.

package.json은 기존과 다르게 "start" : craco start로 바꿔준다.

프로젝트에서 사용예시

• craco.config.js

const path = require('path')

module.exports = {
  babel: {
    presets: ['@emotion/babel-preset-css-prop'],
  },
  webpack: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@hooks': path.resolve(__dirname, 'src/hooks'),
      '@contexts': path.resolve(__dirname, 'src/contexts'),
      '@pages': path.resolve(__dirname, 'src/pages'),
      '@api': path.resolve(__dirname, 'src/api'),
      '@AntDesign': path.resolve(__dirname, 'src/components/AntDesign'),
      '@SessionStorage': path.resolve(__dirname, 'src/SessionStorage'),
    },
  },
}

• PostItem.jsx

import { getItem } from '@SessionStorage'
import CommentContainer from '@components/Comment/CommentContainer'
...

기존에 ../../../이런식의 상대경로에 비해 훨씬 보기 좋다.

출처

craco