(React) Eject 안하고 MobX Decorator 사용하기

MobX에선 decorator를 사용해서 문법을 편하게 작성할 수 있다.

그런데 decorator를 사용하려면 babel 설정을 위해 eject를 해야하는데

아직 configuration을 직접 유지보수할 단계가 아니라 eject를 안하고 decorator를 사용해보려고 한다.

1.customize-cra, react-app-rewired 설치

yarn add react-app-rewired --dev
yarn add customize-cra --dev

2. package-json의 script 수정

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

3. decorators plugin 설치

yarn add --dev @babel/plugin-proposal-decorators

4. config-overrides.js 파일 생성 후 customize

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

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