[20201230 groomIDE] React 프로젝트에 MobX 설치하기, decorator 에러 해결 과정

아니 회사에서부터 오질라게 삽질중이다.

MobX 쓰려면 decorator를 써야 간지인데 구름IDE 사용할 때 @observable 데코레이터가 안붙어서 죽겠당 ㅜㅜ

계속 이 에러가 난다.

Support for the experimental syntax 'decorators-legacy' isn't currently enabled

심지어 groom ide에서는 eject도 안되는데 이럴땐 어떻게 해야할지 정말정말 모르겠다..

 

-----

20201231  다음날

 

포기를 모르는 매냐 다시 도전!!

일단 eject 없이 MobX 설치하는 방법을 많은 searching 끝에 찾아내었다.

생각을 가다듬고 나는 데코레이터 레거시 에러를 해결만 하면 되는 간단한 문제라고 보기로 했다.

eject 없이 하려면 customize-cra와 react-app-rewired를 사용해야 한다.

customize-cra와 react-app-rewired는 eject 없이 CRA의 설정을 커스터마이징을 할 수 있도록 해주는 라이브러리. (eject보다 자유롭지는 않다)

 

아무튼 이걸 사용하기위해 

$ yarn add --dev customize-cra

$ yarn add --dev react-app-rewired

(갑자기 패키지매니저를 npm이 아닌 yarn을 사용, 구글링하면 yarn으로 설명되어 있는게 많아서...

yarn은 추가 해주면 된다 $ npm i yarn install)

 

위의 두개 설치해주고, package.json 도 약간 수정했다.

(이건 사실 어제부터 삽질하면서 수정되어 있었다.)

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  },
  
  ... ,
  
   "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  },
  
  ...

그리고 / 폴더에 config-overrides.js 파일을 생성해 주었다.

const { 
  addDecoratorsLegacy,
  disableEsLint, 
  override,
} = require("customize-cra");

module.exports = {
  webpack: override(
      disableEsLint(),
      addDecoratorsLegacy()
  ),
};

일단 자세히는 모르는데 시키는 대로 했다.

(그냥 딱봐도 데코레이터 사용할 수 있도록 추가해주고 EsLint 관련한 설정을 해주는 것 같고, 전체적으로 사용자 임의로 내가 쓸 것만 웹팩에 설정해주는 느낌?)

 

그리고 마지막으로 아래 명령어를 실행하고

$ yarn add --dev core-decorators 

$ yarn start

하자마자 run 메시지 뜨고 너무 설레었다.

 

나도 이제 집 컴퓨터에서 MobX 방식을 제대로 decorator까지 붙여서 해볼 수 있다는 것이다! 뿌듯해