diff --git a/com.twin.app.shoptime/README.md b/com.twin.app.shoptime/README.md index 9032a4e4..96d38d68 100644 --- a/com.twin.app.shoptime/README.md +++ b/com.twin.app.shoptime/README.md @@ -1,267 +1,36 @@ -This project was bootstrapped with [@enact/cli](https://github.com/enactjs/cli). +## Enact Client -Below you will find some information on how to perform common tasks. -You can find the most recent version of this guide [here](https://github.com/enactjs/templates/blob/master/packages/webostv/template/README.md). -Additional documentation on @enact/cli can be found [here](https://github.com/enactjs/cli/blob/master/docs/index.md). +npm install -g @enact/cli@6.0.4 +node v16.13.0 //14이상이면 별상관없을것 같긴한데 -## Folder Structure +## package -After creation, your project should look like this: +eslint 사용불가 +enact 및 기타 라이브러리 버전 변경 불가 -``` -my-app/ - README.md - .gitignore - node_modules/ - package.json - src/ - App/ - App.js - App.less - package.json - components/ - views/ - MainPanel.js - index.js - reportWebVitals.js - resources/ - webos-meta/ -``` +## React import 필요 -For the project to build, **these files must exist with exact filenames**: +컴포넌트 상단에 React import 필요함. +import React from "react"; -* `package.json` is the core package manifest for the project -* `src/index.js` is the JavaScript entry point. +## 빌드하여 chrome 38버전에서 확인필요 -You can delete or rename the other files. +npm run build 또는 npm run pack +npx http-server ./dist -You can update the `license` entry in `package.json` to match the license of your choice. For more -information on licenses, please see the [npm documentation](https://docs.npmjs.com/files/package.json#license). +## 크롬 webos3.0 버전 링크 -## Available Scripts +https://webostv.developer.lge.com/develop/tools/cli-dev-guide#launch-the-web-app -In the project directory, you can run: +## 주의 -### `npm run serve` +async / await 함수 사용 불가 --> promise 방식으로 적용 +css 에서 calc 문법 주의. 문자열로 사용해야함. +calc(@toplayerHeight + 22px); ==> ~"calc(@{toplayerHeight} + 22px)"; -Builds and serves the app in the development mode.
-Open [http://localhost:8080](http://localhost:8080) to view it in the browser. +## 배포 -The page will reload if you make edits.
- -### `npm run pack` and `npm run pack-p` - -Builds the project in the working directory. Specifically, `pack` builds in development mode with code un-minified and with debug code included, whereas `pack-p` builds in production mode, with everything minified and optimized for performance. Be sure to avoid shipping or performance testing on development mode builds. - -### `npm run watch` - -Builds the project in development mode and keeps watch over the project directory. Whenever files are changed, added, or deleted, the project will automatically get rebuilt using an active shared cache to speed up the process. This is similar to the `serve` task, but without the http server. - -### `npm run clean` - -Deletes previous build fragments from ./dist. - -### `npm run lint` - -Runs the Enact configuration of Eslint on the project for syntax analysis. - -### `npm run test` and `npm run test-watch` - -These tasks will execute all valid tests (files that end in `-specs.js`) that are within the project directory. The `test` is a standard single execution pass, while `test-watch` will set up a watcher to re-execute tests when files change. - -## Enact Build Options - -The @enact/cli tool will check the project's `package.json` looking for an optional `enact` object for a few customization options: - -* `template` _[string]_ - Filepath to an alternate HTML template to use with the [Webpack html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin). -* `isomorphic` _[string]_ - Alternate filepath to a custom isomorphic-compatible entry point. Not needed if main entry point is already isomorphic-compatible. -* `title` _[string]_ - Title text that should be put within the HTML's `` tags. Note: if this is a webOS-project, the title will, by default, be auto-detected from the **appinfo.json** content. -* `theme` _[object]_ - A simplified string name to extrapolate `fontGenerator`, `ri`, and `screenTypes` preset values from. For example, `"sandstone"`. -* `fontGenerator` _[string]_ - Filepath to a CommonJS fontGenerator module which will build locale-specific font CSS to inject into the HTML. By default, will use any preset for a specified theme or fallback to sandstone. -* `ri` _[object]_ - Resolution independence options to be forwarded to the [postcss-resolution-independence](https://github.com/enactjs/postcss-resolution-independence). By default, will use any preset for a specified theme or fallback to sandstone. - * `baseSize` _[number]_ - The root font-size to use when converting the value of the base unit to a resolution-independent unit. For example, when `baseSize` is set to 24, 48px in the LESS file will be converted to 2rem. -* `screenTypes` _[array|string]_ - Array of 1 or more screentype definitions to be used with prerender HTML initialization. Can alternatively reference a json filepath to read for screentype definitions. By default, will use any preset for a specified theme or fallback to sandstone. -* `nodeBuiltins` _[object]_ - Configuration settings for polyfilling NodeJS built-ins. See `node` [webpack option](https://webpack.js.org/configuration/node/). -* `resolveFallback` _[object]_ - Configuration settings for redirecting module requests when normal resolving fails. See `resolve.fallback` [webpack option](https://webpack.js.org/configuration/resolve/#resolvefallback). -* `deep` _[string|array]_ - 1 or more JavaScript conditions that, when met, indicate deeplinking and any prerender should be discarded. -* `target` _[string|array]_ - A build-type generic preset string (see `target` [webpack option](https://webpack.js.org/configuration/target/)) or alternatively a specific [browserslist array](https://github.com/browserslist/browserslist) of desired targets. -* `proxy` _[string]_ - Proxy target during project `serve` to be used within the [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware). - -For example: -```js -{ - ... - "enact": { - "theme": "sandstone", - "resolveFallback": { - fs: false, - net: false, - tls: false - } - } - ... -} -``` - -## Displaying Lint Output in the Editor - -Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint. - -They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do. - -You would need to install an ESLint plugin for your editor first. - -Ever since ESLint 6, global installs of ESLint configs are no longer supported. -To work around this new limitation, while still supporting in-editor linting, we've created a new [eslint-config-enact-proxy](https://github.com/enactjs/eslint-config-enact-proxy) package. -The [eslint-config-enact-proxy](https://github.com/enactjs/eslint-config-enact-proxy) acts like a small proxy config, redirecting ESLint to use a globally-installed Enact ESLint config. -`eslint-config-enact-proxy` needs to be installed locally on a project to enable in-editor linting: - -```sh -npm install --save-dev eslint-config-enact-proxy -``` - -Also, you need to modify `eslintConfig` property in `package.json`: - -```json - "eslintConfig": { - "extends": "enact-proxy" - }, -``` ->**NOTE**: For strict mode, use `"extends": "enact-proxy/strict"`. - -In order for in-editor linting to work with our updated ESLint config, you'll need to upgrade to ESLint 7 or later. This can be installed globally by running: - -```sh -npm install -g eslint -``` - -Then, you will need to uninstall any previous globally-installed Enact linting package (everything but eslint itself): - -```sh -npm uninstall -g eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-babel @babel/eslint-parser eslint-plugin-jest eslint-plugin-enact eslint-config-enact -``` - -## Installing a Dependency - -The generated project includes Enact (and all its libraries). It also includes React and ReactDOM. For test writing, both Jest and @testing-library/react are as development dependencies. You may install other dependencies with `npm`: - -```sh -npm install --save -``` - -## Importing a Component - -This project setup supports ES6 modules thanks to Babel. -While you can still use `require()` and `module.exports`, we encourage you to use [`import` and `export`](http://exploringjs.com/es6/ch_modules.html) instead. - -For example: - -### `Button.js` - -```js -import kind from '@enact/core/kind'; - -const Button = kind({ - render() { - // ... - } -}); - -export default Button; // Don’t forget to use export default! -``` - -### `DangerButton.js` - - -```js -import kind from '@enact/core/kind'; -import Button from './Button'; // Import a component from another file - -const DangerButton = kind({ - render(props) { - return