Enact 개발환경 설정

Enact는 App 개발을 편리하게 도와주는 커맨드라인툴(Enact CLI)을 제공합니다. 이번 포스팅에서는 CLI를 이용하여 개발환경을 설정하는 방법을 소개합니다.

사전 준비

Enact 개발을 시작하기 앞서 몇 가지 software를 미리 설치해야 합니다. 가장 중요한 것은 Node JavaScript runtime 버전 6.4 이상입니다. 터미널창에서 node --version 명령으로 버전을 확인할 수 있습니다. 만약 설치되어 있지 않거나 예전버전이라면 위의 링크를 방문해서 설치해 주세요.

Enact CLI 설치

Enact CLI는 Enact 앱을 생성, 테스트, 패키지등을 할 수 있도록 명령어를 제공합니다. npm 을 사용하여 설치할 수 있습니다.

npm install -g @enact/cli

설치하고 나면 어디서든 enact 명령어를 실행할 수 있습니다. enact -v 명령을 통해 잘 설치되었는지 확인해 보세요.

enact 전체 명령어에 대한 자세한 내용에 대해서는 다음을 참고하시기 바랍니다. package README

Enact App 구조

새로운 앱을 생성하는데 사용하는 enact create [<directory>] 명령입니다. [<directory>] 는 옵션이며 기본값은 현재 디렉토리 입니다. create 명령은 기본 디렉토리 구조와 앱 환경을 설정합니다.

디렉토리 구조

앱 디렉토리는 다음을 포함합니다:

README.md 앱을 생성하고 빌드하는데 필요한 유용한 팁들이 있습니다.
package.json 앱을 정의하는 파일입니다. react 앱에서 사용하는 package.json과 동일할 목적을 갖고 있습니다.
node_modules 외부 node module을 모두 포함하는 디렉토리 입니다. (@enact/core, react 등)
resources localization 파일을 포함하는 디렉토리 입니다.
src 여러분이 개발하는 모든 소스코드를 포함하는 디렉토리 입니다. JS파일과 CSS/LESS 파일을 포함합니다.
webos-meta webOS 디바이스에 deploy 하는데 필요한 파일을 포함합니다.

 App
 ├── README.md
 ├── package.json
 ├── resources
 │   └── ilibmanifest.json
 ├── src
 │   ├── App
 │   │   ├── App.js
 │   │   ├── App.less
 │   │   └── package.json
 │   ├── components
 │   │   └── README.md
 │   ├── index.js
 │   ├── iso.js
 │   └── views
 │       ├── MainPanel.js
 │       └── README.md
 └── webos-meta
     ├── appinfo.json
     ├── icon-large.png
     ├── icon-mini.png
     └── icon.png

앱을 패키징 하게 되면 dist 디렉토리가 추가로 생성되고, 이 안에 deploy를 위한 파일들이 위치하게 됩니다. 나중에 enact pack 명령에서 자세히 다루겠습니다.

앱 환경설정

package.jaon 파일에서 앱 환경을 설정합니다. 여기서는 자주 사용되는 필드에 대해서만 설명하겠습니다.

"name", "version", "description", "author", "license" - Application meta-data. 앱의 상세 정보를 담고 있습니다. 이 항목들은 앱 빌드에 영향을 주지 않습니다.
"enact" - The Enact-specific configuration block. Moonstone 앱을 위한 값을 default로 담고 있습니다. 빌드 시 생성되는 index.html 파일에 앱 타이틀을 포함하고 싶으면, "title" 필드를 추가 하여야 합니다.

package.json

{
    "name": "App",
    "version": "1.0.0",
    "description": "A general template for an Enact Moonstone application.",
    "author": "",
    "main": "src/index.js",
    "scripts": { [omitted] },
    "license": "UNLICENSED",
    "private": true, 
    "repository": "",
    "enact": {
        "isomorphic": "src/iso.js",
        "ri": {
            "baseSize": 24
        }
    },
    "eslintConfig": {
        "extends": "enact"
    },
    "dependencies": { [omitted] }
}

예고

자, 이제 앱을 만들기 위한 기본 준비가 끝났습니다. 다음시간에는 Hello Enact 를 직접 만들고 빌드해 보도록 하겠습니다.

이 블로그 검색

웹 프런트엔드 개발