React-Start-Guide(with.CRA)

React를 사용한 Morpheus 프로젝트 세팅 가이드 입니다.

create-react-app 패키지를 통해서 시작하는 경우에 대한 간단한 시작 가이드입니다.

설치 환경 정보(참고용으로, 모두 동일한 버전으로 맞출 필요는 없습니다.)

  • Node 12.21.0

  • Npm 7.11.1

  • Mac OS

  • create-react-app 4.0.3

  1. 패키지 설치

npm i -g create-react-app
  1. 프로젝트 생성

설정은 기본 프로젝트 및 설정으로 생성하였습니다.

../../_images/16.png

<프로젝트 생성>

중요!! 생성 후 기존 frontend 폴더를 삭제합니다!!

  1. CRA(create-react-app)을 통한 react 프로젝트 생성

만약, typescript를 사용한 프로젝트를 생성하길 원하는 경우 –typescript 를 추가합니다.

여기서는 기본 프로젝트로 생성합니다.

cd 프로젝트경로

create-react-app frontend
텍스트이(가) 표시된 사진 자동 생성된 설명

<프로젝트 생성 후>

  1. 설정 파일 생성

frontend 아래에 .env 파일을 생성합니다.

(해당 파일이 보이지 않는 경우 Project Explorer > Pre-set filters 에서 .* resources를 체크해제해야합니다.)

../../_images/34.png

<.env 위치>

아래의 내용으로 작성합니다.

BUILD_PATH=../assets/res/www

PUBLIC_URL=./

GENERATE_SOURCEMAP=true

IMAGE_INLINE_SIZE_LIMIT=10000

PORT=8050
  1. Morpheus js 라이브러리 세팅

frontend/public/index.html 파일 내에 script 태그를 추가합니다.

   … 생략

   </body>

   <script src=”./js/mcore.min.js”></script>

</html>

이후 assets/res/www/js 폴더를 아래와 같이 public 폴더 아래로 복사합니다.

../../_images/43.png

주의! IDE를 통해서 라이브러리 버전을 변경하는 경우

assets/res/www/js/mcore.min.js가 변경됩니다.

변경된mcore.min.js 확인 후 프로젝트의 public/js/mcore.min.js와 교체하여야 정상적으로 동작합니다.

빌드 명령어를 통해 정상적으로 동작하는지 확인합니다.

webpack-dev-server 사용방법 (npm start 커맨드)

.env에 설정된 PORT 값을 통해 포트를 지정할 수 있습니다(현재 8050)

Maniefast.xml에서 아래와 같이 시작페이지 값을 설정합니다.

브라우저 에뮬레이터만을 사용하는 경우 localhost 또는 127.0.0.1로도 가능합니다.

../../_images/53.png

<시작페이지 설정>

webpack-dev-server를 통한 실행시 별도의 빌드과정없이 실시간으로 변경사항을 확인할 수 있습니다.

../../_images/62.png

<에뮬레이터로 실행시>

환경변수(.env)에 대해서 분기 처리를 원하는 경우 dotenv, cross-env 패키지를 통해 설정이 가능합니다.

안드로이드 단말기 실행시 cleartextTrafficPermitted 오류에 관련되어 http 프로토콜에 대한 도메인(IP)을 설정해두어야 합니다.

참조 https://docs.morpheus.co.kr/client/api/android-reference.html#cleartexttrafficpermitted