퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 퓨즈 기본
  4. 퀵스타트

퀵스타트

이 문서는 퓨즈를 사용하여 첫 번째 앱을 설치, 미리보기 및 내보내기하는 과정을 안내하는 단계별 자습서입니다.

설정하기

퓨즈의 최신 버전을 다운로드하고 설치하면 바로 사용할 수 있습니다.

설치가 간편한 편이지만, 문제가 발생하면 알려주시기 바랍니다. (우리는 여전히 베타 버전입니다!). 또한 macOSWindows에 대한 설정 지침과 필요할 경우 macOS에 대한 제거 지침이 있습니다.

새로운 프로젝트 생성

퓨즈 명령줄 도구를 사용하여 새 프로젝트 디렉토리를 만듭니다:

1
fuse create app <projectname> [optional path]

경로를 생략하면 현재 디렉토리의 하위 디렉토리로 생성됩니다.

새로 생성된 퓨즈 프로젝트에는 기본적으로 MainView.ux라는 하나의 .ux 파일이 있어야 합니다.

퓨즈 대시보드에서 프로젝트 메뉴의 “New Project” 를 클릭하여 프로젝트를 생성할 수도 있습니다.

앱 실행하기

퓨즈는 앱을 실행하는 두 가지 방법을 제공합니다:

  • fuse build – 앱스토어에 올리거나 비공개 테스트로 사용할 수 있는 독립 실행형 앱으로 프로젝트를 빌드합니다.
  • fuse preview – 실행 중에 변경할 수 있는 앱의 프리뷰 버전을 만듭니다. 이것은 일반적으로 개발할 때 사용하는 것입니다.

로컬 프리뷰 세션을 시작하려면 새로 생성된 프로젝트 디렉토리로 이동하고 다음 명령을 실행하십시오:

1
fuse preview

그러면 Mac 또는 PC에서 로컬 프리뷰 세션이 시작됩니다.

퓨즈 대시보드에서 프로젝트를 선택하고 Preview를 클릭하여 프리뷰를 시작할 수도 있습니다.

더 멋진건 휴대전화나 태블릿에서 실행되는 프리뷰로 똑같은 작업을 할 수 있다는 것입니다.

이 작업을 하려면 디바이스가 USB를 통해 연결되어 있고 개발 컴퓨터와 동일한 무선 네트워크에 연결되어 있어야 합니다.

다음 명령은 iOS 용 프리뷰 앱을 위한 Xcode 프로젝트를 생성합니다:

1
fuse preview -tios

Android의 경우 적절한 장치 드라이버를 설치했는지 확인한 다음…

1
fuse preview -tandroid

USB 연결은 처음 프리뷰 앱을 휴대전화에 설치할 때만 필요합니다. 프리뷰 앱이 설치되면 USB 연결이 필요하지 않습니다. 프리뷰 앱은 필요할 때마다 다시 시작할 수 있습니다. 앱은 프리뷰를 만든 컴퓨터의 로컬 IP 주소를 기억하고 무선으로 연결합니다. 이를 통해 개발 중에 원하는 만큼의 디바이스로 프리뷰를 실행할 수 있습니다.

프로젝트에서 원시코드(Uno, Java 또는 Objective-C)를 변경하거나 컴퓨터의 IP 주소를 변경하면 USB 케이블을 다시 연결하고 ‘fuse preview’ 명령을 다시 실행해야 합니다.

UX 마크업으로 작업하기

텍스트 편집기에서 .ux 파일을 열고 내부의 마크업을 살펴볼 차례입니다. 구문 하이라이트 및 자동 완성을 위해 퓨즈 플러그인과 함께 ‘Sublime Text 3‘을 사용하는 것이 좋습니다.

MainView.ux의 내용은 다음과 같아야 합니다:

1
2
<App>
</App>

몇 가지 UI 요소를 추가해보세요:

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>

앱이 프리뷰에서 실행되는 동안 UX 마크업 파일(Ctrl/Cmd + S를 누름)을 저장할 때마다 변경 사항이 모든 프리뷰 세션 (로컬 및 디바이스 모두)에 즉시 반영됩니다.

