첫 번째 앱

Wails의 핵심 개념을 보여 주는 간단한 인사말 애플리케이션을 만들어 보겠습니다.

• 로직을 관리하는 Go 백엔드
• Go 함수를 호출하는 프런트엔드
• 타입 안전 바인딩
• 개발 중 핫 리로드

완료 예상 시간: 10분

프로젝트 만들기

wails3 init -n myapp
cd myapp

myapp/
├── main.go              # Application entry point
├── greetservice.go      # Greet service
├── frontend/            # Your UI code
│   ├── index.html       # HTML entry point
│   ├── src/
│   │   └── main.ts      # Frontend TypeScript
│   ├── public/
│   │   └── style.css    # Styles
│   ├── package.json     # Frontend dependencies
│   ├── tsconfig.json    # TypeScript configuration
│   └── vite.config.ts   # Vite bundler config
├── build/               # Build configuration
└── Taskfile.yml         # Build tasks

wails3 dev

작동 방식

이 기능을 구현하는 코드를 살펴보겠습니다.

Go 백엔드

greetservice.go을 여세요.

package main

import (
	"fmt"
)

type GreetService struct{}

func (g *GreetService) Greet(name string) string {
	return fmt.Sprintf("Hello %s, It's show time!", name)
}

핵심 개념:

1. 서비스 - 내보낸 메서드가 있는 Go 구조체
2. 내보낸 메서드 - Greet은 대문자로 시작하므로 프런트엔드에서 사용할 수 있습니다.
3. 간단한 로직 - 이름을 받아 인사말을 반환합니다.
4. 타입 안전성 - 입력 및 출력 타입이 정의되어 있습니다.

서비스 등록하기

main.go을 열고 서비스 등록 부분을 찾으세요.

err := application.New(application.Options{
    Name: "myapp",
    Services: []application.Service{
        application.NewService(&GreetService{}),
    },
    // ... other options
})

이 코드는 GreetService을 Wails에 등록하여 내보낸 모든 메서드를 프런트엔드에서 사용할 수 있게 합니다.

프런트엔드

frontend/src/main.js을 여세요.

import {GreetService} from "../bindings/changeme";

window.greet = async () => {
    const nameElement = document.getElementById('name');
    const resultElement = document.getElementById('result');

    const name = nameElement.value;
    if (!name) {
        return;
    }

    try {
        const result = await GreetService.Greet(name);
        resultElement.innerText = result;
    } catch (err) {
        console.error(err);
    }
};

핵심 개념:

1. 자동 생성된 바인딩 - 생성된 코드에서 GreetService을 가져옵니다.
2. 타입 안전 호출 - 메서드 이름과 시그니처가 Go 코드와 일치합니다.
3. 기본 비동기 처리 - 모든 Go 호출은 Promise를 반환합니다.
4. 오류 처리 - Go에서 발생한 오류는 try/catch에서 포착됩니다.

앱 사용자 지정하기

워크플로를 이해할 수 있도록 새 기능을 추가해 보겠습니다.

“여러 명에게 인사하기” 기능 추가

func (g *GreetService) GreetMany(names []string) []string {
    greetings := make([]string, len(names))
    for i, name := range names {
        greetings[i] = fmt.Sprintf("Hello %s!", name)
    }
    return greetings
}

window.greetMany = async () => {
    const names = ['Alice', 'Bob', 'Charlie'];
    const greetings = await GreetService.GreetMany(names);
    console.log(greetings);
};

프로덕션용 빌드

앱을 배포할 준비가 되면 다음과 같이 진행하세요.

wails3 build

수행되는 작업:

• 최적화를 적용하여 Go 코드를 컴파일합니다.
• 프로덕션용 프런트엔드를 빌드합니다(최소화 적용).
• bin/에 네이티브 실행 파일을 생성합니다.

배운 내용

프로젝트 구조

• Go 백엔드용 main.go
• UI 코드용 frontend/
• 빌드 작업용 Taskfile.yml

서비스

• 내보낸 메서드가 있는 Go 구조체를 만듭니다.
• application.NewService()을 사용하여 등록합니다.
• 메서드를 프런트엔드에서 자동으로 사용할 수 있습니다.

바인딩

• 자동 생성된 TypeScript 정의
• 타입 안전 함수 호출
• 기본적으로 비동기 방식(Promise)

개발 워크플로

• 핫 리로드용 wails3 dev
• Go 변경 시 자동으로 다시 빌드하고 재시작합니다.
• 프런트엔드 변경 사항은 즉시 핫 리로드됩니다.

궁금한 점이 있으신가요? Discord에 참여하여 커뮤니티에 질문하세요.