공식 홈페이지에 의하면 web app을 만들 때 다음 세 개의 파일은 반드시 필요하다.
- appinfo.json : metadata
- icon.png : icon image file
- index.html : main page
appinfo.json은 앞서 한 번 살펴봤고, 이제 icon.png와 index.html을 살펴보자
2. icon.png
사실 이건 별로 살펴 볼 필요가 없다.
이렇게 생긴 아이콘 png 파일 세 개가 크기 별로 저장되어 있다.
3. index.html
기본적으로 index.html을 시작으로 web app이 만들어지게 되지만 위 앱은 enact 기반으로 만들어져서 구성이 좀 다르다. 실제 앱을 제작할 때 enact를 활용할 생각은 아직 없어서 간단하게 구조만 알아보았는데, 기본적으로 index.js에서 시작해서 App을 실행하고(주로 ./src/App/App.js하고 package.json에서 "main": "App.js"로 지정) 나중에 enact pack과 같은 명령을 실행하면 index.html이 자동으로 생성된다는 듯 하다. 실제로 dist의 index.html을 보면 굉장히 제너럴한 코드가 있다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<link href="main.css" rel="stylesheet"/></head>
<body>
<div id="root"></div>
<script defer="defer" src="main.js"></script></body>
</html>
결국 main index 파일은 index.js란 말인 것 같다.
index.js
import {render} from 'react-dom';
import App from './App';
import {Provider} from 'react-redux';
import configureStore from './store/configureStore';
const store = configureStore();
const appElement = (
<Provider store={store}>
<App />
</Provider>
);
// In a browser environment, render instead of exporting
if (typeof window !== 'undefined') {
render(appElement, document.getElementById('root'));
}
export default appElement;App을 import하여 render하는 것을 볼 수 있다. 일반적인 react coding과 비슷한 것 같다..
package.json도 마찬가지다.
package.json
{
"main": "App.js"
}
그리고 App.js는 다시 views/MainPanel을 호출한다.
App.js
import kind from '@enact/core/kind';
import MoonstoneDecorator from '@enact/moonstone/MoonstoneDecorator';
import MainPanel from '../views/MainPanel';
import css from './App.module.less';
const App = kind({
name: 'App',
styles: {
css,
className: 'app'
},
render: (props) => (
<div {...props}>
<MainPanel />
</div>
)
});
MainPanel.js
import {Component} from 'react';
import css from './MainPanel.view.less';
import Calendar from '../components/Calendar/Calendar';
export default class MainPanel extends Component {
onDayClick = () => {
// window.alert(day);
};
render () {
return (
<div className="App">
<Calendar
style={css.mainDiv}
onDayClick={(e, day) => this.onDayClick(e, day)}
/>
</div>
);
}
}그리고 MainPanel은 다시 components/Calendar/Calendar.js를 호출한다.
그리고 Calendar.js가 가장 중요한 calendar 정보를 담고 있다.
본격적으로 보기 전에 @enact.moonstone이 반복적으로 등장하는 것을 찾을 수 있었다. 보니까 enact에서 제공하는 API 중 하나였다.
enact는 react 기반 효과적인 API와 사용자 정의 기능을 제공하는 것을 강조하고 있는데, moonstone library도 그 일부로 보인다. 실제로도 괜찮은 컴포넌트들을 많이 가지고 있었다.
https://enactjs.com/
The goal of Enact is to provide the building blocks for creating robust and maintainable applications. To that end, we’ve pulled together the best solutions for internationalization (i18n), accessibility (a11y), focus management, linting, testing and bui
enactjs.com
Calendar.js 파일은 다음 포스팅에서 살펴보도록 하겠다.
'webOS' 카테고리의 다른 글
| webOS: web app 개발일지(5) (0) | 2022.10.06 |
|---|---|
| webOS: web app 개발일지(4) (0) | 2022.09.30 |
| webOS: web app 개발일지(2) (0) | 2022.09.28 |
| webOS: web app 개발일지(1) (0) | 2022.09.19 |
| # JavaScript (0) | 2022.08.23 |
