Hello World 및 빌드하기

퀵스타트

이것은 설치부터 생성, 프리뷰, 앱 설치까지 안내하는 단계별 튜토리얼 입니다.

설치

최신 버전(https://www.fusetools.com/downloads)을 받아서 설치하세요.

새로운 프로젝트 만들기

터미널을 열고 새로운 폴더를 생성한 다음 아래와 같이 입력하세요.

1
fuse create app TEST ./

TEST 폴더안에 MainView.ux 파일과 TEST.unoproj 파일이 있다면 성공입니다.

(Fuse 앱에서 ‘Project > New’ 메뉴를 이용해도 됩니다)

앱 실행하기

앱을 실행하는 방법은 두 가지가 있습니다.

1. fuse build
Xcode(iOS) 또는 Android Studio(Android)용 프로젝트를 생성합니다.

2. fuse preview
컴퓨터 또는 모바일에서 빠르게 확인할 수 있도록 미리보기를 실행합니다.

TEST 폴더로 이동한 후, 미리보기를 실행해 보세요.

1
fuse preview

모바일을 USB로 연결한 후, 미리보기를 실행해 보세요.
안드로이드는 드라이버(https://developer.android.com/studio/run/oem-usb.html#Drivers)가 필요할 수 있습니다.

1
fuse preview -tios
1
fuse preview -tandroid

UX 마크업으로 작업하기

MainView.ux 파일을 편집기로 열고 아래와 같이 수정하고 저장하세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
<App>
    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <ScrollView ClipToBounds="true">
            <StackPanel>
                <Text FontSize="30">Hello, world!</Text>
                <Slider />
                <Button Text="Button" />
                <Switch Alignment="Left" />
            </StackPanel>
        </ScrollView>
    </DockPanel>
</App>

미리보기 화면이 변한걸 확인하셨나요? 모바일도 적용됩니다. 더 놀라운 것은 USB로 설치를 한번 한 다음엔 USB를 제거하고 앱을 실행해도 연결이 됩니다! 주의할건 컴퓨터와 모바일이 같은 와이파이에 연결되어 있어야 한다는 것 뿐.

마크업 이해하기

UX 파일의 각 XML 요소들은 우노(Uno) 오브젝트 입니다. 즉, 요소들의 이름이 Class 이름이죠.
MainView.ux를 살펴볼까요.

App – 최상위 객체입니다. 프로젝트 내에서 하나뿐이어야 하죠.
DockPanel – 상하좌우에 객체를 붙일 수 있는 레이아웃 객체입니다. 자세한건 나중에…
StatusBarBackground – 상태바의 높이를 위해 존재한다고 생각하면 됩니다. 이게 없으면 풀스크린 형태가 됩니다.
ScrollView – 스크롤뷰. 기본은 세로로 움직입니다.
StackPanel – 자식들이 겹치지 않고 순서대로 쌓이게 해주는 컨테이너 입니다.
Slider – 0 ~ 100% 등의 값을 설정하는데 사용할 수 있는 슬라이더.
Button – 버튼
Switch – on 또는 off를 표현하는 그래피컬한 버튼

모든 UX 클래스 확인을 원한다면 아래 URL로 이동하세요.
https://www.fusetools.com/docs/full-ux-class-reference

로직과 스크립팅

퓨즈는 비즈니스 로직 구현을 위해 자바스크립트(JavaScript)를 사용합니다. UX 마크업과 함께 사용하면 쉽게 원하는 로직을 구현할 수 있습니다.

아래 스크립트를 DockPanel 아래에 추가하세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<JavaScript>
    var Observable = require('FuseJS/Observable');
    var buttonText = Observable('Button');
    var clickCount = 0;

    function onClick() {
        clickCount += 1;
        buttonText.value = 'Clicks: ' + clickCount;
    }

    module.exports = {
        buttonText: buttonText,
        onClick: onClick
    }
</JavaScript>

이번엔 Button을 아래와 같이 수정하세요.

1
<Button Text="{buttonText}" Clicked="{onClick}"/>

저장한 후 버튼을 터치해 보세요. 터치할 때마다 카운트가 올라가는게 보이시나요?

재사용 가능한 스타일과 컴포넌트 만들기

퓨즈의 모든 클래스는 상속이 가능합니다. 예를 들어, 을 모든 텍스트에 적용하고 싶다면 아래와 같이 ux:Class를 추가하면 됩니다.

1
<Text ux:Class="BigText" FontSize="40" />

Text를 상속받은 BigText 클래스가 만들어 졌습니다. 이제 아래와 같이 생성한 모든 텍스트는 40의 크기를 갖게 됩니다.

1
2
<BigText>Hello!</BigText>
<BigText>WonHada!</BigText>

앱 빌드하기

위에서도 설명했다시피 fuse build를 이용하면 iOS와 Android용 프로젝트를 추출할 수 있습니다. 그걸 이용해서 앱을 만들 수 있고요. 터미널에서 아래와 같이 실행해 보세요.

1
fuse build --target=iOS --run
1
fuse build --target=Android --run

[[ 동영상 강좌(재생 목록 버튼을 누르세요) ]]

Was this article helpful?

Related Articles