CRA(create-reat-app) 에서 mobx 데코레이션 사용하기

CRA(create-reat-app) 에서 mobx를 사용하려고 하면 에러가 발생하면서 빌드조차 되지않는 모습을 볼수 있습니다. 이는 기존의 CRA(create-reat-app) 에서는 Decorator 에 대한 지원을 제대로 하지 않기 때문입니다. 이때 다음과 같은 2가지 방법으로 처리하시면 바로 사용하실 수 있습니다.

create-react-app-mobx 사용

mobx 를 지원하기 위해 아에 create-react-app-mobx 를 지원하기 때문에 프로젝트를 mobx 를 통해 새로 시작하시려면 https://github.com/mobxjs/create-react-app-mobx 를 설치해 사용하시면 됩니다.

기존 CRA에서 적용

• webpack 설정 변경을 위해 npm run eject 을 실행 (이미 eject 되어있다면 패스하셔도 됩니다.)

• 데코레이터 바벨 문법 검사를 위해 babel-plugin-transform-decorators-legacy 설치

npm install --save-dev babel-plugin-transform-decorators-legacy

• babel-plugin-transform-decorators-legacy 를 Webpack 설정에 적용

"babel": {
  "plugins": [
    "babel-plugin-transform-decorators-legacy"
  ],
  "presets": [
    "react-app"
  ]
},