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. 패키지 설치

.. code-block:: bash

   npm i -g create-react-app

2. 프로젝트 생성

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

.. image::  ../../_static/spa/sup/start-react/1.png
   :width: 6.26806in
   :height: 2.32153in

<프로젝트 생성>


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



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

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

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

.. code-block:: bash

   cd 프로젝트경로

   create-react-app frontend

.. image::  ../../_static/spa/sup/start-react/2.png
   :alt: 텍스트이(가) 표시된 사진 자동 생성된 설명
   :width: 6.26806in
   :height: 4.67917in

<프로젝트 생성 후>

4. 설정 파일 생성

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

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

.. image::  ../../_static/spa/sup/start-react/3.png
   :width: 4.55556in
   :height: 2.33333in

<.env 위치>

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

.. code-block:: txt

   BUILD_PATH=../assets/res/www

   PUBLIC_URL=./

   GENERATE_SOURCEMAP=true

   IMAGE_INLINE_SIZE_LIMIT=10000

   PORT=8050


5. Morpheus js 라이브러리 세팅

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

.. code-block:: html

      … 생략

      </body>

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

   </html>

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

.. image::  ../../_static/spa/sup/start-react/4.png
   :width: 4.36111in
   :height: 2.625in

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

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

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

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

.. coe-block:: bash

   npm run build


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


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

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

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

.. image::  ../../_static/spa/sup/start-react/5.png
   :width: 6.20833in
   :height: 0.41667in

<시작페이지 설정>

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

.. image::  ../../_static/spa/sup/start-react/6.png
   :width: 5.35025in
   :height: 5.78652in

<에뮬레이터로 실행시>

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


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


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



.. note::

   CRA document https://create-react-app.dev/

   CRA 환경변수관련 https://create-react-app.dev/docs/advanced-configuration