[React] CRA에서 eject없이 Decoration 사용하기

mobX를 공부하면서 decorator를 사용하려고 했지만 decorator을 사용하려고 하면 컴파일 자체가 안되고 계속해서 eslint 에러가 뜨는 모습을 볼 수 있다.

이 이유에 대해서는 babel 6 이상의 버전에서는 decorator를 지원하지 않는 다는 것이다.

이 옵션을 변경을 해주려면 CRA 프로젝트를 eject 해줘야 하지만 eject하는 것에 대한 부담이 크기 때문에

이 부분을 해결하려고 시도했고, 이를 eject하지 않고 사용할 수 있는 방법이 존재한다.

 

eject를 하는 방법에 대해서는 아래의 블로그를 참조하면 될 것 같다.

https://blog.woolta.com/categories/1/posts/147

 

https://github.com/ember-codemods/ember-module-migrator/issues/86

위의 깃헙에서도 해결책이 존재하지만, 내쪽에서는 최신 버전의 CRA를 사용하기 때문에 이미 바벨 버전이 7로 올라가면서 불가능 했다.

 

결론적으로는 node_modules\babel-preset-react-app 에 들어있는 craete.js에서 144번째줄의 false 부분을

 

{ 
	legacy: true
}

로 바꿔주고 실행하주면 된다.

 

기본적으로 CRA 2 버전 이상에서는 데코레이션을 지원하지 않기 때문에 plugin 설정에서

plugin-proposal-decorators 의 legacy를 사용해주겠다고 바꿔주면 된다.