82 lines
2.2 KiB
Markdown
82 lines
2.2 KiB
Markdown
## Enact Client
|
|
|
|
npm install -g @enact/cli@6.0.4
|
|
node v16.13.0 //14이상이면 별상관없을것 같긴한데
|
|
|
|
## package
|
|
|
|
eslint 사용불가
|
|
enact 및 기타 라이브러리 버전 변경 불가
|
|
|
|
## React import 필요
|
|
|
|
컴포넌트 상단에 React import 필요함.
|
|
import React from "react";
|
|
|
|
## 빌드하여 chrome 38버전에서 확인필요
|
|
|
|
npm run build 또는 npm run pack
|
|
npx http-server ./dist
|
|
|
|
## 크롬 webos3.0 버전 링크
|
|
|
|
https://webostv.developer.lge.com/develop/tools/cli-dev-guide#launch-the-web-app
|
|
|
|
## 주의
|
|
|
|
async / await 함수 사용 불가 --> promise 방식으로 적용
|
|
css 에서 calc 문법 주의. 문자열로 사용해야함.
|
|
calc(@toplayerHeight + 22px); ==> ~"calc(@{toplayerHeight} + 22px)";
|
|
|
|
## 배포
|
|
|
|
npm install -g @enact/cli@6.0.4
|
|
npm install
|
|
npm run build
|
|
--> ./dist 폴더 배포
|
|
|
|
## 배포 시 주의 사항
|
|
|
|
- `develop` 환경에서는 [오토 스크롤 영역]("./assets/src/components/AutoScrollArea.module.less")을 명확하게 보기 위해 `background-color`를 보여지게 했으나, 배포 시에는 `production` 상태로 바꿔서 빌드하셔야 합니다.
|
|
|
|
```less
|
|
// AutoScrollArea.module.less
|
|
|
|
.autoScrollArea {
|
|
position: absolute;
|
|
z-index: 20;
|
|
background-color: transparent; /* production */
|
|
// background-color: #ff00001f; /* develop */
|
|
}
|
|
```
|
|
|
|
**상태로 변경 후 배포 부탁드립니다.**
|
|
|
|
## TVirtualGridList 사용시 여백
|
|
|
|
OnSaleProductList.jsx 참고
|
|
--> 가로 100%일 경우 container에서 여백 제어하는 것이 아니라 각 사용하려는 컴포넌트에서 class로 "TVirtualGridList" 추가한 부분에서 좌측 여백 추가(여백은 padding-left로 조절)
|
|
|
|
```less
|
|
// OnSaleProductList.module.less
|
|
.tVirtualGridList {
|
|
padding-left: 60px; /* GUI 가이드에 맞도록 적절히 조절 */
|
|
}
|
|
```
|
|
|
|
## TScroller 사용시 여백
|
|
|
|
SubCategory.jsx 참고(Home)
|
|
--> 가로 100%일 경우 TScroller 자체에서 여백 제어하는 것이 아니라 손자 엘리먼트에 좌측 여백 추가(여백은 padding-left로 조절)
|
|
|
|
```less
|
|
// SubCategory.module.less
|
|
.home {
|
|
> div {
|
|
> div {
|
|
padding-left: 60px; /* GUI 가이드에 맞도록 적절히 조절 */
|
|
}
|
|
}
|
|
}
|
|
```
|