¶ 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
- 패키지 설치
npm i -g create-react-app
- 프로젝트 생성
설정은 기본 프로젝트 및 설정으로 생성하였습니다.
<프로젝트 생성>
중요!! 생성 후 기존 frontend 폴더를 삭제합니다!!
- CRA(create-react-app)을 통한 react 프로젝트 생성
만약, typescript를 사용한 프로젝트를 생성하길 원하는 경우 --typescript
를 추가합니다.
여기서는 기본 프로젝트로 생성합니다.
cd 프로젝트경로
create-react-app frontend
<프로젝트 생성 후>
- 설정 파일 생성
frontend 아래에 .env 파일을 생성합니다.
(해당 파일이 보이지 않는 경우 Project Explorer > Pre-set filters 에서
.* resources를 체크해제해야합니다.)
<.env 위치>
아래의 내용으로 작성합니다.
BUILD_PATH=../assets/res/www
PUBLIC_URL=./
GENERATE_SOURCEMAP=true
IMAGE_INLINE_SIZE_LIMIT=10000
PORT=8050
- Morpheus js 라이브러리 세팅
frontend/public/index.html 파일 내에 script 태그를 추가합니다.
… 생략
</body>
<script src=”./js/mcore.min.js”></script>
</html>
이후 assets/res/www/js 폴더를 아래와 같이 public 폴더 아래로 복사합니다.
주의! IDE를 통해서 라이브러리 버전을 변경하는 경우
assets/res/www/js/mcore.min.js가 변경됩니다.
변경된mcore.min.js 확인 후 프로젝트의 public/js/mcore.min.js와
교체하여야 정상적으로 동작합니다.
빌드 명령어를 통해 정상적으로 동작하는지 확인합니다.
bash
npm run build
¶ webpack-dev-server 사용방법 (npm start 커맨드)
.env에 설정된 PORT 값을 통해 포트를 지정할 수 있습니다(현재 8050)
Maniefast.xml에서 아래와 같이 시작페이지 값을 설정합니다.
브라우저 에뮬레이터만을 사용하는 경우 localhost 또는 127.0.0.1로도
가능합니다.
<시작페이지 설정>
webpack-dev-server를 통한 실행시 별도의 빌드과정없이 실시간으로 변경사항을 확인할 수
있습니다.
<에뮬레이터로 실행시>
환경변수(.env)에 대해서 분기 처리를 원하는 경우 dotenv, cross-env
패키지를 통해 설정이 가능합니다.
안드로이드 단말기 실행시 cleartextTrafficPermitted 오류에 관련되어 http 프로토콜에 대한 도메인(IP)을 설정해두어야 합니다.
참조 https://wiki.uracle.co.kr/madp/client/android_ref#h-6-cleartexttrafficpermitted-오류-관련
Note
CRA document https://create-react-app.dev/
CRA 환경변수관련 https://create-react-app.dev/docs/advanced-configuration