MD파일 업데이트 문서 작성
This commit is contained in:
@@ -1,41 +1,106 @@
|
||||
## Enact Client
|
||||
|
||||
npm install -g @enact/cli@6.0.4
|
||||
node v16.13.0 //14이상이면 별상관없을것 같긴한데
|
||||
- npm install -g @enact/cli@6.0.4
|
||||
|
||||
## package
|
||||
|
||||
eslint 사용불가
|
||||
enact 및 기타 라이브러리 버전 변경 불가
|
||||
|
||||
Node.js >= v14.0.0 (recommended: v16.13.0)
|
||||
|
||||
## React import 필요
|
||||
## 개발 및 테스트 환경
|
||||
|
||||
컴포넌트 상단에 React import 필요함.
|
||||
import React from "react";
|
||||
### 빌드 방법
|
||||
```bash
|
||||
# 개발 빌드
|
||||
npm run build
|
||||
# 또는
|
||||
npm run pack
|
||||
|
||||
## 빌드하여 chrome 38버전에서 확인필요
|
||||
|
||||
npm run build 또는 npm run pack
|
||||
# 빌드 결과물 테스트를 위한 로컬 서버 실행
|
||||
npx http-server ./dist
|
||||
```
|
||||
|
||||
## 크롬 webos3.0 버전 링크
|
||||
### 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에서 테스트 필요
|
||||
|
||||
https://webostv.developer.lge.com/develop/tools/cli-dev-guide#launch-the-web-app
|
||||
## 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": [".*"],
|
||||
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
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` 상태로 바꿔서 빌드하셔야 합니다.
|
||||
|
||||
@@ -52,7 +117,9 @@ npm run build
|
||||
|
||||
**상태로 변경 후 배포 부탁드립니다.**
|
||||
|
||||
## TVirtualGridList 사용시 여백
|
||||
|
||||
|
||||
### TVirtualGridList 사용시 여백
|
||||
|
||||
OnSaleProductList.jsx 참고
|
||||
--> 가로 100%일 경우 container에서 여백 제어하는 것이 아니라 각 사용하려는 컴포넌트에서 class로 "TVirtualGridList" 추가한 부분에서 좌측 여백 추가(여백은 padding-left로 조절)
|
||||
@@ -64,7 +131,7 @@ OnSaleProductList.jsx 참고
|
||||
}
|
||||
```
|
||||
|
||||
## TScroller 사용시 여백
|
||||
### TScroller 사용시 여백
|
||||
|
||||
SubCategory.jsx 참고(Home)
|
||||
--> 가로 100%일 경우 TScroller 자체에서 여백 제어하는 것이 아니라 손자 엘리먼트에 좌측 여백 추가(여백은 padding-left로 조절)
|
||||
@@ -80,24 +147,43 @@ SubCategory.jsx 참고(Home)
|
||||
}
|
||||
```
|
||||
|
||||
# 자막영상
|
||||
### 자막영상
|
||||
|
||||
ontv4u 검색 후 첫 영상
|
||||
|
||||
# code convention
|
||||
## 컴포넌트 사용 가이드라인
|
||||
|
||||
1. vs-code extension: js/ts import/export sorter 설치
|
||||
### 1. Grid 레이아웃 여백 설정
|
||||
#### TVirtualGridList 사용시 여백
|
||||
|
||||
2. vs-code setting.json
|
||||
|
||||
{
|
||||
|
||||
"prettier.tabWidth": 2,
|
||||
|
||||
"prettier.printWidth": 80,
|
||||
|
||||
"prettier.trailingComma": "es5",
|
||||
|
||||
"tsImportSorter.configuration.keepUnused": [".*"],
|
||||
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 검색 후 첫 영상
|
||||
|
||||
Reference in New Issue
Block a user