Create React App v3.x (CRA3) Mobx 데코레이터 안될때

리액트 프로젝트 상태관리를 위해 mobx 의 데코레이터 셋팅 진행중

create-react-app (CRA) 을 이용해서 프로젝트 생성시 3.x 버전에서 데코레이터 설정이 되지 않을때 하는 방법을 다방면으로 시도 후 해결한 내용을 기록 및 공유합니다.

 

mobx 를 사용하는데 있어서 decorator 사용은 필수가 아닌 선택이라고 이야기 하지만 대부분의 관련 예시들이 decorator 를 사용하고 있기에 체감상 필수라고 보여집니다.

 

mobx 관련 강의는 아래 velopert 님의 강의참고.

 

velopert 님의 리액트 mobx 튜토리얼 

https://velog.io/@velopert/begin-mobx

MobX (1) 시작하기

 

velopert 님의 튜토리얼 및 여러 관련 참고 자료가 많은데 위 강의를 포함한 많은 참고자료들이 create-react-app 의 구버전 ( v1.x , v2.x ) 기준으로 작성되어 있음.

 

v2.x 기준의 셋팅방법의 해결책으로 많이 추천 되어지는 eject 를 이용해 설정파일을 밖을로 빼내어 사용하는 방법은

현재 시점 기준 최신 버전인 v3.x 버전에서는 사용할 수 없는 것으로 확인.

 

v3.x 버전용 mobx 셋팅 및 decoration 셋팅 방법

 

0) CRA 버전 확인 및 프로젝트 생성 ( 3.x.x 버전이라면 아래 방법 적용 )

create-react-app --version
3.3.0

create-react-app myapp

 

1) Mobx 인스톨

npm install mobx mobx-react		// npm

or

yarn add mobx mobx-react		// yarn

2) 데코레이션 활성

npm install --dev customize-cra react-app-rewired	// npm

or

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

3) package.json 에 스크립트 추가

  "scripts": {
    "rstart": "react-app-rewired start",	// 추가
    "rbuild": "react-app-rewired build",	// 추가
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

4) config-overrides.js 파일 추가 ( 위치:프로젝트 루트 )

const { addDecoratorsLegacy, useEslintRc, override } = require('customize-cra'); 

module.exports = override( 
    addDecoratorsLegacy(), 
    useEslintRc('./.eslintrc') 
);

5) .eslintrc 파일 추가 ( 위치:프로젝트 루트 )

{ 
  "extends": "react-app", 
  "parserOptions": { 
    "ecmaFeatures": { 
      "legacyDecorators": true 
    } 
  } 
}

여기까지 완료 하였으면 아래 튜토리얼을 진행해보면 테스트 하면됩니다.

 

velopert 님의 리액트-프로젝트에서-MobX-사용하기

 

https://velog.io/@velopert/MobX-2-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C-MobX-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-oejltas52z

MobX (2) 리액트 프로젝트에서 MobX 사용하기

 

#create-react-app v3.xx

#mobx decorator

 

참고 자료

https://medium.com/jstack-eu/using-mobx-decorators-in-create-react-app-v3-27f7b1afa1c7

Using Mobx decorators in Create React app v3