모피어스 제품 사용시 두가지 방식을 통해 서비스를 제공할 수 있습니다.
오프라인 모드가 가능한 모피어스 리소스 업데이트 방식 (Resource In App)
웹 서버 사용 방식 (Web In App)
이 중 1번 (모피어스 리소스 업데이트)방식 사용시 프로젝트 환경 구성 가이드입니다.
현재
Morpheus Client IDE에서 제공되는 SPA 프로젝트는 베타버전으로,Vue프레임워크 사용시Vue-cli와 같은 일반적으로 많이 사용되는 프로젝트 프로젝트 구성을 사용하시길 바랍니다.
아래의 내용은 웹팩을 기준으로 설명드리기 때문에 다른 번들 도구를 사용하시는 경우 적절하게 대체하여 사용하시길 바랍니다.
PublicPath설정 관련publicPath: './', // 상대 경로 사용
path: '../assets/res/www/web/', // res/www/js 폴더가 유지되도록 (선택)
안드로이드 같은 경우, 절전모드로 변경 시 로컬 서버가 실행되지 않습니다.
예시
때문에 Public Path는 상대경로를 유지하시길 바랍니다.
Morpheus JavaScript Library 적용 가이드모피어스 라이브러리는 3개의 파일이 필수적으로 적용되어야합니다. 정적 파일 영역에 아래와 같이 유지시키는 것을 권장드립니다.
해당 파일들은
Morpheus Client IDE를 통해 기본 프로젝트 생성시 제공되는 소스 코드 파일입니다. 파일 경로{프로젝트명}/assets/res/www/js
이후 mcore.extends.js 파일을 아래와 같이 수정합니다
(function(window, undefined) {
var
thisFileName = "mcore.extends.js",
importFiles = []; // ! SPA 프로젝트 사용시, 빈칸 유지
M.ScriptLoader.writeScript( importFiles, M.ScriptLoader.scriptPath(thisFileName) );
})(window);
index.html에 아래 소스 코드를 추가합니다.
<!-- index.html -->
<html>
<head>...중략</head>
<body>
<div id="app"></div>
<body>
<!-- mcore.min.js만 추가 -->
<script src="./morpheus/mcore.min.js"></sciprt>
</html>
현재 라이브러리는 Morpheus Client IDE를 통해서 버전 관리가 가능합니다.
때문에 아래의 경로로 파일이 교체되기 때문에, 업데이트시 해당 파일을 교체하여야 정상적으로 동작합니다.
{프로젝트명}/assets/res/www/js/mcore.min.js => public/morpheus/mcore.min.js 교체
모피어스 JavaScript 라이브러리는 현재 Browser만을 지원합니다.
사용 방법
const M = window.M; // M은 전역 객체입니다.
M.pop.alert('Hello, world');
아래와 같은 모듈 방식은 지원하고 있지 않습니다.
import M from '../js/mcore.min.js'; // !! NOT WORKING
const M = require('../js/mcore.min.js') // !! NOT WORKING
Axios 또는 fetch 와 같은 Ajax 사용시 고려사항기본적으로
M.net.http.send를 통해Native영역에서 통신을 권장드립니다.
또한, 이로인해 발생되는 문제에 대해서는 대응해드리지 않습니다.
아래와 같은 제약조건을 검토해야합니다.
로컬서버(http://127.0.0.1) / FILE 프로토콜(file://)에 대한 서버 CORS 설정 필요
Webview 특성상 Cookie(쿠키)를 정상적으로 사용/관리할 수 없습니다.
향후 브라우저 보안이 올라감에 따라 Same-Site-Cookie 정책이 강화될 수 있음.
Native OS에서 제공되는 Webview의 기타 정책 또는 보안이 강화될 수 있음
때문에 아래와 같이 쿠키를 사용하지 않는 경우 고려해볼 수 있습니다.
토큰(JWT)를 사용한 세션 관리인 경우
서버/클라이언트 양쪽 모두 CORS를 지원