마크업 이해하기

UX 파일의 각 Xml 요소는 Uno 객체를 나타냅니다. 요소의 이름은 클래스의 이름을 나타냅니다.

MainView.ux는 다음을 포함합니다:

  • App – 앱의 진입점. 앱에는 하나의 App만 있을 수 있습니다.
  • DockPanel – 위쪽, 왼쪽, 오른쪽 또는 아래쪽에 도킹하여 레이아웃을 정의합니다. 마지막 자식은 기본적으로 나머지 공간을 채웁니다.
  • StatusBarBackground – 상태 표시줄이 투명할 경우에 대비하여 상태 표시줄의 공간을 예약합니다. 이를 통해 iOS 및 Android에서 상태 표시줄의 배경을 제어할 수 있습니다. 퓨즈는 상태 표시줄을 아직 에뮬레이션하지 않지만 모바일로 내보낼 때 이 영향을 확인할 수 있습니다.
  • ScrollView – 스크롤을 기본적으로 수직 방향으로 처리합니다.
  • StackPanel – StackPanel은 자식을 가로 또는 세로로 쌓아서 레이아웃을 정의합니다. 이 예제에서와 같이 세로가 기본값입니다.
  • Slider – 주어진 범위 내에서 값을 선택하게 하는 컨트롤입니다.
  • Button – 클릭하거나 탭할 수 있는 컨트롤입니다.
  • Switch – 스위치를 켜거나 끌 수 있는 컨트롤입니다.

전체 UX 클래스 레퍼런스에서, UX에서 사용할 수 있는 클래스의 전체 목록을 볼 수 있습니다.

로직과 스크립팅

퓨즈를 사용하면 자바스크립트를 사용하여 앱에 로직을 추가할 수 있습니다. UX 마크업과 스크립팅을 결합하여 모양과 느낌, 데이터 모델, 논리 및 백엔드 통합에 이르기까지 앱을 구현하는 데 필요한 모든 것을 갖추고 있습니다.

그러나 이 첫 번째 예제에서는 버튼을 클릭할 때 증가하는 카운터를 간단히 만들 것입니다.

먼저 DockPanel에 다음 JavaScript 스니펫을 추가하십시오:

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>

onClick 핸들러와 buttonText 변수를 .ux에 있는 Button에 바인드합니다:

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

UX 마크업을 변경하는 경우와 마찬가지로 JavaScript를 변경하면 변경 사항을 적용할 때 모든 미리보기 세션에서 즉시 업데이트 됩니다.

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

퓨즈에서는 모든 클래스를 상속하여 새로운 클래스를 만들 수 있습니다.

예를 들어 모든 텍스트 요소의 글꼴 크기를 지정하지 않으려 한다고 가정해 봅시다. 어디에서나 을 사용하는 대신 원하는 텍스트 유형을 설명하는 서브 클래스를 생성하거나 소유해야 할 것입니다:

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

BigHeader를 표시하고 싶다면 다음을 수행하십시오:

1
<BigHeader>Welcome!</BigHeader>

BigHeader의 정의는 MainView.ux의 어느 위치에나 실제로 프로젝트의 임의의 .ux 파일에 둘 수 있습니다.

앱 내보내기

이제 앱이 적어도 하나의 가치를 가졌으므로 Android 및 iOS로 내보낼 수 있습니다.

명령 줄에서 다음을 입력하세요:

1
fuse build --target=<iOS or Android> --run

OK, 쉽네요! 다음은 뭐죠?

위의 기본 사항에 익숙해지면 처음부터 하이크(hikr)라는 하이킹 추적 응용 프로그램을 빌드하는 전체적인 튜토리얼을 살펴보는 것이 좋습니다. 또한 예제 섹션을 확인해야 합니다.

또한 포럼의 모든 질문에도 최선을 다해 답변해 드립니다.

Was this article helpful to you? Yes 2 No

How can we help?