React : craco

daymoon_·2022년 4월 13일

React craco

React

목록 보기

8/12

✅ 운영체제 : Windows 11

🤔 들어가기 전

리액트 공부를 하던 도중.. 외국인 분의 추천 영상을 보고 주섬주섬 챙겨왔다.
많이 검색해서 그런가.. 알고리즘으로 리액트만 주구장창 뜬다...（；´д｀）ゞ

어디 한번 새로운 지식을 정리해 보자!

CRACO

🧇 참고자료
NPM @craco/craco
github gsoft-inc/craco
Visual Studio Code jsconfig.json
B급코딩 상대경로 지옥에서 벗어나기 (craco)
코딩마차 React 절대경로 설정 및 컴포넌트 불러오기
jacibko 14.React typeScript 절대경로 적용하기 with CRA
본 투비 프론트 엔드
Dohae Lee React 절대 경로 (또는 별칭) 사용하는 2가지 방법

Create React App Configuration Override, CRACO는 절대경로를 개선할 수 있다.

🛑 상대경로 지옥
React Component를 import 할 때 ../가 계속 중복되는 것을 볼 수 있다. 언제까지 똑같은 문장을 반복해야 하는가..

만약 대규모 프로젝트를 할 경우 컴포넌트 및 스타일을 적용할 때 ../ 개수는 몇 개가 되는가..?!

🍳 설치 방법
yarn 또는 npm 등 자신에게 맞는 것을 선택하여 설치해 주면 된다.

yarn add @craco/craco

# OR

npm install @craco/craco --save

package.json 파일 변경

변경 전

"scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
}

변경 후

"scripts": {
   "start": "craco start",
   "build": "craco build",
   "test": "craco test"
}

Configuration 파일 추가

프로젝트 root 경로에 craco.config.js파일을 새로 추가한다.

밑에 보이는 코드는 Craco github예시 코드이다.
사용자에게 맞는 코드를 작성하면 예시 코드보다 훨씬 짧다.

const { when, whenDev, whenProd, whenTest, ESLINT_MODES, POSTCSS_MODES } = require("@craco/craco");

module.exports = {
    reactScriptsVersion: "react-scripts" /* (default value) */,
    style: {
        modules: {
            localIdentName: ""
        },
        css: {
            loaderOptions: { /* Any css-loader configuration options: https://github.com/webpack-contrib/css-loader. */ },
            loaderOptions: (cssLoaderOptions, { env, paths }) => { return cssLoaderOptions; }
        },
        sass: {
            loaderOptions: { /* Any sass-loader configuration options: https://github.com/webpack-contrib/sass-loader. */ },
            loaderOptions: (sassLoaderOptions, { env, paths }) => { return sassLoaderOptions; }
        },
        postcss: {
            mode: "extends" /* (default value) */ || "file",
            plugins: [require('plugin-to-append')], // Additional plugins given in an array are appended to existing config.
            plugins: (plugins) => [require('plugin-to-prepend')].concat(plugins), // Or you may use the function variant.
            env: {
                autoprefixer: { /* Any autoprefixer options: https://github.com/postcss/autoprefixer#options */ },
                stage: 3, /* Any valid stages: https://cssdb.org/#staging-process. */
                features: { /* Any CSS features: https://preset-env.cssdb.org/features. */ }
            },
            loaderOptions: { /* Any postcss-loader configuration options: https://github.com/postcss/postcss-loader. */ },
            loaderOptions: (postcssLoaderOptions, { env, paths }) => { return postcssLoaderOptions; }
        }
    },
    eslint: {
        enable: true /* (default value) */,
        mode: "extends" /* (default value) */ || "file",
        configure: { /* Any eslint configuration options: https://eslint.org/docs/user-guide/configuring */ },
        configure: (eslintConfig, { env, paths }) => { return eslintConfig; },
        pluginOptions: { /* Any eslint plugin configuration options: https://github.com/webpack-contrib/eslint-webpack-plugin#options. */ },
        pluginOptions: (eslintOptions, { env, paths }) => { return eslintOptions; }
    },
    babel: {
        presets: [],
        plugins: [],
        loaderOptions: { /* Any babel-loader configuration options: https://github.com/babel/babel-loader. */ },
        loaderOptions: (babelLoaderOptions, { env, paths }) => { return babelLoaderOptions; }
    },
    typescript: {
        enableTypeChecking: true /* (default value)  */
    },
    webpack: {
        alias: {},
        plugins: {
            add: [], /* An array of plugins */
            add: [
                plugin1,
                [plugin2, "append"],
                [plugin3, "prepend"], /* Specify if plugin should be appended or prepended */
            ], /* An array of plugins */
            remove: [],  /* An array of plugin constructor's names (i.e. "StyleLintPlugin", "ESLintWebpackPlugin" ) */
        },
        configure: { /* Any webpack configuration options: https://webpack.js.org/configuration */ },
        configure: (webpackConfig, { env, paths }) => { return webpackConfig; }
    },
    jest: {
        babel: {
            addPresets: true, /* (default value) */
            addPlugins: true  /* (default value) */
        },
        configure: { /* Any Jest configuration options: https://jestjs.io/docs/en/configuration */ },
        configure: (jestConfig, { env, paths, resolve, rootDir }) => { return jestConfig; }
    },
    devServer: { /* Any devServer configuration options: https://webpack.js.org/configuration/dev-server/#devserver */ },
    devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => { return devServerConfig; },
    plugins: [
        {
            plugin: {
                overrideCracoConfig: ({ cracoConfig, pluginOptions, context: { env, paths } }) => { return cracoConfig; },
                overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) => { return webpackConfig; },
                overrideDevServerConfig: ({ devServerConfig, cracoConfig, pluginOptions, context: { env, paths, proxy, allowedHost } }) => { return devServerConfig; },
                overrideJestConfig: ({ jestConfig, cracoConfig, pluginOptions, context: { env, paths, resolve, rootDir } }) => { return jestConfig },
            },
            options: {}
        }
    ]
};