190 lines
4.8 KiB
Markdown
190 lines
4.8 KiB
Markdown
## Enact Client
|
|
|
|
- npm install -g @enact/cli@6.0.4
|
|
|
|
enact 및 기타 라이브러리 버전 변경 불가
|
|
|
|
Node.js >= v14.0.0 (recommended: v16.13.0)
|
|
|
|
## 개발 및 테스트 환경
|
|
|
|
### 빌드 방법
|
|
```bash
|
|
# 개발 빌드
|
|
npm run build
|
|
# 또는
|
|
npm run pack
|
|
|
|
# 빌드 결과물 테스트를 위한 로컬 서버 실행
|
|
npx http-server ./dist
|
|
```
|
|
|
|
### Chrome 테스트 환경
|
|
- WebOS 3.0용 Chrome 38 버전 필수
|
|
- Chrome 38 버전 다운로드 및 설치: [WebOS TV 개발자 사이트](https://webostv.developer.lge.com/develop/tools/cli-dev-guide#launch-the-web-app)
|
|
- 모든 기능은 반드시 Chrome 38에서 테스트 필요
|
|
|
|
## Chrome 38 브라우저 호환성 제한사항
|
|
|
|
### JavaScript 제한사항
|
|
1. async/await 문법 - 지원되지 않음 (Chrome 55부터 지원)
|
|
- 대체방법: Promise 체이닝 방식 사용
|
|
```javascript
|
|
// Promise 방식으로 비동기 처리
|
|
function getData() {
|
|
return fetch('/api/data')
|
|
.then(function(result) {
|
|
return result;
|
|
});
|
|
}
|
|
```
|
|
2. ESLint - 지원되지 않음 (Enact CLI 6.0.4 버전 제한)
|
|
- 이유: ESLint 6 이후 버전과의 호환성 문제
|
|
- WebOS 3.0 호환성을 위해 Enact 버전 업그레이드 불가
|
|
|
|
3. React import 문 필수
|
|
- 모든 컴포넌트 파일 상단에 React import 필요
|
|
```javascript
|
|
import React from "react";
|
|
```
|
|
|
|
### CSS 제한사항
|
|
1. CSS Grid Layout
|
|
2. CSS Flexbox
|
|
3. CSS Variables (Custom Properties)
|
|
4. CSS gap 속성 - margin 혹은 padding 사용
|
|
5. CSS calc() - 제한적 지원 (문자열로 사용 필요)
|
|
```css
|
|
calc(@toplayerHeight + 22px);
|
|
/* 사용불가 */
|
|
|
|
~"calc(@{toplayerHeight} + 22px)";
|
|
/* 문자열로 사용 가능 */
|
|
```
|
|
6. CSS Transforms 3D
|
|
2. CSS Animations/Transitions
|
|
3. CSS Filter Effects
|
|
4. CSS Masks
|
|
5. CSS Custom Scroll Snap
|
|
6. CSS Logical Properties
|
|
|
|
|
|
|
|
## code convention
|
|
|
|
1. vs-code extension: js/ts import/export sorter 설치
|
|
|
|
2. vs-code setting.json
|
|
```less
|
|
|
|
{
|
|
|
|
"prettier.tabWidth": 2,
|
|
|
|
"prettier.printWidth": 80,
|
|
|
|
"prettier.trailingComma": "es5",
|
|
|
|
"tsImportSorter.configuration.keepUnused": [".*"],
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
## 배포
|
|
|
|
|
|
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 가이드에 맞도록 적절히 조절 */
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### 자막영상
|
|
|
|
ontv4u 검색 후 첫 영상
|
|
|
|
## 컴포넌트 사용 가이드라인
|
|
|
|
### 1. Grid 레이아웃 여백 설정
|
|
#### TVirtualGridList 사용시 여백
|
|
|
|
OnSaleProductList.jsx 참고
|
|
--> 가로 100%일 경우 container에서 여백 제어하는 것이 아니라 각 사용하려는 컴포넌트에서 class로 "TVirtualGridList" 추가한 부분에서 좌측 여백 추가(여백은 padding-left로 조절)
|
|
|
|
```less
|
|
// OnSaleProductList.module.less
|
|
.tVirtualGridList {
|
|
padding-left: 60px; /* GUI 가이드에 맞도록 적절히 조절 */
|
|
}
|
|
```
|
|
|
|
### 2. 스크롤 레이아웃 여백 설정
|
|
#### TScroller 사용시 여백
|
|
|
|
SubCategory.jsx 참고(Home)
|
|
--> 가로 100%일 경우 TScroller 자체에서 여백 제어하는 것이 아니라 손자 엘리먼트에 좌측 여백 추가(여백은 padding-left로 조절)
|
|
|
|
```less
|
|
// SubCategory.module.less
|
|
.home {
|
|
> div {
|
|
> div {
|
|
padding-left: 60px; /* GUI 가이드에 맞도록 적절히 조절 */
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### 3. 테스트용 자막 영상
|
|
#### 자막영상 테스트
|
|
|
|
ontv4u 검색 후 첫 영상
|