reactjs Craco ???

Craco 란?

Craco(Create React App Configuration Override)는 create-react-app(CRA)을 쉽게 설정하기 위해 만들어졌다

이게 뭔말인가???  읽어도 모르겠다. 무슨 뜻인지.

==> 이걸 사용하기 위해 만들어진 내용이다.

reactjs 에서 component 와 같은 것을 import 할때 아래와 같이 한다.

import Abc from './componet/Abc'  

이 내용을 다음과 같이 사용하기 위해 설정한다.

import Abc from '@component/Abc'  

절대 경로를 지정해 놓고 사용하기 위해 포함 시키는 module 이다.

설치하는 방법

yarn add @craco/craco

yarn add craco-alias -D

package.json 을 수정

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

base 경로에 jsconfig.paths.json 생성한다. ( 나는 javascript 로 개발하기 때문에 jsconfig.paths.json 이다. 만약 typescript 로 한다면 tsconfig.paths.json 일 것이다. )

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

여기 다음의 내용이 참조하는 블러그마다 제각각이다.

일단 그래서 여기서 부터는 직접 해 본다. 

우선 다음과 같이 한다.

src/components 폴더를 만든다.

그리고, 

Abc.js 를 만든다.

만드는 방법은 rfc 라고 입력하면 react function component라고 하면서 code snippet 이 자동으로 만들어 준다.

여기서 부터는 기존에 설명이 다 틀리다.

틀린 내용 jsconfig.json 은 자동으로 만들어 지지 않는다.

만들어야 한다.

기존 찾아본 블로그는 이 파일에 추가하라고 하는데 이 파일이 없다. 

나의 경우 검색해서 찾은 내용이다.

https://code.visualstudio.com/docs/languages/jsconfig

이 내용이다. visual studio code 에서 뭐라 뭐라 해 놓았다.

관심은 없고 그냥 적당히 가져왔다.

jsconfig.json 

{

    "compilerOptions": {

        "module": "commonjs",

        "target": "es6",

        "baseUrl": "./",

        "paths": {

            "@components/*": ["src/components/*"]

        }

    }

}

그리고, jsconfig.paths.json 은 

{

    "compilerOptions": {

        "baseUrl": "./",

        "paths": {

            "@components/*": ["src/components/*"]

        }

    }

}

마지막으로 craco.config.js 는 

const CracoAlias = require('craco-alias');

module.exports = {

    plugins: [

        {

            plugin: CracoAlias,

            options: {

                source: 'jsconfig',

                // as you know, CRA doesn't allow to modify tsconfig's compilerOptions

                // so you should create a separate JSON file and extend tsconfig.json from it

                // and then just specify its path here:

                jsConfigPath: 'jsconfig.paths.json',

            },

        },

    ],

};

호출할때는 

import Abc from '@components/Abc'

와 같이 호출하였다.

나의 경우 아래와 같이 호출하면 동작하지 않았다.

import {Abc} from '@components/Abc' 는 동작하지 않는다.

위에 보면 설정이 중복으로 되어 있는데 왜 그런지 알고 싶지 않다.

사용하고 싶은 내용만 그대로 사용하면 된다.