첫 번째 앱 만들기

우리는 핵심 Wails 개념을 보여주는 간단한 인사말 애플리케이션을 구축할 것입니다:

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

완료 시간: 10분

프로젝트 생성하기

1

프로젝트 생성

bash
wails3 init -n myapp
cd myapp

이는 기본 Vanilla + Vite 템플릿(plain HTML/CSS/JS with Vite bundler)으로 새 프로젝트를 생성합니다.

2

프로젝트 구조 이해하기

myapp/
├── main.go              # 애플리케이션 진입점
├── greetservice.go      # 인사 서비스
├── frontend/            # UI 코드
│   ├── index.html       # HTML 진입점
│   ├── src/
│   │   └── main.js      # 프론트엔드 JavaScript
│   ├── public/
│   │   └── style.css    # 스타일
│   ├── package.json     # 프론트엔드 의존성
│   └── vite.config.js   # Vite 번들러 구성
├── build/               # 빌드 구성
└── Taskfile.yml         # 빌드 작업
3

앱 실행하기

bash
wails3 dev

앱이 인사말 인터페이스를 보여줍니다. 이름을 입력하고 “Greet"를 클릭하세요 - Go 백엔드가 입력을 처리하여 인사말을 반환합니다.

작동 원리

이것이 작동하는 코드를 이해해 봅시다.

Go 백엔드

greetservice.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를 열고 서비스 등록을 찾습니다:

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

이는 GreetService를 Wails에 등록하여 모든 내보낸 메서드를 프론트엔드에서 사용 가능하게 합니다.

프론트엔드

frontend/src/main.js를 엽니다:

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에서 포착

앱 사용자 정의하기

작동 방식을 이해하기 위해 새 기능을 추가해 봅시다.

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

1

GreetService에 메서드 추가하기

greetservice.go에 다음을 추가합니다:

greetservice.go
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
}
2

앱이 자동으로 다시 빌드됨

파일을 저장하면 wails3 dev가 Go 코드를 자동으로 다시 빌드하고 앱을 재시작합니다.

3

프론트엔드에서 사용하기

frontend/src/main.js에 다음을 추가합니다:

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

브라우저 콘솔을 열고 greetMany()를 호출하세요 - 인사말 배열을 볼 수 있습니다.

프로덕션 빌드하기

앱을 배포할 준비가 되면:

bash
wails3 build

이 작업의 내용:

  • 최적화된 Go 코드 컴파일
  • 프로덕션을 위한 프론트엔드 빌드 (최소화됨)
  • build/bin/에 네이티브 실행 파일 생성

출력: build/bin/myapp.exe

더블클릭하여 실행합니다. 추가 의존성 필요 없음 (WebView2는 Windows의 일부입니다).

우리가 배운 것

프로젝트 구조

  • Go 백엔드를 위한 main.go
  • UI 코드를 위한 frontend/
  • 빌드 작업을 위한 Taskfile.yml

서비스

  • 내보낸 메서드가 있는 Go 구조체 생성
  • application.NewService()로 등록
  • 메서드가 자동으로 프론트엔드에서 사용 가능

바인딩

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

개발 워크플로우

  • 핫 리로드를 위한 wails3 dev
  • Go 변경은 자동 다시 빌드 및 재시작
  • 프론트엔드 변경은 즉시 핫 리로드

질문이 있으신가요? Discord에 참여하여 커뮤니티에 물어보세요.

Edit page

Last updated: